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

// ── Mettre à false pour révéler les têtes d'affiche ──────────────────────
const FEATURED_HIDDEN = true; // mettre false pour révéler R2 et Leto

const STAGES = [
  { id: "all", label: "Tout le programme", color: "#ffc23d" },
  { id: "main", label: "Main Stage", color: "#ff5e3a" },
];

const ARTISTS = [
  { name: "R2", role: "Concert · Tête d'affiche", stage: "main", time: "21:00", featured: true, bg: "bg-1", text: "dark-text", img: "assets/headliner-1.jpeg", imgPos: "center 65%", bio: "Rappeur français né en 2004 en Essonne, R2 (Rayann Mondésir Kipre) s'impose en un temps record comme l'une des révélations du rap français. Son style mêle Drill, Jersey et Trap avec une énergie brute et une touche mélodique qui le démarquent. Révélé en 2023 avec Pastille Bleue, il enchaîne les sorties marquantes avant de frapper fort en 2025 avec Ruinart — numéro 1 du Top 50 Spotify France — et son album 7/7. Sélectionné parmi les \"11 rappeurs à suivre\" de Booska-P, il est signé chez Blue Sky et 360 OTG." },
  { name: "Leto", role: "DJ · À découvrir", stage: "main", time: "22:00", featured: true, bg: "bg-8", text: "light-text", img: "assets/surprise-guest.jpeg", imgPos: "center 20%", bio: "Né à Paris dans une famille d'origine congolaise, Leto (Henoc Bofenda) grandit Porte de Saint-Ouen dans le 17ème. Il co-fonde le duo PSO Thug en 2014 avant de se lancer en solo chez Warner (Rec. 118). Trap$tar en 2018 pose ses bases, mais c'est 100 Visages en 2020 — certifié platine — qui le propulse au sommet, notamment grâce au hit Macaroni avec Ninho. Son album 17% en 2021, également certifié platine, confirme son statut de valeur sûre du rap FR." },
  { name: "DJ Iccy",   role: "Live · Chant",        stage: "main", time: "11:00", bg: "bg-6", text: "light-text", img: "assets/vocaliste.jpeg",   imgPos: "center 15%",  bio: "Trap, Rap, Underground, FR & US", instagram: "https://www.instagram.com/iccyccx?igsh=MXF2cDlqYjB0azJkbA==" },
  { name: "DJ Nelsao", role: "DJ · House",           stage: "main", time: "12:30", bg: "bg-4", text: "dark-text",  img: "assets/pool-selector.jpeg", imgPos: "center 25%", bio: "BAILE FUNK, TRAP, RAP, UNDERGROUND, R&B", instagram: "https://www.instagram.com/nelsao.wav?igsh=dXFiZzg1bmh5azI=" },
  { name: "DJ Ash",    role: "DJ Set · Open",        stage: "main", time: "14:00", bg: "bg-7", text: "dark-text",  img: "assets/sunrise-b2b.jpeg",  imgPos: "center 20%",  bio: "AFRO HOUSE, RAP, HOUSEHOLIC CERTIFIED", instagram: "https://www.instagram.com/dj.ash?igsh=cHM4d3ZxeHgyZHFz" },
  { name: "DJ Karlson",role: "Concert · Indé FR",    stage: "main", time: "15:30", bg: "bg-5", text: "dark-text",  img: "assets/local-hero.jpeg",   imgPos: "center 20%",  bio: "HOUSE, AFRO VIBES", instagram: "https://www.instagram.com/karlson_1?igsh=aXYyajZ2bDhjdzlv" },
  { name: "DJ M-ADD",  role: "DJ · Coucher de soleil",stage: "main",time: "17:00", bg: "bg-3", text: "dark-text",  img: "assets/sunset-dj.jpeg",    bio: "PRODUCER PROGRESSIVE / AFROHOUSE", instagram: "https://www.instagram.com/maddmusic?igsh=MWZkZ3Boem11NTBwZw==" },
  { name: "DJ Milane", role: "Concert live",         stage: "main", time: "19:15", semi: true, bg: "bg-2", text: "light-text", img: "assets/live-act.jpeg", bio: "DJ et producteur français actif sous son propre label Milane Meritte Production, DJ Milane s'est fait remarquer dans la sphère rap en collaborant avec le rappeur Landy sur le titre Rolling Stones, sorti en 2026. Très présent sur TikTok via son compte @dj_milane_replay, il y développe sa visibilité et partage ses productions rap/hip-hop. Un artiste en pleine ascension sur la scène urbaine française.", instagram: "https://www.instagram.com/milanemeritte?igsh=YW1leDl3b2tza25k" },
];

function PageLineup() {
  const [stage, setStage] = useState("all");
  const filtered = stage === "all" ? ARTISTS : ARTISTS.filter((a) => a.stage === stage);
  return (
    <div className="page-fade">
      <header className="page-header">
        <div className="shell">
          <h1 className="page-title gradient-pink">Line<span style={{ color: "var(--ink)" }}>·</span>up.</h1>
          <p className="page-subtitle">
            Une main stage. De 11h à 23h. Mise à jour à venir.
          </p>
        </div>
      </header>

      <section className="section" style={{ paddingTop: 30 }}>
        <div className="shell">
          <div className="stage-tabs">
            {STAGES.map((s) => (
              <button key={s.id}
                className={`stage-tab ${stage === s.id ? "active" : ""}`}
                onClick={() => setStage(s.id)}
              >
                <span className="dot" style={{ background: s.color }} />
                {s.label}
              </button>
            ))}
          </div>

          {/* Têtes d'affiche */}
          <div className="featured-grid">
            {filtered.filter(a => a.featured).map((a, i) => (
              <ArtistCard key={i} {...a} />
            ))}
          </div>
          {/* Autres artistes */}
          <div className="artists-grid-others">
            {filtered.filter(a => !a.featured).map((a, i) => (
              <ArtistCard key={i} {...a} semi={false} />
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="section-head">
            <div>
              <Eyebrow>Programme par horaires</Eyebrow>
              <h2>Plan de la <em>journée.</em></h2>
            </div>
            <p style={{ maxWidth: 320, fontSize: 14, color: "var(--ink-2)", fontWeight: 500 }}>
              Slots indicatifs. Programme final mis à jour 48h avant le festival.
            </p>
          </div>
          <div className="schedule">
            {[
              { t: "11h00",         n: "Ouverture des portes · Pool open", c: "#ffc23d", opening: true },
              { t: "11h – 12h30",   n: "DJ Iccy",     c: "#ff5e3a" },
              { t: "12h30 – 14h",   n: "DJ Nelsao",   c: "#ff5e3a" },
              { t: "14h – 15h30",   n: "DJ Ash",      c: "#ff5e3a" },
              { t: "15h30 – 17h",   n: "DJ Karlson",  c: "#ff5e3a" },
              { t: "17h – 18h30",   n: "DJ M-ADD",    c: "#ff5e3a" },
              { t: "18h30 – 19h15", n: "???",         c: "#ff5e3a", hidden: true },
              { t: "19h15 – 21h",   n: "DJ Milane",   c: "#ff5e3a" },
              { t: "21h",           n: "???",         c: "#ff5e3a", hidden: true },
              { t: "22h",           n: "À venir",     c: "#6dd5ff", tba: true },
            ].map((r, i) => (
              <div className="schedule-row" key={i} style={{ opacity: r.opening ? 0.7 : 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14, flex: 1 }}>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700,
                    letterSpacing: "0.06em", color: r.c, flexShrink: 0, minWidth: 110,
                  }}>{r.t}</div>
                  <div>
                    {r.hidden && FEATURED_HIDDEN ? (
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <div style={{ width: 90, height: 16, borderRadius: 4, background: "rgba(0,0,0,0.18)", filter: "blur(5px)" }} />
                        <span style={{ fontSize: 10, fontFamily: "var(--font-mono)", fontWeight: 700, background: "var(--ink)", color: "var(--sun-3)", padding: "2px 8px", borderRadius: 999, letterSpacing: "0.08em" }}>⭐ À venir</span>
                      </div>
                    ) : r.tba ? (
                      <div className="schedule-name" style={{ fontStyle: "italic", opacity: 0.5 }}>{r.n}</div>
                    ) : (
                      <div className="schedule-name">{r.n}</div>
                    )}
                  </div>
                </div>
                <div className="schedule-stage" style={{ color: r.c }}>Main Stage</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ArtistCard({ name, role, stage, time, featured, semi, bg, text, img, imgPos, bio, instagram }) {
  const [showBio, setShowBio] = useState(false);
  const stageObj = STAGES.find((s) => s.id === stage);
  const hasPhoto = !!img;
  const isHidden = FEATURED_HIDDEN && !!featured;
  const hasBio = hasPhoto && !!bio && !isHidden;
  return (
    <div
      className={`artist-card ${featured ? "featured" : semi ? "semi" : ""} ${hasPhoto ? "has-photo" : "tba"} ${bg} ${text}`}
      onClick={() => hasBio && setShowBio(!showBio)}
      style={{ cursor: hasBio ? "pointer" : "default" }}
    >
      <div className="img-slot">
        {hasPhoto && (
          <img
            src={img}
            alt="Artiste"
            style={{
              width: "100%", height: "100%", objectFit: "cover",
              objectPosition: imgPos || "center top",
              borderRadius: "var(--r-sm)", display: "block",
              filter: isHidden ? "blur(22px) brightness(0.65)" : "none",
              transform: isHidden ? "scale(1.18)" : "none",
              transition: "filter 0.6s, transform 0.6s",
            }}
          />
        )}
      </div>
      <div className="stage-pill">
        <span style={{ width: 8, height: 8, borderRadius: 999, background: stageObj?.color, display: "inline-block" }} />
        {stageObj?.label}
      </div>
      {!isHidden && !hasPhoto && (
        <div style={{ position: "absolute", top: 16, right: 16 }}>
          <span className="tba-sticker">À venir</span>
        </div>
      )}
      {!isHidden && hasBio && !showBio && (
        <div style={{ position: "absolute", top: 12, right: 12 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            background: "rgba(0,0,0,0.55)", backdropFilter: "blur(10px)",
            border: "1px solid rgba(255,255,255,0.18)",
            color: "#fff", fontSize: 10, fontWeight: 700,
            padding: "5px 13px", borderRadius: 999,
            fontFamily: "var(--font-mono)", letterSpacing: "0.14em",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: stageObj?.color || "#ffc23d", display: "inline-block", flexShrink: 0 }} />
            BIO
          </span>
        </div>
      )}
      {showBio && (
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(150deg, #0c0620 0%, #140a2e 45%, #0d1628 100%)",
          backdropFilter: "blur(14px)",
          borderRadius: "var(--r-sm)",
          display: "flex", flexDirection: "column",
          zIndex: 10, overflow: "hidden",
        }}>
          {/* Barre colorée en haut */}
          <div style={{ height: 3, background: `linear-gradient(90deg, ${stageObj?.color || "#ffc23d"} 0%, transparent 100%)`, flexShrink: 0 }} />

          <div style={{ padding: "18px 18px 14px", display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>

            {/* Label BIOGRAPHIE */}
            <div style={{
              display: "flex", alignItems: "center", gap: 8, marginBottom: 12, flexShrink: 0,
            }}>
              <span style={{ width: 18, height: 2, background: stageObj?.color || "#ffc23d", borderRadius: 2, display: "block" }} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.22em", color: stageObj?.color || "#ffc23d", textTransform: "uppercase" }}>Biographie</span>
            </div>

            {/* Nom artiste */}
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: "clamp(26px, 5.5vw, 42px)",
              color: "#fff", letterSpacing: "-0.03em", lineHeight: 0.92,
              marginBottom: 12, flexShrink: 0,
            }}>{name}</div>

            {/* Séparateur */}
            <div style={{ height: 1, background: "linear-gradient(90deg, rgba(255,255,255,0.14) 0%, transparent 75%)", marginBottom: 14, flexShrink: 0 }} />

            {/* Texte bio */}
            <div style={{
              fontSize: "clamp(11px, 2.2vw, 13px)", lineHeight: 1.75,
              color: "rgba(255,255,255,0.72)", fontWeight: 400,
              flex: 1, overflowY: "auto",
              fontFamily: "var(--font-body)", letterSpacing: "0.01em",
            }}>{bio}</div>

            {/* Lien Instagram */}
            {instagram && (
              <a
                href={instagram} target="_blank" rel="noopener noreferrer"
                onClick={(e) => e.stopPropagation()}
                style={{
                  display: "flex", alignItems: "center", gap: 8,
                  marginTop: 12, flexShrink: 0,
                  background: "linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045)",
                  border: "none", borderRadius: 8, padding: "9px 14px",
                  color: "#fff", fontSize: 12, fontWeight: 700,
                  fontFamily: "var(--font-mono)", letterSpacing: "0.08em",
                  textDecoration: "none", cursor: "pointer",
                }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
                </svg>
                @{instagram.split('/').filter(Boolean).pop().split('?')[0]}
              </a>
            )}

            {/* Bouton fermer */}
            <button
              onClick={(e) => { e.stopPropagation(); setShowBio(false); }}
              style={{
                marginTop: 14, flexShrink: 0,
                background: "rgba(255,255,255,0.05)",
                border: "1px solid rgba(255,255,255,0.12)",
                color: "rgba(255,255,255,0.45)",
                fontSize: 10, fontWeight: 700, fontFamily: "var(--font-mono)",
                letterSpacing: "0.16em", textTransform: "uppercase",
                padding: "9px 0", borderRadius: 8, cursor: "pointer",
                width: "100%", textAlign: "center",
              }}
            >✕ FERMER</button>
          </div>
        </div>
      )}
      {/* Bannière "À venir" */}
      {isHidden && (
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
          zIndex: 5, pointerEvents: "none",
        }}>
          <div style={{
            background: "var(--ink)",
            color: "var(--sun-3)",
            border: "2.5px solid var(--sun-3)",
            borderRadius: 999,
            padding: featured ? "12px 28px" : "8px 18px",
            fontFamily: "var(--font-display)",
            fontWeight: 900,
            fontSize: featured ? "clamp(15px, 3.5vw, 20px)" : "clamp(11px, 2.5vw, 14px)",
            letterSpacing: "0.04em",
            textTransform: "uppercase",
            boxShadow: "0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,194,61,0.2)",
            display: "flex", alignItems: "center", gap: 8,
            backdropFilter: "blur(4px)",
          }}>
            <span style={{ fontSize: featured ? 18 : 13 }}>⭐</span>
            À venir
          </div>
        </div>
      )}

      <div className="body">
        {isHidden ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ height: featured ? 32 : 22, width: featured ? "65%" : "70%", borderRadius: 6, background: "rgba(0,0,0,0.55)", filter: "blur(6px)" }} />
            <div style={{ height: featured ? 18 : 12, width: "45%", borderRadius: 4, background: "rgba(0,0,0,0.35)", filter: "blur(5px)" }} />
          </div>
        ) : (
          <div className="name">{name}</div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PageLineup });