// Streams — "What it handles" — channels & docs a booking-agency advancing agent operates on.
// Featured large card on left = a glassy "Show packet" hero (the central artifact).
// Right column = vertical stack of live channel cards, each showing real in-progress work.

function Streams() {
  return (
    <Section pad={120} id="streams" label="03 Streams">
      <SectionHeader
        eyebrow="What it handles"
        headline="Every promoter thread,"
        accent="one show packet."
        subhead="Hotels, riders, timetables, deposits, day-sheets, travel, settlement — the agent works every surface an advance touches."
      />

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.15fr 1fr',
        gap: 16,
        alignItems: 'stretch',
      }}>
        {/* Featured large card — Show packet (the central artifact) */}
        <Reveal y={32} duration={800}>
        <BentoCard variant="dark" style={{ padding: 32, display: 'flex', flexDirection: 'column', minHeight: 720 }}>
          <FeaturedTicket />
          <div style={{ marginTop: 'auto' }}>
            <Pill tone="cyan">★ The central artifact</Pill>
            <h3 style={{ fontSize: 28, fontWeight: 600, margin: '14px 0 10px', letterSpacing: '-0.02em' }}>
              The show packet
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', maxWidth: 460, margin: 0 }}>
              One operational file per show. Deal terms, contacts, logistics, travel, documents, payments, risks. Auto-updated from email and contracts — and ready to hand to the artist or tour manager the moment they ask.
            </p>
          </div>
        </BentoCard>
        </Reveal>

        {/* Right column: a vertical stack of live channel cards. Each shows the agent mid-work. */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <RevealStagger step={90} y={20}>
          <ChannelRow
            tag="HOTEL"
            tagColor="#fbbf24"
            title="Brooklyn Steel · 4 rooms"
            sub="Chasing Marcus @ Bowery — 3rd nudge"
            status="awaiting"
            statusLabel="Reply by Fri"
          />
          <ChannelRow
            tag="TRAVEL"
            tagColor="var(--accent)"
            title="JFK → LAX · Oct 21"
            sub="3 routes ranked · Delta 1129 best fit"
            status="ok"
            statusLabel="Held 24h"
          />
          <ChannelRow
            tag="RIDER"
            tagColor="#ef4444"
            title="Verandas · Pickathon"
            sub="Production silent · 11 days out"
            status="risk"
            statusLabel="At risk"
          />
          <ChannelRow
            tag="DEPOSIT"
            tagColor="#4ade80"
            title="Junot · Fonda LA"
            sub="50% wired · cleared 09:14 PT"
            status="ok"
            statusLabel="$12,500"
          />
          <ChannelRow
            tag="DAY SHEET"
            tagColor="var(--accent)"
            title="Maya · Brooklyn Steel"
            sub="Generated · pushed to TM + artist"
            status="ok"
            statusLabel="v.3"
          />
          <ChannelRow
            tag="SETTLE"
            tagColor="#7c3aed"
            title="Sable · Berghain"
            sub="Reconciled · flagged $420 underpay"
            status="warn"
            statusLabel="Disputing"
          />
          </RevealStagger>
        </div>
      </div>
    </Section>
  );
}

// 3D-glassy "show packet" card — central artifact of the product.
function FeaturedTicket() {
  return (
    <div style={{
      position: 'relative',
      height: 380,
      borderRadius: 16,
      background: 'radial-gradient(ellipse at 30% 30%, rgba(56,189,248,0.18), transparent 60%), #050505',
      border: '1px solid rgba(255,255,255,0.05)',
      overflow: 'hidden',
      marginBottom: 24,
    }}>
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 320, height: 320,
        background: 'radial-gradient(circle, var(--accent-soft), transparent 70%)',
        filter: 'blur(24px)',
      }} />
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%) rotate(-6deg)',
        width: 300, height: 200,
        borderRadius: 14,
        background: 'linear-gradient(135deg, rgba(56,189,248,0.18), rgba(2,132,199,0.06))',
        border: '1px solid var(--accent)',
        boxShadow: '0 0 40px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,0.2)',
        backdropFilter: 'blur(20px)',
        padding: 18,
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          position: 'absolute', left: -8, top: '50%', transform: 'translateY(-50%)',
          width: 16, height: 16, borderRadius: 999,
          background: '#050505', border: '1px solid var(--accent)',
        }} />
        <div style={{
          position: 'absolute', right: -8, top: '50%', transform: 'translateY(-50%)',
          width: 16, height: 16, borderRadius: 999,
          background: '#050505', border: '1px solid var(--accent)',
        }} />
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', color: 'var(--accent)' }}>SHOW PACKET</div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 8, color: '#fff', letterSpacing: '-0.02em' }}>Maya Okafor · Brooklyn Steel</div>
        <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>Oct 18 · 1,800 cap · 78% ready</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 10 }}>
          {[
            { k: 'Hotel',    v: 'chasing', dot: '#fbbf24' },
            { k: 'Rider',    v: 'unsigned', dot: '#ef4444' },
            { k: 'Deposit',  v: 'cleared',  dot: '#4ade80' },
            { k: 'Travel',   v: '3 routes', dot: 'var(--accent)' },
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 9, color: 'rgba(255,255,255,0.7)' }}>
              <div style={{ width: 5, height: 5, borderRadius: 999, background: r.dot }} />
              <span style={{ color: 'rgba(255,255,255,0.5)', width: 42 }}>{r.k}</span>
              <span style={{ color: '#fff', fontWeight: 500 }}>{r.v}</span>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 'auto',
          borderTop: '1px dashed var(--accent-line)',
          paddingTop: 8,
          display: 'flex', justifyContent: 'space-between',
          fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(255,255,255,0.55)',
        }}>
          <span>DEAL · LOGISTICS · TRAVEL</span>
          <span>v.7</span>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 16, right: 16,
        padding: '8px 12px', borderRadius: 999,
        background: 'rgba(0,0,0,0.6)',
        border: '1px solid rgba(255,255,255,0.1)',
        backdropFilter: 'blur(8px)',
        fontSize: 11, color: 'rgba(255,255,255,0.7)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{ width: 6, height: 6, borderRadius: 999, background: '#4ade80' }} />
        Updated 2 min ago by agent
      </div>
    </div>
  );
}

// A single live channel row — left tag, title+sub, right status chip.
// Each row carries a per-status "live" micro-animation reflecting agent activity.
function ChannelRow({ tag, tagColor, title, sub, status, statusLabel }) {
  const [hov, setHov] = React.useState(false);
  const reduced = window.PREFERS_REDUCED;
  const statusBg = {
    ok:       'rgba(74,222,128,0.1)',
    awaiting: 'rgba(251,191,36,0.1)',
    risk:     'rgba(239,68,68,0.12)',
    warn:     'rgba(124,58,237,0.14)',
  }[status];
  const statusBorder = {
    ok:       'rgba(74,222,128,0.3)',
    awaiting: 'rgba(251,191,36,0.3)',
    risk:     'rgba(239,68,68,0.35)',
    warn:     'rgba(124,58,237,0.4)',
  }[status];
  const statusColor = {
    ok:       '#4ade80',
    awaiting: '#fbbf24',
    risk:     '#ef4444',
    warn:     '#a78bfa',
  }[status];

  return (
    <div
      onMouseEnter={() => !reduced && setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        position: 'relative',
        display: 'flex', alignItems: 'center', gap: 16,
        padding: '18px 20px',
        borderRadius: 14,
        background: hov ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.025)',
        border: `1px solid ${hov ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)'}`,
        flex: 1, minHeight: 0,
        transform: hov ? 'translate3d(4px,0,0)' : 'translate3d(0,0,0)',
        transition: 'background 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(.2,.7,.2,1)',
        overflow: 'hidden',
      }}
    >
      {/* Live shimmer along the bottom edge — feels like the agent is processing. */}
      {!reduced && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: 1,
          overflow: 'hidden', opacity: hov ? 1 : 0.45,
          transition: 'opacity 240ms ease',
        }}>
          <div style={{
            position: 'absolute', top: 0, bottom: 0, width: '40%',
            background: `linear-gradient(90deg, transparent, ${tagColor}, transparent)`,
            animation: 'om-shimmer 3.4s linear infinite',
          }} />
        </div>
      )}

      {/* Vertical accent bar */}
      <div style={{
        width: 3, alignSelf: 'stretch', borderRadius: 999,
        background: tagColor,
        boxShadow: `0 0 12px ${tagColor}`,
        opacity: hov ? 1 : 0.8,
        transition: 'opacity 240ms ease',
      }} />

      {/* Tag with status pulse */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        width: 96, flexShrink: 0,
      }}>
        {(status === 'awaiting' || status === 'risk') && <LivePulse color={tagColor} size={6} />}
        <div style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
          color: tagColor,
          fontFamily: 'JetBrains Mono, monospace',
        }}>{tag}</div>
      </div>

      {/* Title + sub */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: '#fff', letterSpacing: '-0.005em' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{sub}</div>
      </div>

      {/* Status chip — pulses softly for "live" states */}
      <div style={{
        position: 'relative',
        padding: '6px 11px', borderRadius: 999,
        background: statusBg,
        border: `1px solid ${statusBorder}`,
        color: statusColor,
        fontSize: 11, fontWeight: 600,
        whiteSpace: 'nowrap',
        flexShrink: 0,
      }}>
        {statusLabel}
        {!reduced && (status === 'awaiting' || status === 'warn') && (
          <span style={{
            position: 'absolute', inset: -1, borderRadius: 999,
            border: `1px solid ${statusColor}`,
            animation: 'om-ring 2.4s ease-out infinite',
            pointerEvents: 'none',
          }} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Streams });