// components.jsx — Header, MatchBand, ZoneList, ZoneDetail, SubsBand, Reassure, Footer

const fmtEUR = (n) => `${n}€`;

// ── Inline icons (stroke-based, no external deps) ─────────────────
const Icon = ({ name, size = 16 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "search": return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "cart":   return <svg {...props}><path d="M3 4h2l2.5 12h11l2-9H7"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/></svg>;
    case "user":   return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>;
    case "calendar":return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "pin":    return <svg {...props}><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case "shield": return <svg {...props}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "phone":  return <svg {...props}><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg>;
    case "swap":   return <svg {...props}><path d="M7 7h12l-3-3M17 17H5l3 3"/></svg>;
    case "check":  return <svg {...props}><path d="m5 12 5 5L20 7"/></svg>;
    case "back":   return <svg {...props}><path d="m14 6-6 6 6 6"/></svg>;
    case "arrow":  return <svg {...props}><path d="m9 6 6 6-6 6"/></svg>;
    case "ticket": return <svg {...props}><path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z"/><path d="M12 7v10" strokeDasharray="2 2"/></svg>;
    case "minus":  return <svg {...props}><path d="M5 12h14"/></svg>;
    case "plus":   return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case "wheelchair": return <svg {...props}><circle cx="10" cy="5" r="2"/><path d="M10 7v5h6l2 5"/><path d="M16 18a6 6 0 1 1-9-5"/></svg>;
    case "bolt":   return <svg {...props}><path d="m13 2-9 12h7l-1 8 9-12h-7z"/></svg>;
    default: return null;
  }
};

// ── Header ──────────────────────────────────────────────────────────
const Header = ({ cartCount }) => (
  <header className="topbar">
    <div className="topbar-inner">
      <a className="brand" href="#">
        <div className="brand-mark">FC</div>
        <div className="brand-name">
          FC SOCHAUX
          <small>BILLETTERIE OFFICIELLE</small>
        </div>
      </a>
      <nav className="nav">
        <a href="#" className="active">Billetterie</a>
        <a href="#">Abonnements</a>
        <a href="#">Hospitalités</a>
        <a href="#">Groupes & CE</a>
        <a href="#">Aide</a>
      </nav>
      <div className="top-actions">
        <button className="icon-btn" aria-label="Recherche"><Icon name="search" /></button>
        <button className="icon-btn" aria-label="Panier">
          <Icon name="cart" />
          {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
        </button>
        <button className="account-btn">
          <span className="account-avatar">M</span>
          <span>Mon compte</span>
        </button>
      </div>
    </div>
  </header>
);

// ── Match band ──────────────────────────────────────────────────────
const Countdown = ({ to }) => {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, to - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return (
    <div className="countdown">
      <div className="countdown-cell"><b>{d}</b><span>jours</span></div>
      <div className="countdown-cell"><b>{String(h).padStart(2,"0")}</b><span>h</span></div>
      <div className="countdown-cell"><b>{String(m).padStart(2,"0")}</b><span>min</span></div>
      <div className="countdown-cell"><b>{String(s).padStart(2,"0")}</b><span>sec</span></div>
    </div>
  );
};

const MatchBand = () => {
  // Target ~10 days out
  const matchDate = React.useMemo(() => Date.now() + 10*86400000 + 3*3600000, []);
  return (
    <section className="match-band">
      <div className="match-inner">
        <div className="match-meta">
          <div className="badges">
            <span className="tag tag-yellow">National 1 · J34</span>
            <span className="tag tag-line tag-pulse">Billetterie ouverte</span>
            <span className="tag tag-line">À domicile</span>
          </div>
          <div className="eyebrow eyebrow-on-navy" style={{marginTop: 4}}>Match #17 · Saison 25/26</div>
          <div style={{
            fontFamily: '"Anton", sans-serif',
            fontSize: 28, letterSpacing: ".03em",
            textTransform: "uppercase", lineHeight: 1, marginTop: 6,
          }}>Une dernière à Bonal<br/>pour la montée.</div>
        </div>

        <div className="match-versus">
          <div className="match-team">
            <div className="crest crest-home">
              <span className="crest-letter">FC</span>
            </div>
            <div className="match-team-name">Sochaux</div>
            <div className="match-team-sub">Domicile · 8e</div>
          </div>
          <div className="versus">VS</div>
          <div className="match-team">
            <div className="crest crest-away">
              <span className="crest-letter">LP</span>
            </div>
            <div className="match-team-name">Le Puy Foot 43</div>
            <div className="match-team-sub">Extérieur · 11e</div>
          </div>
        </div>

        <div className="match-when">
          <div className="match-when-day">VENDREDI</div>
          <div className="match-when-date">15 MAI · 20:00</div>
          <div className="match-when-place">
            <strong>Stade Auguste-Bonal</strong><br/>
            Montbéliard · Tribunes ouvertes 18:30
          </div>
          <Countdown to={matchDate} />
        </div>
      </div>
    </section>
  );
};

// ── Page head ───────────────────────────────────────────────────────
const PageHead = ({ step }) => (
  <div className="page-head">
    <div>
      <div className="eyebrow">Étape {step} sur 3</div>
      <h1>Choisissez<br/>vos <em>places.</em></h1>
    </div>
    <div className="steps">
      <div className={`step ${step >= 1 ? "active" : ""}`}><b>1</b><span>Tribune</span></div>
      <span className="sep">———</span>
      <div className={`step ${step >= 2 ? "active" : ""}`}><b>2</b><span>Tarifs</span></div>
      <span className="sep">———</span>
      <div className={`step ${step >= 3 ? "active" : ""}`}><b>3</b><span>Paiement</span></div>
    </div>
  </div>
);

// ── Zone list (right panel default) ─────────────────────────────────
const ZoneList = ({ zones, hovered, onSelect, onHover, loading }) => (
  <div className="panel-empty">
    <div className="panel-empty-head">
      <div className="eyebrow" style={{marginBottom: 4}}>Tribunes disponibles</div>
      <h2>Sélectionnez une tribune</h2>
      <p>Cliquez sur une zone du plan ou choisissez ci-dessous.</p>
    </div>
    {loading ? (
      <div className="loading-pulse" style={{padding: "24px 0", textAlign: "center"}}>
        Chargement des tribunes…
      </div>
    ) : (
      <div className="zone-list">
        {(zones || []).map(z => {
          const remainingLabel = z.standing
            ? (z.status === "sold" ? "Complet" : "Places debout")
            : z.remaining != null
              ? (z.status === "open" ? `${z.remaining}+ places` : z.status === "limited" ? `${z.remaining} places` : "Complet")
              : "";
          return (
            <button key={z.id}
              className={`zone-row ${hovered === z.id ? "is-hovered" : ""}`}
              disabled={z.status === "sold"}
              onClick={() => onSelect(z.id)}
              onMouseEnter={() => onHover(z.id)}
              onMouseLeave={() => onHover(null)}
            >
              <div className={`zone-dot legend-swatch ${z.status === "open" ? "open" : z.status === "limited" ? "limited" : "sold"}`} />
              <div className="zone-name">
                {z.name}
                <small>{remainingLabel}{z.distance ? ` · ${z.distance}` : ""}</small>
              </div>
              <div className="price">
                <small>dès</small>
                {z.status === "sold" || z.priceFrom === 0 ? "—" : fmtEUR(z.priceFrom)}
              </div>
              <div className="arrow"><Icon name="arrow" size={14} /></div>
            </button>
          );
        })}
      </div>
    )}
  </div>
);

// ── Zone detail (right panel when zone selected) ────────────────────
const TICKET_TYPES = [
  { id: "adulte", label: "Adulte",  sub: "16 ans et +",        mult: 1.0,  max: 8 },
  { id: "jeune",  label: "-16 ans", sub: "Né après 2010",      mult: 0.55, max: 4 },
  { id: "enfant", label: "-12 ans", sub: "Né après 2014",      mult: 0.27, max: 4 },
  { id: "pmr",    label: "PMR",     sub: "Accompagnant gratuit", mult: 0.45, max: 2, icon: "wheelchair" },
];

const ZoneDetail = ({ zone, quantities, setQuantities, onReserve, onBack }) => {
  const updateQty = (id, delta) => {
    const cur = quantities[id] || 0;
    const tt = TICKET_TYPES.find(t => t.id === id);
    const next = Math.max(0, Math.min(tt.max, cur + delta));
    const total = TICKET_TYPES.reduce((sum, t) => sum + (t.id === id ? next : (quantities[t.id] || 0)), 0);
    if (total > 8) return;
    setQuantities({ ...quantities, [id]: next });
  };

  const totalQty = TICKET_TYPES.reduce((s, t) => s + (quantities[t.id] || 0), 0);
  const totalEUR = TICKET_TYPES.reduce((s, t) => {
    const q = quantities[t.id] || 0;
    return s + q * Math.round(zone.priceFrom * t.mult);
  }, 0);

  return (
    <div>
      <div className="zone-detail-head">
        <button className="back" onClick={onBack}>
          <Icon name="back" size={12} /> Changer de tribune
        </button>
        <div className="eyebrow eyebrow-on-navy">{zone.tier}</div>
        <h2>{zone.name}</h2>
        <div className="sub">
          <span><Icon name="pin" size={13} /> {zone.distance}</span>
          <span>·</span>
          <span>{zone.facing}</span>
          <span>·</span>
          <span>{zone.access}</span>
        </div>
      </div>

      <div className="view-strip">
        <div className="view-strip-label">VUE DEPUIS LA TRIBUNE</div>
      </div>

      <div className="tickets">
        <div className="eyebrow">Choisissez vos billets</div>
        <div className="ticket-types">
          {TICKET_TYPES.map(t => {
            const q = quantities[t.id] || 0;
            const price = Math.round(zone.priceFrom * t.mult);
            return (
              <div key={t.id}>
                <div className="tt-name">
                  {t.icon && <Icon name={t.icon} size={14} />}
                  {t.icon ? " " : ""}{t.label}
                  <small>{t.sub}</small>
                </div>
                <div className="tt-price">
                  <small>par billet</small>
                  {price}€
                </div>
                <div className="stepper">
                  <button onClick={() => updateQty(t.id, -1)} disabled={q === 0} aria-label="Moins">
                    <Icon name="minus" size={12} />
                  </button>
                  <b>{q}</b>
                  <button onClick={() => updateQty(t.id, +1)} disabled={q >= t.max || totalQty >= 8} aria-label="Plus">
                    <Icon name="plus" size={12} />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="cta-block">
        <div className="cta-total">
          <div>
            <small>Total</small>
            <b className="num">{totalEUR}€</b>
          </div>
          <div className="qty">
            {totalQty > 0
              ? `${totalQty} billet${totalQty > 1 ? "s" : ""} · max 8 par commande`
              : "Aucun billet sélectionné"}
          </div>
        </div>
        <button className="cta-add" disabled={totalQty === 0} onClick={onReserve}>
          <Icon name="ticket" size={16} />
          Réserver · payer en ligne
        </button>
        <div className="cta-trust">
          <span><Icon name="shield" size={12} /> Paiement sécurisé</span>
          <span><Icon name="phone" size={12} /> Billet mobile</span>
          <span><Icon name="swap" size={12} /> Échangeable jusqu'à J-1</span>
        </div>
      </div>
    </div>
  );
};

// ── Subscription band ──────────────────────────────────────────────
const SubsBand = () => (
  <section className="subs">
    <div className="subs-inner">
      <div>
        <div className="eyebrow eyebrow-on-navy subs-eyebrow">Abonnement saison 25/26</div>
        <h2>17 matchs.<br/>Une saison.<br/><em>Une famille.</em></h2>
        <div className="subs-body">
          Tous les matchs à domicile de Ligue 1, Coupe de France et matchs de barrage inclus.
          Place numérotée garantie, accès prioritaire en billetterie pour les déplacements,
          et les avantages partenaires du club.
        </div>
        <div className="subs-bullets">
          <div className="subs-bullet">
            <b>−40%</b>
            <span>vs. billet à l'unité</span>
          </div>
          <div className="subs-bullet">
            <b>17</b>
            <span>matchs garantis</span>
          </div>
          <div className="subs-bullet">
            <b>4×</b>
            <span>paiement sans frais</span>
          </div>
          <div className="subs-bullet">
            <b>J-7</b>
            <span>priorité déplacements</span>
          </div>
        </div>
      </div>

      <div className="subs-card">
        <div className="ribbon">Recommandé</div>
        <div className="eyebrow">Tribune Présidentielle</div>
        <h3>Saison complète</h3>
        <div className="price">
          <b>449€</b>
          <small>soit 26€/match</small>
        </div>
        <ul>
          <li>Place numérotée &amp; nominative</li>
          <li>Accès parking abonnés</li>
          <li>Priorité Coupe de France</li>
          <li>−10% boutique officielle</li>
          <li>Newsletter abonnés &amp; coulisses</li>
        </ul>
        <button className="btn-outline">Souscrire l'abonnement</button>
      </div>
    </div>
  </section>
);

// ── Reassurance + footer ───────────────────────────────────────────
const Reassure = () => (
  <section className="reassure">
    <div className="reassure-inner">
      <div className="reassure-item">
        <div className="reassure-icon"><Icon name="shield" size={18} /></div>
        <div>
          <b>Paiement 100% sécurisé</b>
          <span>3D Secure · CB, Apple Pay, ANCV</span>
        </div>
      </div>
      <div className="reassure-item">
        <div className="reassure-icon"><Icon name="phone" size={18} /></div>
        <div>
          <b>Billet mobile</b>
          <span>Reçu par email &amp; dans votre compte</span>
        </div>
      </div>
      <div className="reassure-item">
        <div className="reassure-icon"><Icon name="swap" size={18} /></div>
        <div>
          <b>Échange &amp; revente</b>
          <span>Plateforme officielle jusqu'à J-1 24h</span>
        </div>
      </div>
      <div className="reassure-item">
        <div className="reassure-icon"><Icon name="bolt" size={18} /></div>
        <div>
          <b>Service supporters</b>
          <span>03 81 00 00 00 · lun–ven 9h-18h</span>
        </div>
      </div>
    </div>
  </section>
);

const FootBar = () => (
  <footer className="foot">
    <div>
      <a href="#">CGV</a>
      <a href="#">Mentions légales</a>
      <a href="#">Politique billetterie</a>
      <a href="#">Accessibilité</a>
      <a href="#">Contact</a>
    </div>
    <div>© FC Sochaux-Montbéliard · Stade Auguste-Bonal · Saison 25/26</div>
  </footer>
);

// Export to window
Object.assign(window, {
  Icon, Header, MatchBand, PageHead, ZoneList, ZoneDetail, TICKET_TYPES,
  SubsBand, Reassure, FootBar, fmtEUR,
});