/* global React, Eyebrow */

function PageInfos() {
  return (
    <div className="page-fade">
      <header className="page-header">
        <div className="shell">
          <Eyebrow>Tout savoir avant de venir</Eyebrow>
          <h1 className="page-title gradient-pool">Infos.</h1>
          <p className="page-subtitle">
            Date, lieu, accès, ce qu'on accepte sur place et tout le reste.
          </p>
        </div>
      </header>

      <section className="section" style={{ paddingTop: 30 }}>
        <div className="shell">
          <div className="info-grid">
            <Info icon="20" tone="t-sun" title="Date & horaires" lines={["Samedi 20 juin 2026", "Ouverture 11h00", "Fermeture 22h30"]} />
            <Info icon="◎" tone="t-pink" title="Lieu" lines={["Le Plongeoir", "Pôle Européen", "Yvré-l'Évêque · 72 530"]} />
            <Info icon="P" tone="t-sky" title="Parking" lines={["Parking gratuit sur site", "2 000 places", "Covoiturage encouragé"]} />
            <Info icon="≈" tone="t-lime" title="Piscine" lines={["Ouverte 11h → 23h", "Maillot obligatoire", "Vestiaires sur place"]} />
            <Info icon="★" tone="t-coral" title="Espace VIP" lines={["Accès dédié", "Bar premium", "Terrasse vue scène"]} />
            <Info icon="✱" tone="t-cream" title="Restauration" lines={["Food Trucks", "Bars cocktails", "Options végé / sans gluten"]} />
            <Info icon="✓" tone="t-pool" title="Sécurité" lines={["Fouilles à l'entrée", "Équipe médicale"]} />
            <Info icon="✗" tone="t-plum" title="Interdit" lines={["Bouteilles en verre", "Boissons extérieures", "Animaux"]} />
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="two-col">
            <div>
              <Eyebrow>Comment venir</Eyebrow>
              <h2 className="h-display" style={{ fontSize: "clamp(36px, 5vw, 60px)", marginTop: 12 }}>
                Le Mans est<br/>à <em>10 minutes.</em>
              </h2>
              <div style={{ marginTop: 24, display: "flex", flexDirection: "column" }}>
                <KV k="En voiture" v="A11 sortie 9 · A28 sortie 23 · 4h depuis Paris" />
                <KV k="En train" v="TGV Paris–Le Mans en 55 min, puis navette dédiée" />
                <KV k="Navettes festival" v="Gare du Mans → Site, toutes les 20 min" />
                <KV k="Vélo" v="Piste cyclable depuis Le Mans · Parking vélo sécurisé" />
                <KV k="Aéroport" v="Nantes 1h45 · Paris CDG 2h45" />
              </div>
            </div>
            <div style={{ aspectRatio: "4/5", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)", position: "relative" }}>
              <iframe
                src="https://maps.google.com/maps?q=Pole+Europeen+du+Cheval+1610+route+de+Feumusson+72530+Yvre+l+Eveque&t=p&z=16&ie=UTF8&iwloc=&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: "block", filter: "saturate(1.15) contrast(1.05)" }}
                loading="lazy"
                allowFullScreen
                title="Carte relief — Le Plongeoir, Yvré-l'Évêque"
              />
              {/* Étiquette de localisation */}
              <div style={{
                position: "absolute", bottom: 14, left: 12, right: 12,
                background: "var(--ink)", color: "var(--cream)",
                borderRadius: 12, padding: "10px 14px",
                fontFamily: "var(--font-display)", fontWeight: 800,
                display: "flex", alignItems: "center", gap: 10,
                boxShadow: "4px 4px 0 rgba(0,0,0,0.35)",
                pointerEvents: "none",
              }}>
                <span style={{ fontSize: 22 }}>📍</span>
                <div>
                  <div style={{ fontSize: 15, letterSpacing: "-0.01em" }}>Le Plongeoir</div>
                  <div style={{ fontSize: 12, fontWeight: 500, opacity: 0.75, marginTop: 2 }}>Yvré-l'Évêque · 72 530 · Sarthe</div>
                </div>
                <div style={{ marginLeft: "auto", background: "var(--sun-3)", color: "var(--ink)", borderRadius: 999, padding: "4px 10px", fontSize: 11, fontWeight: 700, border: "2px solid var(--cream)" }}>
                  10 min du Mans
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="section-head">
            <div>
              <Eyebrow>Galerie</Eyebrow>
              <h2>Le <em>Plongeoir.</em></h2>
            </div>
            <p style={{ maxWidth: 360, fontSize: 14, color: "var(--ink-2)", fontWeight: 500 }}>
              Le site tel qu'il est — piscine, lounge, soleil.
            </p>
          </div>

          {/* Rangée 1 — grande image + portrait */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 14, marginBottom: 14 }}>
            <div style={{ gridColumn: "span 8", aspectRatio: "16/10", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5345.jpeg" alt="Vue d'ensemble piscine et lounge" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ gridColumn: "span 4", aspectRatio: "3/4", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5347.jpeg" alt="Lounge vue verticale" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>

          {/* Rangée 2 — trois images */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 14 }}>
            <div style={{ aspectRatio: "4/3", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5346.jpeg" alt="Piscine et bâtiment" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ aspectRatio: "4/3", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5352.jpeg" alt="Chaises longues orange" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ aspectRatio: "4/3", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5350.jpeg" alt="Zone lounge large" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>

          {/* Rangée 3 — quatre images */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 14 }}>
            <div style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5342.jpeg" alt="Poufs bleus et transats" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5353.jpeg" alt="Canapés lounge gris" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5344.jpeg" alt="Lounge avec bâtiment" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/IMG_5354.jpeg" alt="Salon outdoor" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>

        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="section-head">
            <div>
              <Eyebrow>Questions fréquentes</Eyebrow>
              <h2>FAQ.</h2>
            </div>
          </div>
          <Faq />
        </div>
      </section>
    </div>
  );
}

function Info({ icon, tone, title, lines }) {
  return (
    <div className={`info-card ${tone}`}>
      <div className="icon-square">{icon}</div>
      <h3>{title}</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 14, marginTop: 4, fontWeight: 500 }}>
        {lines.map((l, i) => <span key={i}>{l}</span>)}
      </div>
    </div>
  );
}

function KV({ k, v }) {
  return <div className="kv-row"><span className="k">{k}</span><span className="v">{v}</span></div>;
}

function Faq() {
  const items = [
    { q: "Y a-t-il un âge minimum ?", a: "Le festival est ouvert à partir de 17 ans. Les mineurs doivent être accompagnés d'un parent ou tuteur." },
    { q: "Puis-je venir en maillot ?", a: "Oui — c'est même chaudement recommandé. Vestiaires et casiers disponibles à la piscine." },
    { q: "Les billets sont-ils nominatifs ?", a: "Non, vous pouvez offrir ou revendre votre billet jusqu'à la veille de l'événement." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <button key={i} onClick={() => setOpen(open === i ? -1 : i)} className={open === i ? "open" : ""} style={{ gap: open === i ? 14 : 0, transition: "gap 0.3s" }}>
          <div className="q-row">
            <span className="q-text">{it.q}</span>
            <span className="q-icon">{open === i ? "–" : "+"}</span>
          </div>
          <div className="a-text" style={{
            maxHeight: open === i ? 200 : 0,
            overflow: "hidden",
            opacity: open === i ? 1 : 0,
            transition: "all 0.4s ease",
          }}>{it.a}</div>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { PageInfos });