// Kinō — landing page app + tweaks
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "headlineVariant": "begin",
  "finalCtaVariant": "ready",
  "showTopNav": true,
  "showChrome": true
}/*EDITMODE-END*/;

const ACCENTS = {
  gold: GOLD,
  jade: JADE,
  ink: INK,
};

const HEADLINES = {
  begin: {
    before: "You don't need another app.",
    italic: "You need somewhere to begin.",
    after: "",
    sub: "Kinō is a thoughtful fitness companion for adults who are starting again or starting at all. A plan built around your life, not the other way around.",
  },
  permission: {
    before: "Permission to start small,",
    italic: "and stay there a while.",
    after: "",
    sub: "Kinō is a calm, intelligent fitness guide for adults who've tried, quit, and are ready to try once more — gently, and on their own terms.",
  },
  enough: {
    before: "Twenty quiet minutes",
    italic: "is enough to begin.",
    after: "",
    sub: "Kinō is a fitness app for the rest of us. A short survey, a plan that fits, and someone steady in your ear — explaining as you go.",
  },
};

const FINAL_LINES = {
  ready: "When you're ready, we'll be here.",
  first: "Be among the first to begin.",
  quiet: "A quieter way to start. We'll let you know.",
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENTS[tweaks.accent] || GOLD;
  const headline = HEADLINES[tweaks.headlineVariant] || HEADLINES.begin;
  const finalLine = FINAL_LINES[tweaks.finalCtaVariant] || FINAL_LINES.ready;

  return (
    <div style={{ background: PAPER, color: INK, minHeight: "100vh" }}>
      {/* Subtle paper grain */}
      <div
        aria-hidden
        style={{
          position: "fixed", inset: 0, pointerEvents: "none", zIndex: 0,
          backgroundImage:
            "radial-gradient(1200px 700px at 80% -10%, rgba(184,146,74,0.06), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(74,107,92,0.05), transparent 60%)",
        }}
      />
      <ScrollProgress accent={accent} />
      {tweaks.showChrome && <Spine accent={accent} />}
      <div className="kino-container" style={{ position: "relative", zIndex: 1, maxWidth: 1180, margin: "0 auto", padding: "0 40px" }}>
        {tweaks.showChrome && <Marginalia accent={accent} />}
        {tweaks.showChrome && <LeftMargin accent={accent} />}
        {tweaks.showTopNav && <TopNav />}
        <main data-screen-label="Landing">
          <Hero headline={headline} subhead={headline.sub} accent={accent} />
          <Solution accent={accent} />
          <FinalCTA accent={accent} line={finalLine} />
          <Footer />
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold", label: "Gold" },
              { value: "jade", label: "Jade" },
              { value: "ink",  label: "Ink" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Hero headline">
          <TweakSelect
            value={tweaks.headlineVariant}
            onChange={(v) => setTweak("headlineVariant", v)}
            options={[
              { value: "begin",      label: "Somewhere to begin" },
              { value: "permission", label: "Permission to start small" },
              { value: "enough",     label: "Twenty quiet minutes" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Final CTA line">
          <TweakSelect
            value={tweaks.finalCtaVariant}
            onChange={(v) => setTweak("finalCtaVariant", v)}
            options={[
              { value: "ready", label: "When you're ready" },
              { value: "first", label: "Be among the first" },
              { value: "quiet", label: "A quieter way to start" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Top navigation">
          <TweakToggle
            checked={tweaks.showTopNav}
            onChange={(v) => setTweak("showTopNav", v)}
            label={tweaks.showTopNav ? "Visible" : "Hidden"}
          />
        </TweakSection>

        <TweakSection label="Editorial chrome (≥1280px)">
          <TweakToggle
            checked={tweaks.showChrome}
            onChange={(v) => setTweak("showChrome", v)}
            label={tweaks.showChrome ? "Spine + numerals + margins" : "Off"}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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