import type { StaticImageData } from "next/image";
import { MarginWaterfall, SaasSystemDiagram } from "@/components/templates/IndustryDiagrams";
import { PageHero } from "@/components/templates/PageHero";
import { TextLink } from "@/components/ui/Button";
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 { JsonLd } from "@/components/ui/Structured";
import { industrySectionCopy } from "@/content/industries/sections";
import type { IndustryContent } from "@/content/types";
import { renderInline } from "@/lib/inline";
import { routes } from "@/lib/routes";
import { industryServiceSchema } from "@/lib/schema";

export function IndustryPage({ industry, image }: { industry: IndustryContent; image: StaticImageData }) {
  const copy = industrySectionCopy[industry.model];
  const path = industry.model === "saas" ? routes.saas : routes.ecommerce;

  return (
    <>
      <PageHero
        crumbs={[
          { name: "Home", href: routes.home },
          { name: copy.crumb, href: path },
        ]}
        eyebrow={industry.hero.eyebrow}
        title={industry.hero.title}
        intro={industry.hero.intro}
        chips={industry.hero.focus}
        image={{ src: image, alt: industry.hero.imageAlt }}
        secondaryCta={{ label: "Take the growth diagnostic", href: "/#growth-diagnostic" }}
      />

      <Section id="challenges" labelledBy="challenges-title">
        <div className="container-page">
          <SectionHeading id="challenges-title" title={industry.challenges.heading} intro={industry.challenges.intro} size="md" />
          <div className="mt-14 grid gap-x-6 gap-y-2 md:grid-cols-2 xl:grid-cols-3">
            {industry.challenges.items.map((item, index) => (
              <article key={item.title} className="border-t border-ink py-7" {...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>
                <dl className="mt-5 space-y-4 text-[0.9375rem]">
                  <div>
                    <dt className="text-label uppercase text-muted">What it looks like</dt>
                    <dd className="mt-1.5 text-ink-soft">{item.symptom}</dd>
                  </div>
                  <div>
                    <dt className="flex items-center gap-2 text-label uppercase text-signal">
                      <span aria-hidden="true" className="size-1.5 bg-signal" />
                      What we do
                    </dt>
                    <dd className="mt-1.5">{item.response}</dd>
                  </div>
                </dl>
              </article>
            ))}
          </div>
        </div>
      </Section>

      <Section id="system" tone="deep" labelledBy="system-title">
        <div className="container-page">
          <SectionHeading id="system-title" title={industry.system.heading} intro={industry.system.intro} size="md" />
          <div className="mt-14 hidden md:block" {...revealProps()}>
            {industry.model === "saas" ? <SaasSystemDiagram steps={industry.system.steps} /> : <MarginWaterfall steps={industry.system.steps} />}
          </div>
          <ol className="mt-10 grid gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
            {industry.system.steps.map((step, index) => (
              <li key={step.title} className="grid grid-cols-[2.5rem_1fr] gap-3" {...revealProps(staggerDelay(index, 50))}>
                <span className="pt-1 font-mono text-sm text-muted">{String(index + 1).padStart(2, "0")}</span>
                <div>
                  <h3 className="font-medium tracking-[-0.01em]">{step.title}</h3>
                  <p className="mt-1.5 text-[0.9375rem] text-ink-soft">{step.description}</p>
                </div>
              </li>
            ))}
          </ol>
          <p className="mt-10 max-w-3xl border-l-2 border-signal pl-5 text-ink" {...revealProps()}>
            {renderInline(industry.system.note)}
          </p>
        </div>
      </Section>

      <Section id="capabilities" labelledBy="capabilities-title">
        <div className="container-page">
          <SectionHeading id="capabilities-title" title={copy.capabilitiesTitle} intro={copy.capabilitiesIntro} size="md" />
          <div className="mt-14">
            {industry.capabilities.map((capability, index) => (
              <article
                key={capability.id}
                id={capability.id}
                aria-labelledby={`${capability.id}-title`}
                className="grid scroll-mt-28 gap-8 border-t border-line py-12 lg:grid-cols-12 lg:gap-6 lg:py-16"
              >
                <div className="lg:col-span-4" {...revealProps()}>
                  <p className="flex items-center gap-3 text-label uppercase text-muted">
                    <span className="font-mono">{String(index + 1).padStart(2, "0")}</span>
                    <span aria-hidden="true" className="h-px w-6 bg-line-strong" />
                    {capability.label}
                  </p>
                  <h3 id={`${capability.id}-title`} className="mt-4 text-display-md">
                    {capability.heading}
                  </h3>
                  <p className="mt-4 text-ink-soft">{renderInline(capability.intro)}</p>
                  <div className="mt-5 flex flex-wrap gap-x-6">
                    {capability.links.map((link) => (
                      <TextLink key={link.href} href={link.href}>
                        {link.label}
                      </TextLink>
                    ))}
                  </div>
                </div>
                <ul className="grid gap-x-6 gap-y-8 sm:grid-cols-2 lg:col-span-7 lg:col-start-6">
                  {capability.points.map((point, pointIndex) => (
                    <li key={point.title} className="border-t border-line pt-5" {...revealProps(staggerDelay(pointIndex, 60))}>
                      <h4 className="font-medium tracking-[-0.01em]">{point.title}</h4>
                      <p className="mt-2 text-[0.9375rem] text-ink-soft">{renderInline(point.description)}</p>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </Section>

      <Section id="metrics" tone="night" labelledBy="metrics-title" grain>
        <div className="container-page">
          <SectionHeading id="metrics-title" title={industry.metrics.heading} intro={industry.metrics.intro} size="md" tone="dark" />
          <dl className="mt-14 grid border-l border-t border-night-line sm:grid-cols-2 lg:grid-cols-5">
            {industry.metrics.items.map((metric, index) => (
              <div key={metric.code} className="border-b border-r border-night-line p-6" {...revealProps(staggerDelay(index, 40))}>
                <dt>
                  <span className="block font-mono text-sm text-signal-bright">{metric.code}</span>
                  <span className="mt-3 block font-medium">{metric.name}</span>
                </dt>
                <dd className="mt-2 text-sm text-night-muted">{metric.definition}</dd>
              </div>
            ))}
          </dl>
        </div>
      </Section>

      <Section id="process" tone="deep" labelledBy="industry-process-title">
        <div className="container-page">
          <SectionHeading id="industry-process-title" title={industry.process.heading} intro={industry.process.intro} size="md" />
          <ol className="mt-14 grid gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
            {industry.process.steps.map((step, index) => (
              <li key={step.title} className="border-t border-ink pt-6" {...revealProps(staggerDelay(index))}>
                <span className="block text-[3.5rem] font-medium leading-none tracking-[-0.05em] text-ink/15">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-4 text-title">{step.title}</h3>
                <p className="mt-2 text-ink-soft">{step.description}</p>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section id="faq" labelledBy="industry-faq-title">
        <div className="container-page">
          <FAQ id="industry-faq-title" title={copy.faqTitle} faqs={industry.faqs} />
        </div>
      </Section>

      <CTA title={industry.cta.heading} body={industry.cta.body} />
      <JsonLd data={industryServiceSchema({ name: copy.crumb, description: industry.seo.description, path })} />
    </>
  );
}