// app.jsx — assemble + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "kitVariant": "knolling",
  "accent": "teal",
  "dark": false
}/*EDITMODE-END*/;

const HEADLINES = {
  A: "Know what's hiding\nin your home.",
  B: "Environmental testing,\nsimplified.",
  C: "Professional lab testing\nfor the spaces you live in.",
};

const ACCENTS = {
  teal:  { teal: "#2AB3B1", deep: "#1F8F8D", tint: "#E9F8F6" },
  sage:  { teal: "#6EA887", deep: "#4F8E6A", tint: "#EEF5F0" },
  ink:   { teal: "#3B6CD9", deep: "#2C53AE", tint: "#EAF0FB" },
  clay:  { teal: "#C36F4A", deep: "#A35637", tint: "#FAEEE7" },
};

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

  // Apply theme + accent at the document level
  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.dark ? "dark" : "light";
    const a = ACCENTS[t.accent] || ACCENTS.teal;
    root.style.setProperty('--teal', a.teal);
    root.style.setProperty('--teal-deep', a.deep);
    root.style.setProperty('--teal-tint', a.tint);
  }, [t.dark, t.accent]);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero headline={HEADLINES[t.headline]} kitVariant={t.kitVariant}/>
        <HowItWorks/>
        <WhatWeTest/>
        <Trust/>
        <ReportPreview/>
        <FAQ/>
        <FinalCTA/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero"/>
        <TweakRadio
          label="Headline"
          value={t.headline}
          options={[
            { value: 'A', label: 'A' },
            { value: 'B', label: 'B' },
            { value: 'C', label: 'C' },
          ]}
          onChange={(v) => setTweak('headline', v)}
        />
        <TweakSelect
          label="Kit visual"
          value={t.kitVariant}
          options={[
            { value: 'knolling', label: 'Knolling — flat-lay' },
            { value: 'box',      label: 'Box — single render' },
            { value: 'abstract', label: 'Abstract — sample sphere' },
          ]}
          onChange={(v) => setTweak('kitVariant', v)}
        />

        <TweakSection label="Theme"/>
        <TweakColor
          label="Accent"
          value={ACCENTS[t.accent].teal}
          options={[ACCENTS.teal.teal, ACCENTS.sage.teal, ACCENTS.ink.teal, ACCENTS.clay.teal]}
          onChange={(v) => {
            const key = Object.keys(ACCENTS).find(k => ACCENTS[k].teal === v) || 'teal';
            setTweak('accent', key);
          }}
        />
        <TweakToggle
          label="Dark mode"
          value={t.dark}
          onChange={(v) => setTweak('dark', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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