// app.jsx — ACE Adaptive Coaching Engine — single-screen beta waitlist landing

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4ff3a",
  "dark": true,
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENTS = ["#d4ff3a", "#ff5a2e", "#66c7ff", "#c8a868"];
const WAITLIST_COUNT = 2417;

// ── Nav ─────────────────────────────────────────────────────────────────────
function Nav({ onJoinClick }) {
  return (
    <nav className="nav">
      <a className="logo" href="#">
        <span className="logo-mark">A</span>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span className="logo-name">ACE</span>
          <span className="logo-sub">adaptive coaching engine</span>
        </div>
      </a>
      <div className="nav-links">
        <a href="#capabilities">Capabilities</a>
        <a href="#integrations">Integrations</a>
      </div>
      <div className="nav-cta">
        <span className="mono" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.06em" }}>
          <span style={{ color: "var(--accent)" }}>●</span> PRIVATE BETA
        </span>
        <button className="btn btn-primary" onClick={onJoinClick}>
          Join waitlist
        </button>
      </div>
    </nav>
  );
}

// ── Waitlist form ───────────────────────────────────────────────────────────
function WaitlistForm() {
  const [email, setEmail] = useStateApp("");
  const [sport, setSport] = useStateApp("cycling");
  const [submitted, setSubmitted] = useStateApp(false);
  const [position, setPosition] = useStateApp(null);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setPosition(WAITLIST_COUNT + Math.floor(Math.random() * 30) + 1);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="waitlist-success">
        <div className="ws-check">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
            <path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div>
          <div className="ws-title">You're in. Position <b>#{position.toLocaleString()}</b></div>
          <div className="ws-sub">We'll email <b>{email}</b> when your spot opens.</div>
        </div>
      </div>
    );
  }

  return (
    <form id="hero-form" className="waitlist" onSubmit={onSubmit}>
      <div className="wl-fields">
        <label className="wl-field">
          <span className="wl-lbl">Email</span>
          <input type="email" placeholder="you@your-team.cc"
            value={email} onChange={(e) => setEmail(e.target.value)} required />
        </label>
        <label className="wl-field wl-field-role">
          <span className="wl-lbl">I train for</span>
          <select value={sport} onChange={(e) => setSport(e.target.value)}>
            <option value="cycling">Cycling</option>
            <option value="running">Running</option>
            <option value="triathlon">Triathlon</option>
          </select>
        </label>
        <button type="submit" className="btn btn-primary wl-submit">
          Reserve spot →
        </button>
      </div>
      <div className="wl-foot mono">
        <span>No card.</span>
        <span>Your data stays yours.</span>
        <span>Unsubscribe anytime.</span>
      </div>
    </form>
  );
}

// ── Beta status panel ───────────────────────────────────────────────────────
function BetaPanel() {
  const milestones = [
    { date: "Mar 2026", label: "Closed alpha",            state: "done" },
    { date: "May 2026", label: "Private beta · cohort 1", state: "active" },
    { date: "Jul 2026", label: "Private beta · cohort 2", state: "next" },
    { date: "Q3 2026",  label: "Public launch",           state: "future" }
  ];
  return (
    <div className="beta-panel">
      <div className="bp-head">
        <div>
          <span className="eyebrow" style={{ marginBottom: 4 }}>WAITLIST</span>
          <div className="bp-count mono">{WAITLIST_COUNT.toLocaleString()}</div>
          <div className="bp-count-lbl">riders waiting · <b>+184</b> this week</div>
        </div>
        <div className="bp-pulse" aria-hidden>
          <span></span><span></span><span></span>
        </div>
      </div>

      <div className="bp-progress">
        <div className="bp-progress-lbl mono">
          <span>cohort 1 invites</span>
          <span>342 / 500</span>
        </div>
        <div className="bp-progress-bar">
          <div className="bp-progress-fill" style={{ width: "68%" }}></div>
        </div>
      </div>

      <div className="bp-timeline" id="roadmap">
        {milestones.map((m, i) => (
          <div key={i} className={"bp-tl-row bp-tl-" + m.state}>
            <span className="bp-tl-dot" />
            <span className="bp-tl-date mono">{m.date}</span>
            <span className="bp-tl-name">{m.label}</span>
            {m.state === "active" && <span className="bp-tl-tag mono">NOW</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Bottom strip: capabilities + integrations ───────────────────────────────
function BottomStrip() {
  const caps = [
    { tag: "Adaptive",  line: "Training plan adapts automatically" },
    { tag: "AI",        line: "AI-driven plan generation" },
    { tag: "Compliance", line: "Daily compliance reports" },
    { tag: "Nutrition", line: "Nutrition planning" },
    { tag: "Power",     line: "Know every watt you produce" }
  ];
  const logos = ["Intervals.icu", "Garmin", "Whoop", "Strava", "Wahoo", "TrainingPeaks"];
  return (
    <div className="strip">
      <div id="capabilities" className="strip-caps">
        <span className="strip-label mono">CAPABILITIES</span>
        <div className="strip-caps-row">
          {caps.map((c) => (
            <div className="strip-cap" key={c.tag}>
              <span className="strip-cap-tag mono">{c.tag}</span>
              <span className="strip-cap-line">{c.line}</span>
            </div>
          ))}
        </div>
      </div>
      <div id="integrations" className="strip-int">
        <span className="strip-label mono">DIRECT INTEGRATIONS</span>
        <div className="strip-logos">
          {logos.map((l) => (
            <span className="int-logo" key={l}>
              <span className="dot" />
              {l}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Tweaks ──────────────────────────────────────────────────────────────────
function applyTheme(t) {
  document.body.dataset.mode = t.dark ? "dark" : "light";
  document.body.dataset.density = t.density;
  document.documentElement.style.setProperty("--accent", t.accent);
  const ink = (t.accent === "#d4ff3a" || t.accent === "#c8a868" || t.accent === "#66c7ff")
    ? "#0b0b0c"
    : "#ffffff";
  document.documentElement.style.setProperty("--accent-ink", ink);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffectApp(() => { applyTheme(t); }, [t]);

  const focusHero = () => {
    const el = document.querySelector('#hero-form input[type="email"]');
    if (el) el.focus();
  };

  return (
    <div className="page" data-screen-label="01 Landing">
      <Nav onJoinClick={focusHero} />
      <main className="stage">
        <HeroTrace />
        <div className="stage-grid stage-grid-solo">
          <div className="stage-left">
            <span className="eyebrow">PRIVATE BETA</span>
            <h1 className="stage-h1">
              The coach that follows<br />
              your body and knows <em>every watt.</em>
            </h1>
            <p className="stage-lede">
              ACE is an innovative AI-powered coaching engine for cyclists, runners, and triathletes.
              Science-based workouts, not guesswork.
              Direct integrations with Intervals.icu, Garmin, and Whoop.
            </p>
            <p className="stage-lede" style={{ marginTop: -6 }}>
              Join the waitlist for early access.
            </p>
            <WaitlistForm />
          </div>
        </div>
        <BottomStrip />
      </main>
      <footer className="foot">
        <span>© 2026 ACE Performance Labs · Poznań, Poland · beta</span>
        <div className="foot-links">
          <a href="privacy.html">Privacy Policy</a>
          <a href="terms.html">Terms of Service</a>
          <a href="#"><span style={{ color: "var(--accent)" }}>●</span> beta · operational</a>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Dark mode" value={t.dark}
          onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "regular", "airy"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

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