import Link from "next/link";
import { PageHero } from "@/components/templates/PageHero";
import { ResourceCard } from "@/components/resources/ResourceCard";
import { TextLink } from "@/components/ui/Button";
import { CTA } from "@/components/ui/CTA";
import { FAQ } from "@/components/ui/FAQ";
import { ArrowRight } from "@/components/ui/Icons";
import { revealProps, staggerDelay } from "@/components/ui/reveal";
import { Section } from "@/components/ui/Section";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { JsonLd } from "@/components/ui/Structured";
import { getServiceSummary } from "@/content/catalog";
import { circuitStages } from "@/content/circuit";
import { getResourceSummary } from "@/content/resources/catalog";
import type { ServiceContent } from "@/content/types";
import { cn } from "@/lib/cn";
import { routes } from "@/lib/routes";
import { serviceSchema } from "@/lib/schema";

/** "At a glance" panel: where the service sits in the Revenue Circuit and what it moves. */
function CircuitPosition({ service }: { service: ServiceContent }) {
  return (
    <div className="rounded-lg border border-line bg-surface p-6">
      <p className="text-label uppercase text-muted">In the Revenue Circuit</p>
      <ol className="mt-5 grid grid-cols-5 gap-1" aria-label="Revenue Circuit stages">
        {circuitStages.map((stage) => {
          const active = stage.id === service.stage;
          return (
            <li key={stage.id} aria-current={active ? "step" : undefined} className="flex flex-col gap-2">
              <span className={cn("h-1 rounded-full", active ? "bg-signal" : "bg-line")} />
              <span className={cn("text-[0.6875rem] leading-tight", active ? "font-semibold text-ink" : "text-muted")}>{stage.name}</span>
            </li>
          );
        })}
      </ol>
      <p className="mt-6 text-label uppercase text-muted">Outcomes we manage toward</p>
      <ul className="mt-3 divide-y divide-line border-y border-line">
        {service.hero.outcomes.map((outcome) => (
          <li key={outcome} className="flex items-center gap-3 py-2.5 text-[0.9375rem]">
            <span aria-hidden="true" className="size-1.5 bg-signal" />
            {outcome}
          </li>
        ))}
      </ul>
      <p className="mt-5 text-sm text-muted">
        For <Link href={routes.saas} className="link-underline text-ink">SaaS</Link> and{" "}
        <Link href={routes.ecommerce} className="link-underline text-ink">e-commerce</Link> companies.
      </p>
    </div>
  );
}

export function ServicePage({ service }: { service: ServiceContent }) {
  const { problem, approach, deliverables, applications, process, measurement } = service;

  return (
    <>
      <PageHero
        crumbs={[
          { name: "Home", href: routes.home },
          { name: service.name, href: routes.service(service.slug) },
        ]}
        eyebrow={service.hero.eyebrow}
        title={service.hero.title}
        intro={service.hero.intro}
        secondaryCta={{ label: "How we work", href: routes.howWeWork }}
        aside={<CircuitPosition service={service} />}
      />

      <Section id="problem" labelledBy="problem-title">
        <div className="container-page">
          <SectionHeading id="problem-title" title={problem.heading} intro={problem.intro} size="md" />
          <ol className="mt-14 grid gap-x-6 border-t border-ink md:grid-cols-2">
            {problem.items.map((item, index) => (
              <li key={item.title} className="border-b border-line py-8 md:pr-10" {...revealProps(staggerDelay(index))}>
                <span className="font-mono text-data text-muted">{String(index + 1).padStart(2, "0")}</span>
                <h3 className="mt-3 text-title">{item.title}</h3>
                <p className="mt-3 max-w-xl text-ink-soft">{item.description}</p>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section id="approach" tone="deep" labelledBy="approach-title">
        <div className="container-page grid gap-12 lg:grid-cols-12 lg:gap-6">
          <div className="lg:col-span-5">
            <div className="lg:sticky lg:top-28">
              <SectionHeading id="approach-title" title={approach.heading} intro={approach.intro} layout="stack" size="md" />
            </div>
          </div>
          <ol className="relative lg:col-span-6 lg:col-start-7">
            <span aria-hidden="true" className="absolute bottom-6 left-[1.125rem] top-6 w-px bg-line-strong/40" />
            {approach.steps.map((step, index) => (
              <li key={step.title} className="relative grid grid-cols-[2.25rem_1fr] gap-5 pb-10 last:pb-0" {...revealProps(staggerDelay(index))}>
                <span className="relative z-10 flex size-9 items-center justify-center rounded-full border border-ink bg-paper-deep font-mono text-data">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <div className="pt-1">
                  <h3 className="text-title">{step.title}</h3>
                  <p className="mt-2 text-ink-soft">{step.description}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section id="deliverables" labelledBy="deliverables-title">
        <div className="container-page">
          <SectionHeading id="deliverables-title" title={deliverables.heading} intro={deliverables.intro} size="md" />
          <ul className="mt-14 grid border-l border-t border-line sm:grid-cols-2 xl:grid-cols-4">
            {deliverables.items.map((item, index) => (
              <li key={item.title} className="border-b border-r border-line p-6" {...revealProps(staggerDelay(index, 40))}>
                <span aria-hidden="true" className="block size-2 bg-signal" />
                <h3 className="mt-5 text-[1.125rem] font-medium leading-snug tracking-[-0.015em]">{item.title}</h3>
                <p className="mt-2 text-[0.9375rem] text-ink-soft">{item.description}</p>
              </li>
            ))}
          </ul>
        </div>
      </Section>

      <Section id="applications" tone="surface" labelledBy="applications-title" className="border-y border-line">
        <div className="container-page">
          <SectionHeading id="applications-title" title={applications.heading} intro={applications.intro} size="md" />
          <div className="mt-14 grid gap-4 lg:grid-cols-2 lg:gap-6">
            {(
              [
                { key: "saas", label: "SaaS", href: routes.saas, tone: "bg-mist", data: applications.saas },
                { key: "ecommerce", label: "E-commerce", href: routes.ecommerce, tone: "bg-sand", data: applications.ecommerce },
              ] as const
            ).map((model, index) => (
              <article key={model.key} className={cn("flex flex-col rounded-lg p-7 sm:p-9", model.tone)} {...revealProps(index * 100)}>
                <h3 className="text-label uppercase text-muted">{model.label}</h3>
                <p className="mt-4 text-title">{model.data.summary}</p>
                <ul className="mt-6 flex-1 border-t border-ink/10">
                  {model.data.points.map((point) => (
                    <li key={point} className="flex gap-3 border-b border-ink/10 py-3 text-[0.9375rem]">
                      <span aria-hidden="true" className="mt-2 size-1.5 shrink-0 bg-signal" />
                      {point}
                    </li>
                  ))}
                </ul>
                <TextLink href={model.href} className="mt-6">{`${model.label} growth marketing`}</TextLink>
              </article>
            ))}
          </div>
        </div>
      </Section>

      <Section id="process" labelledBy="process-title">
        <div className="container-page">
          <SectionHeading id="process-title" title={process.heading} intro={process.intro} size="md" />
          <ol className="mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 lg:gap-6">
            {process.steps.map((step, index) => (
              <li key={step.title} className="relative border-t-2 border-ink pt-5" {...revealProps(staggerDelay(index))}>
                <span className={cn("absolute -top-[5px] left-0 size-2", index === process.steps.length - 1 ? "bg-signal" : "bg-ink")} />
                <span className="font-mono text-data text-muted">Step {String(index + 1).padStart(2, "0")}</span>
                <h3 className="mt-2 text-title">{step.title}</h3>
                <p className="mt-3 text-[0.9375rem] text-ink-soft">{step.description}</p>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section id="measurement" tone="night" labelledBy="measurement-title" grain>
        <div className="container-page">
          <SectionHeading id="measurement-title" title={measurement.heading} intro={measurement.intro} size="md" tone="dark" />
          <div className="mt-14 space-y-3">
            {measurement.tiers.map((tier, index) => (
              <div
                key={tier.tier}
                className={cn(
                  "grid gap-6 rounded-lg border p-6 sm:p-8 lg:grid-cols-12",
                  index === 0 ? "border-signal-bright/50 bg-night-raised" : "border-night-line",
                )}
                data-reveal=""
                style={{ marginInlineStart: `${index * 2}%`, ...revealProps(index * 90).style }}
              >
                <div className="lg:col-span-3">
                  <p className={cn("font-mono text-data uppercase tracking-[0.08em]", index === 0 ? "text-signal-bright" : "text-night-muted")}>
                    Layer {index + 1}
                  </p>
                  <h3 className="mt-2 text-title">{tier.tier}</h3>
                  <p className="mt-1 text-sm text-night-muted">{tier.summary}</p>
                </div>
                <dl className="grid gap-5 sm:grid-cols-3 lg:col-span-9">
                  {tier.metrics.map((metric) => (
                    <div key={metric.title}>
                      <dt className="font-medium">{metric.title}</dt>
                      <dd className="mt-1 text-[0.9375rem] text-night-muted">{metric.description}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            ))}
          </div>
        </div>
      </Section>

      <Section id="faq" labelledBy="service-faq-title">
        <div className="container-page">
          <FAQ id="service-faq-title" title={`${service.name} questions.`} faqs={service.faqs} />
        </div>
      </Section>

      <Section id="related" tone="deep" labelledBy="related-title" spacing="tight">
        <div className="container-page">
          <h2 id="related-title" className="text-display-md">
            Keep exploring.
          </h2>
          <div className="mt-10 grid gap-10 lg:grid-cols-12 lg:gap-6">
            <nav aria-label="Related services" className="lg:col-span-4">
              <p className="text-label uppercase text-muted">Related services</p>
              <ul className="mt-4 border-t border-ink">
                {service.related.services.map((slug) => {
                  const related = getServiceSummary(slug);
                  return (
                    <li key={slug}>
                      <Link href={routes.service(slug)} className="group flex items-center justify-between gap-4 border-b border-line py-4">
                        <span>
                          <span className="block font-medium">{related.name}</span>
                          <span className="mt-1 block text-sm text-muted">{related.shortDescription}</span>
                        </span>
                        <ArrowRight size={16} className="btn-arrow shrink-0" />
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </nav>
            <div className="grid gap-5 sm:grid-cols-2 lg:col-span-8">
              {service.related.resources.map((slug) => (
                <ResourceCard key={slug} resource={getResourceSummary(slug)} />
              ))}
            </div>
          </div>
        </div>
      </Section>

      <CTA />
      <JsonLd data={serviceSchema(service)} />
    </>
  );
}