import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { CharterWatch } from "@/components/charter-watch";
import { HeroSection } from "@/components/hero-section";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  const [watch, setWatch] = useState(false);

  return (
    <>
      <HeroSection
        kicker="01  ·  The hook"
        title={"You are a candle.\nA flicker dying in a strong wind."}
        image="/images/hero-candle.jpg"
        video="/videos/hero-candle.mp4"
        priority
        ctas={[
          { label: "Watch", onClick: () => setWatch(true) },
          { label: "The clock", to: "/clock" },
        ]}
      />
      <HeroSection
        kicker="02  ·  The fall"
        title={"Greece. Egypt.\nThe river cities.\nWaste ate the seed."}
        image="/images/hero-rome.jpg"
        video="/videos/hero-rome.mp4"
        ctas={[{ label: "The facts", to: "/clock" }]}
      />
      <HeroSection
        kicker="03  ·  The clock"
        title={"On the order of a\nbillion years, this living\nsurface fails."}
        image="/images/hero-giant.jpg"
        video="/videos/hero-giant.mp4"
        ctas={[{ label: "The clock", to: "/clock" }]}
      />
      <HeroSection
        kicker="04  ·  The little brother"
        title={"AI now. AGI next.\nSuperintelligence after."}
        image="/images/page-silicon.jpg"
        ctas={[
          { label: "Mind", to: "/mind" },
          { label: "The facts", to: "/clock" },
        ]}
      />
      <HeroSection
        kicker="05  ·  The engine"
        title={"A culture center.\nEDM. Old-world craft.\nFilm. Live rooms."}
        image="/images/page-runway.jpg"
        ctas={[
          { label: "The house", to: "/house" },
          { label: "Culture", to: "/island" },
        ]}
      />
      <HeroSection
        kicker="06  ·  The school"
        title={"Train world builders.\nHarvest the Sun.\nMark: 2076."}
        image="/images/page-build.jpg"
        video="/videos/hero-build.mp4"
        ctas={[
          { label: "The school", to: "/build" },
          { label: "University", to: "/university" },
        ]}
      />
      <HeroSection
        kicker="07  ·  The offer"
        title={"Write your own charter.\nKeep the ones you love.\nAsk for help."}
        image="/images/hero-island.jpg"
        ctas={[
          { label: "The house", to: "/house" },
          { label: "Inquire", to: "/contact" },
        ]}
      />
      <CharterWatch open={watch} onClose={() => setWatch(false)} />
    </>
  );
}