/* Systemiz site — main app composition */

const { useState, useEffect, useRef } = React;

// ================= NAV =================
function NavBar({ onBook, ctaCopy = "Join Systemizers" }) {
  return (
    <div className="nav-wrap">
      <nav className="nav">
        <div className="nav-left">
          <img src="assets/logo-mark.png" alt="" aria-hidden="true" />
          <span className="nav-wm">SYSTE<span className="torii">M</span>IZ</span>
        </div>
        <div className="nav-links">
          <a href="#philosophy">Philosophy</a>
          <a href="#workspace-demo">Product</a>
          <a href="#layers">AIOS Test</a>
          <a href="#founding">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <button className="nav-cta nav-cta-book" onClick={() => window.openSystemizStrategyCall && window.openSystemizStrategyCall()}>
          <span className="nav-cta-full">Book an AIOS strategy call</span>
          <span className="nav-cta-short">Book a call</span>
        </button>
      </nav>
      <div className="hairline"></div>
    </div>);

}

// ================= HERO =================
function Hero({ onBook, headline, ctaCopy = "Join Systemizers" }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <img src="assets/notion-logo-white-cropped.png" alt="" aria-hidden="true" className="hero-bg-mark hero-bg-notion" />
      <img src="assets/claude-logo-white.svg" alt="" aria-hidden="true" className="hero-bg-mark hero-bg-claude" />
      <div className="shell">
        <div className="eyebrow">
          <span className="dot"></span>
          Work less. Make more.
        </div>
        <h1>
          {headline === "outcome" &&
          <>Your <span className="accent">Business AI OS</span><br />built in <em>30 days<span className="accent">.</span></em></>
          }
          {headline === "mechanism" &&
          <>Your business in Notion.<br />Your AI in <span className="accent">Claude.</span><br /><span className="dim">Live in 30 days<span className="accent">.</span></span></>
          }
          {headline === "pain" &&
          <>Stop being the bottleneck<br /><span className="dim">in your own business<span className="accent">.</span></span></>
          }
        </h1>
        <p className="sub">
          We install an <strong>AI Operating System</strong> into your business with <strong>Notion &amp; Claude in 30 days</strong>, so you can get the leverage of a team without the overhead, get 90% of your time back, and <strong>make more money while working less</strong>.
        </p>
        <div className="hero-cta-row">
          <button className="btn btn-primary" onClick={onBook}>
            {ctaCopy}
            <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </button>
        </div>
        <div className="hero-meta">
          <span><span className="dot-red"></span>30-day install</span>
          <span><span className="dot-red"></span>AI-team leverage</span>
          <span><span className="dot-red" style={{ width: "4px" }}></span>Done-with-you</span>
        </div>
        <div className="brand-pair" style={{ display: "none" }}>
          <span className="bp-label"></span>
        </div>
      </div>
      <div className="ticker-label">
        <span className="tl-line"></span>
        <span className="tl-text">Tools we work with</span>
        <span className="tl-line"></span>
      </div>
      <Ticker />
    </section>);

}

function Ticker() {
  const items = [
  { src: "assets/notion-logo.png", label: "Notion" },
  { src: "assets/claude-logo.svg", label: "Claude" },
  { src: "assets/logos/google.png", label: "Google Workspace" },
  { src: "assets/logos/slack.png", label: "Slack" },
  { src: "assets/logos/stripe.webp", label: "Stripe" },
  { src: "assets/logos/calendly-cropped.png", label: "Calendly" },
  { src: "assets/logos/loom.png", label: "Loom" },
  { src: "assets/logos/shopify-cropped.png", label: "Shopify" },
  { src: "assets/logos/n8n-cropped.png", label: "n8n" }];

  const all = [...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {all.map((it, i) =>
        <div className="ticker-item" key={i}>
            <span className="logo-mark"><img src={it.src} alt="" /></span>
            <span>{it.label}</span>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { NavBar, Hero, Ticker });