// app.jsx — Fun Pizza shell + nav + Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "tomate",
  "displayFont": "bricolage",
  "heroVariant": "a",
  "showStamps": true,
  "uppercaseTitles": false,
  "deliveryStatus": "paused"
}/*EDITMODE-END*/;

const DELIVERY_MESSAGES = {
  available: null,
  paused:    { icon: "🛵", title: "Livraison en pause aujourd'hui", text: "À emporter uniquement — ouvert jusqu'à 22h30." },
  comingsoon:{ icon: "✨", title: "Livraison bientôt disponible", text: "Pour l'instant, on assure l'à emporter — ça arrive très vite." },
};

function DeliveryBanner({ status }) {
  const msg = DELIVERY_MESSAGES[status];
  if (!msg) return null;
  return (
    <div className={`fp-banner fp-banner--${status}`} role="status">
      <span className="fp-banner__icon" aria-hidden="true">{msg.icon}</span>
      <span className="fp-banner__title">{msg.title}</span>
      <span className="fp-banner__sep" aria-hidden="true">·</span>
      <span className="fp-banner__text">{msg.text}</span>
      <a className="fp-banner__link" href="tel:+33613851153">06 13 85 11 53</a>
    </div>
  );
}

const PALETTES = {
  tomate:  { ink: "#1a1410", paper: "#fdfaf3", cream: "#f6efe4", accent: "#d63a2a", deep: "#8a1f12", warm: "#e87a3e", dim: "#6b5d4f" },
  charbon: { ink: "#0e0d0c", paper: "#f3ede2", cream: "#1a1814", accent: "#e8c34a", deep: "#b69229", warm: "#e8a04a", dim: "#867a6a" },
  basilic: { ink: "#15201a", paper: "#fbf8ef", cream: "#eef0e4", accent: "#3f7a3a", deep: "#1f4f24", warm: "#d6963a", dim: "#5d6e58" },
};

const FONT_FAMILIES = {
  bricolage: '"Bricolage Grotesque", system-ui, sans-serif',
  boldonse:  '"Boldonse", "Bricolage Grotesque", system-ui, sans-serif',
  anton:     '"Anton", "Bricolage Grotesque", system-ui, sans-serif',
};

function NavBar({ page, onNav, cartCount, onCartOpen }) {
  return (
    <header className="fp-nav">
      <a className="fp-nav__brand" onClick={() => onNav('home')}>
        <span className="fp-nav__brand-mark" aria-hidden="true">
          <svg viewBox="0 0 40 40" width="32" height="32"><circle cx="20" cy="20" r="18" fill="currentColor"/><circle cx="14" cy="16" r="2" fill="var(--paper)"/><circle cx="24" cy="14" r="1.5" fill="var(--paper)"/><circle cx="22" cy="24" r="2.5" fill="var(--paper)"/><circle cx="28" cy="22" r="1.5" fill="var(--paper)"/></svg>
        </span>
        <span className="fp-nav__brand-name">
          <b>Fun Pizza</b>
          <em>St-Gingolph · 74500</em>
        </span>
      </a>

      <nav className="fp-nav__links">
        <button className={`fp-nav__link ${page==='home'?'is-active':''}`} onClick={() => onNav('home')}>Accueil</button>
        <button className={`fp-nav__link ${page==='menu'?'is-active':''}`} onClick={() => onNav('menu')}>La carte</button>
        <a className="fp-nav__link" href="tel:+33613851153">06 13 85 11 53</a>
      </nav>

      <div className="fp-nav__cta">
        <button className="fp-btn fp-btn--primary fp-btn--sm" onClick={() => onNav('menu')}>Commander</button>
        <button className="fp-cart-btn" onClick={onCartOpen} aria-label="Panier">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h2l2.5 12h11l2-9H6"/><circle cx="9" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/></svg>
          {cartCount > 0 && <span className="fp-cart-btn__badge">{cartCount}</span>}
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="fp-foot">
      <div className="fp-foot__top">
        <div className="fp-foot__brand">
          <h3>Fun Pizza.</h3>
          <p><em>Le feu dans ta boîte.</em></p>
        </div>
        <div className="fp-foot__cols">
          <div>
            <span className="fp-eyebrow">Pizzeria</span>
            <a href="tel:+33613851153">06 13 85 11 53</a>
            <span>17 rue Nationale</span>
            <span>74500 St-Gingolph</span>
          </div>
          <div>
            <span className="fp-eyebrow">Horaires</span>
            <span>Lun → Dim</span>
            <span>11h30 — 14h</span>
            <span>17h30 — 22h30</span>
          </div>
          <div>
            <span className="fp-eyebrow">Suivre</span>
            <a href="#">Instagram</a>
            <a href="#">Facebook</a>
            <a href="#">Tripadvisor</a>
          </div>
        </div>
      </div>
      <div className="fp-foot__bottom">
        <span>© Fun Pizza 2026 — pâte au levain depuis 2019.</span>
        <span>Site refondu, pas révolutionné.</span>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useStateApp('home');
  const [cart, setCart] = useStateApp([]);
  const [cartOpen, setCartOpen] = useStateApp(false);
  const [toast, setToast] = useStateApp(null);

  useEffectApp(() => {
    const pal = PALETTES[t.palette] || PALETTES.tomate;
    const r = document.documentElement;
    Object.entries(pal).forEach(([k, v]) => r.style.setProperty(`--${k}`, v));
    r.style.setProperty('--display-font', FONT_FAMILIES[t.displayFont] || FONT_FAMILIES.bricolage);
    r.style.setProperty('--title-case', t.uppercaseTitles ? 'uppercase' : 'none');
    r.style.setProperty('--show-stamps', t.showStamps ? 'block' : 'none');
    window.fpHeroVariant = t.heroVariant;
    window.fpDeliveryStatus = t.deliveryStatus;
  }, [t]);

  // Expose nav globally so child cards/buttons can navigate
  useEffectApp(() => { window.fpGo = (p) => { setPage(p); window.scrollTo({top:0, behavior:'smooth'}); }; }, []);

  const addToCart = (item) => {
    setCart(prev => {
      const ex = prev.find(p => p.id === item.id);
      if (ex) return prev.map(p => p.id === item.id ? { ...p, qty: p.qty + 1 } : p);
      return [...prev, { ...item, qty: 1 }];
    });
    setToast(`${item.name} ajouté à la commande`);
    setTimeout(() => setToast(null), 2400);
  };

  const minus = (id) => setCart(prev => prev.flatMap(p => p.id === id ? (p.qty > 1 ? [{...p, qty: p.qty-1}] : []) : [p]));
  const plus  = (id) => setCart(prev => prev.map(p => p.id === id ? {...p, qty: p.qty+1} : p));
  const remove = (id) => setCart(prev => prev.filter(p => p.id !== id));

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  return (
    <div className="fp-app" data-page={page}>
      <DeliveryBanner status={t.deliveryStatus} />
      <NavBar page={page} onNav={setPage} cartCount={cartCount} onCartOpen={() => setCartOpen(true)} />
      {page === 'home' ? <Landing onAdd={addToCart} /> : <Menu onAdd={addToCart} />}

      <CartDrawer
        open={cartOpen}
        items={cart}
        onClose={() => setCartOpen(false)}
        onMinus={minus}
        onPlus={plus}
        onRemove={remove}
      />

      {toast && (
        <div className="fp-toast" role="status">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5L20 7"/></svg>
          {toast}
        </div>
      )}

      <TweaksPanel>
        <TweakSection label="Identité" />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={['tomate', 'charbon', 'basilic']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakRadio
          label="Police d'affichage"
          value={t.displayFont}
          options={['bricolage', 'boldonse', 'anton']}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakToggle
          label="Titres en MAJUSCULES"
          value={t.uppercaseTitles}
          onChange={(v) => setTweak('uppercaseTitles', v)}
        />
        <TweakSection label="Livraison" />
        <TweakRadio
          label="Statut de la livraison"
          value={t.deliveryStatus}
          options={['available', 'paused', 'comingsoon']}
          onChange={(v) => setTweak('deliveryStatus', v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variation du hero"
          value={t.heroVariant}
          options={['a', 'b']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakToggle
          label="Tampons décoratifs"
          value={t.showStamps}
          onChange={(v) => setTweak('showStamps', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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