// Sjednocený design — STREETWEAR-INSPIRED v romantické paletě
// Hero: editorial typo + pink countdown box (z varianty A)
// Karty: 9:16 streetwear-styl, 5 vedle sebe, tag v rohu, name+job pod kartou
// Discord live, Opat04 = pořadatel

const { useState, useEffect, useRef, useMemo } = React;

// ===== Storm lightning path generator (deterministic jagged polyline) =====
const lightningPath = (sx, sy, ex, ey, seed) => {
  const segs = 9;
  const rng = (n) => {
    const v = Math.sin((seed + 1) * 12.9898 + n * 78.233) * 43758.5453;
    return v - Math.floor(v);
  };
  let d = `M${sx},${sy}`;
  for (let i = 1; i < segs; i++) {
    const t = i / segs;
    const bx = sx + (ex - sx) * t;
    const by = sy + (ey - sy) * t;
    const ox = (rng(i * 3.1) - 0.5) * 56;
    const oy = (rng(i * 2.7 + 5) - 0.5) * 18;
    d += ` L${(bx + ox).toFixed(1)},${(by + oy).toFixed(1)}`;
  }
  return d + ` L${ex},${ey}`;
};

// ===== Scroll-driven parallax — víc-vrstvý depth feel na hero =====
// Body se hýbou různými rychlostmi → wow effect, pro-level
function useScrollParallax() {
  useEffect(() => {
    let raf = null;
    const apply = () => {
      const vh = window.innerHeight || 800;
      // Cap na 1× viewport — parallax aktivní jen když je hero v okně
      const y = Math.max(0, Math.min(window.scrollY, vh));
      const root = document.documentElement;
      root.style.setProperty("--py-video", `${y * 0.32}px`);
      root.style.setProperty("--py-display", `${y * -0.14}px`);
      root.style.setProperty("--py-opatova", `${y * 0.08}px`);
      root.style.setProperty("--py-stats", `${y * -0.06}px`);
      raf = null;
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(apply);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    apply();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
}

// ===== Scroll progress bar (fixed top, fills as you scroll the page) =====
function ScrollProgress() {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="ds-progress" style={{ "--p": `${progress}%` }} />;
}

// ===== Vertical corner stamp (editorial-poster style) =====
function CornerStamp() {
  return (
    <div className="ds-stamp" aria-hidden="true">
      <span className="ds-stamp-rule" />
      <div className="ds-stamp-text">
        <span>EST·2026</span>
        <span className="ds-stamp-dot">●</span>
        <span>SOBOTA·20:00</span>
        <span className="ds-stamp-dot">●</span>
        <span>DISCORD·LIVE</span>
      </div>
      <span className="ds-stamp-rule" />
    </div>
  );
}

// ===== Countdown helper =====
function useNextSaturday2000() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const target = useMemo(() => {
    const d = new Date(now);
    const day = d.getDay();
    let diff = (6 - day + 7) % 7;
    d.setHours(20, 0, 0, 0);
    if (diff === 0 && now.getHours() >= 20) diff = 7;
    d.setDate(d.getDate() + diff);
    return d;
  }, [now]);
  const ms = Math.max(0, target - now);
  const days = Math.floor(ms / 86400000);
  const hours = Math.floor(ms % 86400000 / 3600000);
  const mins = Math.floor(ms % 3600000 / 60000);
  const secs = Math.floor(ms % 60000 / 1000);

  // Brand world: time-aware status / label
  const day = now.getDay();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const isSaturday = day === 6;
  const isLive = isSaturday && hour >= 20 && hour < 23; // Sobota 20:00-23:00 = LIVE
  const isStartingSoon = isSaturday && hour === 19 && minute >= 30; // 30 min před
  const isToday = isSaturday && hour < 20; // Je sobota, ale ještě před show
  const isTomorrow = day === 5 && hour >= 18; // Pátek večer
  let label = "Další epizoda za";
  let mood = "default";
  if (isLive) { label = "Právě teče LIVE"; mood = "live"; }
  else if (isStartingSoon) { label = "Začínáme za chvíli!"; mood = "soon"; }
  else if (isToday) { label = "Dnes večer LIVE za"; mood = "today"; }
  else if (isTomorrow) { label = "Zítra večer LIVE za"; mood = "tomorrow"; }

  return { days, hours, mins, secs, target, label, mood, isLive };
}

// ===== Silhouette placeholder =====
function Silhouette({ gender, seed = 0, idx = 0 }) {
  const isGirl = gender === "girl";
  const variants = [
  { hair: "long", neck: 28, hat: false },
  { hair: "bun", neck: 30, hat: false },
  { hair: "short", neck: 30, hat: false },
  { hair: "wavy", neck: 28, hat: true },
  { hair: "ponytail", neck: 30, hat: false }];

  const v = variants[(seed + idx) % variants.length];
  const palette = isGirl ?
  ["#ff8fc4", "#c026d3"] :
  ["#a78bfa", "#5b21b6"];
  const id = `${gender}-${seed}-${idx}`;

  return (
    <svg viewBox="0 0 200 280" preserveAspectRatio="xMidYMid slice" style={{ display: "block", width: "300px", height: "380px" }}>
      <defs>
        <linearGradient id={`bg-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={palette[0]} />
          <stop offset="100%" stopColor={palette[1]} />
        </linearGradient>
        <radialGradient id={`spot-${id}`} cx="0.5" cy="0.25" r="0.6">
          <stop offset="0%" stopColor="rgba(255,255,255,0.35)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </radialGradient>
      </defs>
      <rect width="200" height="280" fill={`url(#bg-${id})`} style={{ width: "300px", height: "324px" }} />
      <rect width="200" height="280" fill={`url(#spot-${id})`} style={{ width: "126px", height: "314px" }} />
      {/* tělo / ramena */}
      <path d={`M 10 280 Q 100 ${200 - (isGirl ? 10 : 0)} 190 280 Z`} fill="rgba(0,0,0,0.32)" />
      {/* krk */}
      <rect x={100 - v.neck / 2} y="180" width={v.neck} height="40" fill="rgba(0,0,0,0.25)" />
      {/* hlava */}
      <ellipse cx="100" cy="135" rx="42" ry="50" fill="rgba(0,0,0,0.32)" />
      {/* vlasy podle varianty */}
      {v.hair === "long" &&
      <path d="M 56 195 Q 100 75 144 195 L 152 220 Q 100 240 48 220 Z" fill="rgba(0,0,0,0.45)" />
      }
      {v.hair === "bun" &&
      <>
          <path d="M 60 100 Q 100 75 140 100 L 140 90 L 60 90 Z" fill="rgba(0,0,0,0.45)" />
          <circle cx="100" cy="78" r="14" fill="rgba(0,0,0,0.45)" />
        </>
      }
      {v.hair === "short" &&
      <path d="M 60 110 Q 100 75 140 110 L 140 95 L 60 95 Z" fill="rgba(0,0,0,0.45)" />
      }
      {v.hair === "wavy" &&
      <path d="M 56 180 Q 70 110 100 90 Q 130 110 144 180 L 144 100 L 56 100 Z" fill="rgba(0,0,0,0.45)" />
      }
      {v.hair === "ponytail" &&
      <>
          <path d="M 60 110 Q 100 78 140 110 L 140 95 L 60 95 Z" fill="rgba(0,0,0,0.45)" />
          <path d="M 138 100 Q 160 130 152 175 L 144 175 Q 142 130 130 110 Z" fill="rgba(0,0,0,0.45)" />
        </>
      }
      {v.hat &&
      <rect x="55" y="80" width="90" height="20" fill="rgba(0,0,0,0.5)" rx="4" />
      }
    </svg>);

}

// ===== Arcade Love Game — intro (game1.png) → match screen (game2.png) =====
function ArcadeGame({ matchedGirl, matchedBoy }) {
  const [phase, setPhase] = useState("intro");
  const triggered = useRef(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !triggered.current) {
        triggered.current = true;
        setTimeout(() => setPhase("match"), 2800);
      }
    }, { threshold: 0.35 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const skipIntro = () => {
    triggered.current = true;
    setPhase("match");
  };

  return (
    <div ref={ref} className="arc-game-wrap">
      {/* Intro frame — game1.png */}
      <div
        className={`arc-game-frame ${phase === "intro" ? "is-active" : "is-gone"}`}
        onClick={skipIntro}
      >
        <img src="game1.png" alt="Love Game intro" className="arc-game-img" />
        <div className="arc-game-press">START</div>
      </div>

      {/* Match frame — game2.png with overlay slots */}
      <div className={`arc-game-frame ${phase === "match" ? "is-active" : ""}`}>
        <img src="game2.png" alt="Love Match" className="arc-game-img" />
        <div className="arc-game-overlay">
          <div className={`arc-game-slot ${matchedGirl ? "filled" : ""}`}>
            <div className="arc-game-slot-tag">P1</div>
            {matchedGirl ?
              (matchedGirl.photo ?
                <img src={matchedGirl.photo} alt={matchedGirl.name} className="arc-game-slot-img" /> :
                <Silhouette gender="girl" seed={matchedGirl.id.charCodeAt(1)} idx={0} />
              ) :
              <div className="arc-game-empty">VYBER<br />HRÁČE</div>}
            <div className="arc-game-slot-name">{matchedGirl ? matchedGirl.name.toUpperCase() : "?????"}</div>
          </div>

          <div className="arc-game-vs">
            <PixelHeart filled={!!(matchedGirl && matchedBoy)} size={70} />
            <div className={`arc-game-status ${matchedGirl && matchedBoy ? "won" : ""}`}>
              {matchedGirl && matchedBoy ? "MATCH!" : "VS"}
            </div>
          </div>

          <div className={`arc-game-slot ${matchedBoy ? "filled" : ""}`}>
            <div className="arc-game-slot-tag">P2</div>
            {matchedBoy ?
              (matchedBoy.photo ?
                <img src={matchedBoy.photo} alt={matchedBoy.name} className="arc-game-slot-img" /> :
                <Silhouette gender="boy" seed={matchedBoy.id.charCodeAt(1)} idx={0} />
              ) :
              <div className="arc-game-empty">VYBER<br />HRÁČE</div>}
            <div className="arc-game-slot-name">{matchedBoy ? matchedBoy.name.toUpperCase() : "?????"}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===== Pixel Heart (8-bit arcade style) =====
function PixelHeart({ filled = true, size = 110 }) {
  const pattern = [
    [0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0],
    [1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]
  ];
  const cols = pattern[0].length;
  const rows = pattern.length;
  const cell = Math.max(4, Math.floor(size / cols));
  const w = cell * cols;
  const h = cell * rows;
  const fill = filled ? "var(--pink)" : "rgba(255,77,143,0.25)";
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}
      style={{ filter: filled ? "drop-shadow(0 0 14px var(--pink)) drop-shadow(0 0 30px rgba(255,77,143,0.6))" : "none", display: "block" }}>
      {pattern.map((row, y) => row.map((p, x) =>
        p ? <rect key={`${x}-${y}`} x={x * cell} y={y * cell} width={cell} height={cell} fill={fill} /> : null
      ))}
    </svg>);
}

// ===== Heart =====
function Heart({ filled, size = 18, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={filled ? color : "none"} stroke={color} strokeWidth="2.2" aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M12 21s-7.5-4.6-9.5-9.4C1 7.5 4 4 7.5 4c2 0 3.4 1 4.5 2.6C13.1 5 14.5 4 16.5 4 20 4 23 7.5 21.5 11.6 19.5 16.4 12 21 12 21z" strokeLinejoin="round" />
    </svg>);
}

// ===== Sparkle (4-point star, designerská hvězdička) =====
function Sparkle({ size = 14, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color} aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M12 1 C12 8 12 8 23 12 C12 16 12 16 12 23 C12 16 12 16 1 12 C12 8 12 8 12 1 Z" />
    </svg>);
}

// ===== ArrowRight =====
function ArrowRight({ size = 16, color = "currentColor", strokeWidth = 2 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>);
}

// ===== ArrowUpRight (pro archive) =====
function ArrowUpRight({ size = 18, color = "currentColor", strokeWidth = 2 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M7 17L17 7M9 7h8v8" />
    </svg>);
}

// ===== Play (triangle pro live indikátory) =====
function PlayTriangle({ size = 14, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color} aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M7 4 L20 12 L7 20 Z" />
    </svg>);
}

// ===== Instagram icon =====
function IGIcon({ size = 14, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <rect x="3" y="3" width="18" height="18" rx="5" ry="5" />
      <path d="M16 11.4A4 4 0 1 1 12.6 8 4 4 0 0 1 16 11.4z" />
      <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" strokeWidth="2.5" />
    </svg>);
}

// ===== Best Energy card — info + IG na přední straně, flip = druhá fotka =====
function BestEnergyCard({ p, rank, voted, onVote }) {
  const [flipped, setFlipped] = useState(false);
  const totalVotes = p.votes + (voted ? 1 : 0);
  const igHandle = p.ig ? (p.ig.startsWith("@") ? p.ig : `@${p.ig}`) : null;
  const igUrl = igHandle ? `https://instagram.com/${igHandle.replace("@", "")}` : null;
  // Fallback IG (každá karta má decentní IG odkaz — bez handle vede na show)
  const fallbackIgUrl = "https://instagram.com/opat04x";
  const cardIgUrl = igUrl || fallbackIgUrl;
  const igTitle = igHandle ? `Instagram ${igHandle}` : "Instagram show";

  return (
    <div className="pc-wrap be-wrap">
      <div
        className={`pc-card be-card ${flipped ? "flipped" : ""} ${p.gender}`}
        onMouseEnter={() => setFlipped(true)}
        onMouseLeave={() => setFlipped(false)}
        onFocus={() => setFlipped(true)}
        onBlur={() => setFlipped(false)}
        tabIndex={0}>

        {/* FRONT — fotka + bohatý overlay (jméno, IG, info) */}
        <div className="pc-face pc-front pc-front-full">
          <div className="pc-photo pc-photo-full">
            {p.photo ?
              <img src={p.photo} alt={p.name} className="pc-photo-img" /> :
              <Silhouette gender={p.gender} seed={p.id.charCodeAt(p.id.length - 1)} idx={(rank || 0) % 5} />
            }
            <span className="be-rank-pill">#{rank}</span>
            <span className="be-votes-pill">
              <Heart filled size={11} color="#fff" />
              <span>{totalVotes}</span>
            </span>
            {p.appearances > 1 && (
              <span className="be-appearances-pill" title={`${p.appearances}× v show`}>
                <em>{p.appearances}</em>×
              </span>
            )}

            {/* Decentní IG ikona — každá karta. Když má p.ig, vede tam, jinak na show. */}
            <a className={`be-ig-icon ${igHandle ? "has-handle" : ""}`}
              href={cardIgUrl}
              target="_blank"
              rel="noreferrer noopener"
              onClick={(e) => e.stopPropagation()}
              title={igTitle}
              aria-label={igTitle}>
              <IGIcon size={14} />
            </a>

            <div className={`be-front-overlay ${p.info ? "has-info" : ""}`}>
              <div className="be-front-name-row">
                <h3 className="be-front-name">{p.name}{p.winner && <span className="be-winner-mark" title="Vítěz epizody">★</span>}</h3>
                {p.age && <span className="be-front-age">{p.age}</span>}
              </div>
              {igHandle && (
                <a className="be-front-ig"
                  href={igUrl}
                  target="_blank"
                  rel="noreferrer noopener"
                  onClick={(e) => e.stopPropagation()}>
                  <IGIcon size={13} />
                  <span>{igHandle}</span>
                </a>
              )}
              {p.info && (
                <ul className="be-front-bullets">
                  {p.info.slice(0, 4).map((line, i) => <li key={i}>{line}</li>)}
                </ul>
              )}
            </div>
          </div>
        </div>

        {/* BACK — druhá fotka (typicky z IG), nebo fallback vote-box */}
        {p.photo2 ?
          <div className="pc-face pc-back be-back-photo">
            <div className="pc-photo pc-photo-full">
              <img src={p.photo2} alt={`${p.name} — IG`} className="pc-photo-img" />
              <div className="be-back-photo-overlay">
                <div className="be-back-photo-meta">
                  <span className="be-back-photo-tag">EP {String(p.episode).padStart(2, "0")} · {p.appearances || 1}× v show</span>
                  <h3 className="be-back-photo-name">{p.name}{p.age && <span> · {p.age}</span>}</h3>
                  {igHandle &&
                    <a className="be-back-photo-ig"
                      href={igUrl}
                      target="_blank"
                      rel="noreferrer noopener"
                      onClick={(e) => e.stopPropagation()}>
                      <IGIcon size={13} />
                      <span>{igHandle}</span>
                    </a>
                  }
                </div>
                <button
                  className={`be-back-vote-btn ${voted ? "voted" : ""}`}
                  onClick={(e) => { e.stopPropagation(); onVote(p.id); }}>
                  <Heart filled={voted} size={14} />
                  <span>{voted ? "Zrušit hlas" : `Hlasovat · ${totalVotes}`}</span>
                </button>
              </div>
            </div>
          </div> :
          <div className="pc-face pc-back be-back">
            <div className="be-back-tag">ENERGY ↘</div>
            <h3 className="be-back-name">{p.name}{p.age && <span> · {p.age}</span>}</h3>
            <div className="be-back-meta">EP {String(p.episode).padStart(2, "0")} · {p.appearances || 1}× v show</div>
            <div className="be-back-vote-stat">
              <em>{totalVotes}</em>
              <span>HLASŮ</span>
            </div>
            <button
              className={`be-back-vote-btn ${voted ? "voted" : ""}`}
              onClick={(e) => { e.stopPropagation(); onVote(p.id); }}>
              <Heart filled={voted} size={14} />
              <span>{voted ? "Zrušit hlas" : "Hlasovat"}</span>
            </button>
            <p className="be-back-note">Klikni pro hlasování</p>
          </div>
        }
      </div>
    </div>);
}

// ===== Profile-card style (Sophie Bennett inspired) =====
function PersonCard({ p, gender, idx, votes, onVote, onSelectMatch, matched, className = "", style }) {
  const [flipped, setFlipped] = useState(false);

  // === TBD slot — nevybraný účastník (otazník + silueta, žádný flip) ===
  if (p.tbd) {
    return (
      <div className={`pc-wrap pc-wrap-tbd ${className}`.trim()} style={style}>
        <div className={`pc-card pc-card-tbd ${gender}`}>
          <div className="pc-photo pc-photo-full">
            <Silhouette gender={gender} seed={idx * 7 + 13} idx={idx} />
            <div className="pc-tbd-overlay">
              <span className="pc-tbd-mark">?</span>
              <span className="pc-tbd-label">Nevybráno</span>
            </div>
          </div>
        </div>
      </div>);
  }

  const followers = 100 + p.id.charCodeAt(1) * 37 % 900;
  const posts = 12 + p.id.charCodeAt(1) * 7 % 80;
  const isLiked = votes.includes(p.id);
  const likeCount = followers + (isLiked ? 1 : 0);
  return (
    <div className={`pc-wrap ${className}`.trim()} style={style}>
      <div
        className={`pc-card ${flipped ? "flipped" : ""} ${gender}`}
        onMouseEnter={() => setFlipped(true)}
        onMouseLeave={() => setFlipped(false)}
        onFocus={() => setFlipped(true)}
        onBlur={() => setFlipped(false)}
        tabIndex={0}>
        {/* Always-visible overlay (above flipping faces) — like button + appearances/NEW badge */}
        <button
          className={`pc-overlay-like ${isLiked ? "is-liked" : ""}`}
          onClick={(e) => { e.stopPropagation(); onVote(p.id); }}
          onMouseDown={(e) => e.stopPropagation()}
          aria-label={isLiked ? "Odlajknout" : "Lajknout"}
          title="Lajknout">
          <Heart filled={isLiked} size={16} />
          <span className="pc-overlay-like-count">{likeCount}</span>
        </button>

        {(() => {
          if (p.unconfirmed) {
            return <span className="pc-overlay-badge pc-overlay-unconfirmed" title="Účast ještě nepotvrzená">NEPOTVRZENO</span>;
          }
          const n = p.appearances || 1;
          if (n === 1) {
            return <span className="pc-overlay-badge pc-overlay-tier pc-tier-new" title="Nový/Nová účinkující — první díl">NEW</span>;
          }
          const tier = n >= 5 ? "legend" : `t${n}`;
          const tierLabels = { t2: "ROOKIE", t3: "REGULAR", t4: "VETERAN", legend: "LEGEND" };
          return (
            <span className={`pc-overlay-badge pc-overlay-tier pc-tier-${tier}`} title={`Účast ${n}× v show — ${tierLabels[tier] || ""}`}>
              <em>{n}</em>×&nbsp;v show
            </span>
          );
        })()}

        <div className="pc-face pc-front pc-front-full">
          <div className="pc-photo pc-photo-full">
            {p.photo ?
              <img src={p.photo} alt={p.name} className="pc-photo-img" /> :
              <Silhouette gender={gender} seed={p.id.charCodeAt(1)} idx={idx} />
            }
            <div className="pc-photo-overlay">
              <h3 className="pc-name-overlay">{p.name}</h3>
              <span className="pc-age-overlay">{p.age}</span>
            </div>
          </div>
        </div>
        <div className="pc-face pc-back">
          <div className="pc-back-name">{p.name} <span>· {p.age}</span></div>
          <div className="pc-back-job">{p.job} · {p.height} cm · {p.appearances || 1}× v show</div>
          <p className="pc-back-bio">{p.bio}</p>
          <div className="pc-back-block">
            <div className="pc-back-label">FUN FACT</div>
            <p>{p.fact}</p>
          </div>
          <div className="pc-back-foot">
            <button
              className={`pc-vote-btn ${votes.includes(p.id) ? "active" : ""}`}
              onMouseDown={(e) => e.stopPropagation()}
              onClick={(e) => { e.stopPropagation(); onVote(p.id); }}
              title="Hlasovat pro favorita">
              <Heart filled={votes.includes(p.id)} size={18} />
              <span className="pc-vote-count">{followers + (votes.includes(p.id) ? 1 : 0)}</span>
              <span className="pc-vote-label">{votes.includes(p.id) ? "Hlasováno" : "Hlasovat"}</span>
            </button>
            <span className="pc-back-ig-mini">{p.ig}</span>
          </div>
        </div>
      </div>
    </div>);
}

// ===== Main =====
function VariantMain({ tweaks }) {
  const D = window.DATESHOW_DATA;
  const { days, hours, mins, secs, label: countdownLabel, mood: countdownMood, isLive } = useNextSaturday2000();
  const [votes, setVotes] = useState([]);
  const [match, setMatch] = useState({ girl: null, boy: null });

  const toggleVote = (id) => setVotes((v) => v.includes(id) ? v.filter((x) => x !== id) : [...v, id]);
  const selectMatch = (id, gender) => setMatch((m) => ({ ...m, [gender]: m[gender] === id ? null : id }));

  const matchedGirl = D.girls.find((g) => g.id === match.girl);
  const matchedBoy = D.boys.find((b) => b.id === match.boy);

  const palette = tweaks.palette || "mix";
  const dark = tweaks.dark !== false;
  const [navOpen, setNavOpen] = useState(false);
  useEffect(() => {
    document.body.classList.toggle("ds-nav-locked", navOpen);
    return () => document.body.classList.remove("ds-nav-locked");
  }, [navOpen]);
  const [bestVotes, setBestVotes] = useState({});
  const toggleBestVote = (id) => setBestVotes((v) => ({ ...v, [id]: !v[id] }));
  const adjustedVotes = (p) => p.votes + (bestVotes[p.id] ? 1 : 0);

  // Tab routing přes URL hash — #best-energy / main
  const TABS = ["best-energy"];
  const hashToTab = (h) => TABS.includes((h || "").replace("#", "")) ? h.replace("#", "") : "main";
  const [activeTab, setActiveTab] = useState(() =>
    typeof window !== "undefined" ? hashToTab(window.location.hash) : "main"
  );
  const goHome = (e) => {
    if (e) e.preventDefault();
    if (window.location.hash) {
      history.replaceState(null, "", window.location.pathname + window.location.search);
    }
    setActiveTab("main");
    setNavOpen(false);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  useEffect(() => {
    const onHash = () => {
      const hash = window.location.hash;
      const tab = hashToTab(hash);
      if (tab !== "main") {
        setActiveTab(tab);
        window.scrollTo({ top: 0, behavior: "instant" });
      } else {
        setActiveTab("main");
        requestAnimationFrame(() => {
          if (hash && hash !== "#") {
            const el = document.querySelector(hash);
            if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
          }
        });
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useScrollParallax();

  return (
    <div className={`ds-app palette-${palette} ${dark ? "theme-dark" : "theme-light"}`} data-tab={activeTab}>
      <ScrollProgress />
      {/* TOP BAR — editorial styl */}
      <header className="ds-top">
        <div className="ds-top-left">
          <a href="#" className="ds-mast" onClick={goHome} aria-label="Domů">DATESHOW</a>
        </div>
        <nav className={`ds-nav ${navOpen ? "open" : ""}`}>
          <a href="#cast" onClick={() => setNavOpen(false)} className={activeTab === "main" ? "is-active" : ""}>Účastníci</a>
          <a href="#best-energy" onClick={() => setNavOpen(false)} className={`ds-nav-best ${activeTab === "best-energy" ? "is-active" : ""}`}>Best Energy</a>
          <a href="#archive" onClick={() => setNavOpen(false)}>Archiv</a>
          <a href="#apply" onClick={() => setNavOpen(false)}>Přihláška</a>
        </nav>
        <button
          className="ds-burger"
          aria-label="Menu"
          aria-expanded={navOpen}
          onClick={() => setNavOpen((o) => !o)}
        >
          <span /><span /><span />
        </button>
      </header>

      {/* HERO */}
      <section className="ds-hero">
        <video
          className="ds-hero-video"
          src="webloop2.mp4"
          autoPlay muted loop playsInline
        />
        <div className="ds-hero-tint" />
        <div className="ds-hero-grid">
          <div className="ds-hero-left">
            <div className="ds-hero-opatova" aria-label="Opatova">
              <span className="opa-l opa-l-1">O</span>
              <span className="opa-l opa-l-2">P</span>
              <span className="opa-l opa-l-3">A</span>
              <span className="opa-l opa-l-4">T</span>
              <span className="opa-l opa-l-5">O</span>
              <span className="opa-l opa-l-6">V</span>
              <span className="opa-l opa-l-7">A</span>
            </div>
            <h1 className="ds-display">
              <BlurText text="DATE" stagger={140} />
              <br />
              <BlurText text="SHOW" stagger={140} delay={300} />
              <img src="live.png" alt="LIVE" className="ds-hero-live-sticker" />
            </h1>
            <Reveal delay={750} y={16}>
              <p className="ds-hero-tagline">Jediná a zároveň největší online dating show v <strong>Česku</strong> a na <strong>Slovensku</strong>. Živě každou sobotu na <strong>Discordu</strong>.</p>
            </Reveal>
            <Reveal delay={900} y={16}>
              <div className="ds-hero-cta">
                <a className="ds-btn-primary" href="#apply">
                  <span>PŘIHLÁSIT SE</span>
                  <Heart filled size={15} />
                </a>
              </div>
            </Reveal>
          </div>

          <Reveal className="ds-hero-right" delay={1100} y={30}>
            <div className={`ds-cd-card ds-cd-mood-${countdownMood} ${isLive ? "is-live" : ""}`}>
              <div className="ds-cd-label">{countdownLabel}</div>
              <div className="ds-cd-grid">
                <div className="ds-cd-cell"><div className="ds-cd-num">{String(days).padStart(2, "0")}</div><div className="ds-cd-unit">DNŮ</div></div>
                <div className="ds-cd-cell"><div className="ds-cd-num">{String(hours).padStart(2, "0")}</div><div className="ds-cd-unit">HOD</div></div>
                <div className="ds-cd-cell"><div className="ds-cd-num">{String(mins).padStart(2, "0")}</div><div className="ds-cd-unit">MIN</div></div>
                <div className="ds-cd-cell"><div className="ds-cd-num">{String(secs).padStart(2, "0")}</div><div className="ds-cd-unit">SEC</div></div>
              </div>
              <div className="ds-cd-foot">
                <a className="ds-discord-btn" href="#archive">
                  <span>Minulé díly</span>
                  <ArrowRight size={12} />
                </a>
              </div>
            </div>
          </Reveal>
        </div>

        <div className="ds-strip">
          <div className="ds-strip-track">
            {Array.from({ length: 4 }).map((_, k) => <React.Fragment key={k}>
                <span>#1 LIVE DATE SHOW NA CZ/SK</span>
                <span className="ds-strip-icon"><Heart filled size={14} /></span>
                <span>200K+ VIEWS</span>
                <span className="ds-strip-icon"><Sparkle size={12} /></span>
                <span>DISCORD LIVE</span>
                <span className="ds-strip-icon"><Heart filled size={14} /></span>
                <span>SOBOTA 20:00</span>
                <span className="ds-strip-icon"><Sparkle size={12} /></span>
                <span>18+</span>
                <span className="ds-strip-icon"><Heart filled size={14} /></span>
                <span>BIZAR</span>
                <span className="ds-strip-icon"><Sparkle size={12} /></span>
                <span>ÚSPĚŠNOST 67%</span>
                <span className="ds-strip-icon"><Heart filled size={14} /></span>
                <span>10+ EPIZOD</span>
                <span className="ds-strip-icon"><Sparkle size={12} /></span>
                <span>BEZ CENZURY</span>
                <span className="ds-strip-icon"><Heart filled size={14} /></span>
                <span>NEZMEŠKEJ</span>
                <span className="ds-strip-icon"><Sparkle size={12} /></span>
              </React.Fragment>
            )}
          </div>
        </div>
      </section>

      {/* PROČ DATESHOW? */}
      <Reveal as="section" className="ds-why" y={30}>
        <div className="ds-why-head">
          <h2 className="ds-h2 ds-why-title">PROČ <em>DATESHOW?</em></h2>
        </div>

        <div className="ds-why-grid">
          <RevealSlide className="ds-why-item" delay={100} dir="up" distance={80} rotate={-3}>
            <span className="ds-why-num">01</span>
            <h3 className="ds-why-q">Seznámit se naživo už <em>neumíme</em>.</h3>
            <p className="ds-why-p">Na ulici se k nikomu nepřipojíš. V baru každý kouká do telefonu. Skutečná setkání jsou vzácnější než kdy jindy.</p>
          </RevealSlide>

          <RevealSlide className="ds-why-item" delay={280} dir="up" distance={100} rotate={2}>
            <span className="ds-why-num">02</span>
            <h3 className="ds-why-q">Internet je plný <em>falešných</em> tváří.</h3>
            <p className="ds-why-p">AI generované profily, upravené fotky, scammeři. Ten, kdo s tebou píše, nemusí být ten, koho ukazuje obrazovka.</p>
          </RevealSlide>

          <RevealSlide className="ds-why-item" delay={460} dir="up" distance={120} rotate={-2}>
            <span className="ds-why-num">03</span>
            <h3 className="ds-why-q">Důvěra <em>se vytrácí</em>.</h3>
            <p className="ds-why-p">Když nikdy nevíš, co je pravda, přestaneš se ptát. A přestaneš zkoušet. To je smutné — ale řešitelné.</p>
          </RevealSlide>
        </div>

        <RevealSlide className="ds-why-solution" delay={300} dir="left" distance={140}>
          {/* Subtle floating hearts (jen 5, jemnější) */}
          <div className="ds-why-hearts" aria-hidden="true">
            {Array.from({ length: 5 }).map((_, i) => {
              const left = (i * 19 + 10) % 100;
              const delay = i * 1.6;
              const dur = 9 + (i % 2) * 2;
              return (
                <span
                  key={i}
                  className="ds-why-heart"
                  style={{
                    left: `${left}%`,
                    animationDelay: `${delay}s`,
                    animationDuration: `${dur}s`
                  }}
                >
                  <Heart filled size={10 + (i % 2) * 4} />
                </span>
              );
            })}
          </div>

          <div className="ds-why-arrow" aria-hidden="true">↓</div>
          <p className="ds-why-callout">
            <span className="ds-why-callout-pre">A přesně tohle řeší</span>
            <strong>Opatova DateShow.</strong>
          </p>
          <p className="ds-why-supporting">
            <strong>Skuteční lidé. Živá kamera. Žádný scénář.</strong>
            <br />
            A nejlepší na tom je, že to <em>opravdu funguje</em> — dali jsme dohromady už <strong>desítky reálných párů</strong>.
          </p>
        </RevealSlide>
      </Reveal>

      {/* HOST */}
      <Reveal as="section" className="ds-team" y={30}>
        <div className="ds-team-grid">
          {/* Pořadatel */}
          <RevealSlide as="div" className="ds-team-col" delay={100} dir="left" distance={160}>
            <div className="ds-team-label host-label">
              <h3 className="ds-team-label-title">POŘADATEL</h3>
            </div>
            <article className="ds-team-card host-card">
              <div className="ds-team-photo">
                {D.host.photo ?
                  <img src={D.host.photo} alt={D.host.name} className="ds-team-photo-img" /> :
                  <Silhouette gender="boy" seed={1} idx={2} />
                }
                <span className="ds-team-badge">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2l2.4 2.1 3.2-.4.8 3.1 3 1.5-1.4 2.9 1 3-2.7 1.7-.5 3.2-3.2 0L12 22l-2.6-2.9-3.2 0-.5-3.2L3 14.2l1-3-1.4-2.9 3-1.5.8-3.1 3.2.4z" fill="var(--pink)" />
                    <path d="M9 12.5l2 2 4-4.5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
              <div className="ds-team-body">
                <h4 className="ds-team-name"><BlurText text={D.host.name} stagger={120} /></h4>
                <div className="ds-team-role">{D.host.role}</div>
                <p className="ds-team-bio">{D.host.bio}</p>
                <div className="ds-team-stats">
                  <div><em>14</em><span>epizod</span></div>
                  <div><em>2.4M</em><span>fanoušků</span></div>
                  <div><em>{D.host.age}</em><span>let</span></div>
                  <div><em>{D.host.instagram}</em><span>instagram</span></div>
                </div>
              </div>
            </article>
          </RevealSlide>

          {/* Moderátor — rotující */}
          <RevealSlide as="div" className="ds-team-col" delay={250} dir="right" distance={160}>
            <div className="ds-team-label mod-label">
              <h3 className="ds-team-label-title">MODERÁTOR</h3>
            </div>
            <article className="ds-team-card mod-card">
              <div className="ds-team-photo">
                {D.moderator.photo ?
                  <img src={D.moderator.photo} alt={D.moderator.name} className="ds-team-photo-img" /> :
                  <Silhouette gender="girl" seed={3} idx={1} />
                }
                <span className="ds-team-rotate">NOVÝ</span>
              </div>
              <div className="ds-team-body">
                <h4 className="ds-team-name"><BlurText text={D.moderator.name} stagger={120} delay={200} /></h4>
                <div className="ds-team-role">{D.moderator.role}</div>
                <p className="ds-team-bio">{D.moderator.bio}</p>
                <div className="ds-team-stats">
                  <div><em>EP {D.episode}</em><span>jen tento díl</span></div>
                  <div><em>{D.moderator.age}</em><span>let</span></div>
                  <div><em>{D.moderator.instagram}</em><span>instagram</span></div>
                </div>
              </div>
            </article>
          </RevealSlide>
        </div>
      </Reveal>

      {/* CAST — 5 + 5 streetwear karet */}
      <section id="cast" className="ds-cast">
        <Reveal className="ds-cast-head" y={20}>
          <div>
            <h2 className="ds-h2 ds-h2-center">TENTO TÝDEN SE ZÚČASTNÍ</h2>
          </div>
        </Reveal>

        <RevealSlide className="ds-cast-block" delay={50} dir="left" distance={180}>
          <div className="ds-cast-block-head ds-cast-block-head-center">
            <span className="ds-block-tag girl">ŽENSKÉ ZASTOUPENÍ</span>
          </div>
          <div className="ds-cards-row">
            <StaggerGroup step={160} delay={300} contents>
              {D.girls.map((g, i) => <PersonCard key={g.id} p={g} gender="girl" idx={i}
              votes={votes} onVote={toggleVote}
              onSelectMatch={selectMatch}
              matched={match.girl === g.id} />

              )}
            </StaggerGroup>
          </div>
        </RevealSlide>

        {/* Spacing mezi holkami a kluky (lightning bude přidán později) */}
        <div className="ds-cast-divider" aria-hidden="true" />

        <RevealSlide className="ds-cast-block" delay={50} dir="right" distance={180}>
          <div className="ds-cast-block-head ds-cast-block-head-center">
            <span className="ds-block-tag boy">MUŽSKÉ ZASTOUPENÍ</span>
          </div>
          <div className="ds-cards-row">
            <StaggerGroup step={160} delay={300} contents reverse>
              {D.boys.map((b, i) =>
              <PersonCard
                key={b.id} p={b} gender="boy" idx={i}
                votes={votes} onVote={toggleVote}
                onSelectMatch={selectMatch}
                matched={match.boy === b.id} />

              )}
            </StaggerGroup>
          </div>
        </RevealSlide>

        {/* BEST ENERGY — hlasování o nejsympatičtějšího napříč epizodami */}
        {(() => {
          const sorted = [...D.allParticipants].sort((a, b) => adjustedVotes(b) - adjustedVotes(a));
          const topGirl = sorted.find(p => p.gender === "girl");
          const topBoy = sorted.find(p => p.gender === "boy");
          const allByVotes = sorted; // všech 20 do gridu, seřazené sestupně
          return (
            <Reveal as="section" id="best-energy" className="ds-best" y={30}>
              <div className="ds-best-head">
                <h2 className="ds-h2 ds-best-title">BEST <em>ENERGY</em></h2>
                <p className="ds-best-sub">
                  Kdo má <em>nejlepší energii</em>? Hlasujte pro nejsympatičtějšího účinkujícího napříč všemi epizodami. <strong>Vede ten, kdo má nejvíc lajků.</strong>
                </p>
              </div>

              {/* Spotlight — top kluk vlevo, + uprostřed, top holka vpravo */}
              <div className="ds-best-leaders">
                {[
                  { p: topBoy,  label: "ENERGY KRÁL" },
                  { p: null,    isPlus: true },
                  { p: topGirl, label: "ENERGY KRÁLOVNA" }
                ].map((item, i) => {
                  if (item.isPlus) {
                    return <div key="plus" className="ds-best-plus" aria-hidden="true">+</div>;
                  }
                  const p = item.p;
                  if (!p) return null;
                  return (
                    <article key={p.id} className={`ds-best-leader ds-best-leader-${p.gender}`}>
                      <div className="ds-best-leader-tag">
                        <span className="ds-best-rank-num">#1</span>
                        <span className="ds-best-rank-label">{item.label}</span>
                      </div>
                      <div className="ds-best-leader-photo">
                        {p.photo ?
                          <img src={p.photo} alt={p.name} /> :
                          <Silhouette gender={p.gender} seed={p.id.charCodeAt(p.id.length - 1)} idx={0} />
                        }
                      </div>
                      <div className="ds-best-leader-info">
                        <h3 className="ds-best-leader-name">{p.name} <span>· {p.age}</span></h3>
                        <div className="ds-best-leader-meta">
                          <span>EP {String(p.episode).padStart(2, "0")}</span>
                          <span className="ds-best-sep">·</span>
                          <span><em>{adjustedVotes(p)}</em> hlasů</span>
                        </div>
                        <button
                          className={`ds-best-vote-btn ${bestVotes[p.id] ? "voted" : ""}`}
                          onClick={() => toggleBestVote(p.id)}>
                          <Heart filled={!!bestVotes[p.id]} size={14} />
                          <span>{bestVotes[p.id] ? "Zrušit hlas" : "Hlasovat"}</span>
                        </button>
                      </div>
                    </article>
                  );
                })}
              </div>

              {/* 4×5 grid všech účinkujících — stejné karty jako na hlavní stránce */}
              <div className="ds-best-grid-head">
                <span className="ds-best-grid-label">Všichni účinkující</span>
                <span className="ds-best-grid-count">[{allByVotes.length}]</span>
              </div>
              <div className="ds-best-cards">
                <StaggerGroup step={50} contents>
                  {allByVotes.map((p, i) => (
                    <BestEnergyCard
                      key={p.id}
                      p={p}
                      rank={i + 1}
                      voted={!!bestVotes[p.id]}
                      onVote={toggleBestVote}
                    />
                  ))}
                </StaggerGroup>
              </div>
            </Reveal>
          );
        })()}

        {/* STORIES — příběhy z minulých dílů */}
        <Reveal as="section" id="stories" className="ds-stories" y={30}>
          <div className="ds-stories-head">
            <div>
              <h2 className="ds-stories-title">Příběhy z DateShow</h2>
            </div>
          </div>

          <div className="ds-stories-grid">
            <Reveal as="article" className="ds-story" delay={0} y={20}>
              <div className="ds-story-img ds-story-img-contain">
                <img src="pribeh1.png" alt="Polcarka a Nio" />
              </div>
              <div className="ds-story-meta">
                <span>27.03.2026</span>
                <span className="ds-story-sep">·</span>
                <span>Epizoda 10</span>
              </div>
              <h3 className="ds-story-title">Polcarka &amp; Nio</h3>
              <p className="ds-story-desc">
                Po DateShow se opravdu sešli — z účinkujících jsou šťastní partneři. Jeden z prvních párů, který show svedla dohromady.
              </p>
            </Reveal>

            <Reveal as="article" className="ds-story" delay={140} y={20}>
              <div className="ds-story-img ds-story-img-anchor-bottom">
                <img src="pribeh2.png" alt="100% match — rekord show" />
              </div>
              <div className="ds-story-meta">
                <span>Minulý týden</span>
                <span className="ds-story-sep">·</span>
                <span>Epizoda 13</span>
              </div>
              <h3 className="ds-story-title">100% winrate — rekord show</h3>
              <p className="ds-story-desc">
                Poslední DateShow měli <strong>neuvěřitelný 100% winrate</strong> — každý účinkující si našel svůj match. Nejúspěšnější díl vůbec.
              </p>
            </Reveal>

            <Reveal as="article" className="ds-story" delay={280} y={20}>
              <div className="ds-story-img">
                <img src="pribeh hroty.png" alt="" />
              </div>
              <div className="ds-story-meta">
                <span>Minulý díl</span>
                <span className="ds-story-sep">·</span>
                <span>Epizoda 13</span>
              </div>
              <h3 className="ds-story-title">Nejznámější luxmaxer <em>vs.</em> Rogalator</h3>
              <p className="ds-story-desc">
                Konflikt eskaloval naživo na streamu. <strong>Nejznámější luxmaxer show</strong> se pustil do Rogalatora — extrémně se vyhrotili, chat hořel a klipy lítaly všude.
              </p>
            </Reveal>
          </div>
        </Reveal>

        {/* PRIZE — týdenní výhra rande */}
        {/* INFO GRID — 2×2: Prize (text + image) + Sponsor (image + text) */}
        <section className="ds-info-grid">
          <div className="ds-info-2x2">
            {/* Cell 1: PRIZE TEXT (top-left) */}
            <Reveal className="ds-info-cell ds-info-cell-text" delay={0} y={24}>
              <div className="ds-info-cell-inner">
                <span className="ds-info-cell-tag">Týdenní výhra</span>
                <h3 className="ds-info-cell-title">
                  <BlurText text="Nejlepší pár vyhrává" stagger={70} />
                  <br />
                  <span className="ds-info-cell-title-em">až 1&nbsp;000&nbsp;Kč.</span>
                </h3>
                <p className="ds-info-cell-desc">
                  Každý týden po live date show <strong>chat hlasuje</strong> pro nejlepší pár — výherci si odnesou <strong>2× 500 freespinů</strong>.
                </p>
                <p className="ds-info-cell-desc">
                  Rovnou po date show si můžete dát první rande přímo při točkách. <em>Štěstí už je jen na vás.</em>
                </p>
              </div>
            </Reveal>

            {/* Cell 2: PRIZE IMAGE (top-right) — rande za 1000 Kč */}
            <Reveal className="ds-info-cell ds-info-cell-img ds-info-cell-img-prize" delay={140} y={24}>
              <img src="rande.png" alt="Rande za 1000 Kč" />
              <div className="ds-info-cell-img-fade" aria-hidden="true" />
            </Reveal>

            {/* Cell 3: SPONSOR IMAGE (bottom-left) — Casino Akce partner */}
            <Reveal className="ds-info-cell ds-info-cell-img ds-info-cell-img-sponsor" delay={280} y={24}>
              <img src="casinoakce.jpg" alt="Casino Akce — partner pořadu" />
              <div className="ds-info-cell-img-fade" aria-hidden="true" />
            </Reveal>

            {/* Cell 4: SPONSOR TEXT (bottom-right) */}
            <Reveal className="ds-info-cell ds-info-cell-text" delay={420} y={24}>
              <div className="ds-info-cell-inner">
                <span className="ds-info-cell-tag">Hlavní sponzor</span>
                <h3 className="ds-info-cell-title">
                  <BlurText text="casinoakce.cz" stagger={90} />
                </h3>
                <p className="ds-info-cell-desc">
                  Hlavní partner DateShow je značka, která show podporuje od první epizody — <strong>bez nich by to nebylo ono</strong>.
                </p>
                <p className="ds-info-cell-desc">
                  Kdo ještě není zaregistrovaný, na toho čekají <strong>free spiny v hodnotě tisíců korun</strong>.
                </p>
              </div>
            </Reveal>
          </div>
        </section>
      </section>

      {/* MATCH — Love Game zatím vypnutý (vrátíme později) */}

      {/* ARCHIVE */}
      <Reveal as="section" id="archive" className="ds-archive" y={30}>
        <div className="ds-section-eyebrow">
</div>
        <h2 className="ds-h2"><BlurText text="PŘEDCHOZÍ EPIZODY" stagger={90} /></h2>
        <div className="ds-archive-list">
          <StaggerGroup step={50}>
          {[{ ep: 13, t: "Kdo s kým? — finále s polibkem" },
            { ep: 12, t: "Drama u stolu č. 3" },
            { ep: 11, t: "Nečekané přiznání hosta" },
            { ep: 10, t: "První slzy v kariéře show" },
            { ep: 9, t: "Halloween special" }].
            map(({ ep, t }) =>
            <a key={ep} className="ds-archive-row">
              <span className="ds-arch-ep">EP {String(ep).padStart(2, "0")}</span>
              <span className="ds-arch-title">{t}</span>
              <span className="ds-arch-date">{ep * 47}k</span>
              <span className="ds-arch-arrow ds-arch-go"><ArrowUpRight size={20} /></span>
            </a>
            )}
          </StaggerGroup>
        </div>
      </Reveal>

      {/* APPLY */}
      <Reveal as="section" id="apply" className="ds-apply" y={30}>
        <div className="ds-apply-grid">
          <Reveal className="ds-apply-text" delay={100} y={20}>
            <h2 className="ds-h2"><BlurText text="CHCEŠ BÝT U TOHO?" stagger={90} /></h2>
            <p>Hledáme nové tváře pro epizody {D.episode + 2}–{D.episode + 6}. Pošli pár vět o sobě a co hledáš.</p>
            <div className="ds-apply-meta">
              <div><em>WEBKAMERA</em><span>nutná</span></div>
              <div><em>DISCORD</em><span>účet</span></div>
              <div><em>VĚK</em><span>18+</span></div>
            </div>
          </Reveal>
          <Reveal delay={300} y={20}>
            <form className="ds-apply-form" onSubmit={(e) => e.preventDefault()}>
              <label>Jméno<input placeholder="Tereza N." /></label>
              <label>Věk<input placeholder="23" /></label>
              <label>Instagram<input placeholder="@tvoje.handle" /></label>
              <label>Discord handle<input placeholder="username#0000" /></label>
              <label>Pár vět o tobě<textarea placeholder="Co tě baví, co hledáš…" /></label>
              <button className="ds-apply-btn">
                <span>PŘIHLÁSIT SE</span>
                <Heart filled size={16} color="#fff" />
              </button>
            </form>
          </Reveal>
        </div>
      </Reveal>

      <footer className="ds-footer">
        <span>DATESHOW.cz</span>
        <span>Každou sobotu 20:00 · Discord live</span>
        <span>© 2026 {D.host.name}</span>
      </footer>
    </div>);
}

window.VariantMain = VariantMain;