// app.jsx — root, applies tweaks, mounts everything

const { useEffect: useEff2, useState: useState2 } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "headingFont": "cormorant",
  "heroLayout": "bottom",
  "brandName": "STELLARE BONIN",
  "brandSub": "OGASAWARA · EST. MMXXIV",
  "language": "ja",
  "heroImage": "assets/hero-bay.webp",
  "slideshow": true,
  "slideDuration": 6,
  "kenburns": true,
  "marquee": true,
  "stats": true,
  "sectionIndex": true
}/*EDITMODE-END*/;

const HERO_IMAGES = {
  bay:    'assets/hero-bay.webp',
  sunset: 'assets/sunset-ocean.webp',
  cliff:  'https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=2400&q=80',
  ocean:  'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2400&q=80',
  cove:   'https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=2400&q=80',
  forest: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=2400&q=80',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState2(false);
  const c = CONTENT[t.language] || CONTENT.ja;
  const palette = PALETTES[t.palette] || PALETTES.forest;
  const headingFont = HEADING_FONTS[t.headingFont] || HEADING_FONTS.cormorant;

  // Apply palette + font as CSS variables on :root
  useEff2(() => {
    const r = document.documentElement.style;
    r.setProperty('--bg', palette.bg);
    r.setProperty('--paper', palette.paper);
    r.setProperty('--ink', palette.ink);
    r.setProperty('--ink-soft', palette.inkSoft);
    r.setProperty('--ink-mute', palette.inkMute);
    r.setProperty('--line', palette.line);
    r.setProperty('--accent', palette.accent);
    r.setProperty('--accent-soft', palette.accentSoft);
    r.setProperty('--font-display', headingFont.stack);
    document.documentElement.lang = t.language;
  }, [palette, headingFont, t.language]);

  // Scroll listener for nav
  useEff2(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const brandName = t.brandName || 'STELLARE BONIN';
  const brandSub = t.brandSub || 'OGASAWARA · EST. MMXXIV';

  return (
    <React.Fragment>
      <Nav c={c} lang={t.language} setLang={(v) => setTweak('language', v)}
           brandName={brandName} brandSub={brandSub} scrolled={scrolled} />
      <Hero c={c} layout={t.heroLayout} heroImg={t.heroImage} lang={t.language}
            brandName={brandName}
            slideshowOn={t.slideshow !== false}
            slideDur={t.slideDuration || 6}
            kenburns={t.kenburns !== false}
            slides={HERO_SLIDES} />
      {t.marquee !== false && <Marquee items={c.marquee} />}
      <Concept c={c} />
      {t.stats !== false && <Stats lang={t.language} />}
      <Suites c={c} />
      <Dining c={c} />
      <Activities c={c} />
      <Access c={c} />
      <Reservation c={c} brandName={brandName} />

      {t.sectionIndex !== false && <SectionIndex lang={t.language} />}

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakText label="Hotel name" value={t.brandName} onChange={(v) => setTweak('brandName', v)} />
        <TweakText label="Sub-line" value={t.brandSub} onChange={(v) => setTweak('brandSub', v)} />

        <TweakSection label="Language" />
        <TweakRadio label="Locale" value={t.language} options={['ja', 'en']}
                    onChange={(v) => setTweak('language', v)} />

        <TweakSection label="Palette" />
        <TweakColor label="Mood"
                    value={[palette.bg, palette.ink, palette.accent]}
                    options={Object.keys(PALETTES).map(k => [PALETTES[k].bg, PALETTES[k].ink, PALETTES[k].accent])}
                    onChange={(v) => {
                      const key = Object.keys(PALETTES).find(k =>
                        PALETTES[k].bg === v[0] && PALETTES[k].ink === v[1] && PALETTES[k].accent === v[2]);
                      if (key) setTweak('palette', key);
                    }} />
        <TweakSelect label="Mood label" value={t.palette}
                     options={Object.keys(PALETTES).map(k => ({ value: k, label: PALETTES[k].label }))}
                     onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Heading font" value={t.headingFont}
                     options={Object.keys(HEADING_FONTS).map(k => ({ value: k, label: HEADING_FONTS[k].label }))}
                     onChange={(v) => setTweak('headingFont', v)} />

        <TweakSection label="Page Extras" />
        <TweakToggle label="Stats banner" value={t.stats !== false} onChange={(v) => setTweak('stats', v)} />
        <TweakToggle label="Section index" value={t.sectionIndex !== false} onChange={(v) => setTweak('sectionIndex', v)} />

        <TweakSection label="Hero" />
        <TweakToggle label="Slideshow" value={t.slideshow !== false} onChange={(v) => setTweak('slideshow', v)} />
        <TweakSlider label="Slide duration" value={t.slideDuration || 6} min={3} max={12} step={1} unit="s"
                     onChange={(v) => setTweak('slideDuration', v)} />
        <TweakToggle label="Ken Burns" value={t.kenburns !== false} onChange={(v) => setTweak('kenburns', v)} />
        <TweakToggle label="Marquee bar" value={t.marquee !== false} onChange={(v) => setTweak('marquee', v)} />
        <TweakRadio label="Layout" value={t.heroLayout}
                    options={[
                      { value: 'centered', label: 'Center' },
                      { value: 'bottom', label: 'Bottom' },
                      { value: 'split', label: 'Split' },
                    ]}
                    onChange={(v) => setTweak('heroLayout', v)} />
        <TweakSelect label="Hero image (single)" value={t.heroImage}
                     options={[
                       { value: HERO_IMAGES.bay,    label: 'Bonin bay (uploaded)' },
                       { value: HERO_IMAGES.sunset, label: 'Pacific sunset (uploaded)' },
                       { value: HERO_IMAGES.cliff,  label: 'Cliff at dusk' },
                       { value: HERO_IMAGES.ocean,  label: 'Open Pacific' },
                       { value: HERO_IMAGES.cove,   label: 'Hidden cove' },
                       { value: HERO_IMAGES.forest, label: 'Subtropical forest' },
                     ]}
                     onChange={(v) => setTweak('heroImage', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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