/* App shell — Navigation, scroll management, footer */

const NAV_LINKS = [
  { id: 'accueil',    label: 'Accueil' },
  { id: 'apropos',    label: 'À Propos' },
  { id: 'programme',  label: 'Programme' },
  { id: 'galerie',    label: 'Galerie' },
  { id: 'inscription',label: 'Inscription' },
];

/* Renamed to avoid overriding window.scrollTo globally */
function scrollToSection(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 72;
  window.scrollTo({ top, behavior: 'smooth' });
}

function Nav({ activeSection }) {
  const [scrolled,    setScrolled]    = React.useState(false);
  const [mobileOpen,  setMobileOpen]  = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navigate = (e, id) => {
    e.preventDefault();
    scrollToSection(id);
    setMobileOpen(false);
  };

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#accueil" className="nav-logo" onClick={e => navigate(e, 'accueil')}>
          <img src="uploads/logo.png" alt="" className="nav-logo-img" />
          <span className="nav-logo-text">Fête de la Fraise</span>
        </a>

        <div className="nav-links">
          {NAV_LINKS.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={`nav-link ${activeSection === l.id ? 'active' : ''}`}
              onClick={e => navigate(e, l.id)}
            >
              {l.label}
            </a>
          ))}
        </div>

        <button
          className={`nav-burger ${mobileOpen ? 'open' : ''}`}
          onClick={() => setMobileOpen(o => !o)}
          aria-label="Menu"
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className={`mobile-nav ${mobileOpen ? 'open' : ''}`}>
        {NAV_LINKS.map((l, i) => (
          <a
            key={l.id}
            href={`#${l.id}`}
            className="mobile-nav-link"
            onClick={e => navigate(e, l.id)}
            style={{ animationDelay: `${i * 0.06}s` }}
          >
            {l.label}
          </a>
        ))}
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <img src="uploads/logo.png" alt="" className="footer-logo" />
        <p className="footer-tagline">Fête de la Fraise · Édition 2026 · Ville de Skikda</p>
        <div className="footer-links">
          {NAV_LINKS.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className="footer-link"
              onClick={e => { e.preventDefault(); scrollToSection(l.id); }}
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Fête de la Fraise — Ville de Skikda. Tous droits réservés.</span>
        </div>
      </div>
    </footer>
  );
}

function IntroOverlay({ onDone }) {
  const [opacity,     setOpacity]     = React.useState(1);
  const [logoOpacity, setLogoOpacity] = React.useState(0);
  const [visible,     setVisible]     = React.useState(true);

  React.useEffect(() => {
    const t0 = setTimeout(() => setLogoOpacity(1), 100);
    const t1 = setTimeout(() => setOpacity(0),     1800);
    const t2 = setTimeout(() => { setVisible(false); onDone(); }, 2600);
    return () => { clearTimeout(t0); clearTimeout(t1); clearTimeout(t2); };
  }, []);

  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 10000,
      background: 'var(--bg-deep)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity,
      pointerEvents: opacity === 0 ? 'none' : 'auto',
      transition: 'opacity 0.8s ease',
    }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: '-60%', borderRadius: '50%',
          background: 'radial-gradient(circle, var(--gold-glow) 0%, var(--accent-glow) 40%, transparent 70%)',
          opacity: logoOpacity, transition: 'opacity 0.6s ease',
        }} />
        <img src="uploads/logo.png" alt="" style={{
          position: 'relative', width: 200, height: 200,
          objectFit: 'cover', borderRadius: '50%',
          filter: 'drop-shadow(0 0 40px var(--gold-glow))',
          opacity: logoOpacity,
          transform: logoOpacity ? 'scale(1)' : 'scale(0.8)',
          transition: 'opacity 0.6s ease, transform 0.6s ease',
        }} />
      </div>
    </div>
  );
}

function useActiveSection() {
  const [active, setActive] = React.useState('accueil');
  React.useEffect(() => {
    const ids = NAV_LINKS.map(l => l.id);
    const obs = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) { setActive(e.target.id); break; }
        }
      },
      { rootMargin: '-30% 0px -60% 0px' }
    );
    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);
  return active;
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    const accents = {
      strawberry: { main: '#e63946', glow: 'rgba(230,57,70,0.35)' },
      gold:       { main: '#c9a84c', glow: 'rgba(201,168,76,0.35)' },
      emerald:    { main: '#2d9f6f', glow: 'rgba(45,159,111,0.35)' },
    };
    const moods  = { midnight: '#070710', forest: '#060d0a', charcoal: '#0e0c0a' };
    const glows  = { subtle: 0.5, medium: 1, intense: 1.6 };
    const a = accents[tweaks.accentColor] || accents.strawberry;
    root.style.setProperty('--accent',        a.main);
    root.style.setProperty('--accent-glow',   a.glow);
    root.style.setProperty('--bg-deep',       moods[tweaks.backgroundMood] || moods.midnight);
    root.style.setProperty('--glow-intensity', glows[tweaks.glowIntensity] || 1);
  }, [tweaks]);

  return (
    <React.Fragment>
      <IntroOverlay onDone={() => {}} />
      <Nav activeSection={activeSection} />
      <main>
        <HeroSection onNavigate={scrollToSection} particleCount={tweaks.particleCount} />
        <AboutSection />
        <ProgrammeSection />
        <GallerySection />
        <RegistrationSection />
      </main>
      <Footer />
      <TweaksPanel>
        <TweakSection label="Couleurs & Ambiance">
          <TweakRadio
            label="Accent principal"
            value={tweaks.accentColor}
            options={['strawberry', 'gold', 'emerald']}
            optionLabels={['Fraise', 'Or', 'Émeraude']}
            onChange={v => setTweak('accentColor', v)}
          />
        </TweakSection>
        <TweakSection label="Ambiance">
          <TweakRadio
            label="Fond"
            value={tweaks.backgroundMood}
            options={['midnight', 'forest', 'charcoal']}
            optionLabels={['Minuit', 'Forêt', 'Charbon']}
            onChange={v => setTweak('backgroundMood', v)}
          />
        </TweakSection>
        <TweakSection label="Effets">
          <TweakRadio
            label="Intensité du halo"
            value={tweaks.glowIntensity}
            options={['subtle', 'medium', 'intense']}
            optionLabels={['Subtil', 'Moyen', 'Intense']}
            onChange={v => setTweak('glowIntensity', v)}
          />
          <TweakRadio
            label="Particules"
            value={tweaks.particleCount}
            options={['few', 'normal', 'many']}
            optionLabels={['Peu', 'Normal', 'Beaucoup']}
            onChange={v => setTweak('particleCount', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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