/* global React */
const { useState, useEffect, useRef } = React;

/* ============ Sample data ============ */
const FEATURED_CLUBS = [
  { name: "Slow Burn", album: "To Pimp a Butterfly", artist: "Kendrick Lamar", members: 8, palette: "pal-orange-pink", status: "active", cycle: 12, avg: 8.6, day: 3 },
  { name: "Dad Rock Forever", album: "OK Computer", artist: "Radiohead", members: 12, palette: "pal-blue-cyan", status: "active", cycle: 27, avg: 9.1, day: 4 },
  { name: "The Quiet Listener", album: "Blue", artist: "Joni Mitchell", members: 6, palette: "pal-violet-pink", status: "official", isOfficial: true, cycle: 8, avg: 8.9 },
  { name: "Late Night Jazz", album: "A Love Supreme", artist: "John Coltrane", members: 9, palette: "pal-yellow-orange", status: "active", cycle: 19, avg: 9.4, day: 5 },
  { name: "House Heads Anonymous", album: "Random Access Memories", artist: "Daft Punk", members: 14, palette: "pal-cyan-violet", status: "featured", cycle: 14, avg: 8.2 },
  { name: "Modern Indie", album: "In Rainbows", artist: "Radiohead", members: 11, palette: "pal-green-blue", status: "active", cycle: 22, avg: 8.7, day: 6 },
];

const ALBUMS_TICKER = [
  "To Pimp a Butterfly", "OK Computer", "Blue", "A Love Supreme", "Random Access Memories",
  "In Rainbows", "Lemonade", "The Money Store", "Currents", "Channel Orange",
  "Madvillainy", "Y2K!", "Norman Fucking Rockwell!"
];

const PHONE_ITEMS = [
  { palette: "pal-orange-pink", title: "To Pimp a Butterfly", artist: "Kendrick Lamar", score: 9 },
  { palette: "pal-blue-cyan", title: "OK Computer", artist: "Radiohead", score: 10 },
  { palette: "pal-violet-pink", title: "Blue", artist: "Joni Mitchell", score: 9 },
  { palette: "pal-yellow-orange", title: "A Love Supreme", artist: "John Coltrane", score: 8 },
];

const COLLAGE = [
  { q: "To Pimp a Butterfly Kendrick Lamar", title: "TO PIMP A BUTTERFLY", featured: true, badge: "PICK · CYCLE 12" },
  { q: "Born to Die Lana Del Rey", title: "BORN TO DIE" },
  { q: "Blue Joni Mitchell", title: "BLUE" },
  { q: "A Love Supreme John Coltrane", title: "A LOVE SUPREME" },
  { q: "In Rainbows Radiohead", title: "IN RAINBOWS" },
  { q: "Random Access Memories Daft Punk", title: "RANDOM ACCESS MEMORIES" },
  { q: "Lemonade Beyonce", title: "LEMONADE" },
];

/* ============ Top Nav ============ */
function TopNav({ ctaLabel, onJoin }) {
  return (
    <nav className="top-nav">
      <div className="top-nav-inner">
        <div className="brand">
          <img src="assets/disco-logo.png" alt="Disco" />
          <span>DISCO</span>
        </div>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#clubs">Clubs</a>
          <a href="#download" className="nav-cta">{ctaLabel}</a>
        </div>
      </div>
    </nav>
  );
}

/* ============ Hero variants ============ */
function HeroVariantA({ ctaLabel, accentName }) {
  // "A book club for music"
  return (
    <>
      <h1 className="hero-title">
        Listen<br />
        <span className="accent">together.</span><br />
        Argue about it.
      </h1>
      <p className="hero-sub">
        Join a small club. Take turns picking. Everyone listens to the same album for a week, rates it 1–10, and fights nicely about the verdict. Discovery is human again.
      </p>
      <HeroCTAs ctaLabel={ctaLabel} />
    </>
  );
}
function HeroVariantB({ ctaLabel }) {
  // Antidote to algo
  return (
    <>
      <span className="hero-eyebrow"><span className="dot"></span>The antidote to algorithmic radio</span>
      <h1 className="hero-title">
        Your <span className="strike-through">algorithm</span><br />
        <span className="accent">friends</span> have<br />
        better taste.
      </h1>
      <p className="hero-sub">
        Disco is a music app where small groups commit to one album a cycle, rate it, and discuss. No infinite feed. No "for you." Just the people whose taste you actually trust.
      </p>
      <HeroCTAs ctaLabel={ctaLabel} />
    </>
  );
}
function HeroVariantC({ ctaLabel }) {
  // Punchy, group chat
  return (
    <>
      <span className="hero-eyebrow"><span className="dot"></span>MUSIC IS BETTER WITH PEOPLE</span>
      <h1 className="hero-title">
        Pick. Listen.<br />
        Rate. <span className="accent">Repeat.</span>
      </h1>
      <p className="hero-sub">
        The best music library is the one you build together. Disco is the album club where you and your friends rediscover the classics, debate the deep cuts, and finally keep track of every album that matters to you.
      </p>
      <HeroCTAs ctaLabel={ctaLabel} />
    </>
  );
}
function HeroVariantD({ ctaLabel }) {
  // Group chat
  return (
    <>
      <span className="hero-eyebrow"><span className="dot"></span>Now playing in 10,000 group chats</span>
      <h1 className="hero-title">
        Your group chat<br />
        has <span className="accent">terrible</span><br />
        taste in music.
      </h1>
      <p className="hero-sub">
        Fix that. Disco turns your friend group into a real listening club: take turns picking, score the album 1–10, and finally settle who has actual ears. The only feed is the one you built.
      </p>
      <HeroCTAs ctaLabel={ctaLabel} />
    </>
  );
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function EmailSignup({ ctaLabel, align = "left", source = "hero" }) {
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | loading | success | error
  const [errorMsg, setErrorMsg] = React.useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    const trimmed = email.trim();
    if (!EMAIL_RE.test(trimmed)) {
      setStatus("error");
      setErrorMsg("That doesn't look like a valid email.");
      return;
    }

    setStatus("loading");
    setErrorMsg("");

    try {
      const client = window.discoSupabase;
      if (!client) throw new Error("Signup is temporarily unavailable.");

      const { error } = await client.from("beta_signups").insert({
        email: trimmed.toLowerCase(),
        source,
        user_agent: typeof navigator !== "undefined" ? navigator.userAgent : null,
        referrer: typeof document !== "undefined" ? document.referrer || null : null,
      });

      // 23505 = unique_violation → email is already on the list.
      if (error && error.code === "23505") {
        setStatus("already");
      } else if (error) {
        throw error;
      } else {
        setStatus("success");
      }
    } catch (err) {
      console.error("Beta signup failed:", err);
      setStatus("error");
      setErrorMsg("Something went wrong. Please try again.");
    }
  };

  if (status === "success" || status === "already") {
    const message = status === "already"
      ? "Already on the list. Hang tight — beta invites are coming soon."
      : "You're on the list. We'll holler when the beta opens.";
    return (
      <div className={`email-success ${align === "center" ? "is-center" : ""}`}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6 9 17l-5-5"/></svg>
        {message}
      </div>
    );
  }

  const isLoading = status === "loading";

  return (
    <>
      <form
        className={`email-form ${align === "center" ? "is-center" : ""}`}
        onSubmit={onSubmit}
        noValidate
      >
        <input
          type="email"
          required
          placeholder="you@somewhere.com"
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
            if (status === "error") setStatus("idle");
          }}
          className="email-input"
          aria-label="Email address"
          disabled={isLoading}
        />
        <button type="submit" className="btn-primary" disabled={isLoading}>
          {isLoading ? "Sending…" : ctaLabel}
          {!isLoading && (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="m9 6 6 6-6 6"/></svg>
          )}
        </button>
      </form>
      {status === "error" && errorMsg && (
        <div
          className={`email-error ${align === "center" ? "is-center" : ""}`}
          role="alert"
        >
          {errorMsg}
        </div>
      )}
    </>
  );
}

function HeroCTAs({ ctaLabel }) {
  return (
    <>
      <EmailSignup ctaLabel={ctaLabel} source="hero" />
      <div className="hero-meta">
        <span className="dot-pulse"></span>
        <span>Beta opening soon · One email when we're live, no spam.</span>
      </div>
    </>
  );
}

/* ============ Hero visuals ============ */
function HeroVisualPhone() {
  return (
    <div className="phone-mock" role="presentation" aria-hidden="true">
      <div className="phone-screen">
        <div className="phone-notch"></div>

        {/* status bar */}
        <div className="dp-status">
          <span className="dp-time">6:22</span>
          <span className="dp-status-right">
            {/* signal */}
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="7" width="3" height="4" rx="0.7"/><rect x="4.5" y="5" width="3" height="6" rx="0.7"/><rect x="9" y="3" width="3" height="8" rx="0.7" opacity="0.4"/><rect x="13.5" y="0" width="3" height="11" rx="0.7" opacity="0.4"/></svg>
            {/* wifi */}
            <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2.5c2.4 0 4.6 0.9 6.3 2.4l-1.4 1.4C11 5.1 9.3 4.4 7.5 4.4S4 5.1 2.6 6.3L1.2 4.9C2.9 3.4 5.1 2.5 7.5 2.5zm0 3.5c1.4 0 2.7 0.5 3.7 1.4L9.7 8.8C9.1 8.3 8.3 8 7.5 8s-1.6 0.3-2.2 0.8L3.8 7.4C4.8 6.5 6.1 6 7.5 6zm0 3c0.6 0 1.2 0.2 1.6 0.6L7.5 11 5.9 9.6c0.4-0.4 1-0.6 1.6-0.6z"/></svg>
            {/* battery green */}
            <span className="dp-batt">
              <span className="dp-batt-pct">53</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="#39FF14"><path d="M5 0 L1 3.5 L3.5 3.5 L3 6 L7 2.5 L4.5 2.5 Z"/></svg>
            </span>
          </span>
        </div>

        <div className="dp-content">
          {/* Header */}
          <div className="dp-header">
            <div>
              <div className="dp-title">Discover</div>
              <div className="dp-subtitle">Find your next listening club</div>
            </div>
            <div className="dp-search-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
            </div>
          </div>

          {/* Featured carousel — Pitchfork's Top 50 */}
          <div className="dp-featured">
            <div className="dp-featured-content">
              <span className="dp-featured-pill">FEATURED</span>
              <div className="dp-featured-title">Pitchfork's Top 50</div>
              <div className="dp-featured-body">
                Working through Pitchfork's 50 best albums of the year, one record at a time…
              </div>
              <div className="dp-featured-foot">
                <span className="dp-featured-members">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="8" r="3.2"/><circle cx="17" cy="9" r="2.6"/><path d="M3 19a6 6 0 0 1 12 0H3zm12-1a5 5 0 0 1 8 0v1h-8v-1z" fill="currentColor"/></svg>
                  1.4k
                </span>
                <span className="dp-featured-joined">Joined</span>
              </div>
            </div>
            <div className="dp-featured-art">
              <RealCover query="The Dark Side of the Moon Pink Floyd" size={68} radius={4} />
              <RealCover query="In Rainbows Radiohead" size={68} radius={4} />
              <RealCover query="Abbey Road The Beatles" size={68} radius={4} />
              <RealCover query="Demon Days Gorillaz" size={68} radius={4} />
            </div>
          </div>

          {/* dots */}
          <div className="dp-dots">
            <span className="dp-dot active"></span>
            <span className="dp-dot"></span>
            <span className="dp-dot"></span>
            <span className="dp-dot"></span>
            <span className="dp-dot"></span>
            <span className="dp-dot"></span>
          </div>

          <div className="dp-divider"></div>

          {/* Trending Albums */}
          <div className="dp-section-label" style={{ color: 'var(--neon-orange)' }}>TRENDING ALBUMS</div>
          <div className="dp-row">
            <div className="dp-album-card">
              <RealCover query="Tha Carter III Lil Wayne" size={102} />
              <div className="dp-album-meta">
                <div className="dp-album-t">Tha Carter III</div>
                <div className="dp-album-a">Lil Wayne</div>
                <div className="dp-album-foot">
                  <span className="dp-genre" style={{ color: 'var(--neon-blue)' }}>Hip-Hop/Rap</span>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--fg-tertiary)" strokeWidth="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                </div>
              </div>
            </div>
            <div className="dp-album-card">
              <RealCover query="Born to Die Lana Del Rey" size={102} />
              <div className="dp-album-meta">
                <div className="dp-album-t">Born to Die</div>
                <div className="dp-album-a">Lana Del Rey</div>
                <div className="dp-album-foot">
                  <span className="dp-genre" style={{ color: 'var(--neon-yellow)' }}>Pop</span>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--fg-tertiary)" strokeWidth="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                </div>
              </div>
            </div>
            <div className="dp-album-card dp-album-peek">
              <RealCover query="My 21st Century Blues RAYE" size={102} />
              <div className="dp-album-meta">
                <div className="dp-album-t">THIS MUSIC M…</div>
                <div className="dp-album-a">RAYE</div>
                <div className="dp-album-foot">
                  <span className="dp-genre" style={{ color: 'var(--neon-yellow)' }}>Pop</span>
                </div>
              </div>
            </div>
          </div>

          {/* Highest Rated */}
          <div className="dp-section-label" style={{ color: 'var(--neon-orange)', marginTop: 14 }}>HIGHEST RATED</div>
          <div className="dp-row">
            <div className="dp-album-card">
              <div style={{ position: 'relative' }}>
                <RealCover query="Bad Girls Donna Summer" size={102} />
                <span className="dp-score-corner" style={{ background: 'var(--score-cyan)' }}>9.5</span>
              </div>
              <div className="dp-album-meta">
                <div className="dp-album-t">Bad Girls (Del…</div>
                <div className="dp-album-a">Donna Summer</div>
              </div>
            </div>
            <div className="dp-album-card">
              <div style={{ position: 'relative' }}>
                <RealCover query="Channel Orange Frank Ocean" size={102} />
                <span className="dp-score-corner" style={{ background: 'var(--score-cyan)' }}>9.1</span>
              </div>
              <div className="dp-album-meta">
                <div className="dp-album-t">Channel Orange</div>
                <div className="dp-album-a">Frank Ocean</div>
              </div>
            </div>
            <div className="dp-album-card dp-album-peek">
              <div style={{ position: 'relative' }}>
                <RealCover query="Starfucker Slayyyter" size={102} />
                <span className="dp-score-corner" style={{ background: 'var(--score-cyan)' }}>8.8</span>
              </div>
              <div className="dp-album-meta">
                <div className="dp-album-t">WOR$T GIRL IN A…</div>
                <div className="dp-album-a">Slayyyter</div>
              </div>
            </div>
          </div>
        </div>

        {/* floating tab bar */}
        <div className="dp-tabbar">
          <div className="dp-tab active">
            <span className="dp-tab-pill">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
            </span>
            <span className="dp-tab-label">Discover</span>
          </div>
          <div className="dp-tab">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 3v10.55A4 4 0 1 0 11 17V7h4V3H9z"/></svg>
            <span className="dp-tab-label">On Deck</span>
          </div>
          <div className="dp-tab">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0H4z"/></svg>
            <span className="dp-tab-label">Profile</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ----- Extra fake covers used in featured ----- */
function CoverPinkFloydDSOTM({ size = 64 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 4 }}>
      <rect width="100" height="100" fill="#0a0a0f" />
      <polygon points="20,75 50,25 80,75" fill="none" stroke="#fff" strokeWidth="1" />
      <line x1="20" y1="50" x2="50" y2="50" stroke="#ff5e5b" strokeWidth="1" />
      <line x1="50" y1="50" x2="85" y2="42" stroke="#ff5e5b" strokeWidth="1" />
      <line x1="50" y1="50" x2="85" y2="48" stroke="#ffd23f" strokeWidth="1" />
      <line x1="50" y1="50" x2="85" y2="54" stroke="#3bbf6c" strokeWidth="1" />
      <line x1="50" y1="50" x2="85" y2="60" stroke="#3a8dde" strokeWidth="1" />
    </svg>
  );
}
function CoverFoundersFaint({ size = 64 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 4 }}>
      <defs>
        <linearGradient id="ff" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5a3a8e" />
          <stop offset="100%" stopColor="#2a1a4e" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#ff)" />
      <text x="50" y="48" textAnchor="middle" fill="rgba(255,255,255,0.45)" fontFamily="Archivo Black,sans-serif" fontSize="14">FOUNDERS</text>
      <text x="50" y="62" textAnchor="middle" fill="rgba(255,255,255,0.45)" fontFamily="Archivo Black,sans-serif" fontSize="14">CLUB</text>
    </svg>
  );
}
function CoverGorillaz({ size = 64 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 4 }}>
      <rect width="100" height="100" fill="#3a3530" />
      <circle cx="35" cy="50" r="22" fill="#d8c5a0" />
      <circle cx="30" cy="46" r="3" fill="#1a1a1a" />
      <circle cx="42" cy="46" r="3" fill="#1a1a1a" />
      <path d="M28 56 Q35 60 42 56" stroke="#1a1a1a" strokeWidth="1.5" fill="none" />
      <rect x="62" y="20" width="32" height="60" fill="#0a0a0f" opacity="0.4" />
    </svg>
  );
}
window.CoverPinkFloydDSOTM = CoverPinkFloydDSOTM;
window.CoverFoundersFaint = CoverFoundersFaint;
window.CoverGorillaz = CoverGorillaz;

function HeroVisualVinyl() {
  return (
    <div className="vinyl-stage" role="presentation" aria-hidden="true">
      <div className="vinyl-disc"></div>
      <div className="vinyl-floating vinyl-cover-1" style={{ overflow: 'hidden' }}><RealCover query="To Pimp a Butterfly Kendrick Lamar" size={160} radius={14} /></div>
      <div className="vinyl-floating vinyl-cover-2" style={{ overflow: 'hidden' }}><RealCover query="Blue Joni Mitchell" size={140} radius={14} /></div>
      <div className="vinyl-floating vinyl-cover-3" style={{ overflow: 'hidden' }}><RealCover query="OK Computer Radiohead" size={120} radius={14} /></div>
    </div>
  );
}

function CollageCover({ q, title, featured, badge }) {
  const url = useAlbumArt(q);
  return (
    <div className={`collage-cover${featured ? ' featured' : ''}`}
      style={url ? { backgroundImage: `url(${url})`, backgroundSize: 'cover', backgroundPosition: 'center' } : { background: 'linear-gradient(135deg, var(--surface-light), var(--surface))' }}>
      {badge && <span className="badge">{badge}</span>}
      <span className="label">{title}</span>
    </div>
  );
}

function HeroVisualCollage() {
  return (
    <div className="collage" role="presentation" aria-hidden="true">
      {COLLAGE.map((c, i) => <CollageCover key={i} {...c} />)}
    </div>
  );
}

/* ============ Marquee ============ */
function Marquee({ items, reverse, outline }) {
  const repeated = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className={`marquee-track ${reverse ? 'reverse' : ''}`}>
        {repeated.map((it, i) => (
          <span key={i} className={`marquee-item ${outline ? 'outline' : ''}`}>
            {it}
            <span className="dot"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ============ How it works ============ */
function HowItWorks() {
  const steps = [
    {
      num: "01", eyebrow: "FORM", label: "Choose your circle.",
      body: "Invite your friends or join a curated club. You set the pace—from a daily sprint to a monthly deep dive.",
      visual: <div className="avatars-cluster">
        <div className="av pal-pink-violet">S</div>
        <div className="av pal-green-blue">K</div>
        <div className="av pal-yellow-orange">J</div>
        <div className="av pal-violet-blue">R</div>
        <div className="av pal-pink-orange">M</div>
        <div className="av av-rest">+2</div>
      </div>
    },
    {
      num: "02", eyebrow: "TAKE", label: "The aux cord is yours.",
      body: "When it's your turn, you set the vibe. Pick any album in history. No skips, no shuffle, just the full story.",
      visual: <div className="step-visual-pick">
        <div className="step-pick-tile pal-orange-pink">
          <span className="step-pick-label">PICKED</span>
        </div>
      </div>
    },
    {
      num: "03", eyebrow: "LISTEN", label: "A shared soundtrack.",
      body: "Listen at your own pace throughout the week. Drop reactions on tracks, highlight lyrics that hit, and see what your friends are feeling in real-time.",
      visual: <div className="eq-bars eq-bars-rainbow">
        {Array.from({ length: 7 }).map((_, i) => <span key={i} />)}
      </div>
    },
    {
      num: "04", eyebrow: "SCORE", label: "The Collective Verdict.",
      body: "At the end of the cycle, the scores are revealed. Compare your 10s to their 4s and settle the score in the club chat.",
      visual: <div className="score-pop">
        <span className="big">8.4</span>
        <span className="slash">/ 10</span>
      </div>
    },
    {
      num: "05", eyebrow: "ARCHIVE", label: "Build your legacy.",
      body: "Every rating and review is saved to your personal profile. Over time, you'll build a definitive, ranked library of your entire musical life. The next time someone asks for a recommendation, just send them your link.",
      visual: <div className="archive-bars">
        <span className="archive-bar" data-c="pink" />
        <span className="archive-bar" data-c="violet" />
        <span className="archive-bar" data-c="blue" />
        <span className="archive-bar" data-c="green" />
        <span className="archive-bar" data-c="yellow" />
        <span className="archive-bar" data-c="orange" />
      </div>
    },
  ];
  return (
    <div className="steps-grid">
      {steps.map((s, i) => (
        <div key={i} className="step">
          <span className="num" data-num={s.num}>{s.eyebrow}</span>
          <div className="label">{s.label}</div>
          <div className="body">{s.body}</div>
          <div className="visual" aria-hidden="true">{s.visual}</div>
        </div>
      ))}
    </div>
  );
}

/* ============ Featured clubs ============ */
function ClubCard({ c, i }) {
  const url = useAlbumArt(c.album + ' ' + c.artist);
  return (
    <div className={`club-card ${c.isOfficial ? 'official' : ''}`}>
      <div className="club-art" style={{ backgroundImage: url ? `url(${url})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center', backgroundColor: 'var(--surface-light)' }}>
            <div className="top-row">
              {c.status === 'active' && <span className="cap-pill"><span className="live-dot"></span>ACTIVE · DAY {c.day}</span>}
              {c.status === 'official' && <span className="cap-pill" style={{ color: 'var(--neon-blue)' }}>✓ OFFICIAL DISCO CLUB</span>}
              {c.status === 'featured' && <span className="cap-pill" style={{ color: 'var(--neon-pink)' }}>★ FEATURED</span>}
              <span className="cap-pill">{c.members} MEMBERS</span>
            </div>
            <div>
              <div className="album-title">{c.album}</div>
              <div className="album-artist">{c.artist}</div>
            </div>
          </div>
          <div className="club-foot">
            <div>
              <div className="club-name">{c.name}</div>
              <div className="club-meta">
                <span>Cycle {c.cycle}</span>
                <span>·</span>
                <span>{c.avg} avg score</span>
              </div>
            </div>
            {c.status === 'active' && <span className="status-badge sb-active"><span className="dot"></span>ACTIVE</span>}
            {c.status === 'official' && <span className="status-badge sb-official">✓ OFFICIAL</span>}
            {c.status === 'featured' && <span className="status-badge sb-featured">FEATURED</span>}
          </div>
        </div>
      );
}

function FeaturedClubs() {
  return (
    <div className="clubs-grid">
      {FEATURED_CLUBS.map((c, i) => <ClubCard key={i} c={c} i={i} />)}
    </div>
  );
}

/* ============ Footer CTA ============ */
function FooterCTA({ ctaLabel }) {
  return (
    <section className="footer-cta footer-cta-bg" id="download">
      <div className="page-wrap">
        <h2>
          Your next favorite<br />
          album is <span className="accent">waiting.</span>
        </h2>
        <p>The beta is filling up fast. Drop your email to claim your club's name and start the first spin.</p>
        <div className="footer-cta-form">
          <EmailSignup ctaLabel={ctaLabel} align="center" source="footer" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  TopNav, HeroVariantA, HeroVariantB, HeroVariantC, HeroVariantD,
  HeroVisualPhone, HeroVisualVinyl, HeroVisualCollage, CollageCover, ClubCard,
  Marquee, HowItWorks, FeaturedClubs, FooterCTA, EmailSignup,
  ALBUMS_TICKER,
});