/* global React, Eyebrow */
const { useState: useTicketState } = React;

// ── Weezevent — URLs filtrées par tarif
// 👉 Remplacer chaque URL par le widget filtré correspondant (Weezevent > Canaux de vente > Modules de billetterie > Nouveau widget filtré)
const WZ_POPUP = "Billetterie Weezevent,width=650,height=600,top=100,left=100,toolbar=no,resizable=yes,scrollbars=yes,status=no";
const WZ_URLS = {
  earlybird:  "https://widget.weezevent.com/ticket/79d20603-c5e4-4222-9359-2349c582c01f?id_evenement=2093971&locale=fr-FR&code=29313",
  regular:    "https://widget.weezevent.com/ticket/fb1dc096-5edd-4db7-8052-6df2b0efdc1f?id_evenement=2093971&locale=fr-FR&code=29313",
  lastchance: "https://widget.weezevent.com/ticket/e26a2677-379d-4aae-8a93-7bd4e6a1331d?id_evenement=2093971&locale=fr-FR&code=29313",
  all:        "https://widget.weezevent.com/ticket/E2093971/?code=29313&locale=fr-FR&width_auto=1&color_primary=0032FA",
};
function openWZ(key) {
  const w = window.open(WZ_URLS[key] || WZ_URLS.all, "Billetterie Weezevent", WZ_POPUP);
  if (w) w.focus();
}

function PageTickets({ setPage }) {
  const [showConsent, setShowConsent] = useTicketState(false);
  const [checked, setChecked] = useTicketState(false);
  const [pendingAction, setPendingAction] = useTicketState(null);

  // Ouvre le modal de consentement avant toute action d'achat
  const askConsent = (action) => {
    setChecked(false);
    setPendingAction(() => action);
    setShowConsent(true);
  };

  const confirmConsent = () => {
    if (!checked) return;
    setShowConsent(false);
    if (pendingAction) pendingAction();
  };

  const goBooking  = () => askConsent(() => setPage("booking"));
  const goEarly    = () => askConsent(() => openWZ("earlybird"));
  const goRegular  = () => askConsent(() => openWZ("regular"));
  const goLast     = () => askConsent(() => openWZ("lastchance"));

  return (
    <div className="page-fade">
      <header className="page-header">
        <div className="shell">
          <Eyebrow>Billetterie ouverte · paiement sécurisé</Eyebrow>
          <h1 className="page-title gradient-sun">Billets.</h1>
          <p className="page-subtitle">
            Trois formules pour vivre Summer Sky à votre rythme. Early bird jusqu'au 10 juin 2026 — quantité limitée.
          </p>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 12, background: "var(--ink)", color: "#fff", borderRadius: 999, padding: "6px 14px", fontSize: 13, fontWeight: 600 }}>
            <span>🎟️</span> Paiement sécurisé via <strong style={{ marginLeft: 4 }}>Weezevent</strong>
          </div>
        </div>
      </header>

      <section className="section" style={{ paddingTop: 30 }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20 }}>
            <Ticket variant="ticket-early" name="Early Bird" price="20" ribbon="Offre limitée" onClick={goEarly}
              perks={["Accès complet au festival", "Accès piscine illimité", "Main stage"]} />
            <Ticket variant="ticket-standard" name="Regular" price="25" onClick={goRegular}
              perks={["Accès complet au festival", "Accès piscine illimité", "Main stage"]} />
            <Ticket variant="ticket-vip" name="Last Chance" price="30" ribbon="Best" onClick={goLast} comingSoon
              perks={["Accès complet au festival", "Accès piscine illimité", "Main stage", "Tout le Standard +", "Bar premium dédié"]} />
            <Ticket variant="ticket-door" name="Sur place" price="35" ribbon="Jour J" onClick={null}
              perks={["Accès complet au festival", "Accès piscine illimité", "Main stage", "Paiement à l'entrée le 20 juin"]} />
          </div>

          {/* Note prix VIP */}
          <div style={{ background: "var(--ink)", color: "#fff", borderRadius: "var(--r-md)", padding: "16px 20px", marginTop: 16, display: "flex", gap: 12, alignItems: "flex-start" }}>
            <span style={{ fontSize: 22, flexShrink: 0 }}>💡</span>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>Tu veux réserver une table VIP ?</div>
              <div style={{ fontSize: 13, lineHeight: 1.6, opacity: 0.85 }}>
                Le billet <strong>Last Chance (30€)</strong> donne accès au festival — il ne comprend pas de table VIP.
                Pour réserver une table VIP en bord de piscine, le forfait est de <strong>600€</strong> (bouteille 🍾 incluse) pour <strong>12 à 15 personnes</strong>. Choisis ta table directement sur le plan 3D ci-dessous.
              </div>
            </div>
          </div>

          <p style={{ textAlign: "center", marginTop: 16, fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>
            Vous pouvez aussi réserver une <strong>table VIP (600€)</strong> depuis le plan 3D ci-dessous — la bouteille est incluse dans le forfait.
          </p>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
            <button className="btn btn-pink" onClick={goBooking} style={{ fontSize: 17, padding: "20px 36px" }}>
              Réserver une table sur le plan 3D <span aria-hidden="true">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ── CGV ── */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="section-head" style={{ marginBottom: 24 }}>
            <div>
              <Eyebrow>Mentions légales</Eyebrow>
              <h2>Conditions <em>générales.</em></h2>
            </div>
            <p style={{ maxWidth: 360, fontSize: 14, color: "var(--ink-2)", fontWeight: 500 }}>
              En achetant un billet, vous acceptez l'ensemble des conditions ci-dessous.
            </p>
          </div>
          <CgvAccordion />
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="block b-cream">
            <div className="two-col">
              <div>
                <Eyebrow>Inclus dans tous les billets</Eyebrow>
                <h2 className="h-display" style={{ fontSize: "clamp(32px, 4vw, 52px)", marginTop: 12 }}>
                  Pour tout le monde,<br/>peu importe le <em>tarif.</em>
                </h2>
                <ul style={{ listStyle: "none", padding: 0, marginTop: 24, display: "flex", flexDirection: "column", gap: 12, fontSize: 15 }}>
                  {[
                    "Accès main stage",
                    "Piscine ouverte 10 heures",
                    "Parking gratuit sur site",
                  ].map((s, i) => (
                    <li key={i} style={{ display: "flex", gap: 12, alignItems: "center", fontWeight: 500 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 999, background: "var(--sun-3)", border: "2px solid var(--ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--ink)", fontSize: 13, fontWeight: 700 }}>✓</span>
                      {s}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <Eyebrow>Garanties</Eyebrow>
                <h2 className="h-display" style={{ fontSize: "clamp(32px, 4vw, 52px)", marginTop: 12 }}>
                  Sans <em>risque.</em>
                </h2>
                <div style={{ display: "flex", flexDirection: "column", marginTop: 24 }}>
                  <Guarantee t="Remboursement intempéries" d="En cas d'annulation pour cause météo extrême, billets intégralement remboursés sous 14 jours." />
                  <Guarantee t="Revente facile" d="Vous pouvez transférer ou revendre votre billet à un autre nom jusqu'au 19 juin." />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Modal de consentement obligatoire ── */}
      {showConsent && (
        <div
          style={{
            position: "fixed", inset: 0, zIndex: 2000,
            background: "rgba(26,13,58,0.72)", backdropFilter: "blur(6px)",
            display: "flex", alignItems: "flex-start", justifyContent: "center",
            padding: "16px",
            overflowY: "auto",
            WebkitOverflowScrolling: "touch",
          }}
          onClick={() => setShowConsent(false)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              background: "var(--paper)", borderRadius: "var(--r-md)",
              border: "3px solid var(--ink)", boxShadow: "10px 10px 0 var(--ink)",
              padding: "24px 20px", maxWidth: 560, width: "100%",
              maxHeight: "88vh",
              overflowY: "auto",
              WebkitOverflowScrolling: "touch",
            }}
          >
            {/* Header */}
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <div style={{ width: 44, height: 44, borderRadius: 999, background: "var(--sun-3)", border: "2px solid var(--ink)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, flexShrink: 0 }}>⚠️</div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--pink-1)", fontWeight: 700 }}>Engagement obligatoire</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 20, letterSpacing: "-0.02em", marginTop: 2 }}>Avant de continuer</div>
              </div>
            </div>

            {/* Texte légal */}
            <div style={{ background: "var(--cream-2)", border: "2px solid var(--ink)", borderRadius: "var(--r-sm)", padding: "16px 18px", fontSize: 13, lineHeight: 1.8, color: "var(--ink)", fontWeight: 500, marginBottom: 20 }}>
              <p style={{ margin: "0 0 10px 0" }}>Je reconnais que l'accès à l'espace piscine comporte des <strong>risques inhérents aux activités aquatiques et festives</strong>. Je certifie être apte à utiliser les installations sous ma propre responsabilité et m'engage à respecter l'ensemble des consignes de sécurité communiquées par l'organisateur et le personnel encadrant.</p>
              <p style={{ margin: "0 0 10px 0" }}>Je reconnais que tout comportement dangereux, imprudent, inadapté ou lié à une consommation excessive d'alcool ou de substances illicites <strong>engage ma responsabilité personnelle</strong>.</p>
              <p style={{ margin: 0 }}>Je <strong>décharge l'organisateur</strong> de toute responsabilité en cas d'accident, blessure, dommage ou incident résultant du non-respect des consignes de sécurité ou d'un comportement fautif de ma part.</p>
            </div>

            {/* Case à cocher */}
            <label style={{ display: "flex", alignItems: "flex-start", gap: 14, cursor: "pointer", marginBottom: 24, padding: "14px 16px", border: `2px solid ${checked ? "var(--grass)" : "var(--ink)"}`, borderRadius: "var(--r-sm)", background: checked ? "rgba(111,217,106,0.12)" : "transparent", transition: "all 0.2s" }}>
              <input
                type="checkbox"
                checked={checked}
                onChange={(e) => setChecked(e.target.checked)}
                style={{ width: 22, height: 22, flexShrink: 0, marginTop: 1, accentColor: "var(--grass)", cursor: "pointer" }}
              />
              <span style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.5 }}>
                Je reconnais avoir lu et j'accepte l'intégralité des conditions ci-dessus. Je certifie être majeur(e) et apte à participer à cet événement.
              </span>
            </label>

            {/* Boutons */}
            <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
              <button className="btn btn-ghost" onClick={() => setShowConsent(false)} style={{ fontSize: 14 }}>
                Annuler
              </button>
              <button
                className="btn btn-pink"
                onClick={confirmConsent}
                disabled={!checked}
                style={{ fontSize: 14, opacity: checked ? 1 : 0.45, cursor: checked ? "pointer" : "not-allowed" }}
              >
                Confirmer et continuer <span aria-hidden="true">→</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Ticket({ variant, name, price, perks, ribbon, onClick, comingSoon }) {
  const isPink = variant === "ticket-vip";
  const isSky = variant === "ticket-group";
  const isDoor = variant === "ticket-door";
  return (
    <div className={`ticket-card ${variant}`} style={{ position: "relative", overflow: "hidden" }}>
      {ribbon && <div className="ribbon">{ribbon}</div>}
      <div className="top">
        <h3 className="name">{name}</h3>
      </div>
      <div className="price">{price}<small>€</small></div>
      <div className="ticket-perforation" />
      <ul>
        {perks.map((p, i) => <li key={i}>{p}</li>)}
      </ul>
      {isDoor ? (
        <div style={{ background: "rgba(0,0,0,0.15)", borderRadius: 12, padding: "10px 14px", fontSize: 13, fontWeight: 700, textAlign: "center", color: "var(--ink)", marginTop: 8 }}>
          💵 Paiement uniquement le jour J à l'entrée
        </div>
      ) : (
        <button className="btn cta" onClick={comingSoon ? null : onClick} disabled={comingSoon} style={{
          background: "var(--ink)",
          color: isPink ? "var(--pink-2)" : isSky ? "var(--sky-1)" : "var(--sun-3)",
          boxShadow: "4px 4px 0 " + (comingSoon ? "rgba(0,0,0,0.2)" : "var(--cream)"),
          opacity: comingSoon ? 0.5 : 1,
          cursor: comingSoon ? "default" : "pointer",
        }}>
          {comingSoon ? "Bientôt disponible" : <>{`Réserver`} <span aria-hidden="true">→</span></>}
        </button>
      )}

      {/* Bannière "Bientôt disponible" */}
      {comingSoon && (
        <div style={{
          position: "absolute", inset: 0,
          background: "rgba(10, 5, 30, 0.52)",
          backdropFilter: "blur(3px)",
          display: "flex", alignItems: "center", justifyContent: "center",
          zIndex: 10, borderRadius: "inherit",
        }}>
          <div style={{
            background: "var(--ink)", color: "var(--sun-3)",
            border: "3px solid var(--sun-3)",
            borderRadius: 999, padding: "12px 24px",
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(14px, 3vw, 18px)", letterSpacing: "-0.02em",
            textAlign: "center", boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{ fontSize: 20 }}>⏳</span>
            Bientôt disponible
          </div>
        </div>
      )}
    </div>
  );
}

function Guarantee({ t, d }) {
  return (
    <div style={{ paddingTop: 14, paddingBottom: 14, borderTop: "2px solid var(--ink)" }}>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.01em" }}>{t}</div>
      <div style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5, color: "var(--ink-2)", fontWeight: 500 }}>{d}</div>
    </div>
  );
}

// ── CGV Accordion ─────────────────────────────────────────────────────────
const CGV_SECTIONS = [
  {
    title: "Responsabilité — Espace piscine",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <p>L'accès à l'espace piscine est strictement réservé aux participants de l'événement et s'effectue sous la responsabilité individuelle de chaque utilisateur.</p>
        <p>L'organisateur met en place des dispositifs de sécurité adaptés à l'événement, incluant notamment la présence de personnel de sécurité et/ou de maîtres-nageurs surveillants.</p>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 12 }}>Chaque participant s'engage à :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Respecter les consignes de sécurité communiquées par l'organisateur et le personnel encadrant ;</li>
          <li>Adopter un comportement prudent et respectueux ;</li>
          <li>Ne pas accéder à l'espace piscine en cas d'état d'ébriété manifeste ou de comportement dangereux.</li>
        </ul>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 12 }}>Règles spécifiques :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Interdiction de plonger si le bassin n'est pas adapté au plongeon ;</li>
          <li>Interdiction de courir autour de la piscine ;</li>
          <li>Possibilité de refus d'accès à la piscine en cas de non-respect des règles ;</li>
          <li>Obligation de respecter les consignes des maîtres-nageurs en toutes circonstances ;</li>
          <li>Les participants reconnaissent les risques liés à la pratique d'une activité aquatique.</li>
        </ul>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 12 }}>L'organisateur ne pourra être tenu responsable des dommages résultant :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>D'un non-respect des consignes de sécurité ;</li>
          <li>D'un comportement imprudent, dangereux ou inadapté du participant ;</li>
          <li>De l'état d'alcoolisation ou de consommation de substances illicites ;</li>
          <li>D'une utilisation de l'espace piscine contraire à sa destination normale.</li>
        </ul>
        <p style={{ marginTop: 12 }}>Chaque participant demeure pleinement responsable de son comportement durant l'événement. L'organisateur se réserve le droit d'exclure immédiatement toute personne présentant un comportement dangereux.</p>
      </div>
    ),
  },
  {
    title: "Billetterie & remboursements",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Les billets sont personnels et peuvent être transférés à un tiers jusqu'au 19 juin 2026, date limite de transfert.</li>
          <li>Aucun remboursement ne sera effectué après la date d'achat, sauf annulation totale de l'événement.</li>
          <li>En cas d'annulation de l'événement pour cause météo extrême (décision des autorités ou de la sécurité civile), les billets sont intégralement remboursés sous 14 jours ouvrés.</li>
          <li>En cas de report de l'événement, les billets restent valables pour la nouvelle date. Un remboursement peut être demandé dans un délai de 30 jours suivant l'annonce du report.</li>
          <li>L'organisateur se réserve le droit de modifier les artistes, les horaires ou le programme sans obligation de remboursement, sauf annulation totale de l'événement.</li>
          <li>Tout billet perdu, volé ou endommagé ne sera pas remplacé. L'organisateur décline toute responsabilité en cas d'utilisation frauduleuse d'un billet.</li>
          <li>Les billets achetés auprès de revendeurs non agréés ne sont pas garantis et peuvent être refusés à l'entrée.</li>
        </ul>
      </div>
    ),
  },
  {
    title: "Accès & conditions générales",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>L'accès au festival est strictement interdit aux mineurs de moins de 16 ans. Les 16-17 ans doivent être accompagnés d'un parent ou tuteur légal.</li>
          <li>Une pièce d'identité valide peut être demandée à l'entrée pour vérification de l'âge.</li>
          <li>L'organisateur se réserve le droit de refuser l'entrée à toute personne en état d'ébriété manifeste ou présentant un comportement agressif ou dangereux, sans remboursement du billet.</li>
          <li>Des fouilles de sécurité sont effectuées à l'entrée. Tout refus de fouille entraîne le refus d'accès sans remboursement.</li>
          <li>Tout objet dangereux (bouteilles en verre, armes, objets tranchants) est strictement interdit sur le site et sera confisqué.</li>
          <li>La consommation ou la détention de drogues ou substances illicites est formellement interdite et donnera lieu à une exclusion immédiate et un signalement aux autorités.</li>
          <li>L'organisateur décline toute responsabilité en cas de vol, perte ou détérioration d'objets personnels sur le site.</li>
          <li>L'organisateur se réserve le droit d'exclure immédiatement et sans remboursement toute personne ne respectant pas le règlement intérieur.</li>
          <li>En achetant un billet, le participant accepte l'intégralité des présentes conditions générales.</li>
        </ul>
      </div>
    ),
  },
  {
    title: "Droit à l'image & captation",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <p>En accédant au site de l'événement, le participant accepte expressément que des photos, vidéos et captations audiovisuelles puissent être réalisées lors de l'événement.</p>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 10 }}>Ces enregistrements pourront être utilisés par l'organisateur à des fins :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>De communication et promotion de l'événement (réseaux sociaux, site internet, affiches…) ;</li>
          <li>De couverture presse et médias partenaires ;</li>
          <li>D'archives et documentation de l'événement.</li>
        </ul>
        <p style={{ marginTop: 10 }}>Le participant peut s'opposer à l'utilisation de son image en se manifestant auprès de l'organisateur à l'adresse e-mail de contact, dans un délai de 30 jours suivant l'événement.</p>
        <p style={{ marginTop: 10 }}>La captation vidéo ou sonore des artistes à des fins commerciales est strictement interdite sans autorisation écrite préalable de l'organisateur.</p>
      </div>
    ),
  },
  {
    title: "Protection des données personnelles (RGPD)",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <p>Conformément au Règlement Général sur la Protection des Données (RGPD — UE 2016/679), le participant est informé que ses données personnelles collectées lors de l'achat de son billet sont traitées par l'organisateur.</p>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 10 }}>Données collectées :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Nom, prénom, adresse e-mail ;</li>
          <li>Données de paiement (traitées exclusivement par la plateforme Weezevent, sécurisée PCI-DSS) ;</li>
          <li>Données de connexion et de navigation.</li>
        </ul>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 10 }}>Finalités du traitement :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Gestion de la billetterie et confirmation de réservation ;</li>
          <li>Communication relative à l'événement ;</li>
          <li>Envoi d'informations sur les prochains événements (avec consentement).</li>
        </ul>
        <p style={{ marginTop: 10 }}>Vos données ne seront pas transmises à des tiers à des fins commerciales sans votre consentement explicite.</p>
        <p style={{ marginTop: 10 }}>Conformément à la réglementation, vous disposez d'un droit d'accès, de rectification, de suppression et de portabilité de vos données, ainsi que d'un droit d'opposition. Pour exercer ces droits, contactez-nous à l'adresse e-mail disponible sur la page Contact.</p>
      </div>
    ),
  },
  {
    title: "Force majeure & responsabilité de l'organisateur",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <p>L'organisateur ne pourra être tenu responsable de l'inexécution totale ou partielle de ses obligations en cas de survenance d'un événement de force majeure, c'est-à-dire tout événement imprévisible, irrésistible et extérieur à la volonté de l'organisateur.</p>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 10 }}>Constituent notamment des cas de force majeure :</p>
        <ul style={{ paddingLeft: 20, marginTop: 6 }}>
          <li>Catastrophes naturelles, intempéries exceptionnelles ;</li>
          <li>Épidémies, pandémies ou mesures sanitaires imposées par les autorités ;</li>
          <li>Grèves, conflits sociaux affectant l'organisation de l'événement ;</li>
          <li>Actes de terrorisme ou menaces de sécurité ;</li>
          <li>Décisions gouvernementales ou préfectorales d'interdiction.</li>
        </ul>
        <p style={{ marginTop: 10 }}>En cas de force majeure entraînant l'annulation de l'événement, l'organisateur s'efforcera de proposer un report ou un remboursement dans les meilleurs délais, sans que cela puisse donner lieu à une indemnisation supplémentaire.</p>
        <p style={{ marginTop: 10 }}>L'organisateur décline toute responsabilité pour les frais annexes engagés par le participant (transport, hébergement, etc.).</p>
      </div>
    ),
  },
  {
    title: "Organisateur & droit applicable",
    content: (
      <div style={{ fontSize: 14, lineHeight: 1.8, color: "var(--ink-2)", fontWeight: 500 }}>
        <p style={{ fontWeight: 700, color: "var(--ink)" }}>Organisateur de l'événement :</p>
        <p>Summer Sky — Événement privé<br />Le Plongeoir, Pôle Européen — Yvré-l'Évêque, 72 530</p>
        <p style={{ marginTop: 10 }}>Pour toute question relative aux présentes conditions générales, vous pouvez nous contacter via la page Contact du site.</p>
        <p style={{ fontWeight: 700, color: "var(--ink)", marginTop: 10 }}>Droit applicable :</p>
        <p>Les présentes conditions générales sont soumises au droit français. En cas de litige, et à défaut de résolution amiable, les tribunaux compétents seront ceux du ressort du siège de l'organisateur.</p>
        <p style={{ marginTop: 10, fontSize: 12, color: "var(--ink-3)" }}>Dernière mise à jour : mai 2026. L'organisateur se réserve le droit de modifier les présentes conditions à tout moment. La version applicable est celle en vigueur à la date d'achat du billet.</p>
      </div>
    ),
  },
];

function CgvAccordion() {
  const [open, setOpen] = useTicketState(null);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 0, border: "2px solid var(--ink)", borderRadius: "var(--r-md)", overflow: "hidden" }}>
      {CGV_SECTIONS.map((s, i) => (
        <div key={i} style={{ borderTop: i > 0 ? "2px solid var(--ink)" : "none" }}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            style={{
              width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "18px 24px", background: open === i ? "var(--sun-3)" : "var(--paper)",
              border: 0, cursor: "pointer", fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 17, letterSpacing: "-0.01em", color: "var(--ink)", transition: "background 0.2s",
              textAlign: "left", gap: 12,
            }}
          >
            <span>{s.title}</span>
            <span style={{ fontSize: 20, fontWeight: 400, flexShrink: 0, transition: "transform 0.2s", transform: open === i ? "rotate(45deg)" : "rotate(0deg)" }}>+</span>
          </button>
          {open === i && (
            <div style={{ padding: "0 24px 20px 24px", background: "var(--paper)" }}>
              {s.content}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PageTickets });