// Marketing landing page — pitches NASEF Arena to coaches/admins/students
// This is what NASEF would link as "nasef.org/arena" or similar

const Landing = ({ onEnter }) => {
  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-deep)", color: "var(--text)", overflow: "hidden", position: "relative" }}>
      {/* Backdrop */}
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(ellipse 800px 600px at 20% 0%, rgba(242,104,34,0.15), transparent 60%),
          radial-gradient(ellipse 700px 500px at 90% 30%, rgba(155,109,255,0.12), transparent 60%),
          radial-gradient(ellipse 600px 400px at 50% 100%, rgba(79,227,255,0.08), transparent 60%)
        `,
        pointerEvents: "none",
      }} />
      <div className="bg-grid" style={{ position: "absolute", inset: 0, opacity: 0.5, maskImage: "radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%)" }} />

      {/* Header */}
      <header className="landing-header" style={{ position: "relative", zIndex: 1, padding: "20px 56px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--border-soft)" }}>
        <div className="row landing-header-left" style={{ gap: 36 }}>
          <NASEFMark />
          <nav className="landing-nav" style={{ display: "flex", gap: 24, fontSize: 13, color: "var(--text-secondary)" }}>
            <a style={{ cursor: "pointer" }}>Platform</a>
            <a style={{ cursor: "pointer" }}>Games</a>
            <a style={{ cursor: "pointer" }}>For Coaches</a>
            <a style={{ cursor: "pointer" }}>For Schools</a>
            <a style={{ cursor: "pointer" }}>Resources</a>
          </nav>
        </div>
        <div className="row landing-header-cta" style={{ gap: 8 }}>
          <button className="btn ghost landing-signin">Sign in</button>
          <button className="btn primary" onClick={onEnter}>Open the platform <IconArrowR size={14} /></button>
        </div>
      </header>

      {/* Hero */}
      <section className="landing-hero" style={{ position: "relative", zIndex: 1, padding: "80px 56px 60px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center", maxWidth: 1400, margin: "0 auto" }}>
        <div className="landing-hero-text">
          <h1 style={{ fontSize: 64, lineHeight: 1.02, letterSpacing: "-0.035em", fontWeight: 700, marginBottom: 24, marginTop: 16 }}>
            <span style={{ background: "linear-gradient(120deg, var(--nasef-orange) 0%, var(--neon-magenta) 60%, var(--neon-violet) 100%)", WebkitBackgroundClip: "text", color: "transparent" }}>
              High school esports
            </span>
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-secondary)", lineHeight: 1.55, maxWidth: 560, marginBottom: 32 }}>
            Esports isn't just something kids do after school anymore — it's a way for them to find their team,
            sharpen their game, and represent their school. NASEF Arena is where that happens.
          </p>
          <div className="row" style={{ gap: 12 }}>
            <button className="btn primary lg" onClick={onEnter}>
              Try the demo <IconArrowR size={14} />
            </button>
            <button className="btn lg">Read the whitepaper</button>
          </div>
          <div className="row" style={{ gap: 28, marginTop: 48, color: "var(--text-muted)", fontSize: 12 }}>
            <div className="row-tight"><IconShield size={14} /> COPPA / SOPIPA compliant</div>
            <div className="row-tight"><IconLock size={14} /> No student data sold</div>
          </div>
        </div>

        {/* Hero visual — interactive live match card (hidden on mobile via CSS) */}
        <div className="landing-hero-visual">
          <HeroMatchCard />
        </div>
      </section>

      {/* Logos / partner strip */}
      <section className="landing-partners" style={{ position: "relative", zIndex: 1, padding: "0 56px", maxWidth: 1400, margin: "0 auto 80px" }}>
        <div className="upper muted" style={{ textAlign: "center", marginBottom: 18 }}>Trusted by school districts across California</div>
        <div style={{ display: "flex", justifyContent: "center", gap: 48, flexWrap: "wrap", opacity: 0.6 }}>
          {["LAUSD", "San Diego Unified", "Long Beach Unified", "Capistrano Unified", "Fresno Unified", "Antelope Valley Union", "Garden Grove Unified"].map(n => (
            <div key={n} style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13, color: "var(--text-secondary)", letterSpacing: "0.04em" }}>{n}</div>
          ))}
        </div>
      </section>

      {/* Feature pillars */}
      <section className="landing-features" style={{ position: "relative", zIndex: 1, padding: "60px 56px", maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="upper" style={{ color: "var(--nasef-orange-soft)", marginBottom: 12 }}>A community for players, coaches, parents, and schools</div>
          <h2 style={{ fontSize: 40, letterSpacing: "-0.025em", marginBottom: 14 }}>Where school esports lives.</h2>
          <p style={{ maxWidth: 680, margin: "0 auto", color: "var(--text-secondary)", fontSize: 15 }}>
            Communities don't form by accident. NASEF Arena is built so players make friends across schools,
            coaches share what works, parents see their kids represented, and schools find each other.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {[
            { ic: IconShield, title: "Privacy-first, period",    body: "COPPA, SOPIPA, CCPA, GDPR compliant. No marketing to students. No data sold. Records scrubbed on request." },
            { ic: IconTrophy, title: "Multi-week leagues",       body: "Round-robin, Swiss, single and double elim. Real seasons with playoffs that matter." },
            { ic: IconSwords, title: "Game-day match flow",      body: "Auto-generated lobby codes. Built-in Smash stage striking. Three-tap score reporting." },
            { ic: IconUsers,  title: "Roster & account linking", body: "Sync game accounts once. Drag-edit lineups by week. JV/Varsity and subs supported." },
            { ic: IconBolt,   title: "Real game integrations",   body: "Full automation for Rocket League, LoL, Valorant, Chess. Account-linked for Fortnite, Overwatch. Manual flows for Nintendo titles." },
            { ic: IconChat,   title: "Built-in chat",            body: "Live in-platform chat in every lobby. Players, coaches, and spectators talk in one place — moderated and history kept." },
          ].map((f, i) => {
            const Ic = f.ic;
            return (
              <div key={i} className="card" style={{ padding: 24 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: "linear-gradient(135deg, rgba(242,104,34,0.18), rgba(242,104,34,0.04))",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "var(--nasef-orange-soft)",
                  border: "1px solid rgba(242,104,34,0.25)",
                  marginBottom: 18,
                }}>
                  <Ic size={20} />
                </div>
                <h3 style={{ fontSize: 17, marginBottom: 8, fontWeight: 600 }}>{f.title}</h3>
                <p style={{ color: "var(--text-secondary)", fontSize: 13, lineHeight: 1.55, margin: 0 }}>{f.body}</p>
              </div>
            );
          })}
        </div>
      </section>

      {/* Game support matrix */}
      <section className="landing-games" style={{ position: "relative", zIndex: 1, padding: "60px 56px", maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ marginBottom: 32 }}>
          <div className="upper" style={{ color: "var(--neon-cyan)", marginBottom: 10 }}>Games supported</div>
          <p style={{ color: "var(--text-secondary)", fontSize: 14, maxWidth: 640 }}>
            Different publishers offer different levels of API access. We're upfront — every title gets a clean experience, but only some can be fully automated.
          </p>
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: "30%" }}>Title</th>
                <th>Lobby</th>
                <th>Score reporting</th>
                <th>Stats / replays</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {[
                { game: "League of Legends",     lobby: "Auto-generated", score: "Pulled from API",    stats: "Full match data",      status: "Fully automated", color: "var(--success)" },
                { game: "Valorant",              lobby: "Auto-generated", score: "Pulled from API",    stats: "Full match data",      status: "Fully automated", color: "var(--success)" },
                { game: "Rocket League",         lobby: "Auto-generated", score: "Pulled from API",    stats: "Full match data",      status: "Fully automated", color: "var(--success)" },
                { game: "Chess.com",             lobby: "Auto-generated", score: "Pulled from API",    stats: "Full game record",     status: "Fully automated", color: "var(--success)" },
                { game: "Fortnite",              lobby: "Custom key",     score: "API + verification", stats: "Placement + elims",    status: "Account-linked",  color: "var(--neon-cyan)" },
                { game: "Overwatch 2",           lobby: "Custom code",    score: "Account-linked",     stats: "Profile snapshot",     status: "Account-linked",  color: "var(--neon-cyan)" },
                { game: "Marvel Rivals",         lobby: "Custom code",    score: "Account-linked",     stats: "Profile snapshot",     status: "Account-linked",  color: "var(--neon-cyan)" },
                { game: "Super Smash Bros. Ultimate", lobby: "Friend code exchange", score: "Coach-reported, both confirm", stats: "—", status: "Manual + verification", color: "var(--warning)" },
                { game: "Mario Kart 8 Deluxe",   lobby: "Friend code exchange", score: "Coach-reported", stats: "—",                   status: "Manual + verification", color: "var(--warning)" },
                { game: "Splatoon 3",            lobby: "Friend code exchange", score: "Coach-reported", stats: "—",                   status: "Manual + verification", color: "var(--warning)" },
                { game: "Madden NFL / NBA 2K",   lobby: "Code exchange",  score: "Coach-reported",     stats: "—",                    status: "Manual + verification", color: "var(--warning)" },
              ].map((row, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600 }}>{row.game}</td>
                  <td className="secondary">{row.lobby}</td>
                  <td className="secondary">{row.score}</td>
                  <td className="secondary">{row.stats}</td>
                  <td>
                    <span className="badge" style={{
                      background: `${row.color}1A`, color: row.color, borderColor: `${row.color}55`,
                    }}>{row.status}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* CTA band */}
      <section className="landing-cta" style={{ position: "relative", zIndex: 1, padding: "80px 56px 100px" }}>
        <div className="card" style={{
          maxWidth: 1100, margin: "0 auto",
          padding: 56,
          background: "linear-gradient(135deg, rgba(242,104,34,0.12) 0%, rgba(155,109,255,0.08) 100%)",
          border: "1px solid rgba(242,104,34,0.3)",
          textAlign: "center",
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 20%, rgba(242,104,34,0.2), transparent 60%)" }} />
          <div style={{ position: "relative" }}>
            <h2 style={{ fontSize: 38, letterSpacing: "-0.025em", marginBottom: 14 }}>See it in action.</h2>
            <p style={{ color: "var(--text-secondary)", fontSize: 16, maxWidth: 600, margin: "0 auto 28px" }}>
              Walk through the live demo as a coach, student, or admin. No signup. No data captured. Just see how it works.
            </p>
            <button className="btn primary lg" onClick={onEnter}>
              Open the demo platform <IconArrowR size={14} />
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="landing-footer" style={{ position: "relative", zIndex: 1, padding: "32px 56px", borderTop: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--text-muted)", fontSize: 12 }}>
        <div className="row" style={{ gap: 16 }}>
          <NASEFMark small />
          <span>© 2026 North America Scholastic Esports Federation</span>
        </div>
        <div className="row" style={{ gap: 20 }}>
          <a>Privacy</a><a>COPPA disclosure</a><a>Terms</a><a>Contact</a>
        </div>
      </footer>
    </div>
  );
};

const HeroMatchCard = () => {
  // Game clock — counts up from a base
  const [seconds, setSeconds] = React.useState(187);
  // Live feed cycles in continuous tense
  const feedItems = [
    { tag: "STRIKING", text: "Quartz Hill striking starter stages",   c: "var(--neon-cyan)" },
    { tag: "PICKING",  text: "Hamilton picked Joker",                  c: "var(--nasef-orange)" },
    { tag: "PICKING",  text: "Quartz Hill picked Pyra/Mythra",         c: "var(--neon-magenta)" },
    { tag: "PLAYING",  text: "Game 4 in progress · Hollow Bastion",    c: "var(--success)" },
    { tag: "IN LOBBY", text: "NASEF-44C2 · waiting on ready check",    c: "var(--text-muted)" },
  ];
  const [feedIdx, setFeedIdx] = React.useState(0);
  const [showText, setShowText] = React.useState(false);
  const [hovering, setHovering] = React.useState(false);

  React.useEffect(() => {
    const t = setInterval(() => setSeconds(s => s + 1), 1000);
    const fd = setInterval(() => {
      setShowText(false);
      setFeedIdx(i => (i + 1) % feedItems.length);
      setTimeout(() => setShowText(true), 1000);
    }, 3000);
    setTimeout(() => setShowText(true), 1000);
    return () => { clearInterval(t); clearInterval(fd); };
  }, []);

  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
  const ss = String(seconds % 60).padStart(2, "0");
  const feed = feedItems[feedIdx];
  void hovering; // referenced below

  return (
    <div
      style={{ position: "relative", aspectRatio: "1 / 1", display: "flex", alignItems: "center", justifyContent: "center" }}
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
    >
      {/* animated radial glow */}
      <div style={{
        position: "absolute", inset: "8%",
        background: "radial-gradient(circle, rgba(242,104,34,0.28), transparent 65%)",
        filter: "blur(50px)",
        animation: "heroGlow 6s ease-in-out infinite",
      }} />

      <div className="card hero-tilt" style={{
        position: "relative", width: "92%", padding: 0,
        transform: "translateZ(0)",
        boxShadow: "0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)",
        background: "linear-gradient(180deg, rgba(26,34,51,0.92) 0%, rgba(11,15,24,0.96) 100%)",
        overflow: "hidden",
      }}>
        {/* shimmer sweep */}
        <div style={{
          position: "absolute", top: 0, left: "-50%", width: "60%", height: "100%",
          background: "linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%)",
          animation: "heroShimmer 5s ease-in-out infinite",
          pointerEvents: "none",
        }} />

        {/* header row */}
        <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="row-tight">
            <span className="badge live" style={{ animation: "livePulse 1.6s ease-in-out infinite" }}>
              <span className="dot" />LIVE
            </span>
            <span className="upper muted">Week 5 · Pacific Coast</span>
          </div>
          <GameTag game="SSBU" />
        </div>

        {/* match body */}
        <div style={{ padding: "26px 24px 18px", display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 16 }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 90, height: 90, display: "flex", alignItems: "center", justifyContent: "center",
              filter: "drop-shadow(0 4px 18px rgba(154,222,82,0.4))",
            }}>
              <img src="assets/hamilton-logo.png" alt="Hamilton Yankees" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Yankees</div>
              <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>Hamilton HS</div>
            </div>
          </div>

          <div style={{ textAlign: "center", minWidth: 110 }}>
            <div className="mono" style={{ fontSize: 44, fontWeight: 700, letterSpacing: "0.02em", lineHeight: 1 }}>
              <span style={{ color: "var(--nasef-orange)" }}>2</span>
              <span style={{ display: "inline-block", width: 56 }} />
              <span>1</span>
            </div>
            <div className="upper muted" style={{ marginTop: 6, fontSize: 10 }}>BO5 · Game 4</div>
            <div className="mono" style={{ fontSize: 12, color: "var(--text-secondary)", marginTop: 8, padding: "3px 10px", background: "rgba(255,59,92,0.08)", border: "1px solid rgba(255,59,92,0.2)", borderRadius: 99, display: "inline-block" }}>
              {mm}:{ss}
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 90, height: 90, display: "flex", alignItems: "center", justifyContent: "center",
              filter: "drop-shadow(0 4px 18px rgba(242,104,34,0.4))",
            }}>
              <img src="assets/quartzhill-logo.png" alt="Quartz Hill Rebels" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Rebels</div>
              <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>Quartz Hill HS</div>
            </div>
          </div>
        </div>

        {/* live feed ticker */}
        <div style={{ padding: "12px 18px", borderTop: "1px solid var(--border-soft)", display: "flex", alignItems: "center", gap: 10, fontSize: 11, height: 38, overflow: "hidden", position: "relative" }}>
          <span key={feedIdx} className="mono upper" style={{ fontSize: 9, padding: "2px 6px", background: feed.c, color: "var(--bg-deep)", borderRadius: 3, fontWeight: 700, letterSpacing: "0.08em", animation: "heroFeedIn 300ms ease-out" }}>
            {feed.tag}
          </span>
          <span key={feedIdx + "-text"} className="mono" style={{ color: "var(--text-secondary)", flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", opacity: showText ? 1 : 0, transform: showText ? "translateX(0)" : "translateX(8px)", transition: "opacity 300ms ease-out, transform 300ms ease-out" }}>
            {feed.text}
          </span>
        </div>
      </div>
    </div>
  );
};

window.HeroMatchCard = HeroMatchCard;
window.Landing = Landing;