// App — composes the page. Includes the sticky nav, the success modal that
// appears when the user submits the hero prompt, and the Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#ff6b47", "#ffae9a", "#9c3a1f"],
  "heroVariant": "owner",
  "showStopMarker": true,
  "showLivePill": false
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  coral:  ["#ff6b47", "#ffae9a", "#9c3a1f"],   // warm coral (default)
  amber:  ["#ffb347", "#ffd9a3", "#9c6e1f"],   // soft amber
  lime:   ["#9ee649", "#d2f3a6", "#3f7a1c"],   // electric lime
  violet: ["#b07cff", "#dabfff", "#5a2fa3"],   // violet
};

function applyAccent(arr) {
  // arr[0] is the hero color we map to var(--accent); compute soft + glow + fg.
  const hero = arr[0];
  const soft = `${hero}24`;        // 14% alpha
  const glow = `${hero}59`;        // 35% alpha
  const root = document.documentElement;
  root.style.setProperty("--accent", hero);
  root.style.setProperty("--accent-soft", soft);
  root.style.setProperty("--accent-glow", glow);
  // Foreground on accent: derive a dark-on-accent for primary buttons.
  root.style.setProperty("--accent-fg", "#1a0f0a");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);
  const [showLaunch, setShowLaunch] = React.useState(null);

  React.useEffect(() => {
    applyAccent(t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handleStart = (prompt) => {
    setShowLaunch(prompt || "Build me a tool for my business.");
  };

  return (
    <>
      <Nav scrolled={scrolled} />
      <main>
        <Hero onStart={handleStart} variant={t.heroVariant} />
        <Wall />
        <CrossedOut />
        <Stack />
        <Journey />
        <Audience />
        <Mission />
        <Closing />
      </main>
      <Footer />

      {showLaunch !== null && (
        <LaunchModal prompt={showLaunch} onClose={() => setShowLaunch(null)} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Look">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={[
              ACCENT_PRESETS.coral,
              ACCENT_PRESETS.amber,
              ACCENT_PRESETS.lime,
              ACCENT_PRESETS.violet,
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSelect
            label="Headline"
            value={t.heroVariant}
            options={[
              { value: "owner",   label: "Owner — 'Stop paying rent'" },
              { value: "promise", label: "Promise — 'Keep vibing'" },
              { value: "quote",   label: "Quote — 'I built my product…'" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Live pill"
            value={t.showLivePill}
            onChange={(v) => setTweak("showLivePill", v)}
          />
        </TweakSection>
        <TweakSection label="Journey">
          <TweakToggle
            label="Show 'where others stop' marker"
            value={t.showStopMarker}
            onChange={(v) => setTweak("showStopMarker", v)}
          />
        </TweakSection>
      </TweaksPanel>

      {/* Tweak-driven CSS overrides */}
      <style>{`
        ${t.showLivePill ? "" : ".live-pill { display: none !important; }"}
        ${t.showStopMarker ? "" : ".stop-marker { display: none !important; }"}
      `}</style>
    </>
  );
}

function Nav({ scrolled }) {
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#">Templates</a>
          <a href="#">Pricing</a>
          <a href="#">Stories</a>
        </div>
        <div className="nav-cta">
          <a href="Sign In.html" className="btn btn-ghost" style={{ display: "inline-flex" }}>Sign in</a>
          <a href="Beta Signup.html" className="btn btn-primary">
            Request invite <Arrow size={12} />
          </a>
        </div>
      </div>
    </nav>
  );
}

// Modal that fires when the user submits the hero prompt. Reassures them their
// vibe will be honored — playfully sells the rest of the flow.
function LaunchModal({ prompt, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    if (step >= 4) return undefined;
    const t = setTimeout(() => setStep(step + 1), 700);
    return () => clearTimeout(t);
  }, [step]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <style>{`
        .modal-backdrop {
          position: fixed; inset: 0; z-index: 100;
          background: oklch(0.10 0.005 60 / 0.7);
          backdrop-filter: blur(8px);
          display: grid; place-items: center;
          padding: 24px;
          animation: fadein .2s ease;
        }
        @keyframes fadein { from { opacity: 0; } }
        .modal {
          position: relative;
          width: 100%; max-width: 540px;
          background: linear-gradient(180deg, oklch(0.20 0.009 60), oklch(0.17 0.008 60));
          border: 1px solid var(--hairline-2);
          border-radius: 20px;
          padding: 28px 28px 24px;
          box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.6), 0 0 60px -20px var(--accent-glow);
        }
        .modal-close {
          position: absolute; top: 14px; right: 14px;
          width: 28px; height: 28px;
          color: var(--fg-mute);
          border-radius: 6px;
        }
        .modal-close:hover { color: var(--fg); background: oklch(0.25 0.01 60); }
        .modal-eye { display: flex; align-items: center; gap: 10px; color: var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
        .modal-eye i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); animation: pulse 2s ease-out infinite; }
        .modal-title { margin-top: 12px; font-size: 24px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.15; }
        .modal-prompt { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: oklch(0.16 0.008 60); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); line-height: 1.5; }
        .modal-steps { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
        .modal-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: oklch(0.165 0.008 60); border: 1px solid var(--hairline); font-size: 14px; color: var(--fg-dim); transition: all .25s; }
        .modal-step.done { color: var(--fg); }
        .modal-step.done .check { color: var(--ok); }
        .modal-step .check { width: 18px; height: 18px; color: var(--fg-faint); flex-shrink: 0; }
        .modal-step .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid oklch(0.30 0.01 60); border-top-color: var(--accent); animation: spin .9s linear infinite; flex-shrink: 0; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .modal-foot { margin-top: 18px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.04em; }
      `}</style>

      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="modal-close" onClick={onClose}>✕</button>
        <div className="modal-eye"><i /> Vibn is on it</div>
        <h3 className="modal-title">Keep vibing — we've got the rest.</h3>
        <div className="modal-prompt">"{prompt}"</div>

        <div className="modal-steps">
          {["Drafting the screens", "Setting up logins", "Saving your stuff", "Putting it online"].map((s, i) => (
            <div key={s} className={`modal-step${i < step ? " done" : ""}`}>
              {i < step ? (
                <svg className="check" viewBox="0 0 20 20" fill="none">
                  <path d="M4 10.5 8 14.5 16 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              ) : i === step ? (
                <span className="spinner" />
              ) : (
                <svg className="check" viewBox="0 0 20 20" fill="none">
                  <circle cx="10" cy="10" r="6" stroke="currentColor" strokeWidth="1.5" />
                </svg>
              )}
              <span>{s}</span>
            </div>
          ))}
        </div>

        <div className="modal-foot">No homework · No setup · No new tools to learn</div>
      </div>
    </div>
  );
}

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