import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Container } from "@/components/container";
import { Section } from "@/components/section";
import { SectionHeader } from "@/components/section-header";
import { Reveal, RevealGroup, RevealItem } from "@/components/motion";
import { Button } from "@/components/ui/button";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { LogoMarquee } from "@/components/logo-marquee";
import { FAQAccordion } from "@/components/faq-accordion";
import { CTASection } from "@/components/cta-section";
import { ProcessTimeline } from "@/components/process-timeline";
import { Icon, type IconName } from "@/lib/icons";
import { integrations } from "@/content/integrations";
import type { FAQ } from "@/content/solutions";

export type ServiceCapability = { icon: IconName; title: string; body: string };
export type ServiceStep = { title: string; body: string };
export type ServiceUseCase = { tag: string; title: string; body: string };

export type ServiceLandingProps = {
  breadcrumbLabel: string;
  eyebrow: string;
  h1: ReactNode;
  sub: string;
  /** Primary hero CTA label — always routes to /contact (there is no self-serve signup). */
  primaryCtaLabel: string;
  /** Page-specific hero visual (voice waveform / WhatsApp mockup) — the split-hero right column. */
  heroVisual: ReactNode;
  capabilitiesTitle: ReactNode;
  capabilitiesLead?: string;
  capabilities: ServiceCapability[];
  stepsTitle: ReactNode;
  steps: ServiceStep[];
  useCasesTitle: ReactNode;
  useCases: ServiceUseCase[];
  pricingTitle: ReactNode;
  pricingBody: string;
  faqsTitle: ReactNode;
  faqs: FAQ[];
  /** Curated outgoing internal links to genuinely related pages (descriptive anchors). */
  relatedLinks: { label: string; href: string }[];
  ctaTitle: ReactNode;
  ctaDescription: string;
};

export function ServiceLanding({
  breadcrumbLabel,
  eyebrow,
  h1,
  sub,
  primaryCtaLabel,
  heroVisual,
  capabilitiesTitle,
  capabilitiesLead,
  capabilities,
  stepsTitle,
  steps,
  useCasesTitle,
  useCases,
  pricingTitle,
  pricingBody,
  faqsTitle,
  faqs,
  relatedLinks,
  ctaTitle,
  ctaDescription,
}: ServiceLandingProps) {
  return (
    <>
      {/* HERO */}
      <div className="relative overflow-hidden page-top-space pb-12 md:pb-16">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-96 w-full max-w-6xl bg-gradient-to-r from-[#4FDAF1]/20 via-[#F79C09]/15 to-[#E26B0B]/20 blur-3xl"
        />
        <Container>
          <Breadcrumbs items={[{ label: breadcrumbLabel }]} className="mb-6" />
          {/* Split hero — text + a page-specific visual — inside the canonical
              max-w-6xl container, so the left edge aligns with the rest of the
              site while the composition matches the Industries / homepage heroes. */}
          <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
            <div className="lg:col-span-6">
              <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--accent-cyan-text)]/30 bg-[var(--accent-cyan-text)]/10 px-3 py-1 text-xs font-semibold text-[var(--accent-cyan-text)]">
                <span className="size-1.5 rounded-full bg-[var(--accent-cyan-text)] shadow-[0_0_6px_rgba(8,145,178,0.8)]" />
                {eyebrow}
              </div>
              <h1 className="font-display text-4xl font-medium tracking-tight text-foreground sm:text-5xl md:text-6xl leading-[1.08]">
                {h1}
              </h1>
              <p className="mt-5 max-w-xl text-base text-muted-foreground sm:text-lg leading-relaxed">
                {sub}
              </p>
              <div className="mt-8 flex flex-wrap items-center gap-3.5">
                <Button asChild variant="accent" size="pill-lg">
                  <Link href="/contact" className="group">
                    {primaryCtaLabel}
                    <ArrowRight className="ml-1.5 size-4 transition-transform group-hover:translate-x-1 motion-reduce:transition-none" />
                  </Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="pill-lg"
                  className="border-[#4FDAF1]/40 hover:border-[#4FDAF1] hover:bg-[#4FDAF1]/5"
                >
                  <Link href="#how-it-works">See how it works</Link>
                </Button>
              </div>
            </div>
            <div className="lg:col-span-6">{heroVisual}</div>
          </div>
        </Container>
      </div>

      {/* INTEGRATIONS */}
      <Section className="border-y border-border/60 py-6 md:py-8">
        <Container>
          <p className="text-center text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            Orchestrated with your existing telephony &amp; business stack
          </p>
          <div className="mt-5">
            <LogoMarquee items={integrations} />
          </div>
        </Container>
      </Section>

      {/* CAPABILITIES */}
      <Section className="py-10 md:py-16">
        <Container>
          <Reveal>
            <SectionHeader eyebrow="What it does" title={capabilitiesTitle} lead={capabilitiesLead} />
          </Reveal>
          <RevealGroup className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {capabilities.map((c) => (
              <RevealItem key={c.title} className="h-full">
                <div className="flex h-full flex-col rounded-3xl border border-border/80 bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#4FDAF1]/50 hover:shadow-lg">
                  <span className="inline-flex size-11 items-center justify-center rounded-2xl border border-[#4FDAF1]/30 bg-[#4FDAF1]/10 text-[var(--accent-cyan-text)]">
                    <Icon name={c.icon} className="size-5" />
                  </span>
                  <h3 className="mt-4 font-display text-lg font-semibold text-foreground">
                    {c.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-pretty text-muted-foreground">
                    {c.body}
                  </p>
                </div>
              </RevealItem>
            ))}
          </RevealGroup>
        </Container>
      </Section>

      {/* HOW THE CONVERSATION WORKS — connected process flow (the site's
          ProcessTimeline), on a dark section for rhythm/contrast. */}
      <Section
        id="how-it-works"
        theme="dark"
        dots
        className="scroll-mt-[calc(var(--header-offset,80px)+24px)] border-y border-border/60 py-12 md:py-20"
      >
        <Container>
          <Reveal>
            <SectionHeader
              eyebrow="How the conversation works"
              title={stepsTitle}
              lead="From the first moment to follow-up — one agent, one continuous conversation, with a human a step away."
            />
          </Reveal>
          <div className="mt-12">
            <ProcessTimeline
              steps={steps.map((s, i) => ({ step: i + 1, title: s.title, body: s.body }))}
            />
          </div>
        </Container>
      </Section>

      {/* USE CASES */}
      <Section className="py-10 md:py-16">
        <Container>
          <Reveal>
            <SectionHeader eyebrow="Use cases" title={useCasesTitle} />
          </Reveal>
          <RevealGroup className="mt-10 grid gap-5 sm:grid-cols-2">
            {useCases.map((u) => (
              <RevealItem key={u.title} className="h-full">
                <div className="flex h-full flex-col rounded-3xl border border-border/80 bg-card p-6 shadow-sm transition-all duration-300 hover:border-[#4FDAF1]/50 hover:shadow-md">
                  <span className="w-fit rounded-full border border-[var(--accent-cyan-text)]/30 bg-[var(--accent-cyan-text)]/10 px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--accent-cyan-text)]">
                    {u.tag}
                  </span>
                  <h3 className="mt-4 font-display text-lg font-bold text-foreground">
                    {u.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-pretty text-muted-foreground">
                    {u.body}
                  </p>
                </div>
              </RevealItem>
            ))}
          </RevealGroup>
        </Container>
      </Section>

      {/* PRICING CONTEXT */}
      <Section className="border-t border-border/60 bg-secondary/30 py-10 md:py-16">
        <Container>
          <div className="max-w-3xl">
            <Reveal>
              <SectionHeader eyebrow="Pricing" title={pricingTitle} />
              <p className="mt-4 text-base leading-relaxed text-pretty text-muted-foreground">
                {pricingBody}
              </p>
              <div className="mt-6">
                <Button asChild variant="accent" size="pill">
                  <Link href="/contact" className="group">
                    Get a quote
                    <ArrowRight className="ml-1.5 size-4 transition-transform group-hover:translate-x-1 motion-reduce:transition-none" />
                  </Link>
                </Button>
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* FAQ */}
      <Section className="py-10 md:py-16">
        <Container>
          <Reveal>
            <SectionHeader align="center" eyebrow="FAQ" title={faqsTitle} />
          </Reveal>
          <div className="mt-8">
            <FAQAccordion faqs={faqs} />
          </div>
        </Container>
      </Section>

      {/* RELATED — curated outgoing internal links (descriptive anchors) */}
      {relatedLinks.length > 0 ? (
        <Section className="border-t border-border/60 py-8 md:py-10">
          <Container>
            <p className="text-sm font-semibold text-foreground">Explore related</p>
            <div className="mt-4 flex flex-wrap gap-2.5">
              {relatedLinks.map((l) => (
                <Link
                  key={l.href}
                  href={l.href}
                  className="group inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-[#4FDAF1]/50 hover:text-[var(--accent-cyan-text)]"
                >
                  {l.label}
                  <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none" />
                </Link>
              ))}
            </div>
          </Container>
        </Section>
      ) : null}

      <CTASection title={ctaTitle} description={ctaDescription} />
    </>
  );
}