// Shared UI: nav, browser chrome, hero badge, countdown, and helpers
const { useState, useEffect, useRef, useMemo } = React;

const NAV = [
{ key: 'home', label: 'Accueil' },
{ key: 'rsvp', label: 'Inscription' },
{ key: 'food', label: 'Repas' },
{ key: 'photos', label: 'Photos' },
{ key: 'schedule', label: 'Programme' },
{ key: 'kids', label: 'Enfants' },
{ key: 'volunteers', label: 'Bénévoles' },
{ key: 'faq', label: 'FAQ' },
{ key: 'announcements', label: 'Annonces' }];

const REAL_BBQ_2025 = [
{ src: 'assets/real/bbq-2025-21.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-33.jpg', label: 'Maîtres du grill' },
{ src: 'assets/real/bbq-2025-32.jpg', label: 'Au grill' },
{ src: 'assets/real/bbq-2025-31.jpg', label: 'Grillades' },
{ src: 'assets/real/bbq-2025-29.jpg', label: 'Sur le barbecue' },
{ src: 'assets/real/bbq-2025-03.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-04.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-06.jpg', label: 'Au barbecue' },
{ src: 'assets/real/bbq-2025-07.jpg', label: 'Famille au jardin' },
{ src: 'assets/real/bbq-2025-08.jpg', label: 'Maison & terrasse' },
{ src: 'assets/real/bbq-2025-09.jpg', label: 'Table familiale' },
{ src: 'assets/real/bbq-2025-10.jpg', label: 'Moment BBQ' },
{ src: 'assets/real/bbq-2025-11.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-12.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-13.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-14.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-30.jpg', label: 'Mikaté' },
{ src: 'assets/real/bbq-2025-01.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-15.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-16.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-17.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-18.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-19.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-20.jpg', label: 'Souvenir 2025' },
{ src: 'assets/real/bbq-2025-22.jpg', label: 'Autour du grill' },
{ src: 'assets/real/bbq-2025-23.jpg', label: 'Côté terrasse' },
{ src: 'assets/real/bbq-2025-24.jpg', label: 'Autour de la table' },
{ src: 'assets/real/bbq-2025-25.jpg', label: 'BBQ en famille' },
{ src: 'assets/real/bbq-2025-26.jpg', label: 'Fin de journée' },
{ src: 'assets/real/bbq-2025-27.jpg', label: 'Sourires du BBQ' },
{ src: 'assets/real/bbq-2025-28.jpg', label: 'Souvenir 2025' }];

const REAL_EVENT_HERO_BY_KIND = {
warm: 'assets/real/bbq-2025-06.jpg',
green: 'assets/real/bbq-2025-07.jpg',
dusk: 'assets/real/bbq-2025-26.jpg',
lights: 'assets/real/bbq-2025-21.jpg',
water: 'assets/real/bbq-2025-09.jpg',
sun: 'assets/real/bbq-2025-10.jpg',
rain: 'assets/real/bbq-2025-08.jpg' };

const REAL_EVENT_DETAIL_PHOTOS = [
'assets/real/bbq-2025-11.jpg',
'assets/real/bbq-2025-12.jpg',
'assets/real/bbq-2025-13.jpg',
'assets/real/bbq-2025-14.jpg',
'assets/real/bbq-2025-15.jpg',
'assets/real/bbq-2025-16.jpg'];


function TopNav({ page, setPage, currentUserName, onLogout }) {
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const userMenuRef = useRef(null);

  useEffect(() => {
    if (!userMenuOpen) return undefined;
    const closeUserMenu = (event) => {
      if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
        setUserMenuOpen(false);
      }
    };
    const closeOnEscape = (event) => {
      if (event.key === 'Escape') setUserMenuOpen(false);
    };
    document.addEventListener('mousedown', closeUserMenu);
    document.addEventListener('keydown', closeOnEscape);
    return () => {
      document.removeEventListener('mousedown', closeUserMenu);
      document.removeEventListener('keydown', closeOnEscape);
    };
  }, [userMenuOpen]);

  return (
    <header style={{
      background: 'var(--green-900)',
      color: 'var(--cream)',
      padding: '14px 28px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      borderBottom: '1px solid rgba(212,168,87,0.15)'
    }}>
      <button
        onClick={() => setPage('home')}
        style={{
          background: 'none', border: 0, color: 'var(--cream)',
          fontFamily: 'DM Serif Display, serif', fontStyle: 'italic',
          fontSize: 22, cursor: 'pointer', padding: 0
        }}>
        
        Famille <span style={{ color: 'var(--gold)' }}>BBQ 2026</span>
      </button>
      <nav style={{ display: 'flex', gap: 4 }}>
        {NAV.map((n) =>
        <button
          key={n.key}
          onClick={() => setPage(n.key)}
          style={{
            background: 'none',
            border: 0,
            color: page === n.key ? 'var(--gold)' : 'var(--cream)',
            padding: '6px 12px',
            fontSize: 13,
            fontWeight: 500,
            cursor: 'pointer',
            borderBottom: page === n.key ? '2px solid var(--gold)' : '2px solid transparent',
            borderRadius: 0,
            transition: 'all 0.15s'
          }}>
          
            {n.label}
          </button>
        )}
      </nav>
      {currentUserName && (
        <div ref={userMenuRef} style={{ position: 'relative', marginLeft: 8 }}>
          <div style={{ border: '1px solid rgba(212,168,87,0.28)', borderRadius: 999, padding: '5px 10px', fontSize: 12, color: 'var(--cream)', background: 'rgba(255,255,255,0.06)' }}>
            Connecté :{' '}
            <button
              type="button"
              aria-haspopup="menu"
              aria-expanded={userMenuOpen}
              onClick={() => setUserMenuOpen((open) => !open)}
              style={{
                background: 'none',
                border: 0,
                color: 'var(--gold)',
                cursor: 'pointer',
                fontSize: 12,
                fontWeight: 800,
                padding: 0
              }}>
              {currentUserName}
            </button>
          </div>
          {userMenuOpen && (
            <div
              role="menu"
              style={{
                position: 'absolute',
                right: 0,
                top: 'calc(100% + 8px)',
                minWidth: 126,
                background: 'var(--cream)',
                border: '1px solid rgba(14,46,34,0.16)',
                borderRadius: 8,
                boxShadow: '0 12px 28px rgba(0,0,0,0.18)',
                padding: 6,
                zIndex: 30
              }}>
              <button
                type="button"
                role="menuitem"
                onClick={() => {
                  setUserMenuOpen(false);
                  onLogout();
                }}
                style={{
                  width: '100%',
                  border: 0,
                  borderRadius: 6,
                  background: 'transparent',
                  color: 'var(--green-900)',
                  cursor: 'pointer',
                  fontSize: 13,
                  fontWeight: 800,
                  padding: '9px 10px',
                  textAlign: 'left'
                }}>
                Se déconnecter
              </button>
            </div>
          )}
        </div>
      )}
    </header>);

}

function BrowserChrome({ children, url = 'BBQnaBiso.com' }) {
  return (
    <div className="chrome">
      <div className="chrome-bar">
        <span className="chrome-dot r"></span>
        <span className="chrome-dot y"></span>
        <span className="chrome-dot g"></span>
        <span className="chrome-url">🔒 {url}</span>
      </div>
      {children}
    </div>);

}

function Leaves({ text = "Une famille. Mille histoires. Une tradition qui grandit." }) {
  return (
    <div className="leaves">
      <span className="heart">❦</span>
      {text}
      <span className="heart">❦</span>
    </div>);

}

// Countdown to the BBQ start time.
function useCountdown(target) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const ms = Math.max(0, target - now);
  const days = Math.floor(ms / 86400000);
  const hrs = Math.floor(ms % 86400000 / 3600000);
  const mins = Math.floor(ms % 3600000 / 60000);
  const secs = Math.floor(ms % 60000 / 1000);
  return { days, hrs, mins, secs };
}

const BBQ_TARGET = new Date(BBQ_EVENT.dateISO).getTime();

function CountdownBar({ currentUserName = '' }) {
  const { days, hrs, mins, secs } = useCountdown(BBQ_TARGET);
  const name = currentUserName.trim();
  const pad = (n) => String(n).padStart(2, '0');
  const items = [
  { n: days, u: 'Jours' },
  { n: pad(hrs), u: 'Heures' },
  { n: pad(mins), u: 'Min' },
  { n: pad(secs), u: 'Sec' }];

  return (
    <div className="countdown">
      <div className="cd-label">Compte à rebours<br />BBQ 2026</div>
      {name && (
        <div className="cd-greeting">
          <span className="cd-greeting-icon"><Icon.Wave s={18} /></span>
          <span>Mbote, <strong>{name}</strong></span>
        </div>
      )}
      <div className="cd-timer">
        {items.map((it, i) =>
        <div key={i} className="cd-item">
            <div className="cd-num">{it.n}</div>
            <div className="cd-unit">{it.u}</div>
          </div>
        )}
      </div>
    </div>);

}

// Toast hook
function useToast() {
  const [msg, setMsg] = useState(null);
  const show = (m) => {
    setMsg(m);
    setTimeout(() => setMsg(null), 2400);
  };
  const node = msg ? <div className="toast"><Icon.Check s={14} /> {msg}</div> : null;
  return [node, show];
}

// Photo card: generated themed images by default, real BBQ photos when `src` is provided.
function Photo({ kind = 'warm', label, src, style = {}, className = '', bg = false }) {
  return (
    <div className={`ph ${kind}${src ? ' real' : ''} ${className}`} style={style}>
      {src && <img src={src} alt="" aria-hidden="true" decoding="async" />}
      {label && !bg && <span>{label}</span>}
    </div>);

}

// Number stepper (used for adults/kids count)
function Stepper({ value, onChange, min = 0, max = 30 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 0, border: '1px solid var(--line)', borderRadius: 8, background: 'white', overflow: 'hidden' }}>
      <button onClick={() => onChange(Math.max(min, value - 1))} style={{ background: 'transparent', border: 0, padding: '8px 12px', color: 'var(--green-800)' }}>
        <Icon.Minus />
      </button>
      <div style={{ minWidth: 36, textAlign: 'center', fontWeight: 600, fontSize: 15 }}>{value}</div>
      <button onClick={() => onChange(Math.min(max, value + 1))} style={{ background: 'transparent', border: 0, padding: '8px 12px', color: 'var(--green-800)' }}>
        <Icon.Plus />
      </button>
    </div>);

}

// Section heading
function H2({ children, kicker }) {
  return (
    <div style={{ marginBottom: 16 }}>
      {kicker && <div style={{ fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--coral)', marginBottom: 6 }}>{kicker}</div>}
      <h2 className="serif" style={{ fontSize: 30, margin: 0, color: 'var(--green-900)' }}>{children}</h2>
    </div>);

}

window.TopNav = TopNav;
window.BrowserChrome = BrowserChrome;
window.Leaves = Leaves;
window.CountdownBar = CountdownBar;
window.useToast = useToast;
window.Photo = Photo;
window.Stepper = Stepper;
window.H2 = H2;
window.BBQ_TARGET = BBQ_TARGET;
window.REAL_BBQ_2025 = REAL_BBQ_2025;
window.REAL_EVENT_HERO_BY_KIND = REAL_EVENT_HERO_BY_KIND;
window.REAL_EVENT_DETAIL_PHOTOS = REAL_EVENT_DETAIL_PHOTOS;