// web/screens-v3.jsx — v3 enhancements (additions to be wired in)
// Press strip, animated counter, comparison, FAQ accordion
// Team strip (Leaderboard/Challenge fictifs supprimés — GOAL-SYNC-HEAL 2026-07-08)
// Item detail modal

const { useState: wsv3S, useEffect: wsv3E, useRef: wsv3R } = React;

// Animated counter
function AnimCounter({ to, suffix = '', duration = 1400 }) {
  const [val, setVal] = wsv3S(0);
  const ref = wsv3R(null);
  wsv3E(() => {
    let started = false; let raf;
    const start = (t) => {
      const startT = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - startT) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(to * eased));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) { started = true; start(); obs.disconnect(); }
    }, { threshold: 0.5 });
    obs.observe(el);
    return () => { obs.disconnect(); cancelAnimationFrame(raf); };
  }, [to]);
  return <span ref={ref} className="lc-counter">{val.toLocaleString('fr-FR')}{suffix}</span>;
}

// Comparison block
function Compare() {
  return (
    <div className="lc-compare">
      <div className="lc-eyebrow" style={{ color: 'var(--yellow)' }}>// La différence</div>
      <h2 className="lc-display" style={{ fontSize: 'var(--fs-h2)', margin: '12px 0 0', color: '#fff' }}>On n'est <span style={{ color: 'var(--orange)' }}>pas</span> comme les autres.</h2>
      <p style={{ color: 'rgba(255,255,255,0.6)', maxWidth: 540, marginTop: 12 }}>Compare. Le meilleur rapport qualité-prix du coin.</p>
      <div className="lc-compare-grid">
        <div className="lc-compare-col">
          <h4>Les chaînes</h4>
          <ul>
            <li>Plats sous vide réchauffés au micro-ondes</li>
            <li>Photos retouchées qui ne ressemblent pas au plat</li>
            <li>Livraison à 1h, plat froid à l'arrivée</li>
            <li>Programme fidélité où tu accumules à vie sans rien</li>
            <li>Pâtes en sachet et pain industriel</li>
          </ul>
        </div>
        <div className="lc-compare-col is-us">
          <h4>Le Cayenne</h4>
          <ul>
            <li>Tout préparé chaque matin sur la plancha</li>
            <li>Photos réelles, pas de filtres marketing</li>
            <li>Prêt en ~10-15 min selon l'affluence, plat sortant tout chaud</li>
            <li>1 € = 10 pts · 100 pts = 1 € de réduction, dès 50 pts</li>
            <li>Pain brioché du boulanger d'à côté</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

// FAQ accordion
function FAQ({ items }) {
  const [open, setOpen] = wsv3S(0);
  return (
    <div className="lc-faq">
      {items.map((it, i) => (
        <div key={i} className={'lc-faq-item' + (open===i?' is-open':'')}>
          {/* [TERRAIN-HEAL 2026-07-16 · WEB-A11Y-FAQ] aria-expanded manquant → le lecteur d'écran
              n'annonçait pas l'état ouvert/fermé de l'accordéon ; icône +/− décorative masquée. */}
          <button className="lc-faq-q" aria-expanded={open===i} onClick={()=>setOpen(open===i?-1:i)}>
            <span>{it.q}</span>
            <span className="lc-faq-q-icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg>
            </span>
          </button>
          <div className="lc-faq-a"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

const FAQ_HOME = [
  { q: 'Vous livrez ?', a: 'Non, on est 100% à emporter à Hénin-Beaumont. Tu commandes en ligne ou en caisse, et tu viens chercher quand c\'est prêt. On préfère te servir un plat tout chaud plutôt qu\'un plat tiède livré en 1h.' },
  { q: 'Comment fonctionne le programme fidélité ?', a: 'Simple : 1 € dépensé = 10 points. Présente ton QR à la caisse ou utilise l\'app/le site, on cumule automatiquement. Dès 50 pts, utilise tes points en réduction directe sur ta commande : 100 points = 1 €.' },
  { q: 'Vous avez du végé ?', a: 'Oui. Bols Frites/Riz peuvent être commandés sans viande (note dans instructions). Frites Cheddar, Petite Frites, Suppléments Légumes sautés / Boursin / Champignons / Œuf — tout est marqué dans le menu.' },
  { q: 'Comment je paie ?', a: 'Tu commandes en ligne (ou en caisse) et tu règles au retrait, en caisse : cash ou CB. Pas de débit en ligne — ta commande est préparée, tu paies quand tu viens chercher. On accepte aussi les tickets restaurants en caisse.' },
  { q: 'Vous avez une carte plastique fidélité ?', a: 'Oui, demande-la en caisse à ta première commande. Elle est gratuite, scannable, et liée au même compte que l\'app. Tu peux switcher entre les deux à tout moment.' },
];

// [GOAL-SYNC-HEAL 2026-07-08] Leaderboard() et Challenge() SUPPRIMÉS : code mort
// (0 invocation, cf. commentaires screens.jsx:739-741) portant des identités/mécaniques
// FICTIVES (« Ikyes B. », défi hebdo) sans backend V1. Cohérent avec la purge D-REWARDS
// (modèle fidélité réel = points→€ continu, aucun classement/défi inventé).

// Item detail modal — full nutritional + allergens + order
function ItemDetailModal({ open, item, onClose, onCustomize, onAdd }) {
  if (!item) return null;
  // [HEAL T1-04 2026-06-05] Real nutrition only — no mock. Macros render
  // exclusively when item.nutri exists (no web item carries it today, so the
  // block is hidden rather than showing fabricated identical 720 kcal values).
  const nutri = item.nutri || null;
  // [HEAL T1-05 2026-06-05] FIC 1169/2011 — map the REAL allergen slugs the
  // item carries (data/menu.js: gluten/lactose/oeuf) to display labels. No
  // fabricated fallback. Empty → "liste complète sur demande".
  const ALLERGEN_LABELS = { gluten: 'Gluten', lactose: 'Lactose', oeuf: 'Œuf' };
  const allergens = (item.allergens || []).map(a => ALLERGEN_LABELS[a] || a);
  return (
    <WebModal open={open} onClose={onClose} full>
      <div className="lc-detail">
        <div className="lc-detail-art">
          {item.image && <img src={item.image} alt={item.name}
            style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '7%', display: 'block' }}
            onError={(e) => { e.currentTarget.style.display = 'none'; const sib = e.currentTarget.nextElementSibling; if (sib) sib.style.display = 'block'; }}/>}
          <span className="lc-detail-art-emoji" style={{ display: item.image ? 'none' : 'block' }}>{item.emoji}</span>
          <div className="lc-detail-art-badges">
            {item.badge && <div className={'lc-card-item-badge' + (item.badge==='TOP'?' lc-card-item-badge--top':'')}>{item.badge}</div>}
            {(item.tags||[]).includes('spicy') && <div className="lc-card-item-badge" style={{ background: 'var(--red)' }}>🌶 ÉPICÉ</div>}
          </div>
        </div>
        <div className="lc-detail-body">
          {(() => { const cats = window.W_CATS || []; const c = cats.find(x => x.id === item.cat); const label = c && c.label ? c.label : item.cat; return <div className="lc-detail-eyebrow">// {String(label).toUpperCase()}</div>; })()}
          <h2 className="lc-detail-title">{item.name}</h2>
          <p className="lc-detail-desc">{item.desc}</p>
          <div className="lc-detail-info">
            <span className="lc-detail-info-pill">⏱ {item.time > 0 ? 'Prêt en ' + item.time + ' min' : 'Prêt immédiatement'}</span>
            <span className="lc-detail-info-pill">📍 Retrait Hénin-Beaumont</span>
            {/* [HEAL T1-03-class 2026-06-05] Removed fabricated per-item rating
                "⭐ 4.8 (124 avis)" — invented social proof, no real review data. */}
          </div>
          <div className="lc-detail-nutr">
            {/* [HEAL T1-04 2026-06-05] Macros render only when REAL nutri data
                exists — never the fabricated 720/32/38/56 placeholder. */}
            {nutri && (
              <React.Fragment>
                <h5>// Valeurs nutritionnelles (par portion)</h5>
                <div className="lc-detail-nutr-row">
                  <div className="lc-detail-nutr-cell"><b>{nutri.kcal}</b><span>Kcal</span></div>
                  <div className="lc-detail-nutr-cell"><b>{nutri.p}g</b><span>Protéines</span></div>
                  <div className="lc-detail-nutr-cell"><b>{nutri.g}g</b><span>Lipides</span></div>
                  <div className="lc-detail-nutr-cell"><b>{nutri.c}g</b><span>Glucides</span></div>
                </div>
              </React.Fragment>
            )}
            {/* [OWNER 2026-07-28] Copy ⚠ anxiogène retirée du flux — l'info reste accessible
                pré-achat (INCO) via ce lien discret + legal/allergens.html. */}
            <div style={{ marginTop: 12, fontSize: 11 }}>
              <a href="legal/allergens.html" target="_blank" rel="noopener" style={{ color: 'var(--gray-3)', textDecoration: 'underline' }}>Infos allergènes</a>
            </div>
          </div>
          <div className="lc-detail-foot">
            <span className="lc-detail-price">{item.price.toFixed(2).replace('.', ',')} €</span>
            {item.wizard ? (
              <button className="lc-btn lc-btn--orange" onClick={()=>onCustomize(item)}>
                Personnaliser <WC_I.arrow s={16}/>
              </button>
            ) : (
              <button className="lc-btn lc-btn--orange" onClick={()=>{ onAdd(item); onClose(); }}>
                Ajouter au panier <WC_I.arrow s={16}/>
              </button>
            )}
          </div>
        </div>
      </div>
    </WebModal>
  );
}

Object.assign(window, { AnimCounter, Compare, FAQ, FAQ_HOME, ItemDetailModal });