"use client";
import * as React from "react";
import { MotionConfig, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { defaultCortexData, type CortexData, type Plan } from "./data";
import { Capabilities } from "./sections/capabilities";
import { DemoSection } from "./sections/demo-section";
import { Developers } from "./sections/developers";
import { Faq, FinalCta, Footer } from "./sections/faq-footer";
import { Hero } from "./sections/hero";
import { Navbar } from "./sections/navbar";
import { Pricing } from "./sections/pricing";
import { Proof } from "./sections/proof";
import { Security } from "./sections/security";
import { scrollToId } from "./sections/ui";

export type { CortexData, Plan };
export { defaultCortexData };

export interface AiAgentStartupTemplateProps {
  /** Override any top-level content group (brand, hero, demo, pricing…). Missing groups use the demo content. */
  data?: Partial<CortexData>;
  /** Called by every "Start free" style CTA. Defaults to scrolling to pricing. */
  onStart?: () => void;
  /** Called when a pricing plan's button is pressed. */
  onSelectPlan?: (plan: Plan, yearly: boolean) => void;
  /** Called when a simulated run in the "Watch it work" demo finishes. */
  onDemoComplete?: (task: string) => void;
  className?: string;
}

export function AiAgentStartupTemplate({ data, onStart, onSelectPlan, onDemoComplete, className }: AiAgentStartupTemplateProps) {
  const d = React.useMemo(() => ({ ...defaultCortexData, ...data }), [data]);
  const reduce = useReducedMotion();
  const start = React.useCallback(() => (onStart ? onStart() : scrollToId("pricing", reduce)), [onStart, reduce]);
  const toDemo = React.useCallback(() => {
    scrollToId("demo", reduce);
    window.setTimeout(() => document.getElementById("cx-task")?.focus({ preventScroll: true }), reduce ? 0 : 700);
  }, [reduce]);

  return (
    <MotionConfig reducedMotion="user">
      <div className={cn("relative w-full overflow-x-clip bg-background text-foreground antialiased selection:bg-lime-300/40 selection:text-foreground", className)}>
        <Navbar name={d.brand.name} links={d.nav} cta={d.hero.primaryCta} onCta={start} />
        <main>
          <Hero hero={d.hero} logos={d.logos} onPrimary={start} onSecondary={toDemo} />
          <DemoSection demo={d.demo} onRunComplete={onDemoComplete} />
          <Capabilities capabilities={d.capabilities} />
          <Developers developers={d.developers} />
          <Security security={d.security} />
          <Proof proof={d.proof} />
          <Pricing pricing={d.pricing} onSelect={onSelectPlan} />
          <Faq faq={d.faq} />
          <FinalCta cta={d.cta} onPrimary={start} />
        </main>
        <Footer brand={d.brand} footer={d.footer} />
      </div>
    </MotionConfig>
  );
}