// Sections 2-3 — Proof bar + Who it's for

function ProofBar() {
  const stats = [
    { v: "300+", l: "Global edge locations", d: "Sub-50ms globally" },
    { v: "200K", l: "Concurrent viewer plan", d: "k6-tested, auto-sharded" },
    { v: "100%", l: "Test coverage target", d: "Auditable by design" },
    { v: "4×", l: "Commercial paths", d: "SaaS · Whitelabel · License · Acquisition" },
  ];
  return (
    <section style={{ borderTop: "1px solid rgb(255 255 255 / 0.06)", borderBottom: "1px solid rgb(255 255 255 / 0.06)", background: "oklch(0.14 0.01 260)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
        {stats.map((s, i) => (
          <div key={s.v} style={{ padding: "28px 36px", borderRight: i < 3 ? "1px solid rgb(255 255 255 / 0.06)" : "none", display: "flex", flexDirection: "column", gap: 6 }}>
            <div style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", color: "var(--fg-1)", lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 14, color: "var(--fg-1)", marginTop: 6 }}>{s.l}</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function WhoItsFor() {
  const cards = [
    {
      key: "producers",
      tag: "Segment A",
      title: "Event producers & promoters",
      pain: "Forced to choose between reach (YouTube, free) and revenue (complex pay-per-view setups).",
      prop: "One product for the whole event — ticket tiers at any granularity, branded page, low-latency stream, moderated chat.",
      cta: "Run your next event",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M2 9a3 3 0 010 6v2a2 2 0 002 2h16a2 2 0 002-2v-2a3 3 0 010-6V7a2 2 0 00-2-2H4a2 2 0 00-2 2v2z"/><path d="M13 5v14"/></svg>)
    },
    {
      key: "brands",
      tag: "Segment B",
      title: "Media brands & broadcasters",
      pain: "YouTube/Twitch own your audience. Brightcove and Kaltura are expensive, slow, and services-heavy.",
      prop: "A whitelabel streaming product delivered on your domain. TV app strategy scaffolded. You own the data.",
      cta: "Launch a branded product",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 22h8M12 18v4"/></svg>)
    },
    {
      key: "buyers",
      tag: "Segment C",
      title: "Platform buyers & acquirers",
      pain: "Building in-house is 18–24 months. Most licensable platforms are legacy or architecturally unserviceable.",
      prop: "A production-ready, edge-native platform with a decision log and 200K-viewer scaling plan. License or acquire.",
      cta: "Evaluate the platform",
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-6"/></svg>)
    },
  ];

  return (
    <section style={{ padding: "120px 60px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 80, marginBottom: 64, alignItems: "end" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Who it's for</div>
          <h2 style={{ fontSize: 52, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.0, margin: 0, color: "var(--fg-1)" }}>
            One platform,<br/>three audiences.
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 540, margin: 0, textWrap: "pretty" }}>
          SlipstreamTV was built for producers running live events, media brands launching a branded product, and technical buyers evaluating build-vs-buy. Each segment has its own path through the platform.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {cards.map((c) => (
          <a key={c.key} href={`#${c.key}`} style={{
            position: "relative", padding: 28, borderRadius: 20,
            background: "rgb(255 255 255 / 0.03)",
            border: "1px solid rgb(255 255 255 / 0.08)",
            textDecoration: "none", color: "inherit",
            display: "flex", flexDirection: "column", gap: 16,
            transition: "all 250ms var(--ease-standard)",
            minHeight: 340,
          }} onMouseEnter={e => { e.currentTarget.style.background = "rgb(255 255 255 / 0.05)"; e.currentTarget.style.borderColor = "rgb(255 255 255 / 0.15)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
             onMouseLeave={e => { e.currentTarget.style.background = "rgb(255 255 255 / 0.03)"; e.currentTarget.style.borderColor = "rgb(255 255 255 / 0.08)"; e.currentTarget.style.transform = "none"; }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgb(217 36 42 / 0.1)", border: "1px solid rgb(217 36 42 / 0.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary)" }}>
                {c.icon}
              </div>
              <span className="eyebrow">{c.tag}</span>
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, color: "var(--fg-1)" }}>{c.title}</h3>
            <div>
              <div className="eyebrow" style={{ color: "var(--fg-3)", marginBottom: 6 }}>Pain</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: "var(--fg-2)", margin: 0 }}>{c.pain}</p>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "var(--fg-3)", marginBottom: 6 }}>What we do</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: "var(--fg-1)", margin: 0 }}>{c.prop}</p>
            </div>
            <div style={{ flex: 1 }} />
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 500, color: "var(--color-primary)" }}>
              {c.cta}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

window.ProofBar = ProofBar;
window.WhoItsFor = WhoItsFor;