const { useState } = React;
const DS = window.AIONANCEDesignSystem_d5d43a;
const { Wordmark, Mark, Button, Eyebrow, Link, WorkPlate } = DS;

const PLACEHOLDER = "Placeholder still — client work goes here";

function Header({ onStrike, pulse }) {
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "26px var(--page-margin)", borderBottom: "1px solid var(--hairline)",
      position: "sticky", top: 0, background: "var(--bone)", zIndex: 5,
    }}>
      <div onClick={onStrike} style={{ cursor: "pointer" }}><Wordmark size="sm" strikeSignal={pulse} /></div>
      <nav style={{ display: "flex", gap: 30, alignItems: "center", fontSize: 14 }}>
        <a href="#work" style={{ color: "var(--ink)", textDecoration: "none" }}>Work</a>
        <a href="#process" style={{ color: "var(--ink)", textDecoration: "none" }}>Process</a>
        <Button variant="primary" size="sm">Start a project</Button>
      </nav>
    </header>
  );
}

function Hero({ onPlay, strike }) {
  return (
    <section style={{ padding: "96px var(--page-margin) 64px", maxWidth: "var(--content-max)", margin: "0 auto" }}>
      <Eyebrow>AIONANCE</Eyebrow>
      <h1 style={{
        fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 72, lineHeight: 1.05,
        letterSpacing: "-0.01em", margin: "20px 0 24px", maxWidth: "16ch",
      }}>
        We Ad you.
      </h1>
      <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", maxWidth: "46ch", margin: 0 }}>
        We make your ad. Imagery impossible to shoot — for budget or for physics —
        art-directed frame by frame, and finished to broadcast.
      </p>
      <div style={{ display: "flex", gap: 14, marginTop: 30 }}>
        <Button variant="primary" onClick={onPlay}>See the reel</Button>
        <Button variant="secondary" onClick={strike}>Start a project</Button>
      </div>
      <div style={{ marginTop: 56 }}>
        <WorkPlate ratio="16 / 9" label={PLACEHOLDER} onClick={onPlay} />
      </div>
    </section>
  );
}

function WorkGrid({ onPlay }) {
  const items = [
    ["16 / 9", "HiddenChristianity — process cut · placeholder"],
    ["9 / 16", "Vertical spot · placeholder"],
    ["9 / 16", "Vertical spot · placeholder"],
    ["16 / 9", "Spec ad · placeholder"],
  ];
  return (
    <section id="work" style={{ padding: "64px var(--page-margin)", maxWidth: "var(--content-max)", margin: "0 auto" }}>
      <Eyebrow>Selected work</Eyebrow>
      <div style={{
        display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 22, marginTop: 22,
        alignItems: "start",
      }}>
        <WorkPlate ratio="16 / 9" caption={items[0][1]} onClick={onPlay} />
        <WorkPlate ratio="9 / 16" caption={items[1][1]} onClick={onPlay} />
        <WorkPlate ratio="9 / 16" caption={items[2][1]} onClick={onPlay} />
      </div>
      <div style={{ marginTop: 22 }}>
        <WorkPlate ratio="16 / 9" caption={items[3][1]} onClick={onPlay} />
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    ["01", "Brief", "Your business, your offer, your audience, the lines you must say."],
    ["02", "Script + storyboard", "Voiceover copy and a shot-by-shot visual plan before a frame is made."],
    ["03", "Art direction", "Coherent worlds, controlled camera and motion. No AI tells."],
    ["04", "Finish", "Voice, score, captions, and the sign-off — delivered per platform."],
  ];
  return (
    <section id="process" className="theme-dark" style={{ background: "var(--warm-dark)", padding: "88px var(--page-margin)" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <Eyebrow>How the work is made</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 40, color: "var(--bone)", margin: "16px 0 40px", maxWidth: "20ch" }}>
          The difference is not the model. It's the direction.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 30 }}>
          {steps.map(([n, t, d]) => (
            <div key={n} style={{ borderTop: "1px solid var(--dark-hairline)", paddingTop: 18 }}>
              <div style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontSize: 22 }}>{n}</div>
              <div style={{ color: "var(--bone)", fontSize: 17, fontWeight: 600, margin: "10px 0 8px" }}>{t}</div>
              <p style={{ color: "var(--dark-muted)", fontSize: 14, lineHeight: 1.55, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ strike, pulse }) {
  return (
    <section style={{ padding: "96px var(--page-margin)", maxWidth: "var(--content-max)", margin: "0 auto", textAlign: "center" }}>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
        <Mark size={104} strikeSignal={pulse} />
      </div>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 44, margin: "0 0 18px" }}>
        Tell us what can't be filmed.
      </h2>
      <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: "40ch", margin: "0 auto 28px" }}>
        Bring the brief. We'll bring back the frames.
      </p>
      <Button variant="primary" size="lg" onClick={strike}>Start a project</Button>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: "1px solid var(--hairline)", padding: "40px var(--page-margin)" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
        <Wordmark size="sm" />
        <div style={{ display: "flex", gap: 24, fontSize: 13, color: "var(--muted)" }}>
          <Link href="#">Reel</Link><Link href="#">Process</Link><Link href="#">Contact</Link>
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)" }}>Placeholder copy · not for release</div>
      </div>
    </footer>
  );
}

function ReelModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(20,18,14,0.86)", zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "center", padding: 40,
    }}>
      <div style={{ width: "min(880px, 90vw)" }}>
        <WorkPlate ratio="16 / 9" label="Reel — placeholder" bugTone="light" />
        <div style={{ textAlign: "center", marginTop: 16, color: "var(--dark-muted)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase" }}>
          Click anywhere to close
        </div>
      </div>
    </div>
  );
}

function Site() {
  const [reel, setReel] = useState(false);
  const [strike, setStrike] = useState(0);
  const fire = () => setStrike((n) => n + 1);
  return (
    <div style={{ background: "var(--bone)", color: "var(--ink)", fontFamily: "var(--font-sans)", minHeight: "100vh" }}>
      <Header onStrike={fire} pulse={strike} />
      <Hero onPlay={() => setReel(true)} strike={fire} />
      <WorkGrid onPlay={() => setReel(true)} />
      <Process />
      <Contact strike={fire} pulse={strike} />
      <Footer />
      <ReelModal open={reel} onClose={() => setReel(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Site />);