'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 Mitchell', company: 'TechVentures Inc.', role: 'CEO', 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 Patterson', company: 'Harbor Restaurants', role: 'Owner', 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 Kim', company: 'Design Studio Co.', role: 'Founder', 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 },
  { id: '4', name: 'Robert Chen', company: 'GreenLeaf Organics', role: 'CFO', content: 'We switched to Alpha CPA for our bookkeeping needs and the difference was immediate. Accurate records, monthly reports, and proactive advice. Outstanding service!', rating: 5 },
  { id: '5', name: 'Lisa Rodriguez', company: 'Apex Consulting', role: 'Managing Partner', content: 'Their expertise in corporate tax planning is unmatched. They helped us restructure our finances and saved significant amounts in taxes. Truly a game-changer.', rating: 5 },
  { id: '6', name: 'David Thompson', company: 'Thompson Retail Group', role: 'Owner', content: 'Alpha CPA handles all our multi-state sales tax submissions flawlessly. We never worry about compliance anymore. Reliable, thorough, and always available.', rating: 5 },
];

export function TestimonialsContent() {
  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 (
    <>
      {/* Hero */}
      <section className="relative py-20 sm:py-28 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
        <div className="absolute inset-0 bg-mesh" />
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }} />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <span className="inline-block px-4 py-1.5 bg-white/[0.06] backdrop-blur-md border border-white/10 text-[var(--gold-light)] text-sm font-semibold rounded-full mb-4">Client Reviews</span>
            <h1 className="font-display text-4xl sm:text-5xl font-bold text-white tracking-tight mb-4">
              What Our Clients <span className="text-gradient-gold">Say</span>
            </h1>
            <p className="text-white/60 text-lg max-w-2xl mx-auto">Real stories from real clients who trust Alpha CPA for their financial success.</p>
          </motion.div>
        </div>
      </section>

      {/* Testimonials Grid */}
      <section className="py-16 sm:py-24">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {(testimonials ?? [])?.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 % 3) * 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)]/15 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?.role ? `${t.role}, ` : ''}{t?.company ?? ''}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-[hsl(var(--muted))]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
            <h2 className="font-display text-2xl sm:text-3xl font-bold text-[var(--navy)] tracking-tight mb-4">Ready to Experience the Difference?</h2>
            <p className="text-muted-foreground text-lg mb-8">Join hundreds of satisfied clients who trust Alpha CPA with their finances.</p>
            <Link href="/contact" className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--navy)] to-[var(--navy-light)] text-white font-bold rounded-xl hover:shadow-lg hover:shadow-[var(--navy)]/20 transition-all duration-300 hover:-translate-y-0.5">
              Get Started <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>
    </>
  );
}