// app.jsx — teaser root: tweaks, theme application, section assembly.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#CF9647",
  "paper": 0.22,
  "launchDate": "2026-08-15",
  "followers": "50,000+",
  "headline": "शब्दों का एक घर बन रहा है",
  "subheading": "Art of Hindi Poets is becoming an app. A poem every morning, and a quiet place to keep the ones you love."
}/*EDITMODE-END*/;

const ACCENTS = ["#CF9647", "#B8862F", "#C56B3C", "#A88B4A"];

function accentDark(hex) {
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r * 0.78); g = Math.round(g * 0.74); b = Math.round(b * 0.6);
  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.getElementById("root");
    if (!root) return;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-strong", accentDark(t.accent));
    root.style.setProperty("--paper-opacity", String(t.paper));
  }, [t.accent, t.paper]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero headline={t.headline} subheading={t.subheading} launchDate={t.launchDate} />
        <Coming />
        <SherMoment />
        <SocialFollow />
        <FinalCTA followers={t.followers} launchDate={t.launchDate} />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Launch" />
        <TweakText label="Launch date (YYYY-MM-DD)" value={t.launchDate} onChange={(v) => setTweak("launchDate", v)} />
        <TweakText label="Follower count" value={t.followers} onChange={(v) => setTweak("followers", v)} />
        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.headline} onChange={(v) => setTweak("headline", v)} />
        <TweakText label="Subheading" value={t.subheading} onChange={(v) => setTweak("subheading", v)} />
        <TweakSection label="Look" />
        <TweakColor label="Accent gold" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakSlider label="Paper texture" value={t.paper} min={0} max={0.5} step={0.02} onChange={(v) => setTweak("paper", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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