import type { Metadata } from "next";
import Image from "next/image";
import analystImage from "@/assets/visuals/analyst-report-review.jpg";
import { LeadForm } from "@/components/forms/LeadForm";
import { FAQ } from "@/components/ui/FAQ";
import { revealProps, staggerDelay } from "@/components/ui/reveal";
import { Section } from "@/components/ui/Section";
import { Eyebrow, SectionHeading } from "@/components/ui/SectionHeading";
import { Breadcrumbs } from "@/components/ui/Structured";
import { auditPage } from "@/content/audit";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: auditPage.seo.title,
  description: auditPage.seo.description,
  path: routes.audit,
  ogKey: "growth-audit",
});

export default function GrowthAuditPage() {
  return (
    <>
      <section aria-labelledby="page-title" className="border-b border-line">
        <div className="container-page pb-16 pt-8 lg:pb-24 lg:pt-10">
          <Breadcrumbs
            items={[
              { name: "Home", href: routes.home },
              { name: "Growth Audit", href: routes.audit },
            ]}
          />
          <div className="mt-10 grid gap-12 lg:mt-14 lg:grid-cols-12 lg:gap-6">
            <div className="lg:col-span-5">
              <div className="fade-rise">
                <Eyebrow>{auditPage.eyebrow}</Eyebrow>
              </div>
              <h1 id="page-title" className="fade-rise mt-6 text-display-lg">
                {auditPage.title}
              </h1>
              <p className="fade-rise mt-6 text-lead text-ink-soft">{auditPage.intro}</p>
              <dl className="fade-rise mt-10 border-t border-ink">
                {auditPage.reviews.map((review) => (
                  <div key={review.title} className="grid grid-cols-[8rem_1fr] gap-4 border-b border-line py-4">
                    <dt className="flex items-center gap-2 font-medium">
                      <span aria-hidden="true" className="size-1.5 bg-signal" />
                      {review.title}
                    </dt>
                    <dd className="text-[0.9375rem] text-ink-soft">{review.description}</dd>
                  </div>
                ))}
              </dl>
              <p className="fade-rise mt-6 text-sm text-muted">{auditPage.microcopy}</p>
              <div className="fade-rise relative mt-10 hidden aspect-[4/5] overflow-hidden rounded-lg bg-paper-deep lg:block">
                <Image
                  src={analystImage}
                  alt="An analyst marking up a printed performance report beside a laptop"
                  fill
                  placeholder="blur"
                  sizes="(min-width: 1024px) 36vw, 100vw"
                  className="object-cover"
                />
              </div>
            </div>
            <div className="lg:col-span-6 lg:col-start-7">
              <div className="fade-rise rounded-lg border border-line bg-paper p-6 shadow-[0_32px_64px_-48px_rgba(16,16,20,0.4)] sm:p-9">
                <h2 className="text-title">Tell us where growth feels stuck.</h2>
                <p className="mt-2 text-[0.9375rem] text-muted">Takes about two minutes. Fields marked optional can be skipped.</p>
                <div className="mt-8">
                  <LeadForm intent="audit" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Section id="coverage" tone="deep" labelledBy="coverage-title">
        <div className="container-page">
          <SectionHeading id="coverage-title" title={auditPage.coverage.title} intro={auditPage.coverage.intro} size="md" />
          <div className="mt-14 grid gap-x-6 gap-y-10 md:grid-cols-2 xl:grid-cols-4">
            {auditPage.coverage.areas.map((area, index) => (
              <div key={area.title} className="border-t border-ink pt-6" {...revealProps(staggerDelay(index))}>
                <h3 className="text-title">{area.title}</h3>
                <ul className="mt-5 space-y-3">
                  {area.points.map((point) => (
                    <li key={point} className="flex gap-3 text-[0.9375rem] text-ink-soft">
                      <span aria-hidden="true" className="mt-2 size-1.5 shrink-0 bg-signal" />
                      {point}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </Section>

      <Section id="how-it-works" labelledBy="how-it-works-title">
        <div className="container-page">
          <SectionHeading id="how-it-works-title" title={auditPage.steps.title} size="md" />
          <ol className="mt-14 grid gap-8 md:grid-cols-3 md:gap-6">
            {auditPage.steps.items.map((step, index) => (
              <li key={step.title} {...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" tone="deep" labelledBy="audit-faq-title">
        <div className="container-page">
          <FAQ id="audit-faq-title" title="Growth Audit questions." faqs={auditPage.faqs} />
        </div>
      </Section>
    </>
  );
}