import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import {
  ArrowRight, Sparkles, Zap, Shield, Rocket, Award, Users2, Code2, BrainCircuit,
  Cloud, CheckCircle2, Quote, Star, TrendingUp, Clock, Heart, Lightbulb, Target,
  Handshake, Plus, Minus,
} from 'lucide-react';
import { useState } from 'react';
import { Reveal, StaggerContainer, StaggerItem, Counter, SectionHeading, TiltCard } from '@/components/ui/Animation';
import CTASection from '@/components/CTASection';
import { services, industries, technologies } from '@/data/content';

const stats = [
  { value: 150, suffix: '+', label: 'Projects delivered' },
  { value: 80, suffix: '+', label: 'Happy clients' },
  { value: 12, suffix: '+', label: 'Industries served' },
  { value: 99, suffix: '%', label: 'Client retention' },
];

const whyChooseUs = [
  { icon: Zap, title: 'Speed without compromise', description: 'We ship in weeks, not quarters — with rigor that doesn’t cut corners.' },
  { icon: Shield, title: 'Security by default', description: 'Every system we ship is hardened against OWASP risks from day one.' },
  { icon: Rocket, title: 'Built to scale', description: 'Architecture that handles 10x growth without a rewrite.' },
  { icon: Award, title: 'Senior team only', description: 'No juniors learning on your budget. You work with experienced engineers.' },
  { icon: Users2, title: 'True partnership', description: 'We act like an extension of your team, not a vendor.' },
  { icon: Lightbulb, title: 'Innovation first', description: 'AI, automation, and modern stacks — we bring the frontier to you.' },
];

const values = [
  { icon: Target, title: 'Outcome-obsessed', description: 'We measure success by your results, not our deliverables.' },
  { icon: Heart, title: 'Craft & care', description: 'Every pixel and line of code treated with intention.' },
  { icon: Handshake, title: 'Radical transparency', description: 'Honest timelines, clear pricing, no surprises.' },
  { icon: Clock, title: 'Respect for time', description: 'Yours and ours. We protect it fiercely.' },
];

const featuredPortfolio = [
  {
    title: 'FinTech Lending Platform',
    category: 'Finance',
    image: 'https://images.pexels.com/photos/4968391/pexels-photo-4968391.jpeg?auto=compress&cs=tinysrgb&w=800',
    result: '3x faster loan approvals',
  },
  {
    title: 'Manufacturing ERP',
    category: 'Manufacturing',
    image: 'https://images.pexels.com/photos/3823488/pexels-photo-3823488.jpeg?auto=compress&cs=tinysrgb&w=800',
    result: '40% less stockouts',
  },
  {
    title: 'Healthcare Patient Portal',
    category: 'Healthcare',
    image: 'https://images.pexels.com/photos/4173251/pexels-photo-4173251.jpeg?auto=compress&cs=tinysrgb&w=800',
    result: '60% fewer no-shows',
  },
];

const testimonials = [
  {
    name: 'Rajesh Mehta',
    company: 'Mehta Industries',
    role: 'CEO',
    content: 'Queneva rebuilt our entire production tracking system. We went from spreadsheets to a real-time dashboard in eight weeks. Downtime dropped 30%.',
    rating: 5,
    avatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=120',
  },
  {
    name: 'Dr. Anjali Sharma',
    company: 'CareWell Clinics',
    role: 'Founder',
    content: 'The patient portal Queneva built transformed how we schedule. No-shows dropped dramatically and our staff finally has time to focus on care.',
    rating: 5,
    avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=120',
  },
  {
    name: 'Vikram Patel',
    company: 'RetailOne',
    role: 'CTO',
    content: 'We tried three agencies before Queneva. They were the first to actually understand our business before writing a line of code.',
    rating: 5,
    avatar: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=120',
  },
];

const faqs = [
  { q: 'What size companies do you work with?', a: 'From funded startups to enterprises. We right-size our approach — a startup gets a fast MVP, an enterprise gets a governed, multi-team build.' },
  { q: 'How do you price projects?', a: 'Most engagements are fixed-scope with milestone billing. For ongoing work, we offer monthly retainers. You’ll always know the cost before we start.' },
  { q: 'Do you work with in-house teams?', a: 'Absolutely. We frequently augment internal teams, share code reviews, and follow your existing processes and standards.' },
  { q: 'Who owns the code and IP?', a: 'You do — fully. We hand over the Git repository, documentation, and all credentials at project completion.' },
  { q: 'Do you provide ongoing support?', a: 'Yes. We offer maintenance and support retainers, and can act as your long-term technical partner.' },
];

const blogPreview = [
  { title: 'How AI agents are reshaping B2B sales in 2026', category: 'AI', date: 'Jul 2026', readTime: '6 min' },
  { title: 'A practical guide to ERP migration without downtime', category: 'Engineering', date: 'Jun 2026', readTime: '9 min' },
  { title: 'Why your startup should ship on the edge', category: 'Cloud', date: 'Jun 2026', readTime: '5 min' },
];

export default function Home() {
  return (
    <div className="overflow-hidden">
      {/* ===== HERO ===== */}
      <section className="relative pt-12 pb-28 lg:pt-20 lg:pb-36">
        <div className="container-wide section-padding">
          <div className="grid items-center gap-12 lg:grid-cols-12">
            <div className="lg:col-span-7">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="inline-flex items-center gap-2 rounded-full glass px-4 py-2 text-xs font-medium"
              >
                <span className="relative flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent-400 opacity-75" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-accent-500" />
                </span>
                Trusted by 80+ companies worldwide
              </motion.div>

              <motion.h1
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
                className="mt-6 text-5xl font-extrabold leading-[1.05] tracking-tight text-balance sm:text-6xl lg:text-7xl"
              >
                We make{' '}
                <span className="gradient-text-animate">tech easy</span>
                <br />for ambitious companies
              </motion.h1>

              <motion.p
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="mt-7 max-w-xl text-lg leading-relaxed text-primary-400 dark:text-gray-400"
              >
                Queneva builds websites, software, CRMs, ERPs, and AI systems that move your
                business forward — beautifully designed, expertly engineered, and built to scale.
              </motion.p>

              <motion.div
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
                className="mt-9 flex flex-wrap items-center gap-4"
              >
                <Link to="/contact" className="btn-primary text-base">
                  Start your project <ArrowRight size={18} />
                </Link>
                <Link to="/services" className="btn-secondary text-base">
                  Explore services
                </Link>
              </motion.div>

              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.5 }}
                className="mt-12 flex flex-wrap items-center gap-x-8 gap-y-3 text-sm text-primary-400 dark:text-gray-500"
              >
                {['AI-powered', 'Enterprise-grade', 'Cloud-native', 'Secure by design'].map((f) => (
                  <span key={f} className="flex items-center gap-2">
                    <CheckCircle2 size={16} className="text-accent-500" /> {f}
                  </span>
                ))}
              </motion.div>
            </div>

            {/* Hero visual */}
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.3, duration: 0.8 }}
              className="lg:col-span-5"
            >
              <TiltCard className="relative">
                <div className="glass-strong rounded-3xl p-6 shadow-soft-lg dark:shadow-soft-dark-lg">
                  {/* mock dashboard */}
                  <div className="flex items-center justify-between">
                    <div className="flex gap-1.5">
                      <span className="h-3 w-3 rounded-full bg-red-400/80" />
                      <span className="h-3 w-3 rounded-full bg-yellow-400/80" />
                      <span className="h-3 w-3 rounded-full bg-green-400/80" />
                    </div>
                    <span className="text-xs text-primary-400 dark:text-gray-500">queneva.ai/dashboard</span>
                  </div>
                  <div className="mt-5 grid grid-cols-2 gap-3">
                    {[
                      { label: 'Revenue', value: '$2.4M', icon: TrendingUp, color: 'text-green-500' },
                      { label: 'Leads', value: '1,284', icon: Users2, color: 'text-secondary-500' },
                      { label: 'Uptime', value: '99.9%', icon: Shield, color: 'text-accent-500' },
                      { label: 'Projects', value: '24', icon: Rocket, color: 'text-primary-500' },
                    ].map((m) => (
                      <motion.div
                        key={m.label}
                        whileHover={{ scale: 1.04 }}
                        className="rounded-2xl bg-white/60 p-4 dark:bg-white/5"
                      >
                        <m.icon size={18} className={m.color} />
                        <p className="mt-2 text-xl font-bold">{m.value}</p>
                        <p className="text-xs text-primary-400 dark:text-gray-500">{m.label}</p>
                      </motion.div>
                    ))}
                  </div>
                  <div className="mt-4 rounded-2xl bg-gradient-to-br from-secondary-500/10 to-accent-500/10 p-4">
                    <div className="flex items-center gap-2 text-sm font-medium">
                      <BrainCircuit size={16} className="text-secondary-500" /> AI Insight
                    </div>
                    <p className="mt-2 text-xs leading-relaxed text-primary-400 dark:text-gray-400">
                      Lead qualification is up 34% this week. 3 high-priority leads need follow-up today.
                    </p>
                    <div className="mt-3 h-2 overflow-hidden rounded-full bg-primary-100 dark:bg-white/10">
                      <motion.div
                        initial={{ width: 0 }}
                        animate={{ width: '78%' }}
                        transition={{ delay: 1, duration: 1.2 }}
                        className="h-full rounded-full bg-gradient-to-r from-secondary-500 to-accent-500"
                      />
                    </div>
                  </div>
                </div>

                {/* floating badge */}
                <motion.div
                  animate={{ y: [0, -12, 0] }}
                  transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
                  className="absolute -left-6 -top-6 glass-strong rounded-2xl p-3 shadow-glow-accent"
                >
                  <div className="flex items-center gap-2">
                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-accent-500/20 text-accent-500">
                      <Sparkles size={18} />
                    </div>
                    <div>
                      <p className="text-xs font-bold">AI-powered</p>
                      <p className="text-[10px] text-primary-400 dark:text-gray-500">24/7 automation</p>
                    </div>
                  </div>
                </motion.div>
                <motion.div
                  animate={{ y: [0, 12, 0] }}
                  transition={{ duration: 5, repeat: Infinity, ease: 'easeInOut' }}
                  className="absolute -bottom-5 -right-4 glass-strong rounded-2xl p-3 shadow-glow"
                >
                  <div className="flex items-center gap-2">
                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-secondary-500/20 text-secondary-500">
                      <Shield size={18} />
                    </div>
                    <div>
                      <p className="text-xs font-bold">Enterprise-grade</p>
                      <p className="text-[10px] text-primary-400 dark:text-gray-500">SOC2 ready</p>
                    </div>
                  </div>
                </motion.div>
              </TiltCard>
            </motion.div>
          </div>
        </div>
      </section>

      {/* ===== STATS ===== */}
      <section className="container-wide section-padding py-16">
        <StaggerContainer className="grid grid-cols-2 gap-6 lg:grid-cols-4">
          {stats.map((s) => (
            <StaggerItem key={s.label}>
              <div className="glass rounded-2xl p-6 text-center card-hover">
                <p className="text-4xl font-extrabold gradient-text lg:text-5xl">
                  <Counter to={s.value} suffix={s.suffix} />
                </p>
                <p className="mt-2 text-sm text-primary-400 dark:text-gray-400">{s.label}</p>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* ===== INTRO ===== */}
      <section className="container-wide section-padding py-24">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <SectionHeading
              eyebrow="Who we are"
              title={<>A technology partner that actually <span className="gradient-text">delivers</span></>}
              subtitle="Queneva IT Services Pvt. Ltd. is a full-stack software studio. We design, build, and scale digital products — from marketing websites to AI automation — for startups and enterprises across a dozen industries."
              center={false}
            />
            <Reveal delay={0.3}>
              <ul className="mt-8 space-y-4">
                {[
                  'Senior engineers and designers on every project',
                  'Fixed-scope pricing with milestone billing',
                  'You own 100% of the code and IP',
                  'Ongoing support and partnership',
                ].map((item) => (
                  <li key={item} className="flex items-start gap-3">
                    <CheckCircle2 size={20} className="mt-0.5 shrink-0 text-accent-500" />
                    <span className="text-primary-600 dark:text-gray-300">{item}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <Reveal delay={0.2}>
            <div className="grid grid-cols-2 gap-4">
              {[
                { icon: Code2, label: 'Web & Software', count: '150+ projects' },
                { icon: BrainCircuit, label: 'AI & Automation', count: '40+ systems' },
                { icon: Cloud, label: 'Cloud & DevOps', count: '30+ migrations' },
                { icon: Users2, label: 'CRM & ERP', count: '25+ platforms' },
              ].map((c) => (
                <div key={c.label} className="glass rounded-2xl p-5 card-hover">
                  <c.icon size={24} className="text-secondary-500" />
                  <p className="mt-3 font-semibold">{c.label}</p>
                  <p className="text-xs text-primary-400 dark:text-gray-500">{c.count}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== SERVICES ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="What we do"
          title={<>Everything you need to <span className="gradient-text">build & scale</span></>}
          subtitle="One partner for your entire digital journey — from first wireframe to scaled AI platform."
        />
        <StaggerContainer className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {services.slice(0, 9).map((s) => (
            <StaggerItem key={s.slug}>
              <Link to={`/services/${s.slug}`}>
                <div className="group h-full glass rounded-3xl p-7 card-hover">
                  <div className={`flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${s.accent} text-white shadow-lg`}>
                    <s.icon size={24} />
                  </div>
                  <h3 className="mt-5 text-lg font-bold">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{s.short}</p>
                  <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-secondary-500 transition-all group-hover:gap-2.5 dark:text-accent-400">
                    Learn more <ArrowRight size={15} />
                  </span>
                </div>
              </Link>
            </StaggerItem>
          ))}
        </StaggerContainer>
        <Reveal className="mt-12 text-center">
          <Link to="/services" className="btn-secondary">
            View all services <ArrowRight size={16} />
          </Link>
        </Reveal>
      </section>

      {/* ===== INDUSTRIES ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Industries"
          title={<>Built for your <span className="gradient-text">industry</span></>}
          subtitle="Deep domain expertise across 12 sectors. We speak your language before we write code."
        />
        <StaggerContainer className="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
          {industries.map((ind) => (
            <StaggerItem key={ind.slug}>
              <Link to="/industries">
                <div className="group glass h-full rounded-2xl p-5 text-center card-hover">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-secondary-500/10 text-secondary-500 transition-all group-hover:bg-secondary-500 group-hover:text-white dark:text-accent-400 dark:group-hover:bg-accent-500">
                    <ind.icon size={22} />
                  </div>
                  <p className="mt-3 text-sm font-semibold">{ind.title}</p>
                </div>
              </Link>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* ===== WHY CHOOSE US ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Why Queneva"
          title={<>Reasons companies <span className="gradient-text">choose us</span></>}
          subtitle="We combine the polish of a design studio with the rigor of an engineering firm."
        />
        <StaggerContainer className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {whyChooseUs.map((w) => (
            <StaggerItem key={w.title}>
              <div className="glass h-full rounded-3xl p-7 card-hover">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-secondary-500/15 to-accent-500/15 text-secondary-500 dark:text-accent-400">
                  <w.icon size={22} />
                </div>
                <h3 className="mt-5 text-lg font-bold">{w.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{w.description}</p>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* ===== PORTFOLIO ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Our work"
          title={<>Work that <span className="gradient-text">moves the needle</span></>}
          subtitle="A selection of projects where great design met serious engineering."
        />
        <StaggerContainer className="mt-14 grid gap-6 md:grid-cols-3">
          {featuredPortfolio.map((p) => (
            <StaggerItem key={p.title}>
              <Link to="/portfolio">
                <div className="group overflow-hidden rounded-3xl glass card-hover">
                  <div className="relative aspect-[4/3] overflow-hidden">
                    <img
                      src={p.image}
                      alt={p.title}
                      loading="lazy"
                      className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-primary-900/80 to-transparent" />
                    <span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-primary-600">
                      {p.category}
                    </span>
                    <div className="absolute bottom-4 left-4 right-4">
                      <p className="text-xs font-medium text-accent-400">{p.result}</p>
                      <h3 className="mt-1 text-lg font-bold text-white">{p.title}</h3>
                    </div>
                  </div>
                </div>
              </Link>
            </StaggerItem>
          ))}
        </StaggerContainer>
        <Reveal className="mt-12 text-center">
          <Link to="/portfolio" className="btn-secondary">
            View all work <ArrowRight size={16} />
          </Link>
        </Reveal>
      </section>

      {/* ===== TESTIMONIALS ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Testimonials"
          title={<>Loved by <span className="gradient-text">our clients</span></>}
          subtitle="Don’t take our word for it — take theirs."
        />
        <StaggerContainer className="mt-14 grid gap-6 lg:grid-cols-3">
          {testimonials.map((t) => (
            <StaggerItem key={t.name}>
              <div className="glass h-full rounded-3xl p-7 card-hover">
                <Quote size={28} className="text-secondary-500/30 dark:text-accent-400/30" />
                <div className="mt-3 flex gap-1">
                  {Array.from({ length: t.rating }).map((_, i) => (
                    <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <p className="mt-4 text-sm leading-relaxed text-primary-600 dark:text-gray-300">“{t.content}”</p>
                <div className="mt-6 flex items-center gap-3">
                  <img src={t.avatar} alt={t.name} loading="lazy" className="h-11 w-11 rounded-full object-cover" />
                  <div>
                    <p className="text-sm font-bold">{t.name}</p>
                    <p className="text-xs text-primary-400 dark:text-gray-500">{t.role}, {t.company}</p>
                  </div>
                </div>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* ===== TECHNOLOGIES ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Our stack"
          title={<>Modern tools, <span className="gradient-text">expertly wielded</span></>}
          subtitle="We work with the best of the modern stack — and we’re always exploring what’s next."
        />
        <Reveal className="mt-14">
          <div className="flex flex-wrap justify-center gap-3">
            {technologies.map((tech) => (
              <span
                key={tech}
                className="rounded-full glass px-5 py-2.5 text-sm font-medium text-primary-600 transition-all hover:scale-105 hover:text-secondary-500 dark:text-gray-300 dark:hover:text-accent-400"
              >
                {tech}
              </span>
            ))}
          </div>
        </Reveal>
      </section>

      {/* ===== VALUES ===== */}
      <section className="container-wide section-padding py-24">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <SectionHeading
              eyebrow="Our values"
              title={<>The principles behind <span className="gradient-text">every build</span></>}
              center={false}
            />
          </div>
          <StaggerContainer className="grid gap-5 sm:grid-cols-2">
            {values.map((v) => (
              <StaggerItem key={v.title}>
                <div className="glass rounded-2xl p-5 card-hover">
                  <v.icon size={22} className="text-secondary-500 dark:text-accent-400" />
                  <h3 className="mt-3 font-bold">{v.title}</h3>
                  <p className="mt-1 text-sm text-primary-400 dark:text-gray-400">{v.description}</p>
                </div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* ===== BLOG PREVIEW ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="Insights"
          title={<>Latest from <span className="gradient-text">our blog</span></>}
          subtitle="Practical thinking on AI, engineering, and building digital products."
        />
        <StaggerContainer className="mt-14 grid gap-6 md:grid-cols-3">
          {blogPreview.map((b) => (
            <StaggerItem key={b.title}>
              <Link to="/blog">
                <div className="group glass h-full rounded-3xl p-6 card-hover">
                  <div className="flex items-center justify-between text-xs text-primary-400 dark:text-gray-500">
                    <span className="rounded-full bg-secondary-500/10 px-3 py-1 font-semibold text-secondary-600 dark:text-accent-400">{b.category}</span>
                    <span>{b.readTime}</span>
                  </div>
                  <h3 className="mt-4 text-lg font-bold leading-snug">{b.title}</h3>
                  <p className="mt-3 text-xs text-primary-400 dark:text-gray-500">{b.date}</p>
                  <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-secondary-500 transition-all group-hover:gap-2.5 dark:text-accent-400">
                    Read article <ArrowRight size={15} />
                  </span>
                </div>
              </Link>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* ===== FAQ ===== */}
      <section className="container-wide section-padding py-24">
        <SectionHeading
          eyebrow="FAQ"
          title={<>Questions, <span className="gradient-text">answered</span></>}
          subtitle="Everything you might want to know before reaching out."
        />
        <div className="mx-auto mt-12 max-w-3xl space-y-3">
          {faqs.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} />
          ))}
        </div>
      </section>

      <CTASection />
    </div>
  );
}

function FAQItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <Reveal>
      <div className="glass overflow-hidden rounded-2xl">
        <button
          onClick={() => setOpen((o) => !o)}
          className="flex w-full items-center justify-between gap-4 px-6 py-5 text-left"
        >
          <span className="font-semibold text-primary-600 dark:text-gray-200">{q}</span>
          {open ? <Minus size={18} className="shrink-0 text-secondary-500" /> : <Plus size={18} className="shrink-0 text-secondary-500" />}
        </button>
        <motion.div
          initial={false}
          animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
          transition={{ duration: 0.3 }}
          className="overflow-hidden"
        >
          <p className="px-6 pb-5 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{a}</p>
        </motion.div>
      </div>
    </Reveal>
  );
}