// Sections 7, 8, 9, 10 — Audience deep-dives, How to buy, FAQ, CTA + Footer

function AudienceDeepDives() {
  const segs = [
    {
      id: "producers", tag: "If you run events", title: "Sell tickets. Keep the audience.",
      lede: "Festivals, conferences, comedy, sport, touring productions. Every ticket sold is revenue that never touches a consumer platform's take.",
      points: [
        { h: "Sell the way you actually sell", b: "Full-event pass, day pass, single-stage, single-session — the same product, priced at four different granularities. Sale windows, quantity caps, refund handling, promo codes." },
        { h: "Moderate like it matters", b: "Real-time chat with slow mode, subscriber-only, regex filters, instant ban and mute, automated toxicity detection. A moderation desk, not a toy." },
        { h: "Clip and promote while the event is live", b: "Pull highlights during the stream. Export in every social aspect ratio. Today's event becomes the ad for the next one, without a post-production week." },
      ],
      cta: "Run your next event",
    },
    {
      id: "brands", tag: "If you're a media brand", title: "Your audience. Your app. Your terms.",
      lede: "Sports leagues, faith networks, specialist broadcasters, creator collectives. You already have an audience. Stop renting the relationship.",
      points: [
        { h: "On your domain, in your brand", b: "Custom domain with automatic certificates. Full visual theme control. Your logo, your colours, your language — including right-to-left. Viewers never see us." },
        { h: "Every device where your audience watches", b: "Responsive web for viewers, an operator dashboard for your team, and a path to TV apps on Samsung, LG, Apple TV and Android TV. Nothing stuck behind an app-store gatekeeper." },
        { h: "You own the data", b: "Your viewers, your subscribers, your analytics, your pricing. Exported to you, isolated from every other tenant, never resold." },
      ],
      cta: "Launch your branded product",
    },
  ];

  return (
    <section id="audiences" style={{ borderTop: "1px solid rgb(255 255 255 / 0.06)", scrollMarginTop: 80 }}>
      {segs.map((s, i) => (
        <div key={s.id} id={s.id} style={{
          padding: "100px 60px",
          background: i % 2 === 0 ? "transparent" : "oklch(0.12 0.01 260)",
          borderBottom: "1px solid rgb(255 255 255 / 0.06)",
        }}>
          <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
            <div style={{ position: "sticky", top: 40 }}>
              <div className="eyebrow" style={{ marginBottom: 16, color: "var(--color-primary)" }}>{s.tag}</div>
              <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, margin: 0, marginBottom: 18 }}>{s.title}</h2>
              <p style={{ fontSize: 16, color: "var(--fg-2)", lineHeight: 1.55, margin: 0, marginBottom: 24, textWrap: "pretty" }}>{s.lede}</p>
              <button className="btn btn-primary">
                {s.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>
              </button>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {s.points.map((p, j) => (
                <div key={j} style={{
                  padding: "28px 0",
                  borderTop: j === 0 ? "1px solid rgb(255 255 255 / 0.08)" : "none",
                  borderBottom: "1px solid rgb(255 255 255 / 0.08)",
                  display: "grid", gridTemplateColumns: "40px 1fr", gap: 24,
                }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-primary)", paddingTop: 2 }}>{String(j + 1).padStart(2, "0")}</div>
                  <div>
                    <h3 style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", margin: 0, marginBottom: 8, color: "var(--fg-1)" }}>{p.h}</h3>
                    <p style={{ fontSize: 15, color: "var(--fg-2)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{p.b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

function FAQ() {
  const qs = [
    { q: "Why not just use YouTube or Twitch?", a: "Reach isn't the problem — ownership is. If you want ad-supported consumer discovery, use YouTube. If you want a product your brand ships and a relationship you control, that's what we're for." },
    { q: "What happens if your underlying video provider changes?", a: "The video pipeline is deliberately swappable. The parts that matter to your business — brand, viewers, ticketing, chat, clips, payouts — are ours and stay put if we move the plumbing." },
    { q: "How do we know it scales?", a: "There's a written plan for 200,000 concurrent viewers with bottleneck analysis and a staged load-test protocol: component tests, integration tests, chaos scenarios, full rehearsal. Shared in full under NDA." },
    { q: "How do we know our data stays our data?", a: "Every query is scoped to your tenant. Every core data type has an isolation test that proves tenant A can't see tenant B. Isolation is a checklist item on every code change, not an occasional audit." },
    { q: "What does the commercial shape actually look like?", a: "Four options, picked to match how you run: managed SaaS (per-viewer-hour plus a ticketing fee), whitelabel (setup plus monthly plus usage), source licence (run it yourself), or acquisition. Real numbers come on the first call, not the first click." },
    { q: "Who's behind this and what happens if you get hit by a bus?", a: "It's a focused team with deep operator background. The answer to bus factor is documentation discipline: architecture, decisions, runbooks, phased plans — all written down, all handed over on a licence or acquisition. For managed service, we're explicit about the support arrangement instead of pretending otherwise." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section 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", display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 40 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Straight answers</div>
          <h2 style={{ fontSize: 52, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.0, margin: 0, marginBottom: 20 }}>Before you ask.</h2>
          <p style={{ fontSize: 16, color: "var(--fg-2)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>
            Six questions a technical buyer always asks. Answered directly, because that's what a technical buyer wants.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {qs.map((it, i) => (
            <div key={i} style={{ borderTop: "1px solid rgb(255 255 255 / 0.1)", borderBottom: i === qs.length - 1 ? "1px solid rgb(255 255 255 / 0.1)" : "none" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", textAlign: "left", border: "none", background: "transparent",
                padding: "24px 0", cursor: "pointer", color: "var(--fg-1)",
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
                fontFamily: "inherit", fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em",
              }}>
                <span>{it.q}</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{ transform: open === i ? "rotate(45deg)" : "none", transition: "transform 200ms", color: "var(--fg-3)", flexShrink: 0 }}><path d="M12 5v14M5 12h14"/></svg>
              </button>
              {open === i && (
                <div style={{ padding: "0 0 28px", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.6, maxWidth: 720, textWrap: "pretty", animation: "fade-up 250ms ease-out" }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaAndFooter() {
  const [seg, setSeg] = React.useState("A");
  const fieldStyle = {
    width: "100%", background: "rgb(255 255 255 / 0.04)", border: "1px solid rgb(255 255 255 / 0.1)",
    borderRadius: 12, padding: "12px 14px", color: "var(--fg-1)", fontFamily: "inherit", fontSize: 14, outline: "none",
  };
  return (
    <>
      <section style={{ padding: "140px 60px", borderTop: "1px solid rgb(255 255 255 / 0.06)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
          background: "radial-gradient(ellipse 70% 60% at 50% 20%, oklch(0.54 0.23 27 / 0.15), transparent 60%)" }} />
        <div style={{ maxWidth: 980, margin: "0 auto", position: "relative" }}>
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Start a conversation</div>
            <h2 style={{ fontSize: 64, fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 0.95, margin: 0, marginBottom: 20 }}>
              Tell us what<br/>you're running.
            </h2>
            <p style={{ fontSize: 17, color: "var(--fg-2)", lineHeight: 1.5, maxWidth: 520, margin: "0 auto", textWrap: "pretty" }}>
              One form. We'll route it to the right person — demo call, strategy call, or architecture walkthrough — based on what you tell us.
            </p>
          </div>

          <form style={{
            padding: 36, borderRadius: 24,
            background: "rgb(255 255 255 / 0.03)",
            border: "1px solid rgb(255 255 255 / 0.1)",
            backdropFilter: "blur(12px)",
            display: "flex", flexDirection: "column", gap: 20,
          }} onSubmit={e => e.preventDefault()}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>You are</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
                {[
                  { v: "A", l: "An event producer" },
                  { v: "B", l: "A media brand" },
                  { v: "C", l: "A buyer or agency" },
                  { v: "D", l: "Other" },
                ].map(o => (
                  <button key={o.v} type="button" onClick={() => setSeg(o.v)} style={{
                    padding: "12px 14px", borderRadius: 12, fontSize: 13, fontWeight: 500, fontFamily: "inherit", cursor: "pointer",
                    background: seg === o.v ? "rgb(217 36 42 / 0.12)" : "rgb(255 255 255 / 0.03)",
                    border: `1px solid ${seg === o.v ? "rgb(217 36 42 / 0.4)" : "rgb(255 255 255 / 0.08)"}`,
                    color: seg === o.v ? "var(--fg-1)" : "var(--fg-2)", transition: "all 150ms",
                  }}>{o.l}</button>
                ))}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Name</div>
                <input style={fieldStyle} placeholder="Your name" />
              </div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Email</div>
                <input type="email" style={fieldStyle} placeholder="you@company.com" />
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>What you're working on</div>
              <textarea rows="3" style={{ ...fieldStyle, resize: "vertical", fontFamily: "inherit" }}
                placeholder={seg === "A" ? "e.g. three-stage weekend festival in October, ~8K livestream viewers expected…"
                  : seg === "B" ? "e.g. launching a subscription channel for an existing 40K-strong audience across web and TV…"
                  : "e.g. evaluating build-vs-buy for a streaming product at a mid-sized media company…"} />
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, gap: 16 }}>
              <div style={{ fontSize: 12, color: "var(--fg-3)" }}>Routed automatically — no sales sequence, no trial traps.</div>
              <button className="btn btn-primary btn-lg">
                {seg === "A" ? "Request a demo" : seg === "B" ? "Book a strategy call" : "Request architecture walkthrough"}
                <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>
              </button>
            </div>
          </form>
        </div>
      </section>

      <footer style={{ borderTop: "1px solid rgb(255 255 255 / 0.06)", padding: "48px 60px 40px", background: "oklch(0.11 0.01 260)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <img src="assets/logo-full-white.png" alt="SlipstreamTV" style={{ height: 22, marginBottom: 16 }} />
            <p style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55, margin: 0, maxWidth: 320 }}>
              Whitelabel, edge-native live streaming and ticketing. Your brand, your domain, your pricing.
            </p>
          </div>
          {[
            { h: "Platform", items: ["Features", "Architecture", "Scaling plan", "Security"] },
            { h: "Who it's for", items: ["Event producers", "Media brands", "Buyers & agencies"] },
            { h: "Company", items: ["Contact", "Commercial", "Privacy", "Terms"] },
          ].map(col => (
            <div key={col.h}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{col.h}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {col.items.map(it => <li key={it}><a href="#" style={{ fontSize: 14, color: "var(--fg-2)", textDecoration: "none" }}>{it}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24, borderTop: "1px solid rgb(255 255 255 / 0.06)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, fontSize: 12, color: "var(--fg-3)" }}>
          <div>© 2026 SlipstreamTV. Edge-native by design.</div>
          <div style={{ display: "flex", gap: 20 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span className="live-dot" style={{ width: 6, height: 6 }} /> All systems operational
            </span>
            <span>London · UK</span>
          </div>
        </div>
      </footer>
    </>
  );
}

window.AudienceDeepDives = AudienceDeepDives;
window.FAQ = FAQ;
window.CtaAndFooter = CtaAndFooter;
