/* Systemiz site — main app composition */

const { useState, useEffect, useRef } = React;

// ================= NAV =================
function NavBar({ onBook, ctaCopy = "Book a Free AI OS Audit" }) {
  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">Demo</a>
          <a href="#layers">AIOS Test</a>
          <a href="#roadmap">Service</a>
          <a href="#faq">FAQ</a>
        </div>
        <button className="nav-cta" onClick={onBook}>{ctaCopy}</button>
      </nav>
      <div className="hairline"></div>
    </div>);

}

// ================= HERO =================
function Hero({ onBook, headline, ctaCopy = "Book a Free AI OS Audit" }) {
  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>
          Cognitive freedom for founders
        </div>
        <h1 data-comment-anchor="59e6cca058-h1-39-9">
          {headline === "outcome" &&
          <>Your <span className="accent">Founder 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">
          Build an <strong>AI Operating System</strong> with <strong>Notion &amp; Claude</strong> for your business, that organizes your data & knowledge in one place, gives you visibility on your team, and allows you to <strong>run your business from your phone</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>
          <a href="#workspace-demo" className="btn btn-ghost">See what we'll build

          </a>
        </div>
        <div className="hero-meta">
          <span><span className="dot-red"></span>30-day sprint</span>
          <span><span className="dot-red"></span>Notion + Claude</span>
          <span><span className="dot-red" style={{ width: "4px" }}></span>Team adoption</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 });