/* global React, Eyebrow, Countdown, Marquee, PlaceholderImg, ScrollExpandHero */
const { useState, useEffect } = React;

// Médias réels du Plongeoir : photo en fond, vidéo aérienne (drone) en avant-plan.
const HERO_BG_IMAGE = "assets/IMG_5345.jpeg";        // photo claire + lumineuse du site
const HERO_VIDEO_SRC = "assets/sumskyoff2-web.mp4";
const HERO_VIDEO_POSTER = "assets/IMG_5345.jpeg";

function PageHome({ setPage }) {
  return (
    <div className="page-fade">
      <ScrollExpandHero
        mediaType="video"
        mediaSrc={HERO_VIDEO_SRC}
        posterSrc={HERO_VIDEO_POSTER}
        bgImageSrc={HERO_BG_IMAGE}
        scrollToExpand="Scroll pour plonger ☼"
      >
      <section className="hero" style={{ paddingTop: "clamp(20px, 4vw, 40px)" }}>
        <div className="shell">
          <div className="hero-stickers">
            <span className="sticker s-pink">★ 20 JUIN 2026</span>
            <span className="sticker s-sun" style={{ transform: "rotate(2deg)" }}>YVRÉ-L'ÉVÊQUE · SARTHE</span>
            <span className="sticker s-sky" style={{ transform: "rotate(-1deg)" }}>POOL FESTIVAL ☼</span>
          </div>

          <h1 className="hero-title">
            <span className="word summer">SUMMER</span>
            <span className="word sky">sky.</span>
          </h1>

          <div className="hero-meta">
            <div className="meta-sticker alt-1">
              <span className="label">Quand</span>
              <span className="value">20 juin 2026</span>
            </div>
            <div className="meta-sticker alt-2">
              <span className="label">Où</span>
              <span className="value">Le Plongeoir, Pôle Européen</span>
            </div>
            <div className="meta-sticker alt-3">
              <span className="label">Vibe</span>
              <span className="value">Piscine · DJs · Concerts · Food</span>
            </div>
          </div>

          <Countdown />

          <div className="hero-actions">
            <button className="btn btn-pink" onClick={() => { setPage("tickets"); window.scrollTo({ top: 0, behavior: "instant" }); }}>
              Acheter mon billet <span aria-hidden="true">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => { setPage("lineup"); window.scrollTo({ top: 0, behavior: "instant" }); }}>
              Voir le line-up
            </button>
          </div>

          <div className="hero-bottom-strip">
            <div className="colorcard cc-sun">
              <div className="label">Capacité</div>
              <div className="value">2 000</div>
            </div>
            <div className="colorcard cc-pink">
              <div className="label">Stage</div>
              <div className="value">1</div>
            </div>
            <div className="colorcard cc-sky">
              <div className="label">Piscine</div>
              <div className="value">11h–23h</div>
            </div>
          </div>
        </div>
      </section>

      <Marquee items={["POOL OPEN ALL DAY","MAIN STAGE","DJs · LIVE · SUNSET","FOOD TRUCKS","VIP DECK","DANCE UNTIL 23:00"]} />

      <section className="section">
        <div className="shell">
          <div className="section-head">
            <div>
              <Eyebrow>Le concept</Eyebrow>
              <h2>Une journée<br/>au bord du <em>ciel.</em></h2>
            </div>
            <p style={{ maxWidth: 360, fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", fontWeight: 500 }}>
              Maillot de bain, lunettes de soleil, basses chaudes. De 11h à 23h, on transforme Le Plongeoir en cathédrale solaire. Concerts, sets DJ, piscine ouverte, stands de cuisine et un espace VIP avec vue plongeante sur la scène.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 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/plongeoir-piscine-large.jpeg" alt="Piscine du Plongeoir" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={{ gridColumn: "span 4", aspectRatio: "4/5", borderRadius: "var(--r-md)", overflow: "hidden", border: "3px solid var(--ink)", boxShadow: "8px 8px 0 var(--ink)" }}>
              <img src="assets/plongeoir-piscine-2.jpeg" alt="Piscine du Plongeoir" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      <Marquee items={["SUMMER SKY 2026","☼","20 JUIN","☼","LE PLONGEOIR","☼","YVRÉ-L'ÉVÊQUE"]} />

      <section className="section">
        <div className="shell">
          <div className="section-head">
            <div>
              <Eyebrow>Highlights</Eyebrow>
              <h2>Ce qu'on prépare<br/>pour <em>vous.</em></h2>
            </div>
          </div>
          <div className="info-grid">
            <Highlight n="01" tone="t-sun" title="Main Stage" desc="Une scène principale pour les concerts et les sets DJ. Des performances du déjeuner jusqu'au dernier morceau." />
            <Highlight n="02" tone="t-pink" title="Piscine ouverte 10h" desc="Le Plongeoir libère son grand bassin pour la journée. Maillot conseillé. Transats à volonté." />
            <Highlight n="03" tone="t-lime" title="Espace VIP" desc="Bar dédié, terrasse plongeante sur la scène, places assises et accueil personnalisé." />
          </div>
        </div>
      </section>

      </ScrollExpandHero>
    </div>
  );
}

function Highlight({ n, tone, title, desc }) {
  return (
    <div className={`info-card ${tone}`}>
      <div className="icon-square">{n}</div>
      <h3>{title}</h3>
      <p>{desc}</p>
    </div>
  );
}

Object.assign(window, { PageHome });