'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Star, ArrowRight, Quote } from 'lucide-react';

const defaultTestimonials = [
  { id: '1', name: 'Sarah M.', company: 'TechVentures Inc.', content: 'Alpha CPA transformed our chaotic books into a clear financial picture. Their tax preparation saved us over $30K last year. Highly professional team!', rating: 5 },
  { id: '2', name: 'James P.', company: 'Harbor Restaurants', content: 'The payroll services are seamless. Our employees are always paid on time, and all the tax withholdings are handled perfectly. A real lifesaver for our business.', rating: 5 },
  { id: '3', name: 'Michelle K.', company: 'Design Studio Co.', content: 'As a small business owner, I was overwhelmed by sales tax compliance. Alpha CPA made it effortless. Their team is responsive, knowledgeable, and truly cares.', rating: 5 },
];

export function TestimonialsPreview() {
  const [testimonials, setTestimonials] = useState(defaultTestimonials);

  useEffect(() => {
    fetch('/api/testimonials')
      .then((r: any) => r?.json?.())
      .then((data: any) => {
        if (data?.length > 0) setTestimonials(data);
      })
      .catch(() => {});
  }, []);

  return (
    <section className="py-24 sm:py-32 bg-white relative overflow-hidden">
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[var(--navy)]/[0.02] rounded-full blur-[80px] translate-y-1/2 -translate-x-1/3" />
      <div className="absolute top-0 right-0 w-[300px] h-[300px] bg-[var(--gold)]/[0.04] rounded-full blur-[60px] -translate-y-1/3 translate-x-1/3" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block px-4 py-1.5 bg-[var(--gold)]/10 text-[var(--gold)] text-sm font-semibold rounded-full mb-4">Testimonials</span>
          <h2 className="font-display text-3xl sm:text-4xl font-bold text-[var(--navy)] tracking-tight mb-4">
            What Our Clients <span className="text-gradient-gold">Say</span>
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {(testimonials ?? [])?.slice(0, 3)?.map((t: any, i: number) => (
            <motion.div
              key={t?.id ?? i}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-40px' }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="card-3d bg-white rounded-2xl p-8 shadow-[var(--shadow-md)] border border-[var(--navy)]/[0.04] relative overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-[var(--gold)]/[0.06] to-transparent rounded-bl-[60px]" />
              <Quote className="w-8 h-8 text-[var(--gold)]/20 absolute top-6 right-6" />
              <div className="flex gap-1 mb-4">
                {Array.from({ length: t?.rating ?? 5 })?.map((_: any, s: number) => (
                  <Star key={s} className="w-4 h-4 fill-[var(--gold)] text-[var(--gold)]" />
                ))}
              </div>
              <p className="text-[var(--navy)]/80 text-sm leading-relaxed mb-6">&ldquo;{t?.content ?? ''}&rdquo;</p>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--navy)] to-[var(--navy-light)] flex items-center justify-center text-white text-sm font-bold">
                  {(t?.name ?? '?')[0]}
                </div>
                <div>
                  <p className="font-semibold text-[var(--navy)] text-sm">{t?.name ?? ''}</p>
                  <p className="text-muted-foreground text-xs">{t?.company ?? ''}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="text-center mt-10"
        >
          <Link
            href="/testimonials"
            className="inline-flex items-center gap-2 px-6 py-3 text-[var(--gold)] font-semibold hover:bg-[var(--gold)]/5 rounded-xl transition-colors"
          >
            View All Testimonials <ArrowRight className="w-4 h-4" />
          </Link>
        </motion.div>
      </div>
    </section>
  );
}
