// home.jsx — passionate, club-energy homepage
// Les matchs sont chargés depuis l'API ; MATCHES_PLACEHOLDER est vide au démarrage.

const CHANTS = [
  "ALLEZ SOCHAUX", "ON EST CHEZ NOUS", "JAUNE ET BLEU", "LIONCEAUX",
  "BONAL EN FUSION", "MONTBÉLIARD DEBOUT", "SOCHAUX C'EST NOUS",
  "DEPUIS 1928", "JAMAIS ON N'ABANDONNE",
];

const SPONSORS = [
  { name: "EIMI", tone: "navy" },
  { name: "CRÉDIT AGRICOLE", tone: "green" },
  { name: "NEOLIA", tone: "red" },
  { name: "PMA", tone: "navy" },
  { name: "DOUBS", tone: "blue" },
  { name: "ELDERA", tone: "black" },
];

// ── Utility ribbon ────────────────────────────────────────────────
const UtilityRibbon = () => (
  <div className="util-ribbon">
    <div className="util-inner">
      <div className="util-left">
        <span className="util-flag">●</span>
        <span><b>BILLETTERIE OUVERTE</b> · prochain match dans 5 jours</span>
      </div>
      <div className="util-right">
        <a href="#">Espace retrait</a>
        <span className="util-sep">/</span>
        <a href="#">Venir au stade</a>
        <span className="util-sep">/</span>
        <a href="#">FAQ</a>
        <span className="util-sep">/</span>
        <a href="#">Site officiel ↗</a>
        <span className="util-sep">/</span>
        <a href="#">Boutique ↗</a>
      </div>
    </div>
  </div>
);

const SiteHeader = ({ active, onNav, cartCount }) => (
  <header className="site-header">
    <div className="site-header-stripe" aria-hidden="true" />
    <div className="site-header-inner">
      <a className="site-brand" href="#" onClick={(e)=>{e.preventDefault(); onNav("home");}}>
        <div className="site-brand-mark">
          <span>FC</span>
          <small>SM</small>
        </div>
        <div className="site-brand-text">
          <b>FC SOCHAUX-MONTBÉLIARD</b>
          <span>BILLETTERIE OFFICIELLE · DEPUIS 1928</span>
        </div>
      </a>
      <nav className="site-tabs">
        <a className={active==="home" ? "on" : ""}
           onClick={(e)=>{e.preventDefault(); onNav("home");}} href="#">MATCHS</a>
        <a href="#">ABONNEMENTS</a>
        <a href="#">VIRAGE EST</a>
        <a href="#">HOSPITALITÉS</a>
        <a href="#">GROUPES</a>
      </nav>
      <div className="site-actions">
        <button className="btn-ghost"><Icon name="user" size={14}/> Compte</button>
        <button className="btn-cart">
          <Icon name="cart" size={14}/>
          <span>Panier</span>
          {cartCount > 0 && <b>{cartCount}</b>}
        </button>
      </div>
    </div>
  </header>
);

const Breadcrumb = ({ items }) => (
  <div className="breadcrumb">
    <div className="breadcrumb-inner">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="bc-sep">/</span>}
          {it.href
            ? <a href="#" onClick={(e)=>{e.preventDefault(); it.onClick && it.onClick();}}>{it.label}</a>
            : <span className="bc-current">{it.label}</span>}
        </React.Fragment>
      ))}
    </div>
  </div>
);

// ── Hero — full-bleed dark with crowd, scarf, smoke ──────────────
const HomeHero = ({ next, onBuy }) => {
  // SVG crowd silhouette: rows of heads + raised hands + flags
  const crowd = (
    <svg className="hero-crowd" viewBox="0 0 1200 280" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
      <defs>
        <linearGradient id="crowdFade" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#000" stopOpacity="0"/>
          <stop offset="60%" stopColor="#000" stopOpacity=".4"/>
          <stop offset="100%" stopColor="#000" stopOpacity=".95"/>
        </linearGradient>
      </defs>
      {/* Rows of fans (back to front) */}
      {[
        { y: 200, scale: .55, op: .35 },
        { y: 215, scale: .7,  op: .55 },
        { y: 232, scale: .85, op: .75 },
        { y: 252, scale: 1,   op: 1   },
      ].map((r, ri) => (
        <g key={ri} opacity={r.op} transform={`translate(0 ${r.y}) scale(1 ${r.scale})`}>
          {Array.from({length: 60}).map((_, i) => {
            const x = i*22 + (ri%2 ? 11 : 0);
            const headR = 7 + (i%3);
            const armUp = (i*7 + ri*3) % 5 === 0;
            return (
              <g key={i} transform={`translate(${x} 0)`}>
                <circle cx="0" cy="0" r={headR} fill="#000"/>
                <path d={`M-12 ${headR+2} Q0 ${headR+22} 12 ${headR+2} L12 60 L-12 60 Z`} fill="#000"/>
                {armUp && (
                  <path d={`M0 ${headR+4} L${(i%2?-1:1)*4} -22 L${(i%2?-1:1)*8} -24 L${(i%2?-1:1)*9} ${headR+2} Z`} fill="#000"/>
                )}
                {/* Occasional scarf or flag */}
                {i % 9 === 4 && ri === 3 && (
                  <g transform="translate(-2 -38) rotate(-12)">
                    <rect x="-22" y="0" width="44" height="14" fill="#FFD400"/>
                    <rect x="-22" y="6" width="44" height="2" fill="#0B2545"/>
                    <rect x="-22" y="14" width="2" height="14" fill="#7a6500"/>
                  </g>
                )}
                {i % 13 === 7 && ri === 3 && (
                  <g transform="translate(0 -50)">
                    <rect x="0" y="0" width="2" height="48" fill="#000"/>
                    <path d="M2 0 L42 0 L42 22 L2 22 Z" fill="#FFD400"/>
                    <text x="22" y="16" textAnchor="middle"
                      fontFamily="Anton,sans-serif" fontSize="11" fill="#0B2545">FCSM</text>
                  </g>
                )}
              </g>
            );
          })}
        </g>
      ))}
      <rect x="0" y="0" width="1200" height="280" fill="url(#crowdFade)"/>
    </svg>
  );

  const awayInitials = next
    ? (next.away || "").split(" ").map(w => w[0]).slice(0, 2).join("")
    : "—";

  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="hero-bg-pitch" />
        <div className="hero-bg-glow" />
        <svg className="hero-smoke" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <radialGradient id="smokeY" cx=".5" cy=".5">
              <stop offset="0%" stopColor="#FFD400" stopOpacity=".55"/>
              <stop offset="60%" stopColor="#FFD400" stopOpacity=".05"/>
              <stop offset="100%" stopColor="#FFD400" stopOpacity="0"/>
            </radialGradient>
            <radialGradient id="smokeB" cx=".5" cy=".5">
              <stop offset="0%" stopColor="#1B3D6F" stopOpacity=".7"/>
              <stop offset="100%" stopColor="#1B3D6F" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <ellipse cx="180" cy="380" rx="280" ry="220" fill="url(#smokeY)"/>
          <ellipse cx="1020" cy="180" rx="320" ry="240" fill="url(#smokeB)"/>
          <ellipse cx="900" cy="500" rx="280" ry="180" fill="url(#smokeY)" opacity=".5"/>
        </svg>
      </div>

      {crowd}

      <div className="hero-inner">
        <div className="hero-left">
          {next && (
            <div className="hero-tag">
              <span className="hero-tag-dot" />
              {next.date.day} {next.date.num} {next.date.month} · {next.date.time} · STADE BONAL
            </div>
          )}
          <h1 className="hero-title">
            <span className="hero-line">VIENS</span>
            <span className="hero-line hero-line--big">METTRE</span>
            <span className="hero-line">
              <em>BONAL</em> EN FUSION.
            </span>
          </h1>
          <p className="hero-lede">
            Prochain match à domicile. Une soirée à ne pas manquer.
            <strong> Tu y es ?</strong>
          </p>
          <div className="hero-cta-row">
            {next && (next.status === "open" || next.status === "limited") && (
              <button className="btn-hot" onClick={() => onBuy(next)}>
                <span>JE PRENDS MA PLACE</span>
                {next.priceFrom > 0 && <em>dès {next.priceFrom}€</em>}
              </button>
            )}
            <button className="btn-line">
              <span>VOIR TOUS LES MATCHS</span>
            </button>
          </div>
          <div className="hero-stats">
            <div><b>15 000+</b><span>supporters à chaque match</span></div>
            <div><b>97%</b><span>de remplissage en virage Est</span></div>
            <div><b>1928</b><span>année de naissance du club</span></div>
          </div>
        </div>

        <div className="hero-right">
          {next && (
            <div className="ticket-stub" role="img" aria-label="Billet du prochain match">
              <div className="stub-side">
                <span>FCSM</span>
                <em>{next.date.year}</em>
                <span>{next.competition}</span>
              </div>
              <div className="stub-perf" />
              <div className="stub-main">
                <div className="stub-row stub-row--top">
                  <div>
                    <small>{next.competition}</small>
                    <strong>{next.date.day} {next.date.num} {next.date.month} · {next.date.time}</strong>
                  </div>
                  <div className="stub-stamp">À<br/>DOMICILE</div>
                </div>
                <div className="stub-vs">
                  <div className="stub-team">
                    <div className="stub-crest stub-crest--h">FC</div>
                    <b>SOCHAUX</b>
                  </div>
                  <div className="stub-x">VS</div>
                  <div className="stub-team">
                    <div className="stub-crest stub-crest--a">{awayInitials}</div>
                    <b>{(next.away || "").split(" ").slice(0, 2).join(" ")}</b>
                  </div>
                </div>
                <div className="stub-row stub-row--btm">
                  <div>
                    <small>STADE</small>
                    <strong>AUGUSTE-BONAL</strong>
                  </div>
                  {(next.status === "open" || next.status === "limited") && (
                    <div className="stub-pulse">
                      <span className="stub-pulse-dot" />
                      EN VENTE
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
          <div className="hero-scarf" aria-hidden="true">
            <span>SOCHAUX</span><span>·</span><span>1928</span><span>·</span>
            <span>BONAL</span><span>·</span><span>JAUNE &amp; BLEU</span><span>·</span>
            <span>SOCHAUX</span><span>·</span><span>1928</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Marquee chant strip ──────────────────────────────────────────
const ChantStrip = () => (
  <div className="chant-strip">
    <div className="chant-track">
      {Array.from({length: 3}).map((_, k) => (
        <div className="chant-group" key={k}>
          {CHANTS.map((c, i) => (
            <React.Fragment key={i}>
              <span className="chant-word">{c}</span>
              <span className="chant-star">★</span>
            </React.Fragment>
          ))}
        </div>
      ))}
    </div>
  </div>
);

// ── Filters ──────────────────────────────────────────────────────
const Filters = ({ filter, setFilter, count, matches }) => {
  const all  = (matches || []).length;
  const open = (matches || []).filter(m => m.status === "open" || m.status === "limited").length;
  return (
    <div className="filters">
      <div className="filters-inner">
        <div className="filters-title">
          <span className="filters-bar" />
          TOUS LES MATCHS À BONAL
        </div>
        <div className="filters-tabs">
          {[
            { id: "all",  label: "TOUS",       c: all  },
            { id: "open", label: "EN VENTE",   c: open },
          ].map(f => (
            <button key={f.id}
              className={`filter-tab ${filter === f.id ? "on" : ""}`}
              onClick={() => setFilter(f.id)}>
              {f.label} <small>{f.c}</small>
            </button>
          ))}
        </div>
        <div className="filters-right">
          <span className="filters-count num">{count} affiché{count>1?"s":""}</span>
        </div>
      </div>
    </div>
  );
};

// ── Match card ───────────────────────────────────────────────────
const MatchCard = ({ m, featured, onBuy }) => {
  const sold = m.status === "sold";
  const upcoming = m.status === "upcoming";
  const limited = m.status === "limited";
  return (
    <article className={`match-card ${featured ? "match-card--featured" : ""} match-card--${m.posterTone} ${limited ? "match-card--hot" : ""}`}>
      <div className="mc-poster">
        <div className="mc-poster-grid" />
        <div className="mc-poster-glow" />

        {/* Halftone dots overlay */}
        <svg className="mc-halftone" viewBox="0 0 200 200" preserveAspectRatio="none" aria-hidden="true" style={{display:"none"}}>
          <defs>
            <pattern id={`dots-${m.id}`} width="6" height="6" patternUnits="userSpaceOnUse">
              <circle cx="3" cy="3" r=".9" fill="rgba(255,255,255,.18)"/>
            </pattern>
          </defs>
          <rect width="200" height="200" fill={`url(#dots-${m.id})`}/>
        </svg>

        <div className="mc-comp">
          <span className="mc-comp-badge">{m.competition}</span>
          <span className="mc-comp-day">{m.journee}</span>
        </div>

        {limited && (
          <div className="mc-sticker mc-sticker--hot">
            <span>DERNIÈRES<br/>PLACES</span>
          </div>
        )}
        {sold && (
          <div className="mc-sticker mc-sticker--sold">
            <span>BONAL<br/>COMPLET</span>
          </div>
        )}
        {upcoming && (
          <div className="mc-sticker mc-sticker--soon">
            <span>BIENTÔT<br/>EN VENTE</span>
          </div>
        )}

        <div className="mc-vs">
          <div className="mc-team">
            <div className="mc-crest mc-crest-h"><span>FC</span></div>
            <b>SOCHAUX</b>
          </div>
          <div className="mc-vs-x">
            <span>VS</span>
            <em>{m.date.day} {m.date.num} {m.date.month} · {m.date.time}</em>
          </div>
          <div className="mc-team">
            <div className="mc-crest mc-crest-a"><span>{m.away.split(" ").map(w=>w[0]).slice(0,2).join("")}</span></div>
            <b>{m.away}</b>
          </div>
        </div>

        <div className="mc-rivalry">
          <em>“{m.rivalry}”</em>
        </div>
      </div>

      <div className="mc-body">
        <div className="mc-row">
          <div className="mc-meta">
            <div className="mc-meta-line"><Icon name="pin" size={13}/> {m.venue}</div>
            <div className="mc-meta-line"><Icon name="user" size={13}/> {m.expectedAttend} attendus</div>
          </div>
          <div className="mc-from-block">
            {!sold && !upcoming && (
              <React.Fragment>
                <small>à partir de</small>
                <b>{m.priceFrom}€</b>
              </React.Fragment>
            )}
            {sold && <span className="mc-from-sold">—</span>}
            {upcoming && <span className="mc-from-soon">—</span>}
          </div>
        </div>

        <button
          className={`mc-cta ${sold ? "mc-cta--ghost" : ""} ${upcoming ? "mc-cta--ghost" : ""}`}
          onClick={() => onBuy(m)}
          disabled={sold}
        >
          <span>{m.cta}</span>
          <Icon name="arrow" size={16}/>
        </button>
      </div>
    </article>
  );
};

// ── Atmosphere band — supporter quote, attendance, virage ────────
const AtmosphereBand = () => (
  <section className="atmo">
    <div className="atmo-grain" />
    <div className="atmo-inner">
      <div className="atmo-left">
        <div className="atmo-eyebrow">★ AMBIANCE BONAL ★</div>
        <h2 className="atmo-title">
          ICI<br/>
          <em>ON CHANTE</em><br/>
          90 MINUTES.
        </h2>
        <p className="atmo-lede">
          Le Virage Est, c'est l'âme du club. Tambours, mégaphones, drapeaux levés
          du coup d'envoi au coup de sifflet final. Les Lionceaux ont besoin de toi.
        </p>
        <button className="btn-hot btn-hot--inverse">
          <span>REJOINDRE LE VIRAGE EST</span>
          <em>dès 15€</em>
        </button>
      </div>
      <div className="atmo-right">
        <div className="quote-card">
          <div className="quote-mark">”</div>
          <blockquote>
            Bonal qui chante, c'est le souvenir d'enfance que je voulais offrir
            à mon fils. Quand le stade gronde, on a la chair de poule.
          </blockquote>
          <div className="quote-meta">
            <div className="quote-avatar">M</div>
            <div>
              <b>Maxime, 38 ans</b>
              <span>Abonné depuis 12 saisons · Tribune Officielle</span>
            </div>
          </div>
        </div>
        <div className="atmo-stat">
          <b>15 873</b>
          <span>moyenne d'affluence saison 25/26</span>
        </div>
      </div>
    </div>
  </section>
);

// ── Sidebar ──────────────────────────────────────────────────────
const SidebarPromo = ({ onAbo }) => (
  <aside className="side-promo">
    <div className="promo-card promo-card--abo">
      <div className="promo-flag">★ ABO 25/26 ★</div>
      <h3>17 MATCHS.<br/>UNE SAISON.<br/><em>−40%.</em></h3>
      <ul className="promo-bullets">
        <li>Place numérotée garantie</li>
        <li>Priorité Coupe de France</li>
        <li>4× sans frais</li>
      </ul>
      <button className="btn-hot btn-hot--block" onClick={onAbo}>
        <span>JE M'ABONNE</span>
        <em>dès 26€/match</em>
      </button>
    </div>

    <div className="promo-card promo-card--retrait">
      <div className="promo-eyebrow">ESPACE RETRAIT</div>
      <h4>Récupérer mes billets</h4>
      <p>Téléchargez votre billet mobile depuis votre commande, ou imprimez-le à domicile.</p>
      <a className="promo-link" href="#">Mon espace <Icon name="arrow" size={12}/></a>
    </div>

    <div className="promo-card promo-card--info">
      <div className="promo-eyebrow">PRATIQUE</div>
      <ul className="promo-list">
        <li><Icon name="pin" size={13}/> Comment venir à Bonal</li>
        <li><Icon name="phone" size={13}/> Billet mobile &amp; e-billet</li>
        <li><Icon name="swap" size={13}/> Échange &amp; revente officielle</li>
        <li><Icon name="wheelchair" size={13}/> Accessibilité PMR</li>
      </ul>
    </div>

    <div className="promo-card promo-card--groupe">
      <div className="promo-eyebrow">GROUPES &amp; CE</div>
      <h4>À partir de 10 personnes</h4>
      <p>Tarifs négociés, accueil dédié, devis sous 48h.</p>
      <a className="promo-link" href="#">Faire une demande <Icon name="arrow" size={12}/></a>
    </div>
  </aside>
);

const SponsorStrip = () => (
  <section className="sponsors">
    <div className="sponsors-inner">
      <div className="sponsors-title">★ PARTENAIRES OFFICIELS ★</div>
      <div className="sponsors-row">
        {SPONSORS.map(s => (
          <div key={s.name} className={`sponsor sponsor--${s.tone}`}>{s.name}</div>
        ))}
      </div>
    </div>
  </section>
);

const SiteFooter = () => (
  <footer className="site-footer">
    <div className="site-footer-stripe" aria-hidden="true" />
    <div className="site-footer-inner">
      <div className="ft-col">
        <div className="ft-brand">FC SOCHAUX-MONTBÉLIARD</div>
        <div className="ft-addr">Stade Auguste-Bonal · 25200 Montbéliard<br/>Service supporters · 03 81 00 00 00</div>
      </div>
      <div className="ft-col ft-links">
        <a href="#">CGV</a>
        <a href="#">Mentions légales</a>
        <a href="#">Politique billetterie</a>
        <a href="#">Confidentialité</a>
        <a href="#">Cookies</a>
        <a href="#">Contact</a>
      </div>
      <div className="ft-col ft-copy">
        <div className="ft-anthem">★ DEPUIS 1928 ★</div>
        <span>© 2026 FC Sochaux-Montbéliard</span>
      </div>
    </div>
  </footer>
);

window.HomeUI = {
  UtilityRibbon, SiteHeader, Breadcrumb, HomeHero, ChantStrip, Filters,
  MatchCard, AtmosphereBand, SidebarPromo, SponsorStrip, SiteFooter,
};