// Concept 1 — "Broadcast Studio"
// Outcome-led. Hero dominated by a live-looking event card / player mock on the right,
// bold headline on the left, proof bar ticker at bottom.
// Vibe: like you're peeking into a control room. "Stream it. Sell it. Own it."

function Concept1({ hideNav = false, hideTechBar = false } = {}) {
  const [viewers, setViewers] = React.useState(12847);
  const [chatMsgs, setChatMsgs] = React.useState([
    { u: "maya_r", c: "this set is unreal 🔥", t: "#f59e0b" },
    { u: "deon__", c: "where can I buy the vinyl", t: "#10b981" },
    { u: "priya.l", c: "queue is moving fast", t: "#8b5cf6" },
    { u: "tomek", c: "stream quality is crisp", t: "#ec4899" },
  ]);
  const sampleMsgs = [
    { u: "isla_w", c: "is the Saturday ticket still live?", t: "#06b6d4" },
    { u: "jae.k", c: "perfect audio balance", t: "#f97316" },
    { u: "nora", c: "day 2 lineup announcement when", t: "#a855f7" },
    { u: "sam.t", c: "bass on stage 3 is insane", t: "#22c55e" },
    { u: "lena", c: "replay later right?", t: "#f43f5e" },
  ];

  React.useEffect(() => {
    const t = setInterval(() => setViewers(v => v + Math.floor(Math.random() * 7) - 2), 1800);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => {
    const t = setInterval(() => {
      setChatMsgs(m => {
        const next = sampleMsgs[Math.floor(Math.random() * sampleMsgs.length)];
        return [...m.slice(1), { ...next, id: Date.now() }];
      });
    }, 2400);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="hero" style={{ background: "var(--color-background)", minHeight: 820 }}>
      {/* Ambient glow */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: `radial-gradient(ellipse 70% 50% at 85% 30%, oklch(0.54 0.23 27 / 0.18), transparent 60%),
                     radial-gradient(ellipse 50% 40% at 10% 80%, oklch(0.45 0.15 290 / 0.12), transparent 60%)`
      }} />
      {/* Grid motif */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.25, pointerEvents: "none",
        backgroundImage: `linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px),
                          linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px)`,
        backgroundSize: "80px 80px",
        maskImage: "radial-gradient(ellipse at 60% 40%, black 40%, transparent 80%)",
      }} />

      {/* Nav */}
      {!hideNav && <div className="nav">
        <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
          <img className="nav-logo" src="assets/logo-full-white.png" alt="SlipstreamTV" />
          <div className="nav-links" style={{ marginLeft: 8 }}>
            <a href="#">Platform</a>
            <a href="#">Who it's for</a>
            <a href="#">Architecture</a>
            <a href="#">Pricing</a>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="#" style={{ fontSize: 14, color: "var(--fg-1)", textDecoration: "none", padding: "0 8px" }}>Sign in</a>
          <button className="btn btn-primary btn-sm">Book a demo</button>
        </div>
      </div>}

      {/* Main grid */}
      <div className="hero-grid" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)",
        gap: 60, padding: "60px 60px 0", maxWidth: 1440, margin: "0 auto", alignItems: "center"
      }}>
        {/* LEFT — copy */}
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 28,
            padding: "6px 12px 6px 8px", borderRadius: 999,
            background: "rgb(255 255 255 / 0.04)", border: "1px solid rgb(255 255 255 / 0.1)" }}>
            <span className="live-pill" style={{ padding: "2px 8px", fontSize: 10 }}>
              <span className="live-pill-dot" /> LIVE
            </span>
            <span style={{ fontSize: 13, color: "var(--fg-2)" }}>Edge-native streaming & ticketing</span>
          </div>

          <h1 style={{
            fontSize: 84, lineHeight: 0.96, fontWeight: 700, letterSpacing: "-0.035em",
            margin: 0, marginBottom: 28, color: "var(--fg-1)"
          }}>
            Stream it.<br />
            Sell it.<br />
            <span style={{ color: "var(--color-primary)" }}>Own it.</span>
          </h1>

          <p style={{
            fontSize: 18, lineHeight: 1.55, color: "var(--fg-2)",
            maxWidth: 520, margin: "0 0 36px"
          }}>
            The whitelabel live streaming and ticketing platform for event producers, media brands, and broadcasters. Your domain, your brand, your pricing — without the enterprise tax.
          </p>

          <div style={{ display: "flex", gap: 12, marginBottom: 56 }}>
            <button className="btn btn-primary btn-lg">
              Book a demo
              <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>
            <button className="btn btn-outline btn-lg">See the platform</button>
          </div>

          {/* Proof stats inline */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
            paddingTop: 28, borderTop: "1px solid rgb(255 255 255 / 0.08)" }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "-0.02em" }}>300+</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4, lineHeight: 1.35 }}>Global edge locations. Sub-50ms globally.</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "-0.02em" }}>200K</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4, lineHeight: 1.35 }}>Concurrent viewer scaling plan, documented and tested.</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "-0.02em" }}>99.9%</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4, lineHeight: 1.35 }}>Uptime target. Redundant at every layer.</div>
            </div>
          </div>
        </div>

        {/* RIGHT — live event mock */}
        <div style={{ position: "relative" }}>
          {/* Browser-ish frame */}
          <div style={{
            borderRadius: 20, overflow: "hidden",
            background: "oklch(0.15 0.01 260)",
            border: "1px solid rgb(255 255 255 / 0.08)",
            boxShadow: "0 40px 80px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.02)",
            position: "relative",
          }}>
            {/* Fake address bar */}
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "12px 16px", borderBottom: "1px solid rgb(255 255 255 / 0.06)",
              background: "oklch(0.13 0.01 260)"
            }}>
              <div style={{ display: "flex", gap: 6 }}>
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "rgb(255 255 255 / 0.1)" }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "rgb(255 255 255 / 0.1)" }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "rgb(255 255 255 / 0.1)" }} />
              </div>
              <div style={{
                marginLeft: 8, flex: 1, background: "rgb(255 255 255 / 0.04)",
                borderRadius: 8, padding: "6px 12px", fontSize: 12,
                color: "var(--fg-3)", display: "flex", alignItems: "center", gap: 8
              }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                <span>watch.nocturne-festival.com</span>
                <span style={{ flex: 1 }} />
                <span style={{ opacity: 0.5 }}>·</span>
                <span style={{ color: "var(--fg-3)", fontSize: 11 }}>whitelabel tenant</span>
              </div>
            </div>

            {/* Video area */}
            <div style={{ position: "relative", aspectRatio: "16 / 10", overflow: "hidden",
              background: `linear-gradient(135deg, oklch(0.28 0.15 320), oklch(0.18 0.08 280) 50%, oklch(0.14 0.05 260))` }}>
              {/* "Video content" — abstract stage lights */}
              <div style={{
                position: "absolute", inset: 0,
                background: `radial-gradient(ellipse 35% 50% at 50% 90%, oklch(0.7 0.25 30 / 0.5), transparent 60%),
                             radial-gradient(ellipse 25% 40% at 25% 70%, oklch(0.65 0.2 290 / 0.45), transparent 60%),
                             radial-gradient(ellipse 25% 40% at 75% 65%, oklch(0.65 0.2 200 / 0.4), transparent 60%)`
              }} />
              {/* Silhouette crowd */}
              <svg viewBox="0 0 600 400" style={{ position: "absolute", bottom: 0, left: 0, right: 0, width: "100%", height: "55%", opacity: 0.85 }} preserveAspectRatio="xMidYMax slice">
                <path d="M0,400 L0,290 Q30,270 45,285 Q55,260 75,275 Q90,250 110,265 Q125,245 145,260 Q160,230 180,250 Q200,235 220,255 Q240,220 265,245 Q285,225 305,250 Q325,230 345,255 Q365,230 385,250 Q410,225 430,245 Q450,220 475,240 Q495,225 520,245 Q545,240 575,260 L600,280 L600,400 Z" fill="#000" opacity="0.7"/>
                <g fill="#000" opacity="0.9">
                  {[40, 90, 130, 175, 220, 265, 310, 355, 400, 445, 490, 535].map((x, i) => (
                    <g key={i} transform={`translate(${x}, ${300 + (i % 3) * 8})`}>
                      <circle cx="0" cy="0" r="12" />
                      <rect x="-10" y="8" width="20" height="45" rx="6" />
                    </g>
                  ))}
                </g>
              </svg>

              {/* Live badge + viewer count */}
              <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 8 }}>
                <span className="live-pill"><span className="live-pill-dot" /> LIVE</span>
                <span className="glass" style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "4px 10px", borderRadius: 999, fontSize: 11, fontWeight: 500,
                  color: "rgba(255,255,255,0.95)"
                }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                  <span className="tnum">{viewers.toLocaleString()}</span>
                </span>
              </div>

              {/* Title overlay bottom */}
              <div className="scrim-bottom" style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "60px 20px 16px" }}>
                <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", marginBottom: 6 }}>Nocturne · Stage 01</div>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff", textShadow: "0 2px 12px rgba(0,0,0,0.5)" }}>Helix — Headline Set</div>
              </div>
            </div>

            {/* Below player — ticket bar + chat */}
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0, borderTop: "1px solid rgb(255 255 255 / 0.06)" }}>
              {/* Ticketing */}
              <div style={{ padding: 16, borderRight: "1px solid rgb(255 255 255 / 0.06)" }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Access</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "8px 10px", borderRadius: 10, background: "rgb(255 255 255 / 0.04)",
                    border: "1px solid rgb(255 255 255 / 0.06)" }}>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500 }}>Full Festival · 3 days</div>
                      <div style={{ fontSize: 11, color: "var(--fg-3)" }}>12 stages · VOD included</div>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-1)" }}>£48</div>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "8px 10px", borderRadius: 10, background: "rgb(217 36 42 / 0.08)",
                    border: "1px solid rgb(217 36 42 / 0.3)" }}>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500, color: "#fff" }}>Saturday · Stage 01</div>
                      <div style={{ fontSize: 11, color: "var(--fg-3)" }}>20 left</div>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "var(--color-primary)" }}>£18</div>
                  </div>
                </div>
              </div>
              {/* Chat */}
              <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 6, minHeight: 140 }}>
                <div className="eyebrow" style={{ marginBottom: 2, paddingLeft: 4 }}>Chat · moderated</div>
                <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 5, overflow: "hidden" }}>
                  {chatMsgs.map((m, i) => (
                    <div key={m.id || i} style={{ fontSize: 12, lineHeight: 1.35, animation: "chat-in 300ms ease-out", color: "var(--fg-2)" }}>
                      <span style={{ fontWeight: 600, color: m.t }}>{m.u}</span>
                      <span style={{ color: "var(--fg-3)" }}> · </span>
                      <span>{m.c}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Floating admin toast */}
          <div className="glass-heavy" style={{
            position: "absolute", bottom: -20, left: -28,
            padding: "10px 14px", borderRadius: 14, display: "flex", alignItems: "center", gap: 10,
            fontSize: 12, boxShadow: "0 20px 50px -10px rgb(0 0 0 / 0.5)"
          }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: "oklch(0.72 0.17 155 / 0.2)",
              display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="oklch(0.72 0.17 155)" strokeWidth="2.5" strokeLinecap="round"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <div>
              <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>Stream health · 4.8 Mbps</div>
              <div style={{ color: "var(--fg-3)", fontSize: 11 }}>Ingest stable · 0 dropped frames</div>
            </div>
          </div>

          {/* Floating ticket toast */}
          <div className="glass-heavy" style={{
            position: "absolute", top: 40, right: -32,
            padding: "10px 14px", borderRadius: 14, display: "flex", alignItems: "center", gap: 10,
            fontSize: 12, boxShadow: "0 20px 50px -10px rgb(0 0 0 / 0.5)",
            animation: "fade-up 600ms ease-out",
          }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: "rgb(217 36 42 / 0.15)",
              display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2" 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"/></svg>
            </div>
            <div>
              <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>+1 ticket · £18</div>
              <div style={{ color: "var(--fg-3)", fontSize: 11 }}>Saturday · Stage 01</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom ticker / "trusted by the underlying tech" */}
      {!hideTechBar && (
      <div style={{
        marginTop: 70,
        borderTop: "1px solid rgb(255 255 255 / 0.06)",
        padding: "18px 60px",
        display: "flex", alignItems: "center", gap: 40, fontSize: 12, color: "var(--fg-3)"
      }}>
        <span className="eyebrow" style={{ color: "var(--fg-2)" }}>Built on</span>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>Cloudflare Workers</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>Durable Objects</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>Mux Video</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>Stripe Connect</span>
        <span style={{ flex: 1 }} />
        <span>Auditable architecture · 100% coverage · Decision log</span>
      </div>
      )}
    </div>
  );
}

window.Concept1 = Concept1;