// BuyerOverlay — desktop-only sidebar that explains, level-by-level,
// which companies would pay for the data being collected on each screen
// and at what per-record price. This turns the desktop demo from a
// pretty quiz into an investor / sponsor pitch deck.
//
// Mobile users (consumers actually entering) never see this — gated to
// !isMobile + window.innerWidth > 1100 + tweaks.showBuyerOverlay.
//
// Buyer data is BTC-journey-specific (different from Marriott's hospitality-
// focused mapping). The eight levels cover finsumer, auto, travel, CPG,
// media, life events, brand strategy, and a sponsor slot — each tells a
// different industry story.

const BTC_BUYER_DATA = {
  0: [], // Hero — nothing yet
  1: [ // Identity: contact + DOB + SMS opt-in
    { name: 'CRM platforms', why: 'Verified email + phone + DOB is the foundation of every CRM record. SMS opt-in pre-cleared for marketing.', price: '$0.50–2 per verified contact' },
    { name: 'Klaviyo / Iterable / Braze', why: 'ESP/MAP vendors pay for SMS-and-email opt-in records with TCPA-compliant consent stamps.', price: '$1–3 per opt-in' },
  ],
  2: [ // Demographics: zip + gender + occupation + income
    { name: 'Programmatic ad platforms', why: 'Zip + occupation + income tier = first-party audience segmentation that bypasses iOS/Android privacy walls.', price: '$1–3 per record' },
    { name: 'Geo-targeted retailers', why: 'Zip-level density of high-income consumers drives store-expansion + local-marketing spend allocation.', price: '$2–4 per record' },
  ],
  3: [ // Life Events (highest-intent purchase signals)
    { name: 'Mortgage lenders', why: 'Self-declared "buying a home in 12 months" is the highest-CPL signal in finsumer marketing.', price: '$8–25 per qualified lead' },
    { name: 'Wedding industry (The Knot, Zola)', why: 'Engagement = $30K+ average wedding spend in a 6-month decision window.', price: '$10–18 per engaged-couple lead' },
    { name: 'Baby brands (Babylist, Pampers)', why: 'Pregnancy = 36-month subscription LTV across diapers, formula, gear.', price: '$8–15 per record' },
    { name: 'Moving / relocation', why: 'Address change = 6 months of elevated spend on furniture, services, utilities, insurance.', price: '$5–12 per record' },
  ],
  4: [ // Financial Intent — the jackpot category for BTC audience
    { name: 'Credit card issuers (Amex, Chase, Capital One)', why: '"New credit card" 90-day intent is what acquisition teams pay top dollar for.', price: '$15–30 per qualified lead' },
    { name: 'Neobanks (Robinhood, SoFi, Chime, Cash App)', why: 'Account-open intent + crypto-curious overlap is the #1 acquisition target for fintech in 2026.', price: '$12–25 per record' },
    { name: 'Crypto exchanges (Coinbase, Kraken, Gemini)', why: 'Self-declared "Try crypto" responders are pre-qualified for first-deposit acquisition campaigns.', price: '$20–40 per qualified lead' },
    { name: 'Insurance carriers (Lemonade, Liberty Mutual)', why: 'Policy-shopping intent in a 90-day window has the shortest sales cycle in P&C insurance.', price: '$10–20 per record' },
  ],
  5: [ // Big-Ticket
    { name: 'Auto OEMs (Ford, Tesla, Toyota, GM)', why: '12-month car-buying intent broken out by EV / SUV / luxury / hybrid is dealer-network gold.', price: '$8–25 per high-intent record' },
    { name: 'BNPL (Affirm, Klarna, Afterpay)', why: 'Combination of stated big-ticket intent + verified contact = pre-screened candidate.', price: '$5–15 per record' },
    { name: 'Big-box retailers (Best Buy, Home Depot, Wayfair)', why: 'Stated furniture / appliance / electronics intent feeds account-based retargeting.', price: '$5–12 per record' },
    { name: 'Wearable + phone OEMs (Apple, Samsung, Whoop)', why: 'Self-declared refresh cycle = launch-window targeting for Q4 hardware drops.', price: '$6–14 per record' },
  ],
  6: [ // Travel + Lifestyle goals
    { name: 'Marriott Bonvoy, Hilton Honors, Hyatt', why: 'Travel-frequency + destination-style preference data drives loyalty-tier upsell campaigns.', price: '$5–12 per record' },
    { name: 'Airlines (Delta, United, JetBlue)', why: 'Travel volume signal feeds fare-class + co-brand-card cross-sell.', price: '$4–10 per record' },
    { name: 'Fitness + wellness brands (Equinox, Peloton, Whoop)', why: 'Stated wellness goals (gym, sleep, diet) = qualified intent for premium subscription.', price: '$4–10 per record' },
    { name: 'Calm / BetterHelp / Headspace', why: 'Mental-health intent is one of the most acquisition-starved categories — high CPL ceiling.', price: '$8–18 per record' },
  ],
  7: [ // Media subscriptions
    { name: 'Streaming win-back campaigns', why: 'Knowing exactly which subs a household has lets Netflix / Spotify / Disney+ run competitive-switching offers worth $50–200 LTV per save.', price: '$3–8 per record' },
    { name: 'Podcast networks', why: 'Subscription-stack data + psychographics drives host-read ad placement and creator brand fit.', price: '$2–5 per record' },
    { name: 'Connected-TV ad platforms', why: 'OTT inventory needs household-level subscription overlap for frequency capping.', price: '$2–6 per record' },
  ],
  8: [ // Brand Affinity — beverages competitive set
    { name: 'Direct competitors (Liquid Death, Celsius, Prime, Olipop, Poppi)', why: 'Switching-propensity intel between bev brands at the household level is rare and expensive.', price: '$5–12 per record' },
    { name: 'CPG investment funds + VC', why: 'Emerging-brand affinity data is a leading indicator for category-defining acquisitions.', price: '$8–20 per record' },
    { name: 'Distribution partners (KeHE, UNFI, Whole Foods)', why: 'Regional brand-preference density validates which markets to expand into.', price: '$3–7 per record' },
  ],
  9: [ // Psychographic
    { name: 'Brand strategy firms (R/GA, W+K)', why: 'Self-declared lifestyle / values filters drive creative-strategy and campaign architecture.', price: '$3–8 per record' },
    { name: 'Ad agencies', why: 'Premium ad placements need psychographic overlay on top of demo + intent signals.', price: '$2–6 per record' },
    { name: 'DTC founders + early-stage VC', why: 'Values-aligned customer profile data is the foundation of brand-fit testing.', price: '$4–10 per record' },
  ],
  10: [ // Sponsor — premium SKU
    { name: '[Sponsor brand] — direct', why: 'The sponsor pays for a reserved branded question slot and walks away with a custom audience and direct customer acquisition signal. This is the premium SKU.', price: '$25–100 per branded record' },
    { name: 'Survey + market-research firms', why: 'First-party intent data tied to declared product preferences is the highest-grade input for brand research.', price: '$8–25 per record' },
  ],
  11: [], // Celebration — entries banked
};
window.BTC_BUYER_DATA = BTC_BUYER_DATA;

function BuyerOverlay({ step }) {
  const buyers = BTC_BUYER_DATA[step] || [];
  const labels = [
    'HERO',
    'L1 · IDENTITY',
    'L2 · DEMOGRAPHICS',
    'L3 · LIFE EVENTS',
    'L4 · FINANCIAL INTENT',
    'L5 · BIG-TICKET',
    'L6 · TRAVEL + LIFESTYLE',
    'L7 · MEDIA',
    'L8 · BRAND AFFINITY',
    'L9 · PSYCHOGRAPHIC',
    'L10 · SPONSOR',
    'CELEBRATION',
  ];

  // Compute total monetizable data points captured so far
  let totalLow = 0, totalHigh = 0;
  for (let i = 1; i <= step && i <= 10; i++) {
    (BTC_BUYER_DATA[i] || []).forEach(b => {
      // Parse "$X–Y per ..." into low/high
      const m = b.price.match(/\$([0-9.]+)[–-]([0-9.]+)/);
      if (m) {
        // We don't know how many of these buyers' offers stack — show the per-record range of the highest-paying offer
        // For simplicity, sum the high end of each offer and take the top-2 average
      }
    });
  }

  return (
    <div style={{
      position: 'fixed', left: 24, top: '50%', transform: 'translateY(-50%)',
      width: 320, zIndex: 50,
      background: 'rgba(12,12,16,0.92)', backdropFilter: 'blur(14px)',
      border: '1px solid rgba(247,147,26,0.35)',
      borderRadius: 16,
      padding: '18px 18px 16px',
      color: '#fff', fontFamily: 'Inter',
      boxShadow: '0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(247,147,26,0.08)',
      maxHeight: '82vh', overflow: 'auto',
    }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 2,
        color: '#F7931A', fontWeight: 700, marginBottom: 4,
      }}>WHO BUYS THIS DATA</div>
      <div style={{
        fontFamily: 'Anton, Impact, sans-serif',
        fontSize: 22, color: '#FFC800', lineHeight: 1, letterSpacing: 0.3,
        marginBottom: 4, textTransform: 'uppercase',
      }}>{labels[step]}</div>
      <div style={{
        height: 1,
        background: 'linear-gradient(90deg, #F7931A, transparent)',
        margin: '10px 0 14px',
      }}/>
      {buyers.length === 0 && (
        <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'rgba(255,255,255,0.5)', fontStyle: 'italic', lineHeight: 1.4 }}>
          {step === 0
            ? 'Tap the entry gate to start collecting buyable data points. Eight levels of monetizable consumer data ahead.'
            : 'Final step — entries banked. ~$58–$129 in monetizable data captured per completed entry.'}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {buyers.map((b, i) => (
          <div key={i} style={{
            padding: '11px 12px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 10,
          }}>
            <div style={{
              fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
              color: '#fff', letterSpacing: 0.1,
            }}>{b.name}</div>
            <div style={{
              fontFamily: 'Inter', fontSize: 11.5, lineHeight: 1.4,
              color: 'rgba(255,255,255,0.65)', margin: '4px 0 6px',
            }}>{b.why}</div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700,
              color: '#FFC800', letterSpacing: 1,
            }}>{b.price}</div>
          </div>
        ))}
      </div>
      {step >= 1 && step <= 10 && (
        <div style={{
          marginTop: 14, padding: '10px 12px',
          background: 'rgba(247,147,26,0.10)',
          border: '1px solid rgba(247,147,26,0.35)',
          borderRadius: 10,
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: 1.6,
            color: '#F7931A', fontWeight: 700, marginBottom: 3,
          }}>RUNNING TOTAL</div>
          <div style={{
            fontFamily: 'Inter', fontSize: 12.5, fontWeight: 600, color: '#FFC800',
          }}>~${[0, 1.5, 3, 19, 42, 62, 83, 89, 103, 117, 167][step]} per completed entry</div>
          <div style={{
            fontFamily: 'Inter', fontSize: 10.5, lineHeight: 1.35,
            color: 'rgba(255,255,255,0.55)', marginTop: 3,
          }}>Cumulative monetizable value through level {step}</div>
        </div>
      )}
    </div>
  );
}
window.BuyerOverlay = BuyerOverlay;