/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE */
// Brand Portal solutions page — Old way · Pay per view · Catalog · In frame · Safety · Receipts · Plans.
const { useState: bzS } = React;

const BPBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18, borderRadius: 9999, padding: '7px 14px', background: bg, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: ac }} />
    <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>{label}</span>
  </div>;

const BPSectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) =>
<section style={{ background: bg, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: flip ? '1.1fr 0.9fr' : '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>{h1}<br /><GradText>{h2}</GradText></h2>
        </Reveal>
        <Reveal delay={170}><p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{sub}</p></Reveal>
        <Reveal delay={250}><CTAButton>Open the portal</CTAButton></Reveal>
        {note && <Reveal delay={330}><div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>{note}</div></Reveal>}
      </div>
      <Reveal delay={160} y={28} style={{ order: flip ? 1 : 2 }}>
        <div style={{ transform: lean === 'left' ? 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)' : 'rotate(1.3deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>{panel}</div>
      </Reveal>
    </div>
  </section>;


const BPCard = ({ children, pad = 18 }) =>
<div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad }}>{children}</div>;

// ---------- § 01 The old way ----------
const BP_OLD = [
['Week 1', 'DM forty creators. Hear back from six.'],
['Week 2', 'Negotiate six rate cards. Sign three.'],
['Week 3', 'Ship samples. Wait.'],
['Week 5', 'Chase drafts over email threads.'],
['Week 7', 'Get screenshots as “reporting.”']];
const BP_NEW = [
['Day 1', 'Import the catalog. Set a CPM. Go live.'],
['Day 3', 'First creator posts land.'],
['Ongoing', 'Pay per view. Read the receipts.']];

const OldWayPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <BPCard>
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 10 }}>The campaign, before</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {BP_OLD.map(([t, d], i) =>
            <div key={t} style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 70}ms` }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: 'rgba(28,27,27,0.45)', display: 'block', marginBottom: 2 }}>{t}</span>
                <span style={{ fontSize: 11, lineHeight: 1.45, fontWeight: 500, color: 'rgba(28,27,27,0.7)', textDecoration: 'line-through', textDecorationColor: 'rgba(28,27,27,0.25)' }}>{d}</span>
              </div>)}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', marginBottom: 10 }}>With the portal</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {BP_NEW.map(([t, d], i) =>
            <div key={t} style={{ borderRadius: 10, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '8px 11px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${350 + i * 90}ms` }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: 'var(--brand-purple-700)', display: 'block', marginBottom: 2 }}>{t}</span>
                <span style={{ display: 'flex', alignItems: 'flex-start', gap: 5, fontSize: 11, lineHeight: 1.45, fontWeight: 600, color: INK }}>
                  <svg width="10" height="10" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 2 }}><path d="M3 8.4l3.2 3.2L13.5 4" stroke="var(--brand-purple-600)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>{d}</span>
              </div>)}
            <div style={{ marginTop: 4, borderRadius: 10, padding: '10px 11px', textAlign: 'center', outline: '1.5px dashed var(--brand-purple-300)', outlineOffset: -1,
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} 650ms` }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>No DMs. No rate cards. No samples shipped.</span>
            </div>
          </div>
        </div>
      </div>
    </BPCard>);
};

// ---------- § 02 Pay per view ----------
const CPMPanel = () => {
  const [cpm, setCpm] = bzS(2.5);
  const reach = Math.round(2500 / cpm);
  return (
    <BPCard>
      <div style={{ borderRadius: 13, background: '#211E1D', color: '#EDE6E1', padding: '15px 17px', fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace", fontSize: 12, lineHeight: 1.8, marginBottom: 13 }}>
        <span style={{ color: 'rgba(237,230,225,0.45)' }}>// the whole pricing model</span><br />
        spend = (views ÷ 1000) × <span style={{ color: '#C9A6FF' }}>yourCPM</span><br />
        remaining = budget − spend <span style={{ color: 'rgba(237,230,225,0.45)' }}>// posts pause at 0</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '11px 13px', marginBottom: 10 }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, color: INK, flex: 1 }}>Your CPM <span style={{ fontWeight: 600, color: 'rgba(28,27,27,0.45)' }}>· $1.00 floor</span></span>
        <span onClick={() => setCpm((c) => Math.max(1, +(c - 0.5).toFixed(2)))} style={{ width: 26, height: 26, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 13, fontWeight: 700, color: INK }}>−</span>
        <span style={{ fontSize: 17, fontWeight: 800, color: INK, width: 58, textAlign: 'center', fontVariantNumeric: 'tabular-nums' }}>${cpm.toFixed(2)}</span>
        <span onClick={() => setCpm((c) => Math.min(10, +(c + 0.5).toFixed(2)))} style={{ width: 26, height: 26, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)', display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 13, fontWeight: 700, color: INK }}>+</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
        <div style={{ borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '12px 14px' }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>$2,500 budget buys</div>
          <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', color: INK, fontVariantNumeric: 'tabular-nums' }}>~{reach.toLocaleString()}k views</div>
        </div>
        <div style={{ borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '12px 14px' }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>Higher CPM</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: INK, lineHeight: 1.35 }}>More creators pick your product</div>
        </div>
      </div>
      <div style={{ fontSize: 11.5, color: 'var(--text-secondary)' }}>Prepaid and metered by the view — when the budget’s spent, posts pause automatically. Never an overage invoice.</div>
    </BPCard>);
};

// ---------- § 03 Catalog ----------
const BP_SOURCES = [
['Scrape our site', 'Crawls your store, surfaces every product — keep the ones you want.'],
['Connect your store', 'Shopify · WooCommerce · BigCommerce · Wix · Squarespace + 3 more.'],
['Paste product URLs', 'One per line — a curated set instead of the whole catalog.'],
['Upload a file', 'CSV template, Excel, store exports, or a photos ZIP.']];

const CatalogPanel = () => {
  const [sel, setSel] = bzS(0);
  return (
    <BPCard>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Add your products</span>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>Four ways in · one review</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 12 }}>
        {BP_SOURCES.map(([t, d], i) =>
        <div key={t} onClick={() => setSel(i)} style={{ borderRadius: 13, padding: '13px 14px', cursor: 'pointer', transition: 'all 0.2s',
          background: sel === i ? 'var(--brand-purple-50)' : 'rgb(250,247,247)',
          boxShadow: sel === i ? 'inset 0 0 0 1.5px var(--brand-purple-400)' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: INK, marginBottom: 4 }}>{t}</div>
            <div style={{ fontSize: 10.5, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{d}</div>
          </div>)}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', flex: 1 }}>Everything imported is editable — title, price, photos.</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '9px 16px', background: PULSE, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', flexShrink: 0, boxShadow: '0 8px 20px -4px rgba(104,19,212,0.45)' }}>IMPORT PRODUCTS ✦</span>
      </div>
    </BPCard>);
};

// ---------- § 04 In frame ----------
const InFramePanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <BPCard>
      <div ref={ref} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <span style={{ position: 'relative', width: 52, height: 52, borderRadius: 12, overflow: 'hidden', flexShrink: 0, background: '#fff', boxShadow: 'inset 0 0 0 1.5px var(--brand-purple-400)' }}>
          <img loading="lazy" decoding="async" src="assets/control/collar-silver.png" alt="The product" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </span>
        <span style={{ flex: 1, minWidth: 0 }}>
          <span style={{ display: 'block', fontSize: 12, fontWeight: 700, color: INK }}>Sculpt Collar · Silver</span>
          <span style={{ display: 'block', fontSize: 10.5, color: 'rgba(28,27,27,0.5)' }}>Your product · $89 · CPM $3.00</span>
        </span>
        <svg width="34" height="18" viewBox="0 0 40 20" style={{ flexShrink: 0 }}>
          <line x1="2" y1="10" x2="30" y2="10" stroke="#813CED" strokeWidth="2" strokeDasharray="3 6" strokeLinecap="round" style={{ animation: 'sz-dash 1.2s linear infinite' }} />
          <path d="M28 4l8 6-8 6" fill="none" stroke="#813CED" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '4px 10px', flexShrink: 0 }}>IN FRAME</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
        {[2, 4, 6].map((n, i) =>
        <div key={n} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '3/3.9' }}>
            <img loading="lazy" decoding="async" src={`assets/shoot/set-${n}.webp`} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%',
            opacity: on ? 1 : 0, filter: on ? 'none' : 'blur(12px)', transition: `opacity 0.6s ${SB_EASE} ${250 + i * 140}ms, filter 0.8s ${SB_EASE} ${250 + i * 140}ms` }} />
            <span style={{ position: 'absolute', left: 7, bottom: 7, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '2px 8px' }}>
              {['Scarlett · IG', 'Nova · TikTok', 'Mara · IG'][i]}</span>
          </div>)}
      </div>
      <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-secondary)' }}>No samples shipped, no three-week wait — the studio renders your product pixel-consistent in every creator’s world.</div>
    </BPCard>);
};

// ---------- § 05 Safety ----------
const SafetyPanel = () => {
  const [state, setState] = bzS('pending'); // pending | approved | declined
  return (
    <BPCard>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Approvals <span style={{ display: 'inline-grid', placeItems: 'center', minWidth: 17, height: 17, padding: '0 5px', borderRadius: 9, background: PULSE, color: '#fff', fontSize: 10, fontWeight: 800, verticalAlign: 'middle', marginLeft: 4 }}>{state === 'pending' ? 1 : 0}</span></span>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>Pre-approval · opt-in</span>
      </div>
      <div style={{ display: 'flex', gap: 12, borderRadius: 13, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 12, marginBottom: 12, opacity: state === 'declined' ? 0.55 : 1, transition: 'opacity 0.3s' }}>
        <span style={{ width: 74, borderRadius: 10, overflow: 'hidden', flexShrink: 0, aspectRatio: '3/3.9', position: 'relative' }}>
          <img loading="lazy" decoding="async" src="assets/shoot/set-3.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} />
        </span>
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Scarlett · Instagram + Fanvue</div>
          <div style={{ fontSize: 10.5, color: 'rgba(28,27,27,0.55)', margin: '3px 0 8px' }}>Featuring Sculpt Collar · scheduled tonight 9:00 PM</div>
          {state === 'pending' ?
          <div style={{ display: 'flex', gap: 7, marginTop: 'auto' }}>
              <span onClick={() => setState('approved')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 9999, padding: '7px 14px', background: PULSE, color: '#fff', fontSize: 9.5, fontWeight: 800, letterSpacing: '0.04em', cursor: 'pointer' }}>APPROVE</span>
              <span onClick={() => setState('declined')} style={{ borderRadius: 9999, padding: '7px 14px', fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.14)', cursor: 'pointer' }}>Decline</span>
            </div> :
          <span onClick={() => setState('pending')} style={{ alignSelf: 'flex-start', marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 700, cursor: 'pointer',
            color: state === 'approved' ? '#15803D' : '#B42318' }}>
              {state === 'approved' ? '✓ Approved — publishing tonight' : '✕ Declined — creator notified'}<span style={{ color: 'rgba(28,27,27,0.4)', fontWeight: 600 }}>· undo</span></span>}
        </div>
      </div>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 8 }}>And after it’s live — flag for foul play</div>
      <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
        {['Not my product', 'Misrepresents brand', 'Off-brand', 'Undisclosed ad'].map((f) =>
        <span key={f} style={{ borderRadius: 9999, padding: '5px 11px', fontSize: 10, fontWeight: 600, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'rgba(28,27,27,0.65)' }}>⚑ {f}</span>)}
        <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-tertiary)', alignSelf: 'center', marginLeft: 3 }}>Spend held while we review.</span>
      </div>
    </BPCard>);
};

// ---------- § 06 Receipts ----------
const BP_FUNNEL = [['Views', 988, '988K'], ['Engagement', 356, '86K'], ['Link taps', 90, '14K']];
const ReceiptsPanelBP = () => {
  const [ref, on] = useReveal(0.35);
  const [plat, setPlat] = bzS(0);
  return (
    <BPCard>
      <div ref={ref}>
        <div style={{ display: 'flex', gap: 5, marginBottom: 13 }}>
          {['All platforms', 'Instagram', 'TikTok'].map((p, i) =>
          <span key={p} onClick={() => setPlat(i)} style={{ borderRadius: 9999, padding: '6px 12px', fontSize: 10.5, fontWeight: plat === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s',
            background: plat === i ? INK : 'rgb(246,243,242)', color: plat === i ? '#fff' : 'rgba(28,27,27,0.6)',
            boxShadow: plat === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{p}</span>)}
          <span style={{ marginLeft: 'auto', fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)', alignSelf: 'center' }}>Last 30 days</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 13 }}>
          {BP_FUNNEL.map(([l, w, v], i) =>
          <div key={l} style={{ display: 'grid', gridTemplateColumns: '86px 1fr 52px', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-secondary)' }}>{l}</span>
              <span style={{ height: 20, borderRadius: 6, background: 'rgb(240,236,235)', overflow: 'hidden' }}>
                <span style={{ display: 'block', height: '100%', borderRadius: 6, background: PULSE, width: on ? `${(plat === 0 ? 1 : plat === 1 ? 0.72 : 0.55) * w / 9.88}%` : '4%', transition: `width 0.8s ${SB_EASE} ${i * 110}ms` }} /></span>
              <span style={{ fontSize: 10.5, fontWeight: 800, color: INK, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{v}</span>
            </div>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[['By creator', 'Scarlett 412k · Nova 287k · Mara 198k'], ['By product', 'Sculpt Collar 512k · Slit Mini 431k'], ['By platform', 'IG 46% · TikTok 38% · Fanvue 16%']].map(([k, v]) =>
          <div key={k} style={{ display: 'flex', gap: 9, borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px' }}>
              <span style={{ fontSize: 10, fontWeight: 700, color: INK, width: 76, flexShrink: 0 }}>{k}</span>
              <span style={{ fontSize: 10, fontWeight: 600, color: 'rgba(28,27,27,0.6)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v}</span>
            </div>)}
        </div>
      </div>
    </BPCard>);
};

const OldWaySection = () => <BPSectionShell label="The old way" ac="#B0489B" h1="Fire the" h2="spreadsheet." lean="left"
sub="Running UGC at scale means DMs, rate cards, shipped samples, chased drafts and screenshot reporting — months of ops for a handful of posts. The portal replaces the whole pipeline."
panel={<OldWayPanel />} />;
const CPMSection = () => <BPSectionShell label="Pay per view" ac="#4D73F2" h1="Pay for views." h2="Nothing else." flip lean="right" bg={CREAM}
sub="No flat fees for promises. You set the CPM, prepay a budget, and spend meters against real views — dial the CPM up when you want creators prioritizing your product."
note="Try the math — the CPM control is live." panel={<CPMPanel />} />;
const CatalogSection = () => <BPSectionShell label="Catalog" ac="#C77D3A" h1="Your store," h2="in by lunch." lean="left"
sub="Scrape your site, connect Shopify, paste URLs or upload a file — pick which products to run and they’re in the creators’ library the same day."
panel={<CatalogPanel />} />;
const InFrameSection = () => <BPSectionShell label="In frame" ac="#3A8F6B" h1="No samples." h2="No shipping." flip lean="right" bg={CREAM}
sub="Creators don’t wait on a package. The studio renders your product into their content — pixel-consistent, correctly tagged, across every post that features it."
panel={<InFramePanel />} />;
const SafetySection = () => <BPSectionShell label="Brand safety" ac="#B0489B" h1="Your brand." h2="Your sign-off." lean="left"
sub="Turn on pre-approval and every post waits for your yes before it publishes. Anything live can be flagged — spend is held while our trust team reviews."
panel={<SafetyPanel />} />;
const BPReceiptsSection = () => <BPSectionShell label="Receipts" ac="#813CED" h1="Attribution," h2="not screenshots." flip lean="right" bg={CREAM}
sub="One dashboard, per placement: views, engagement and link taps by creator, by product, by post, by platform — the same numbers everywhere, sliced any way you ask."
panel={<ReceiptsPanelBP />} />;

// ---------- § 07 Plans ----------
const BP_PLANS = [
{ n: 'Starter', p: '$500', d: '10 products · $2.5K budget cap', hot: false },
{ n: 'Growth', p: '$750', d: '25 products · $5K budget cap', hot: true },
{ n: 'Scale', p: '$1,000', d: '50 products · $10K budget cap', hot: false }];

const PlansSection = ({ badge = 'Brand Portal · Plans' }) =>
<section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', textAlign: 'center' }}>
      <Reveal delay={90}>
        <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
          One fee for capacity.<br /><GradText>Budget is fuel.</GradText>
        </h2>
      </Reveal>
      <Reveal delay={170}>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto 46px', maxWidth: 520 }}>
          The plan is a one-time fee that sets how many products you can host and how large a budget you can run — not a subscription. Every campaign dollar goes to views.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, maxWidth: 920, margin: '0 auto' }}>
        {BP_PLANS.map((p, i) =>
      <Reveal key={p.n} delay={i * 110} y={24}>
            <div style={{ borderRadius: 18, background: p.hot ? '#fff' : CREAM, padding: '26px 22px', position: 'relative', textAlign: 'center',
          boxShadow: p.hot ? '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 2px var(--brand-purple-500)' : 'inset 0 0 0 1px rgba(28,27,27,0.1)',
          transform: `rotate(${i === 1 ? 0 : i === 0 ? -1 : 1}deg)` }}>
              {p.hot && <span style={{ position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)', fontSize: 9, fontWeight: 800, letterSpacing: '0.08em', color: '#fff', background: PULSE, borderRadius: 9999, padding: '4px 12px', boxShadow: '0 6px 16px -2px rgba(104,19,212,0.5)' }}>MOST BRANDS</span>}
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 10 }}>{p.n}</div>
              <div style={{ font: '800 38px/1 var(--font-sans)', letterSpacing: '-0.02em', color: INK }}>{p.p} <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-tertiary)' }}>one-time</span></div>
              <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', margin: '10px 0 18px' }}>{p.d}</div>
              <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 9999, padding: '10px 20px', fontSize: 10.5, fontWeight: 800, letterSpacing: '0.05em',
            background: p.hot ? PULSE : 'transparent', color: p.hot ? '#fff' : INK,
            boxShadow: p.hot ? '0 8px 20px -4px rgba(104,19,212,0.45)' : 'inset 0 0 0 1px rgba(28,27,27,0.15)', cursor: 'pointer' }}>GET STARTED</span>
            </div>
          </Reveal>
      )}
      </div>
    </div>
  </section>;


Object.assign(window, { OldWaySection, CPMSection, CatalogSection, InFrameSection, SafetySection, BPReceiptsSection, PlansSection });