import { useParams, Link, Navigate } from 'react-router-dom';
import { ArrowRight, CheckCircle2, Plus, Minus, ChevronRight } from 'lucide-react';
import { useState } from 'react';
import PageHero from '@/components/PageHero';
import CTASection from '@/components/CTASection';
import { Reveal, StaggerContainer, StaggerItem, SectionHeading } from '@/components/ui/Animation';
import { services } from '@/data/content';

export default function ServiceDetail() {
  const { slug } = useParams();
  const service = services.find((s) => s.slug === slug);

  if (!service) return <Navigate to="/services" replace />;

  const Icon = service.icon;
  const related = services.filter((s) => s.slug !== slug).slice(0, 3);

  return (
    <div>
      <PageHero
        eyebrow="Service"
        title={<><span className="gradient-text">{service.title}</span></>}
        subtitle={service.overview}
        crumbs={[
          { label: 'Home', to: '/' },
          { label: 'Services', to: '/services' },
          { label: service.title },
        ]}
      >
        <div className="flex flex-wrap gap-4">
          <Link to="/contact" className="btn-primary">
            Get a quote <ArrowRight size={16} />
          </Link>
          <Link to="/services" className="btn-secondary">
            All services
          </Link>
        </div>
      </PageHero>

      {/* Features */}
      <section className="container-wide section-padding py-16">
        <SectionHeading
          eyebrow="Features"
          title={<>What’s <span className="gradient-text">included</span></>}
          subtitle={`Core capabilities that ship with every ${service.title} engagement.`}
        />
        <StaggerContainer className="mt-14 grid gap-6 sm:grid-cols-2">
          {service.features.map((f) => (
            <StaggerItem key={f.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 ${service.accent} text-white`}>
                  <Icon size={20} />
                </div>
                <h3 className="mt-5 text-lg font-bold">{f.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{f.description}</p>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* Benefits */}
      <section className="container-wide section-padding py-16">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <SectionHeading
              eyebrow="Benefits"
              title={<>Why this <span className="gradient-text">matters</span></>}
              center={false}
            />
            <Reveal delay={0.2}>
              <ul className="mt-8 space-y-4">
                {service.benefits.map((b) => (
                  <li key={b} className="flex items-start gap-3">
                    <CheckCircle2 size={22} className="mt-0.5 shrink-0 text-accent-500" />
                    <span className="text-primary-600 dark:text-gray-300">{b}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <Reveal delay={0.2}>
            <div className={`rounded-3xl bg-gradient-to-br ${service.accent} p-8 text-white shadow-soft-lg`}>
              <Icon size={32} />
              <h3 className="mt-4 text-2xl font-bold">{service.title}</h3>
              <p className="mt-2 text-white/85">{service.short}</p>
              <div className="mt-6 rounded-2xl bg-white/15 p-5 backdrop-blur">
                <p className="text-sm leading-relaxed">
                  “Queneva delivered beyond our expectations. The system just works.”
                </p>
                <p className="mt-2 text-xs font-semibold">— A very satisfied client</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Process */}
      <section className="container-wide section-padding py-16">
        <SectionHeading
          eyebrow="Process"
          title={<>How we <span className="gradient-text">deliver</span></>}
          subtitle="A proven four-step approach that keeps you informed and in control."
        />
        <StaggerContainer className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {service.process.map((p) => (
            <StaggerItem key={p.step}>
              <div className="glass h-full rounded-3xl p-7 card-hover">
                <span className="text-4xl font-black gradient-text">{p.step}</span>
                <h3 className="mt-3 text-lg font-bold">{p.title}</h3>
                <p className="mt-2 text-sm text-primary-400 dark:text-gray-400">{p.description}</p>
              </div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* Tech stack */}
      <section className="container-wide section-padding py-16">
        <SectionHeading
          eyebrow="Technology"
          title={<>The <span className="gradient-text">stack</span> we use</>}
          subtitle="Modern, battle-tested tools chosen for performance and longevity."
        />
        <Reveal className="mt-10">
          <div className="flex flex-wrap justify-center gap-3">
            {service.stack.map((tech) => (
              <span key={tech} className="rounded-full glass px-5 py-2.5 text-sm font-medium text-primary-600 dark:text-gray-300">
                {tech}
              </span>
            ))}
          </div>
        </Reveal>
      </section>

      {/* FAQ */}
      <section className="container-wide section-padding py-16">
        <SectionHeading
          eyebrow="FAQ"
          title={<>Common <span className="gradient-text">questions</span></>}
        />
        <div className="mx-auto mt-12 max-w-3xl space-y-3">
          {service.faqs.map((f, i) => (
            <ServiceFAQItem key={i} q={f.q} a={f.a} />
          ))}
        </div>
      </section>

      {/* Related services */}
      <section className="container-wide section-padding py-16">
        <SectionHeading eyebrow="Related" title={<>More <span className="gradient-text">services</span></>} />
        <StaggerContainer className="mt-12 grid gap-6 sm:grid-cols-3">
          {related.map((s) => (
            <StaggerItem key={s.slug}>
              <Link to={`/services/${s.slug}`}>
                <div className="group glass h-full rounded-3xl p-6 card-hover">
                  <div className={`flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br ${s.accent} text-white`}>
                    <s.icon size={20} />
                  </div>
                  <h3 className="mt-4 font-bold">{s.title}</h3>
                  <p className="mt-2 text-sm 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>
      </section>

      <CTASection
        title={`Ready to build your ${service.title.toLowerCase()} solution?`}
        subtitle="Let’s talk about your goals and scope a project that fits."
      />
    </div>
  );
}

function ServiceFAQItem({ 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>
        <div
          className="overflow-hidden transition-all duration-300"
          style={{ maxHeight: open ? '200px' : '0', opacity: open ? 1 : 0 }}
        >
          <p className="px-6 pb-5 text-sm leading-relaxed text-primary-400 dark:text-gray-400">{a}</p>
        </div>
      </div>
    </Reveal>
  );
}