// App shell — ties all sections together

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "olive"
}/*EDITMODE-END*/;

const App = () => {
  const [active, setActive] = React.useState('hero');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', tweaks.palette);
  }, [tweaks.palette]);

  React.useEffect(() => {
    const sections = ['hero', 'plan', 'rsvp', 'recipes', 'dances', 'music', 'gallery'];
    const onScroll = () => {
      const y = window.scrollY + 200;
      for (let i = sections.length - 1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.offsetTop <= y) { setActive(sections[i]); break; }
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <>
      <nav className="nav">
        <div className="nav-mark">N <span>&amp;</span> S</div>
        <div className="nav-links">
          <a className={`nav-link ${active === 'hero' ? 'active' : ''}`} onClick={() => scrollTo('hero')}>Home</a>
          <a className={`nav-link ${active === 'rsvp' ? 'active' : ''}`} onClick={() => scrollTo('rsvp')}>RSVP</a>
          <a className={`nav-link ${active === 'plan' ? 'active' : ''}`} onClick={() => scrollTo('plan')}>Trip Planner</a>
          <a className={`nav-link ${active === 'recipes' ? 'active' : ''}`} onClick={() => scrollTo('recipes')}>Recipes</a>
          <a className={`nav-link ${active === 'dances' ? 'active' : ''}`} onClick={() => scrollTo('dances')}>Dances</a>
          <a className={`nav-link ${active === 'music' ? 'active' : ''}`} onClick={() => scrollTo('music')}>Music</a>
          <a className={`nav-link ${active === 'gallery' ? 'active' : ''}`} onClick={() => scrollTo('gallery')}>Gallery</a>
        </div>
        <div className="nav-date">28 · 08 · 2026</div>
      </nav>

      <div className="bg-orb bg-orb-2" />
      <OliveDeco />

      <video
        className="bg-video"
        autoPlay muted loop playsInline
        src="assets/olive-branch.mp4"
        style={{
          position: 'fixed', top: 0, right: 0, width: '38vw', height: '100vh',
          objectFit: 'cover', opacity: 0.18, zIndex: 0, pointerEvents: 'none',
          maskImage: 'linear-gradient(to left, black 30%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to left, black 30%, transparent 100%)',
        }}
      />

      <main>
        <Hero scrollTo={scrollTo} />
        <RSVPForm />
        <Plan />
        <Recipes />
        <Dances />
        <Music />
        <Gallery />
      </main>

      <footer className="site-foot">
        <div className="foot-mark">
          <div className="serif">Nicholas <span className="amp">&amp;</span> Shanthi</div>
          <p className="foot-tagline">Three days of olive groves, vineyards, and the Gulf of Patras — 28 August 2026.</p>
        </div>
        <div className="foot-col">
          <h4>Venue</h4>
          <a href="https://www.ktimapanagiotopoulou.gr/" target="_blank" rel="noopener noreferrer">Ktima Panagiotopoulou</a>
          <a href="https://www.google.com/maps/search/?api=1&query=Palea+EO+Korinthou+Patron%2C+Lampiri+250+09%2C+Greece" target="_blank" rel="noopener noreferrer">Palea EO Korinthou Patron, Lampiri 250 09</a>
          <a href="https://www.google.com/maps/dir/?api=1&destination=Palea+EO+Korinthou+Patron%2C+Lampiri+250+09%2C+Greece" target="_blank" rel="noopener noreferrer">Directions →</a>
        </div>
        <div className="foot-col">
          <h4>Contact</h4>
          <a href="mailto:shanthiandnicholas@gmail.com">shanthiandnicholas@gmail.com</a>
          <a href="tel:+18196404052">+1 819-640-4052</a>
        </div>
        <div className="foot-bottom">
          <span>Καλώς ορίσατε · أهلاً · ਜੀ ਆਇਆਂ ਨੂੰ · Bienvenue</span>
          <span>Built with love · MMXXVI</span>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color palette" subtitle="Which Peloponnese tone leads">
          <TweakRadio
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'olive', label: 'Olive' },
              { value: 'terracotta', label: 'Terracotta' },
              { value: 'aegean', label: 'Aegean' },
              { value: 'ochre', label: 'Ochre' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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