// Section 5 — Feature depth, tabbed (commercially framed, no brand names, Merch Store added)

function FeatureDepth() {
  const tabs = [
    { id: "branding", label: "Whitelabel & branding", features: [
      "Custom domain with automated SSL — your URL, your SSL, no redirect",
      "Full theme control — colour, typography, logo, favicon",
      "Per-event custom CSS with server-side sanitisation",
      "Multi-language with full RTL support and runtime switcher",
      "Feature flags per event — turn chat, merch, tipping on or off",
    ]},
    { id: "events", label: "Events & festivals", features: [
      "Full event lifecycle — draft, scheduled, live, ended, VOD",
      "Festivals with days, stages, sessions — ticket at any granularity",
      "Pre-show countdown and pre-show video, auto-switch on stream start",
      "Post-show behaviour — VOD, redirect, custom message, or replay loop",
      "Scheduling windows, per-event slug, cover image, description",
    ]},
    { id: "video", label: "Video & streaming", features: [
      "RTMP / RTMPS ingest from any standard encoder",
      "HLS and LL-HLS delivery — sub-5s latency to viewers",
      "Signed playback tokens tied to verified ticket holders",
      "VOD auto-creation on stream end, direct upload for pre-records",
      "DRM for premium tiers, watermarking for screener content",
      "Stream health dashboard — ingest, bitrate, dropped frames",
    ]},
    { id: "ticketing", label: "Ticketing & payments", features: [
      "Ticket tiers at festival, day, stage, or session level",
      "Sale windows, quantity caps, early-bird pricing",
      "Hosted checkout with platform fees and direct payouts",
      "Idempotent order processing — no duplicate charges, ever",
      "Admin-initiated refunds with ticket revocation",
      "Dispute handling and tax scenarios",
    ]},
    { id: "chat", label: "Live chat & moderation", features: [
      "Real-time chat scaling to 200,000 concurrent viewers",
      "Two-layer filtering — instant regex + intelligent review",
      "Moderator toolkit — ban, mute, slow mode, subscriber-only, delete",
      "Message history for late-joiners",
      "Per-user rate limiting, configurable per event",
    ]},
    { id: "licensing", label: "Licensing & access control", features: [
      "One ticket, one active session — enforced in real time",
      "Graceful device hand-off with a friendly message, not an error",
      "Roles — owner, admin, moderator, viewer",
      "Short-lived access tokens verified at the edge",
      "Refresh flow with rotation, secure HTTP-only cookies",
    ]},
    { id: "clipping", label: "Live clipping", features: [
      "Mark a moment mid-stream — no post-production wait",
      "Multi-format export — 9:16, 1:1, 4:5, 16:9",
      "Brand overlay applied automatically on export",
      "One-click publish to social with scheduled post option",
      "Clip library per event, searchable and reusable",
    ]},
    { id: "merch", label: "Merch store", features: [
      "Integrated store on the viewer page — no redirect, no subdomain",
      "Drop items mid-event — timed releases, limited runs",
      "One cart for ticket, subscription, and merch together",
      "Stock management, variants, shipping zones, tax",
      "Product spotlights — surface an item while a specific track plays",
    ]},
    { id: "clients", label: "Viewer experience", features: [
      "Responsive viewer app — desktop, mobile, tablet",
      "Admin dashboard for operators — moderation, analytics, go-live",
      "Smart-TV reach — Samsung / WebOS web shell, Apple TV / Android TV native",
      "Device-link flow for TV sign-in",
      "Accessibility — keyboard navigation, captions, contrast modes",
    ]},
    { id: "ai", label: "AI support", features: [
      "Support agent with per-viewer context and conversation memory",
      "Tool access — ticket lookup, refund, event status, escalation",
      "Tenant-specific knowledge base with semantic search",
      "Admin can take over a conversation or hand it back",
      "Prompt and voice editor with versioning",
    ]},
    { id: "analytics", label: "Analytics & reporting", features: [
      "Real-time per-event dashboard — viewers, revenue, geo, device",
      "Cross-event BI dashboard — KPIs, trends, UTM attribution",
      "Stream health and viewer quality metrics",
      "Export to your data warehouse — CSV, webhook, or API",
    ]},
  ];

  const [active, setActive] = React.useState(tabs[0].id);
  const current = tabs.find(t => t.id === active);

  return (
    <section id="features" 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: 64, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Feature depth</div>
          <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.0, margin: 0, textWrap: "balance" }}>
            Everything, catalogued.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 40, alignItems: "start" }}>
          <nav style={{ display: "flex", flexDirection: "column", gap: 2, position: "sticky", top: 80 }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setActive(t.id)} style={{
                textAlign: "left", padding: "11px 14px", border: "none", cursor: "pointer",
                background: t.id === active ? "rgb(217 36 42 / 0.08)" : "transparent",
                borderLeft: `2px solid ${t.id === active ? "var(--color-primary)" : "rgb(255 255 255 / 0.08)"}`,
                fontFamily: "inherit", fontSize: 14, fontWeight: t.id === active ? 500 : 400,
                color: t.id === active ? "var(--fg-1)" : "var(--fg-2)",
                transition: "all 150ms var(--ease-standard)", borderRadius: 0,
              }}>{t.label}</button>
            ))}
          </nav>

          <div style={{
            padding: 40, borderRadius: 20,
            background: "rgb(255 255 255 / 0.02)",
            border: "1px solid rgb(255 255 255 / 0.08)",
            minHeight: 480,
          }}>
            <h3 style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, marginBottom: 28, color: "var(--fg-1)" }}>{current.label}</h3>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
              {current.features.map((f, i) => (
                <li key={i} style={{ display: "flex", gap: 14, fontSize: 15, lineHeight: 1.55, color: "var(--fg-2)" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", flexShrink: 0, paddingTop: 5 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.FeatureDepth = FeatureDepth;