import type { Metadata } from "next";
import Image from "next/image";
import workshopImage from "@/assets/visuals/strategy-workshop.jpg";
import { GrowthSystem } from "@/components/home/GrowthSystem";
import { ProcessTimeline } from "@/components/home/ProcessTimeline";
import { WorkingTogether } from "@/components/home/WorkingTogether";
import { LayerStack } from "@/components/templates/LayerStack";
import { PageHero } from "@/components/templates/PageHero";
import { CTA } from "@/components/ui/CTA";
import { FAQ } from "@/components/ui/FAQ";
import { revealProps, staggerDelay } from "@/components/ui/reveal";
import { Section } from "@/components/ui/Section";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { circuitIntro, circuitStages } from "@/content/circuit";
import { howWeWorkPage as page } from "@/content/company";
import { workingTogether } from "@/content/home";
import { processSection, processSteps } from "@/content/process";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: page.seo.title,
  description: page.seo.description,
  path: routes.howWeWork,
  ogKey: "how-we-work",
});

export default function HowWeWorkPage() {
  return (
    <>
      <PageHero
        crumbs={[
          { name: "Home", href: routes.home },
          { name: "How We Work", href: routes.howWeWork },
        ]}
        eyebrow={page.hero.eyebrow}
        title={page.hero.title}
        intro={page.hero.intro}
        secondaryCta={{ label: "Take the growth diagnostic", href: "/#growth-diagnostic" }}
        className="border-b-0"
      />

      <div className="container-page">
        <div className="relative aspect-[16/9] overflow-hidden rounded-lg bg-paper-deep sm:aspect-[21/9]" {...revealProps(0, "fade")}>
          <Image src={workshopImage} alt={page.hero.imageAlt} fill placeholder="blur" sizes="(min-width: 1360px) 1264px, 100vw" className="object-cover" />
        </div>
      </div>

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

      <Section id="revenue-circuit" tone="deep" labelledBy="circuit-title">
        <div className="container-page">
          <SectionHeading
            id="circuit-title"
            title={
              <>
                {circuitIntro.name}.<span className="mt-2 block text-ink/45">{circuitIntro.kicker}</span>
              </>
            }
            intro={circuitIntro.intro}
          />
          <GrowthSystem stages={circuitStages} loopNote={circuitIntro.loopNote} />
        </div>
      </Section>

      <Section id="process" labelledBy="hww-process-title">
        <div className="container-page">
          <SectionHeading id="hww-process-title" title={processSection.title} intro={processSection.intro} />
          <ProcessTimeline steps={processSteps} />
        </div>
      </Section>

      <Section id="reporting" tone="surface" labelledBy="reporting-title" className="border-y border-line">
        <div className="container-page grid gap-12 lg:grid-cols-12 lg:gap-6">
          <div className="lg:col-span-4">
            <SectionHeading id="reporting-title" title={page.reporting.title} intro={page.reporting.intro} layout="stack" size="md" />
          </div>
          <div className="lg:col-span-7 lg:col-start-6">
            <LayerStack layers={page.reporting.layers} />
          </div>
        </div>
      </Section>

      <Section id="experimentation" labelledBy="experiments-title">
        <div className="container-page">
          <SectionHeading id="experiments-title" title={page.experiments.title} intro={page.experiments.intro} size="md" />
          <figure className="mt-14 rounded-lg bg-ink p-7 text-paper sm:p-10" {...revealProps()}>
            <figcaption className="text-label uppercase text-night-muted">Hypothesis template</figcaption>
            <p className="mt-5 font-serif text-[clamp(1.5rem,1.1rem+1.4vw,2.25rem)] italic leading-snug">
              {/* Placeholders render as tokens: bracket glyphs in the italic serif failed to paint in Chromium. */}
              {page.experiments.template.split(/\[([^\]]+)\]/).map((part, index) =>
                index % 2 === 1 ? (
                  <span
                    key={index}
                    className="mx-0.5 inline-block rounded-sm border-b border-signal-bright/70 px-1 font-sans text-[0.72em] not-italic tracking-[-0.01em] text-signal-bright"
                  >
                    {part}
                  </span>
                ) : (
                  <span key={index}>{part}</span>
                ),
              )}
            </p>
          </figure>
          <ol className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
            {page.experiments.lifecycle.map((stage, index) => (
              <li key={stage.name} className="relative rounded-lg border border-line bg-surface p-5" {...revealProps(staggerDelay(index, 60))}>
                <span className="font-mono text-data text-muted">{String(index + 1).padStart(2, "0")}</span>
                <h3 className="mt-2 font-medium">{stage.name}</h3>
                <p className="mt-1.5 text-sm text-ink-soft">{stage.description}</p>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section id="working-together" tone="deep" labelledBy="hww-working-title">
        <div className="container-page">
          <SectionHeading id="hww-working-title" title={workingTogether.title} intro={workingTogether.intro} />
          <WorkingTogether cadenceTitle={workingTogether.cadenceTitle} />
        </div>
      </Section>

      <Section id="faq" labelledBy="hww-faq-title">
        <div className="container-page">
          <FAQ id="hww-faq-title" title="Questions about working together." faqs={page.faqs} />
        </div>
      </Section>

      <CTA />
    </>
  );
}