// Landing v2 — premium dark, Camelot-forward USP, IMDb-style rating preview,
// Shadow Team teaser, full 17-module grid.

function Landing({ onStart }) {
  const D = window.IAMS_DATA;
  const sample = D.PLAYERS.filter(p => p.club !== "Borussia Dortmund").slice(0, 1)[0];

  return (
    <div className="landing-v2" style={{ minHeight: "calc(100vh - 50px)", background: "var(--bg)" }}>
      {/* ── Top bar ── */}
      <header style={{
        display: "flex", alignItems: "center", gap: 24,
        padding: "18px 40px",
        borderBottom: "1px solid var(--rule)",
        position: "sticky", top: 50, background: "var(--bg)", zIndex: 10,
      }}>
        <Wordmark size={18}/>
        <nav className="mono" style={{ display: "flex", gap: 22, marginLeft: 28 }}>
          {["How it works","Camelot","Shadow Team","Ratings","Pricing"].map(x => (
            <a key={x} style={{ fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-dim)", cursor: "pointer" }}>{x}</a>
          ))}
        </nav>
        <div style={{ flex: 1 }}/>
        <button className="btn ghost sm" onClick={() => { window.location.href = "/login"; }}>Sign in</button>
        <button className="btn accent sm" onClick={() => { window.location.href = "/signup"; }}>Request pilot access</button>
      </header>

      {/* ── HERO ── */}
      <section style={{
        position: "relative",
        padding: "80px 40px 60px",
        maxWidth: 1320, margin: "0 auto",
      }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.05fr 1fr",
          gap: 56, alignItems: "center",
        }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em",
              textTransform: "uppercase", color: "var(--accent)", marginBottom: 20 }}>
              Private pilot · Closed beta · Q3 launch
            </div>
            <h1 className="display" style={{
              fontSize: "clamp(42px, 5.6vw, 78px)",
              lineHeight: 0.96, letterSpacing: "-0.035em", fontWeight: 600,
              margin: 0, textWrap: "balance",
            }}>
              Scout. Rate.<br/>
              <span style={{ color: "var(--accent)" }}>Mix them in</span> like a DJ.
            </h1>
            <p style={{ marginTop: 24, fontSize: 19, lineHeight: 1.5, color: "var(--ink-dim)", maxWidth: 560, textWrap: "pretty" }}>
              IAMScouting is the strategic scouting brain for clubs who can't afford a 15-person department.
              We go beyond "who's good" — we tell you <strong style={{ color: "var(--ink)" }}>who's good for YOU</strong>,
              using a Camelot compatibility model inspired by how DJs match musical keys.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              <button className="btn accent lg" onClick={onStart}>Start a club profile →</button>
              <button className="btn ghost lg" onClick={onStart}>See a live shortlist</button>
            </div>
            <div style={{ marginTop: 36, display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
              <Stat n="400K" l="Players indexed"/>
              <Stat n="330" l="Tournaments"/>
              <Stat n="48" l="Countries scored"/>
              <Stat n="<30s" l="To your first shortlist"/>
            </div>
          </div>

          {/* Right: Camelot wheel preview */}
          <CamelotHeroPreview player={sample}/>
        </div>
      </section>

      {/* ── USP STRIP · Camelot ── */}
      <section style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)",
        background: "var(--panel-2)", padding: "64px 40px" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "center" }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 10 }}>
                Our USP · The Camelot Wheel for football
              </div>
              <div className="display" style={{ fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.08, maxWidth: 540 }}>
                Other Tools tell you <em>what</em> a player did. IAMScouting tells you <em>who fits your key</em> — and why.
              </div>
              <div style={{ marginTop: 16, color: "var(--ink-dim)", fontSize: 15, maxWidth: 580, lineHeight: 1.55 }}>
                Every player gets a Camelot key. Every club gets one. We score compatibility across four axes
                you can't ignore: <strong>Role · Geo · League · Mental</strong>. Signing a player who clashes on one of
                them is a transfer that doesn't land.
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12, maxWidth: 460, justifySelf: "end" }}>
              <CamelotExample label="Messi → USA" result="good" note="MLS tempo · Miami diaspora"/>
              <CamelotExample label="Messi → Premier League" result="bad" note="Duels · late career physicality"/>
              <CamelotExample label="Messi → Eredivisie" result="good" note="Positional · space-heavy"/>
              <CamelotExample label="Messi → Bundesliga" result="mid" note="Press-heavy; schematic friction"/>
            </div>
          </div>
        </div>
      </section>

      {/* ── 3 STEPS ── */}
      <section style={{ padding: "72px 40px", maxWidth: 1240, margin: "0 auto" }}>
        <SectionTitle eyebrow="How it works" title="From brief to board in four steps."/>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { n: "01", t: "Describe your club",  d: "Country · league · budget band · playing philosophy · language · scouting goal. Editable anytime." },
            { n: "02", t: "Read the map",         d: "A world coloured by how well each region fits you. Drill into a country to see its leagues and flagged players." },
            { n: "03", t: "Test the mix",         d: "Camelot wheel shows you who harmonizes. 10–20 specific players, each with a 4-axis compatibility score." },
            { n: "04", t: "Pitch the Shadow XI",  d: "Build your ideal 11 across every slot, annotate, and export a board-ready pitch deck." },
          ].map(s => (
            <div key={s.n} className="card" style={{ padding: 22 }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>STEP {s.n}</div>
              <div className="display" style={{ fontSize: 20, fontWeight: 600, marginTop: 10, letterSpacing: "-0.01em" }}>{s.t}</div>
              <div style={{ marginTop: 8, color: "var(--ink-dim)", fontSize: 13.5, lineHeight: 1.5 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── SHADOW TEAM + IMDb RATING teasers ── */}
      <section style={{ padding: "48px 40px 80px", maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 28 }}>
        <ShadowTeamTeaser onStart={onStart}/>
        <ImdbRatingTeaser onStart={onStart} player={sample}/>
      </section>

      {/* ── FULL MODULE GRID ── */}
      <section style={{ padding: "56px 40px", maxWidth: 1240, margin: "0 auto" }}>
        <SectionTitle eyebrow="The full platform" title="17 modules, one strategic brain."/>
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {[
            { n: "01", t: "Club Profiling", s: "Budget · philosophy · style tags · culture" },
            { n: "02", t: "Construction Sites", s: "5-band audit, priority positions" },
            { n: "03", t: "IAMS Index", s: "0-200 scale, role-weighted" },
            { n: "04", t: "Camelot Wheel", s: "4-axis compatibility USP" },
            { n: "05", t: "World Map", s: "48 countries scored by fit" },
            { n: "06", t: "Shortlist", s: "Filter · sort · export" },
            { n: "07", t: "Player Profile", s: "FM-style attributes · radar" },
            { n: "08", t: "Shadow Team", s: "Pitch to the board" },
            { n: "09", t: "Dark Horse feed", s: "Undervalued finds weekly" },
            { n: "10", t: "IMDb-style ratings", s: "Community + PRO + AI + mine" },
            { n: "11", t: "IAMGPT", s: "Natural language search + explain" },
            { n: "12", t: "Injury tracker", s: "Transfer-flag the risky ones" },
            { n: "13", t: "Role matrix", s: "Every role scored, not just pos." },
            { n: "14", t: "Trust levels", s: "Club XP, ranking, rewards" },
            { n: "15", t: "Source transparency", s: "Every value tagged" },
            { n: "16", t: "Scouting reports", s: "On-demand AI briefs" },
            { n: "17", t: "Pilot pricing", s: "€1-5K/month — no seat bloat" },
          ].map((m, i) => (
            <div key={m.n} className="card" style={{ padding: 14, minHeight: 92 }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em" }}>{m.n}</div>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6, letterSpacing: "-0.01em" }}>{m.t}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-muted)", marginTop: 4, lineHeight: 1.4 }}>{m.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── QUOTE ── */}
      <section style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)",
        padding: "56px 40px", background: "var(--panel-2)" }}>
        <div style={{ maxWidth: 980, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
          <div className="display" style={{ fontSize: 26, lineHeight: 1.25, letterSpacing: "-0.01em", textWrap: "balance" }}>
            "The Camelot wheel changed the conversation at our board. We stopped arguing about whether a player was good, and started asking whether he was good <em>for us</em>."
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase", textAlign: "right", lineHeight: 1.6 }}>
            Sporting director<br/>2. Bundesliga club<br/>(pilot, April 2026)
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{
        padding: "32px 40px",
        display: "flex", gap: 24,
        fontFamily: "var(--mono)", fontSize: 11,
        color: "var(--ink-muted)",
        letterSpacing: "0.06em", textTransform: "uppercase",
        borderTop: "1px solid var(--rule)",
      }}>
        <Wordmark size={13}/>
        <span style={{ marginLeft: 24 }}>IAMScouting · prototype</span>
        <div style={{ flex: 1 }}/>
        <span>Data partner · 330-tournament coverage</span>
        <span>Berlin</span>
      </footer>
    </div>
  );
}

function Stat({ n, l }) {
  return (
    <div style={{ minWidth: 80 }}>
      <div className="display tnum" style={{ fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink)" }}>{n}</div>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>{l}</div>
    </div>
  );
}

function CamelotExample({ label, result, note }) {
  const c = result === "good" ? "var(--good)" : result === "bad" ? "var(--bad)" : "var(--mid)";
  const bg = result === "good" ? "rgba(26,122,54,0.1)" : result === "bad" ? "rgba(195,50,31,0.1)" : "rgba(209,151,18,0.1)";
  return (
    <div style={{ padding: 14, border: "1px solid " + c, background: bg }}>
      <div className="mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", color: c, textTransform: "uppercase" }}>
        {result === "good" ? "✓ harmonic" : result === "bad" ? "✗ clash" : "~ neutral"}
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>{label}</div>
      <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>{note}</div>
    </div>
  );
}

// Hero: small Camelot wheel + player card showing match
function CamelotHeroPreview({ player }) {
  const D = window.IAMS_DATA;
  const profileKey = D.profileCamelotKey({ philosophy: "pressing", country: "Germany", league: "Bundesliga" });
  const axes = D.camelotFor(player, { country: "Germany", philosophy: "pressing", league: "Bundesliga", name: "your club" });
  const match = D.camelotMatch(player.camelotKey, profileKey);

  return (
    <div style={{ position: "relative", minHeight: 480 }}>
      {/* wheel */}
      <div className="card" style={{ padding: 28, background: "var(--panel)" }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 4 }}>
          Live · Camelot Wheel
        </div>
        <div className="display" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.015em" }}>
          Your club key: <span style={{ color: "var(--accent)" }}>{profileKey.code}</span>
        </div>
        <div style={{ marginTop: 16, display: "flex", justifyContent: "center" }}>
          <CamelotWheel data={axes} size={240}/>
        </div>
        <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {axes.map(a => (
            <div key={a.axis} style={{
              padding: "6px 8px", textAlign: "center",
              borderTop: "2px solid " + (a.band === "good" ? "var(--good)" : a.band === "mid" ? "var(--mid)" : "var(--bad)"),
            }}>
              <div className="mono" style={{ fontSize: 9, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{a.axis}</div>
              <div className="display tnum" style={{ fontSize: 16, fontWeight: 600 }}>{a.score}</div>
            </div>
          ))}
        </div>
      </div>
      {/* floating player card */}
      <div className="card" style={{
        position: "absolute", bottom: -20, right: -20, width: 280,
        padding: 16, background: "var(--panel)",
        boxShadow: "0 12px 24px rgba(0,0,0,0.18)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <CamelotKeyPill keyCode={player.camelotKey.code} match={match}/>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            Top match · {D.COUNTRIES.find(c => c.iso === player.country)?.name}
          </span>
        </div>
        <div className="display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", marginTop: 6 }}>
          {player.name}
        </div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>
          {player.pos} · {player.age} · {player.club}
        </div>
        <div style={{ marginTop: 10, display: "flex", gap: 10, alignItems: "center" }}>
          <div className="display tnum" style={{ fontSize: 22, fontWeight: 600, color: "var(--accent)" }}>{player.iams}</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)" }}>/200 IAMS</div>
          <div style={{ flex: 1 }}/>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-dim)" }}>€{player.mv}M</div>
        </div>
      </div>
    </div>
  );
}

function ShadowTeamTeaser({ onStart }) {
  return (
    <div className="card" style={{ padding: 28, position: "relative", overflow: "hidden" }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10 }}>
        Shadow Team
      </div>
      <div className="display" style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
        Build your top XI for every position and pitch it to management.
      </div>
      <div style={{ marginTop: 12, color: "var(--ink-dim)", fontSize: 14, lineHeight: 1.5 }}>
        Drag targets onto a pitch. Every slot compares current vs. future — age, cost, IAMS. Add scouting notes. Export
        a board-ready PDF.
      </div>
      {/* Mini pitch graphic */}
      <svg viewBox="0 0 100 50" style={{ width: "100%", marginTop: 16, background: "var(--panel-2)", border: "1px solid var(--rule)" }}>
        <rect x="2" y="2" width="96" height="46" fill="none" stroke="var(--rule-strong)" strokeWidth="0.3"/>
        <line x1="50" y1="2" x2="50" y2="48" stroke="var(--rule-strong)" strokeWidth="0.3"/>
        <circle cx="50" cy="25" r="5" fill="none" stroke="var(--rule-strong)" strokeWidth="0.3"/>
        {[
          [90,25],[75,10],[75,25],[75,40],[60,17],[60,33],[50,25],[35,10],[35,40],[20,25],[10,25],
        ].map(([x,y], i) => (
          <circle key={i} cx={x} cy={y} r="2" fill="var(--accent)" opacity="0.85"/>
        ))}
      </svg>
      <button className="btn accent sm" style={{ marginTop: 16 }} onClick={onStart}>Build your Shadow XI →</button>
    </div>
  );
}

function ImdbRatingTeaser({ onStart, player }) {
  const starRating = player.ratings.community.stars; // 0-10
  const max = Math.max(...player.ratings.histogram);
  return (
    <div className="card" style={{ padding: 28 }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10 }}>
        IMDb-style ratings
      </div>
      <div className="display" style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
        Four perspectives per player. Community weight built in.
      </div>
      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "center" }}>
        <div>
          <div className="display tnum" style={{ fontSize: 64, fontWeight: 700, color: "var(--accent)", letterSpacing: "-0.04em", lineHeight: 1 }}>
            {starRating}<span style={{ fontSize: 22, color: "var(--ink-muted)", fontWeight: 500 }}>/10</span>
          </div>
          <StarRow value={starRating} max={10} size={12}/>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 4 }}>
            {player.ratings.community.votes} clubs rated
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-muted)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>
            Distribution
          </div>
          <div style={{ display: "grid", gridTemplateRows: "repeat(10, 1fr)", gap: 2 }}>
            {player.ratings.histogram.slice().reverse().map((v, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "18px 1fr 30px", gap: 6, alignItems: "center", fontSize: 10 }}>
                <div className="mono" style={{ color: "var(--ink-muted)", textAlign: "right" }}>{10 - i}</div>
                <div style={{ height: 8, background: "var(--chip-bg)" }}>
                  <div style={{ height: "100%", width: (v / max * 100) + "%", background: "var(--accent)", opacity: 0.85 }}/>
                </div>
                <div className="mono tnum" style={{ color: "var(--ink-muted)" }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <button className="btn ghost sm" style={{ marginTop: 16 }} onClick={onStart}>See a live rating →</button>
    </div>
  );
}

Object.assign(window, { Landing });