// KIKKA landing — top-level app + Tweaks panel

const ACCENT_PRESETS = {
  forest:   { name: "Forest",   light: "oklch(0.42 0.08 155)", soft: "oklch(0.96 0.03 155)" },
  midnight: { name: "Midnight", light: "oklch(0.40 0.09 250)", soft: "oklch(0.96 0.03 250)" },
  ember:    { name: "Ember",    light: "oklch(0.52 0.14 35)",  soft: "oklch(0.96 0.03 35)" },
  ink:      { name: "Ink",      light: "oklch(0.18 0.005 150)", soft: "oklch(0.95 0.005 150)" },
  plum:     { name: "Plum",     light: "oklch(0.40 0.10 320)", soft: "oklch(0.96 0.03 320)" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "forest",
  "font": "serif-head",
  "heroLayout": "split"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const preset = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.forest;
    document.documentElement.style.setProperty('--accent', preset.light);
    document.documentElement.style.setProperty('--accent-soft', preset.soft);
  }, [tweaks.accent]);

  React.useEffect(() => {
    document.body.dataset.font = tweaks.font;
  }, [tweaks.font]);

  React.useEffect(() => {
    document.body.dataset.hero = tweaks.heroLayout;
  }, [tweaks.heroLayout]);

  // simple scroll-reveal
  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 />
      <Hero />
      <Trust />
      <Differentiator />
      <Features />
      <Pricing />
      <Marketplaces />
      <Security />
      <Requirements />
      <FAQ />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={Object.entries(ACCENT_PRESETS).map(([k, v]) => ({ value: k, label: v.name }))}
          />
        </TweakSection>
        <TweakSection title="Japanese font">
          <TweakSelect
            value={tweaks.font}
            onChange={(v) => setTweak('font', v)}
            options={[
              { value: 'sans',       label: 'ゴシック(全体)' },
              { value: 'serif-head', label: '混植(見出し明朝)' },
              { value: 'serif',      label: '明朝(全体)' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero layout">
          <TweakRadio
            value={tweaks.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'split',    label: 'Split' },
              { value: 'centered', label: 'Centered' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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