/* global React, ReactDOM, Hero, Story, Ceremony, Schedule, Venue, DressCode, Entourage, Gallery, Lightbox, FAQ, RSVP, Playlist, Gifts, MusicPlayer, TweaksPanel, TweakSection, TweakRadio, TweakColor, useTweaks */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "cinematic",
  "accent": "#d4a85a",
  "showCountdown": true,
  "showDecor": true,
  "wallStyle": "pill",
  "wallUnlockPreview": false
} /*EDITMODE-END*/;

const wallStyles = [
{ value: 'pill', label: 'Pill' },
{ value: 'banner', label: 'Banner' },
{ value: 'seal', label: 'Seal' }];


const directions = [
{ value: 'editorial', label: 'Editorial' },
{ value: 'cinematic', label: 'Cinematic' },
{ value: 'botanical', label: 'Botanical' }];

const accentOptions = {
  editorial: ['#b08a4a', '#3d0000', '#586357'],
  cinematic: ['#d4a85a', '#b08a4a', '#7d2233'],
  botanical: ['#7d2233', '#b08a4a', '#3d0000']
};

function Nav({ active, sections, onJump, brand }) {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <>
      <nav className="nav">
        <div className="nav-mono">
          <span>J</span><i style={{ margin: '0 4px' }}>&amp;</i><span>D</span>
        </div>
        <div className="nav-links">
          {sections.map((s) =>
          <a key={s.id} href={`#${s.id}`} onClick={(e) => {e.preventDefault();onJump(s.id);}}
          className={active === s.id ? 'active' : ''}>{s.label}</a>
          )}
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="nav-cta nav-cta-gift" onClick={() => onJump('gifts')}>Gifts</button>
          <button className="nav-cta" onClick={() => onJump('rsvp')}>RSVP</button>
          <button className="nav-burger" onClick={() => setMobileOpen(true)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </nav>
      <div className={`mobile-menu ${mobileOpen ? '' : 'closed'}`}>
        <button className="close" onClick={() => setMobileOpen(false)}>Close ×</button>
        {sections.map((s) =>
        <a key={s.id} href={`#${s.id}`} onClick={(e) => {
          e.preventDefault();setMobileOpen(false);onJump(s.id);
        }}>{s.label}</a>
        )}
      </div>
    </>);

}

function Footer() {
  return (
    <footer className="site-foot">
      <div className="mono">Jhon Carlo <i>&amp;</i> Diane Joy</div>
      <div className="meta">June 28 · 2026  ·  Kidapawan City  ·  with love</div>
    </footer>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lightbox, setLightbox] = useState(null);
  const [active, setActive] = useState('home');
  const scrollerRef = useRef(null);

  // apply theme
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.direction);
    if (t.accent) document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.direction, t.accent]);

  const sections = [
  { id: 'home', label: 'Home' },
  { id: 'story', label: 'Story' },
  { id: 'schedule', label: 'Schedule' },
  { id: 'ceremony', label: 'Ceremony' },
  { id: 'venue', label: 'Venue' },
  { id: 'attire', label: 'Attire' },
  { id: 'entourage', label: 'Entourage' },
  { id: 'gallery', label: 'Gallery' },
  { id: 'faq', label: 'FAQ' },
  { id: 'rsvp', label: 'RSVP' },
  { id: 'gifts', label: 'Gifts' }];


  const R = typeof window !== 'undefined' && window.__resources || {};
  const galleryPhotos = [
  { src: R.g01 || 'images/g01.jpg', cls: 'g-w8 ar-32' },
  { src: R.g02 || 'images/g02.jpg', cls: 'g-w4 ar-34' },
  { src: R.g03 || 'images/g03.jpg', cls: 'g-w6 ar-32' },
  { src: R.g04 || 'images/g04.jpg', cls: 'g-w6 ar-32' },
  { src: R.g05 || 'images/g05.jpg', cls: 'g-w4 ar-11' },
  { src: R.g06 || 'images/g06.jpg', cls: 'g-w4 ar-11' },
  { src: R.g07 || 'images/g07.jpg', cls: 'g-w4 ar-11' },
  { src: R.g08 || 'images/g08.jpg', cls: 'g-w4 ar-34' },
  { src: R.g09 || 'images/g09.jpg', cls: 'g-w8 ar-32' },
  { src: R.g10 || 'images/g10.jpg', cls: 'g-w6 ar-32' },
  { src: R.g11 || 'images/g11.jpg', cls: 'g-w6 ar-32' },
  { src: R.g12 || 'images/g12.jpg', cls: 'g-w4 ar-11' },
  { src: R.g13 || 'images/g13.jpg', cls: 'g-w4 ar-11' },
  { src: R.g14 || 'images/g14.jpg', cls: 'g-w4 ar-11' },
  { src: R.g15 || 'images/g15.jpg', cls: 'g-w12 ar-52' }];


  function jump(id) {
    const el = document.getElementById(id);
    if (el && scrollerRef.current) {
      scrollerRef.current.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
    }
  }

  // Active section observer
  useEffect(() => {
    const scroller = scrollerRef.current;
    if (!scroller) return;
    function onScroll() {
      const pos = scroller.scrollTop + scroller.clientHeight * 0.4;
      let cur = sections[0].id;
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= pos) cur = s.id;
      }
      setActive(cur);
    }
    scroller.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => scroller.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div>
      <Nav active={active} sections={sections} onJump={jump} />
      <main className="shell snap-scroll" ref={scrollerRef}>
        <Hero data={{ bride: 'Jhon Carlo', groom: 'Diane Joy' }} wallStyle={t.wallStyle} wallPreview={t.wallUnlockPreview} />
        <Story />
        <Schedule />
        <Ceremony />
        <Venue />
        <DressCode />
        <Entourage />
        <Gallery onOpen={(i) => setLightbox(i)} photos={galleryPhotos} />
        <FAQ />
        <RSVP />
        <Gifts />
        <Footer />
      </main>

      {lightbox !== null &&
      <Lightbox
        idx={lightbox}
        total={galleryPhotos.length}
        photos={galleryPhotos}
        onClose={() => setLightbox(null)}
        onPrev={() => setLightbox((i) => (i - 1 + galleryPhotos.length) % galleryPhotos.length)}
        onNext={() => setLightbox((i) => (i + 1) % galleryPhotos.length)} />

      }

      <MusicPlayer />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Direction">
          <TweakRadio
            label="Visual direction"
            value={t.direction}
            options={directions}
            onChange={(v) => setTweak('direction', v)} />
          
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor
            label="Gilt accent"
            value={t.accent}
            options={accentOptions[t.direction] || accentOptions.editorial}
            onChange={(v) => setTweak('accent', v)} />
          
        </TweakSection>
        <TweakSection title="Live Wedding Wall">
          <TweakRadio
            label="Lock style"
            value={t.wallStyle}
            options={wallStyles}
            onChange={(v) => setTweak('wallStyle', v)} />
          
          <TweakToggle
            label="Preview unlocked"
            value={t.wallUnlockPreview}
            onChange={(v) => setTweak('wallUnlockPreview', v)} />
          
        </TweakSection>
        <div style={{ padding: '12px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#666', borderTop: '1px solid #2a2a2a', lineHeight: 1.6 }}>
          Three directions:<br />
          Editorial — cream + cabernet<br />
          Cinematic — mulled-wine night<br />
          Botanical — moss + cranberry
        </div>
      </TweaksPanel>
    </div>);

}

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