/* Systemiz site — main app composition */

const { useState, useEffect, useRef } = React;

// ================= NAV =================
function NavBar({ onBook, ctaCopy = "Join Systemizers", philosophyHref = "#philosophy", base = "", homeHref, productLabel = "Product", productHref, demoHref = "Systemiz v3 - Demo Workspace.html" }) {
  return (
    <div className="nav-wrap">
      <nav className="nav">
        <a className="nav-left" href={homeHref || (base || "#")} style={homeHref || base ? { textDecoration: "none" } : undefined}>
          <img src="assets/logo-mark.png" alt="" aria-hidden="true" />
          <span className="nav-wm">SYSTE<span className="torii">M</span>IZ</span>
        </a>
        <div className="nav-links">
          <a href={base + "#layers"}>AIOS Test</a>
          <a href={base + "#workspace-demo"}>Demo</a>
          <a href={base + "#philosophy"}>Philosophy</a>
          <a href={base + "#founding"}>Pricing</a>
        </div>
        <button className="nav-cta nav-cta-book" onClick={() => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'nav', event_label: 'book_strategy_call' }); window.openSystemizStrategyCall && window.openSystemizStrategyCall(); }}>
          <span className="nav-cta-full">Book a 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>
          16/30 FOUNDING MEMBER SPOTS LEFT.
        </div>
        <h1>
          {headline === "outcome" &&
          <>Your <span className="accent">Business</span> in <em>ONE</em><br />Notion <span className="accent">AI System</span>.</>
          }
          {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">
          Your projects, clients, money, SOPs and team in <strong>one Notion workspace</strong> instead of 10+ tools, with <strong>Claude</strong> automating work inside it. Installed in<br /><strong>30 days</strong>, the same system our agency clients pay <strong>$7,000+</strong> for.
        </p>
        <div className="hero-cta-row">
          <button className="btn btn-primary" onClick={() => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'hero', event_label: 'join_systemizers' }); if (onBook) 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>
          <button type="button" className="btn btn-book" onClick={() => { if (window.gtag) window.gtag('event', 'cta_click', { event_category: 'hero', event_label: 'book_strategy_call' }); window.openSystemizStrategyCall && window.openSystemizStrategyCall(); }}>
            Not sure? Book a call
            <i data-lucide="arrow-right"></i>
          </button>
        </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 });