// Section 4 — Three commercial pillars
// Whitelabel · Ticketing · Real-time scale. No engineering jargon.

function ThreePillars() {
  const pillars = [
    {
      n: "01",
      title: "Your brand. Your domain. Your audience.",
      sub: "True whitelabel — not a logo-swap.",
      copy: "Viewers hit your URL, see your brand, pay on your checkout. There is no SlipstreamTV wrapper, no watermark, no 'powered by' footer. The relationship is yours to keep.",
      bullets: [
        "Custom domain with automated SSL",
        "Full theme control — colour, font, logo, favicon",
        "Multi-language out of the box, including RTL",
      ],
      visual: "brand",
    },
    {
      n: "02",
      title: "Sell the way live events actually sell.",
      sub: "Ticketing designed for festivals, not webinars.",
      copy: "Full festival pass, Saturday-only, Stage 3 only, single session — four pricing granularities, one product. Sale windows, quantity limits, refund handling, all built in.",
      bullets: [
        "Festival · day · stage · session tiers",
        "Sale windows and quantity caps per tier",
        "Refunds, disputes, tax handled",
      ],
      visual: "ticket",
    },
    {
      n: "03",
      title: "Two viewers or two hundred thousand.",
      sub: "Same platform. Same price model. Same experience.",
      copy: "No enterprise tier you have to email sales about. No scaling cliff. A Tuesday-night stream for fifty people runs on exactly the same infrastructure as a Saturday festival for 200,000 concurrent viewers.",
      bullets: [
        "Sub-50ms latency to viewers worldwide",
        "Real-time chat that scales with the audience",
        "Load-tested to 200,000 concurrent viewers",
      ],
      visual: "scale",
    },
  ];

  return (
    <section id="platform" style={{ padding: "120px 60px", borderTop: "1px solid rgb(255 255 255 / 0.06)", background: "oklch(0.12 0.01 260)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ marginBottom: 80, maxWidth: 780 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>What you get</div>
          <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.0, margin: 0, textWrap: "balance" }}>
            Three commitments.<br/>Everything else follows.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {pillars.map((p) => (
            <article key={p.n} style={{
              padding: 32, borderRadius: 20,
              background: "rgb(255 255 255 / 0.03)",
              border: "1px solid rgb(255 255 255 / 0.08)",
              display: "flex", flexDirection: "column", gap: 20,
              minHeight: 560,
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-primary)", fontWeight: 500 }}>{p.n}</span>
                <PillarBadge kind={p.visual} />
              </div>
              <div>
                <h3 style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, marginBottom: 8, color: "var(--fg-1)", lineHeight: 1.2, textWrap: "balance" }}>{p.title}</h3>
                <div style={{ fontSize: 14, color: "var(--fg-3)", lineHeight: 1.5 }}>{p.sub}</div>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-2)", margin: 0, textWrap: "pretty" }}>{p.copy}</p>
              <div style={{ flex: 1 }} />
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, paddingTop: 20, borderTop: "1px solid rgb(255 255 255 / 0.06)" }}>
                {p.bullets.map((b, j) => (
                  <li key={j} style={{ fontSize: 13, lineHeight: 1.5, color: "var(--fg-2)", display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2.5" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 3 }}><path d="M20 6L9 17l-5-5"/></svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div style={{ marginTop: 56, padding: "22px 28px", borderRadius: 16, background: "rgb(255 255 255 / 0.02)", border: "1px solid rgb(255 255 255 / 0.06)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="1.8" strokeLinecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
            <span style={{ fontSize: 15, fontWeight: 500, color: "var(--fg-1)" }}>Built for 2 to 200,000 concurrent viewers — the same way, the same price model.</span>
          </div>
          <a href="#architecture" style={{ fontSize: 13, color: "var(--fg-2)", display: "inline-flex", alignItems: "center", gap: 6, textDecoration: "none" }}>
            How it scales
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function PillarBadge({ kind }) {
  const style = { width: 40, height: 40, borderRadius: 10, background: "rgb(255 255 255 / 0.04)", border: "1px solid rgb(255 255 255 / 0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fg-2)" };
  if (kind === "brand") return (<div style={style}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M20 7l-8-4-8 4 8 4 8-4zm0 6l-8 4-8-4m16 6l-8 4-8-4"/></svg></div>);
  if (kind === "ticket") return (<div style={style}><svg width="18" height="18" 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></div>);
  if (kind === "scale") return (<div style={style}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg></div>);
  return null;
}

window.ThreePillars = ThreePillars;