import type { Metadata } from "next";
import { GrowthDiagnostic } from "@/components/home/GrowthDiagnostic";
import { GrowthSystem } from "@/components/home/GrowthSystem";
import { Hero } from "@/components/home/Hero";
import { IndustryPanel } from "@/components/home/IndustryPanel";
import { MetricPanel } from "@/components/home/MetricPanel";
import { PlatformMarquee } from "@/components/home/PlatformMarquee";
import { ProcessTimeline } from "@/components/home/ProcessTimeline";
import { ServiceSection } from "@/components/home/ServiceSection";
import { SpecializationFlows } from "@/components/home/SpecializationFlows";
import { WorkingTogether } from "@/components/home/WorkingTogether";
import { ResourcesPreview } from "@/components/resources/ResourcesPreview";
import { TextLink } from "@/components/ui/Button";
import { CTA } from "@/components/ui/CTA";
import { FAQ } from "@/components/ui/FAQ";
import { Section } from "@/components/ui/Section";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { circuitIntro, circuitStages } from "@/content/circuit";
import { homeFaqs } from "@/content/faqs";
import {
  diagnosticSection,
  faqSection,
  homeSeo,
  platformsSection,
  positioning,
  resourcesSection,
  servicesSection,
  specialization,
  workingTogether,
} from "@/content/home";
import { growthModelStills } from "@/content/media";
import { metricCharts, metricsByModel, metricsSection } from "@/content/metrics";
import { processSection, processSteps } from "@/content/process";
import { getResourceReadTimes } from "@/lib/content";
import { resourceCatalog } from "@/content/resources/catalog";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: homeSeo.title,
  description: homeSeo.description,
  path: "/",
  ogKey: "home",
  absoluteTitle: true,
});

export default function HomePage() {
  return (
    <>
      <Hero />

      <Section id="two-models" labelledBy="two-models-title" className="border-t border-line">
        <div className="container-page">
          <SectionHeading id="two-models-title" title={positioning.title} intro={positioning.intro} />
          <div className="mt-14 grid gap-4 lg:mt-20 lg:grid-cols-2 lg:gap-6">
            {positioning.panels.map((panel, index) => (
              <IndustryPanel key={panel.model} {...panel} image={growthModelStills[panel.model]} delay={index * 100} />
            ))}
          </div>
        </div>
      </Section>

      <Section id="revenue-circuit" tone="deep" labelledBy="revenue-circuit-title">
        <div className="container-page">
          <SectionHeading
            id="revenue-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 className="mt-10 border-t border-line pt-6">
            <TextLink href={routes.howWeWork}>See how an engagement runs</TextLink>
          </div>
        </div>
      </Section>

      <Section id="economics" tone="night" labelledBy="economics-title" grain>
        <div className="container-page">
          <SectionHeading
            id="economics-title"
            title={metricsSection.title}
            intro={metricsSection.intro}
            tone="dark"
          />
          <MetricPanel
            metricsByModel={metricsByModel}
            chartTitles={{
              saas: { title: metricCharts.saas.title, caption: metricCharts.saas.caption },
              ecommerce: { title: metricCharts.ecommerce.title, caption: metricCharts.ecommerce.caption },
            }}
            footnote={metricsSection.footnote}
          />
        </div>
      </Section>

      <Section id="services" labelledBy="services-title">
        <div className="container-page">
          <SectionHeading id="services-title" title={servicesSection.title} intro={servicesSection.intro} />
          <div className="mt-14 lg:mt-20">
            {servicesSection.modules.map((module, index) => (
              <ServiceSection key={module.index} module={module} reverse={index % 2 === 1} />
            ))}
          </div>
        </div>
      </Section>

      <Section id="specialization" tone="surface" labelledBy="specialization-title" className="border-y border-line">
        <div className="container-page">
          <SectionHeading id="specialization-title" title={specialization.title} intro={specialization.intro} />
          <SpecializationFlows />
        </div>
      </Section>

      <Section id="platforms" labelledBy="platforms-title">
        <div className="container-page">
          <SectionHeading id="platforms-title" title={platformsSection.title} intro={platformsSection.intro} />
        </div>
        <PlatformMarquee platforms={platformsSection.platforms} footnote={platformsSection.footnote} />
      </Section>

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

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

      <Section id="growth-diagnostic" tone="deep" labelledBy="growth-diagnostic-title">
        <div className="container-page">
          <SectionHeading
            id="growth-diagnostic-title"
            title={diagnosticSection.title}
            intro={
              <>
                {diagnosticSection.intro}
                <span className="mt-4 block text-sm text-muted">{diagnosticSection.disclaimer}</span>
              </>
            }
          />
          <GrowthDiagnostic />
        </div>
      </Section>

      <Section id="resources" labelledBy="resources-title">
        <div className="container-page">
          <SectionHeading id="resources-title" title={resourcesSection.title} intro={resourcesSection.intro}>
            <TextLink href={routes.resources} className="mt-4">
              All resources
            </TextLink>
          </SectionHeading>
          <ResourcesPreview resources={resourceCatalog} readTimes={getResourceReadTimes()} />
        </div>
      </Section>

      <Section id="faq" tone="deep" labelledBy="faq-title">
        <div className="container-page">
          <FAQ id="faq-title" title={faqSection.title} aside={faqSection.aside} faqs={homeFaqs} />
        </div>
      </Section>

      <CTA />
    </>
  );
}