/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Brand Portal solutions page — hero: copy left, campaign dashboard board right.
const BP_ROSTER = [
  { g: GENS[0], n: 'Scarlett', v: '412k views', s: '$584' },
  { g: GENS[5], n: 'Nova', v: '287k views', s: '$402' },
  { g: GENS[6], n: 'Mara', v: '198k views', s: '$277' }];

const BPBoard = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ padding: '18px 20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, background: INK, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, color: '#fff' }}>A</span>
              <span style={{ fontSize: 13, fontWeight: 800, color: INK }}>Aurelle <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>· campaign live</span></span>
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 700, color: '#15803D', background: 'rgba(34,197,94,0.12)', border: '1px solid rgba(34,197,94,0.3)', borderRadius: 9999, padding: '3px 10px' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22C55E' }} />18 creators posting</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 10 }}>
            {[['Views', '1.34M', '▲ 18%'], ['Eff. CPM', '$1.42', ''], ['Spend', '$1,994', 'metered']].map(([l, v, s]) =>
              <div key={l} style={{ borderRadius: 12, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '10px 12px' }}>
                <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.02em', color: INK }}>{v} {s && <span style={{ fontSize: 9, fontWeight: 700, color: s === 'metered' ? 'rgba(28,27,27,0.45)' : '#15803D' }}>{s}</span>}</div>
              </div>)}
          </div>
          <div style={{ borderRadius: 12, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '11px 13px', marginBottom: 10 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, marginBottom: 7 }}>
              <span style={{ fontWeight: 700, color: INK }}>$1,994 spent</span>
              <span style={{ color: 'rgba(28,27,27,0.5)' }}>$2,500 prepaid · pauses at $0</span>
            </div>
            <div style={{ height: 9, borderRadius: 9999, background: 'rgb(235,231,231)', overflow: 'hidden' }}>
              <div style={{ width: on ? '80%' : '5%', height: '100%', background: PULSE, borderRadius: 9999, transition: `width 1s ${SB_EASE} 300ms` }} />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {BP_ROSTER.map((r, i) =>
              <div key={r.n} style={{ display: 'flex', alignItems: 'center', gap: 9, borderRadius: 11, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '7px 10px',
                opacity: on ? 1 : 0, transition: `opacity 0.45s ${SB_EASE} ${200 + i * 90}ms` }}>
                <span style={{ width: 28, height: 28, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
                  <img loading="lazy" decoding="async" src={r.g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
                <span style={{ fontSize: 11.5, fontWeight: 700, color: INK, flex: 1 }}>{r.n}</span>
                <span style={{ fontSize: 10, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>{r.v}</span>
                <span style={{ fontSize: 10, fontWeight: 800, color: INK, width: 44, textAlign: 'right' }}>{r.s}</span>
              </div>)}
          </div>
        </div>
      </AppWindow>
    </div>);
};

const BrandPortalHero = () => (
  <section style={{ background: CREAM, padding: '0 0 100px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: '140px 56px 0', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20, borderRadius: 9999, padding: '7px 14px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Solutions</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Brand Portal</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 62px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance' }}>
            Creator reach,<br /><GradText>bought like media.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            The Brand Portal plugs your catalog into Sozee’s creator network. Stock the library, set a CPM, and pay only for the views the content actually earns — never for promises.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Open the portal</CTAButton>
          </div>
        </Reveal>
        <Reveal delay={330}>
          <div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>Prepaid · CPM-metered · posts pause at $0. Never an overage invoice.</div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><BPBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { BrandPortalHero });