// Celebration screen + buyer overlay data

const BUYER_DATA = {
  0: [], // hero
  1: [
    { name: 'Salesforce / HubSpot', why: 'Contact record = the anchor every other data point attaches to.', price: '$1–3 per verified contact' },
    { name: 'TCPA-compliant SMS opt-in', why: 'Highest-value consent layer for outbound marketing.', price: '$5–15 per opted-in lead' },
  ],
  2: [
    { name: 'Universal segmentation buyers', why: 'Zip + gender + income are filters every demand-side platform uses.', price: '$1–4 per record' },
    { name: 'Credit card issuers', why: 'Income bracket predicts premium card candidacy.', price: '$3–8 per qualified lead' },
  ],
  3: [
    { name: 'Marriott Bonvoy', why: 'Competitive loyalty intel — who is in Bonvoy vs Hilton vs Hyatt PLUS their tier is extremely scarce data.', price: '$8–18 per enriched record' },
    { name: 'Amex Platinum / Chase Sapphire', why: 'Travel loyalty + tier = premium card candidate.', price: '$4–12 per record' },
  ],
  4: [
    { name: 'Marriott / Hilton / Hyatt', why: 'Frequency + property-type preference targets the right brand sub-portfolio.', price: '$3–8 per lead' },
    { name: 'Airbnb / VRBO', why: 'Property mix reveals competitive switch potential.', price: '$2–5 per lead' },
  ],
  5: [
    { name: 'Live Nation / AEG', why: 'Event type + sub-genre lets sponsors target by music vertical.', price: '$3–7 per record' },
    { name: 'Marriott Stars / Bonvoy Moments', why: 'Concert-bookable rewards inventory targeting.', price: '$2–6 per record' },
  ],
  6: [
    { name: 'MLB / NBA / NFL teams', why: 'Team-level affinity (not just league) = merch, season tickets, suite upsell.', price: '$5–12 per fan record' },
    { name: 'FanDuel / DraftKings', why: 'Team-specific betting acquisition.', price: '$4–10 per qualified lead' },
  ],
  7: [
    { name: 'Marriott F&B (1,400+ outlets)', why: 'In-stay dining behavior — room service vs venturing out — drives F&B revenue strategy.', price: '$3–7 per record' },
    { name: 'OpenTable / Resy', why: 'Cuisine prefs + reservation behavior.', price: '$2–5 per record' },
  ],
  8: [
    { name: 'Marriott Bonvoy proactive package', why: 'Region → Country → City + dates + budget + occasion = a complete pre-book intent payload. Bonvoy concierge can offer a curated package BEFORE the user searches Google.', price: '$25–60 per high-intent record' },
    { name: 'Marriott brand routing', why: 'Trip style + party + budget routes the lead to the right brand: Ritz / St. Regis / EDITION / Westin / Vacation Club.', price: '$8–15 per record' },
    { name: 'Airlines + experience partners', why: 'Destination + window + party size = qualified flight + tour lead.', price: '$6–14 per lead' },
  ],
  9: [
    { name: 'Marriott CRM segmentation', why: 'Self-declared booking persona (Status seeker / Loyalty max / Deal hunter) sharpens lifecycle messaging.', price: '$4–9 per record' },
    { name: 'Luxury brands (LVMH)', why: 'Status-seeker + experience-collector are unicorn leads.', price: '$5–15 per record' },
  ],
  10: [
    { name: 'Marriott Bonvoy direct', why: 'Brand-fit + card status + booking intent + NPS = a complete acquisition + retention payload.', price: '$15–40 per opted-in lead' },
    { name: 'Co-brand card issuers', why: 'High-intent non-cardholders are the highest-converting card-acquisition segment.', price: '$25–60 per qualified lead' },
  ],
  11: [],
};
window.BUYER_DATA = BUYER_DATA;

// ────────── Confetti Burst (Bonvoy palette only) ──────────
function ConfettiBurst({ active, intense = true }) {
  if (!active) return null;
  const count = intense ? 56 : 24;
  const palette = ['#F68522', '#FAFAFA', '#FFB76A', '#0A0A0A', '#FF9438'];
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 30,
      overflow: 'hidden',
    }}>
      {Array.from({length: count}).map((_, i) => {
        const isStreamer = i % 3 === 0;
        const isStar = i % 7 === 0;
        const w = isStreamer ? 3 + (i%3) : (5 + (i%4));
        const h = isStreamer ? 12 + (i%6) : w;
        const left = (i * 31 + 7) % 100;
        const dx = ((i * 17) % 200) - 100;        // -100..100 px sideways drift
        const dy = 420 + ((i * 11) % 240);         // fall distance
        const rot = (i * 47) % 360;
        const rotEnd = rot + ((i % 2 ? 1 : -1) * (360 + (i*23)%360));
        const delay = (i % 12) * 30;
        const dur = 1800 + (i % 6) * 220;
        const color = palette[i % palette.length];
        const startTop = -20 - (i % 60);
        return (
          <div key={i} style={{
            position: 'absolute',
            left: `${left}%`,
            top: `${startTop}px`,
            width: w,
            height: h,
            background: color,
            borderRadius: isStar ? '50%' : (isStreamer ? 1 : 1),
            boxShadow: color === '#F68522' ? `0 0 6px rgba(246,133,34,0.4)` : 'none',
            opacity: 0,
            ['--dx']: `${dx}px`,
            ['--dy']: `${dy}px`,
            ['--rot']: `${rot}deg`,
            ['--rotEnd']: `${rotEnd}deg`,
            animation: `confettiFall ${dur}ms cubic-bezier(.2,.5,.5,1) ${delay}ms forwards`,
          }}/>
        );
      })}
    </div>
  );
}
window.ConfettiBurst = ConfettiBurst;

function ScreenCelebration({ data, entries, elapsedMs, onReset }) {
  const firstName = data?.l1?.first || '';
  // Brand-routing logic for the package preview
  const brandRouting = React.useMemo(() => {
    const l8 = data?.l8 || {};
    const l9 = data?.l9 || {};
    const l10 = data?.l10 || {};
    const budget = l8.budget || '';
    const styles = l8.styles || [];
    const occasion = l8.occasion;
    const psy = l9.psy || [];
    // If user already chose a brand on L10, honor it.
    const brandMap = {
      ritz: { name: 'The Ritz-Carlton', tagline: 'Iconic luxury.' },
      stregis: { name: 'St. Regis', tagline: 'Bespoke service.' },
      edition: { name: 'EDITION', tagline: 'Design-forward.' },
      westin: { name: 'Westin', tagline: 'Wellness-led.' },
      autograph: { name: 'Autograph Collection', tagline: 'Independent character.' },
      courtyard: { name: 'Courtyard', tagline: 'Smart business stay.' },
      residence: { name: 'Residence Inn', tagline: 'Extended-stay comfort.' },
    };
    if (l10.brand && brandMap[l10.brand]) return brandMap[l10.brand];
    if (budget === '$1,500+' || styles.includes('romantic') || occasion === 'honey') return brandMap.ritz;
    if (occasion === 'anniv' || psy.includes('status')) return brandMap.stregis;
    if (styles.includes('city') || styles.includes('cultural')) return brandMap.edition;
    if (styles.includes('wellness')) return brandMap.westin;
    if (budget === '$800–1,500') return brandMap.autograph;
    return brandMap.ritz;
  }, [data]);

  // Pull first city/country/region for headline destination
  const tripDest = React.useMemo(() => {
    const l8 = data?.l8 || {};
    const cities = Object.values(l8.cities || {}).flat().filter(Boolean);
    if (cities.length) return cities.slice(0, 2).join(' + ');
    const countries = Object.values(l8.countries || {}).flat().filter(Boolean);
    if (countries.length) return countries.slice(0, 2).join(' + ');
    if (l8.regions?.length) {
      const map = {europe:'Europe',caribbean:'Caribbean',asia:'Asia',domestic:'the US',mexico:'Mexico',africa:'Africa',samerica:'South America',middleeast:'Middle East',oceania:'Oceania'};
      return l8.regions.map(r => map[r] || r).slice(0, 2).join(' + ');
    }
    return 'your dream trip';
  }, [data]);

  // Estimated package cost from L8 budget + nights
  const packageEstimate = React.useMemo(() => {
    const l8 = data?.l8 || {};
    const budgetMid = {
      '< $200': 150, '$200–400': 300, '$400–800': 600,
      '$800–1,500': 1150, '$1,500+': 2000,
    }[l8.budget] || 600;
    const nightsMid = {
      'Weekend (1–3)': 2, '4–7': 5, '8–14': 10, '15+': 17,
    }[l8.nights] || 5;
    const total = budgetMid * nightsMid;
    return { perNight: budgetMid, nights: nightsMid, total };
  }, [data]);

  // Calc data points
  const dataPoints = React.useMemo(() => {
    let n = 0;
    Object.values(data || {}).forEach(level => {
      if (!level) return;
      Object.values(level).forEach(v => {
        if (Array.isArray(v)) n += v.length;
        else if (v) n += 1;
      });
    });
    return n;
  }, [data]);

  const buyerCats = React.useMemo(() => {
    let count = 0;
    for (let i = 1; i <= 10; i++) {
      const lvl = data[`l${i}`] || {};
      const filled = Object.values(lvl).some(v => Array.isArray(v) ? v.length : !!v);
      if (filled) count += BUYER_DATA[i]?.length || 0;
    }
    return count;
  }, [data]);

  const valueLow = Math.round(dataPoints * 1.4 + buyerCats * 4);
  const valueHigh = Math.round(dataPoints * 3.2 + buyerCats * 12);

  const seconds = Math.round((elapsedMs || 0) / 1000);

  // Confetti — fires once on mount; second smaller burst staggered
  const [showConfetti, setShowConfetti] = React.useState(false);
  const [secondBurst, setSecondBurst] = React.useState(false);
  const [actionState, setActionState] = React.useState('idle'); // idle | timepicker | confirmed-call | confirmed-email | declined
  const [timeSlot, setTimeSlot] = React.useState(null);
  const [miniBurst, setMiniBurst] = React.useState(false);

  React.useEffect(() => {
    const t1 = setTimeout(() => setShowConfetti(true), 80);
    const t2 = setTimeout(() => setSecondBurst(true), 700);
    const t3 = setTimeout(() => { setShowConfetti(false); setSecondBurst(false); }, 3200);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);

  const phoneFmt = data?.l1?.phone || '(your phone)';
  const emailFmt = data?.l1?.email || 'your inbox';

  const triggerMiniBurst = () => {
    setMiniBurst(false);
    requestAnimationFrame(() => {
      setMiniBurst(true);
      setTimeout(() => setMiniBurst(false), 1800);
    });
  };

  const confirmCall = (slot) => {
    setTimeSlot(slot);
    setActionState('confirmed-call');
    triggerMiniBurst();
  };
  const confirmEmail = () => {
    setActionState('confirmed-email');
    triggerMiniBurst();
  };
  const decline = () => {
    setActionState('declined');
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 30%, ${LUX.midnight} 0%, ${LUX.navy} 70%)`,
      overflowY: 'auto', overflowX: 'hidden', color: LUX.cream,
      display: 'flex', flexDirection: 'column',
      paddingTop: 'env(safe-area-inset-top, 0px)',
      paddingBottom: 'max(20px, env(safe-area-inset-bottom, 0px))',
      WebkitOverflowScrolling: 'touch',
    }}>
      {/* Confetti — full-screen burst */}
      <ConfettiBurst active={showConfetti}/>
      <ConfettiBurst active={secondBurst} intense={false}/>
      <ConfettiBurst active={miniBurst} intense={false}/>

      {/* gold dust */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {Array.from({length: 28}).map((_, i) => {
          const x = (i * 41) % 100, y = (i * 67) % 100, s = (i % 3) + 1;
          return (
            <div key={i} style={{
              position: 'absolute', left: `${x}%`, top: `${y}%`,
              width: s, height: s, borderRadius: '50%',
              background: LUX.gold, opacity: 0.3 + (i%3)*0.2,
              boxShadow: s > 1 ? `0 0 6px ${LUX.gold}` : 'none',
            }}/>
          );
        })}
      </div>

      <div style={{ position: 'relative', zIndex: 3, padding: '54px 22px 0 22px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 2,
            color: LUX.gold, fontWeight: 700,
          }}>✓ ENTRY CONFIRMED</div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 1.6,
            color: 'rgba(245,240,232,0.4)',
          }}>{String(Math.floor(seconds/60)).padStart(2,'0')}:{String(seconds%60).padStart(2,'0')}</div>
        </div>
      </div>

      {/* Trophy icon */}
      <div style={{
        position: 'relative', zIndex: 3,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: '14px 22px 0 22px',
      }}>
        <div style={{
          width: 90, height: 90, borderRadius: '50%',
          background: `radial-gradient(circle, ${LUX.gold} 0%, rgba(196,163,90,0.4) 100%)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 50px rgba(196,163,90,0.5)`,
          marginBottom: 14,
        }}>
          <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
            <path d="M6 4 L18 4 L17 12 Q17 15 12 15 Q7 15 7 12 Z M6 4 Q3 4 3 7 Q3 10 6 10 M18 4 Q21 4 21 7 Q21 10 18 10 M9 15 L9 19 L15 19 L15 15 M7 19 L17 19 L17 21 L7 21 Z"
              stroke={LUX.navy} strokeWidth="1.4" fill={LUX.navy}/>
          </svg>
        </div>

        <h1 style={{
          margin: 0,
          fontFamily: 'Inter, sans-serif', fontWeight: 900,
          fontSize: firstName ? 44 : 56, lineHeight: 0.95, letterSpacing: -1.6,
          textTransform: 'uppercase', textAlign: 'center',
          color: LUX.cream,
        }}>
          {firstName ? <>YOU'RE IN, <span style={{ color: LUX.gold }}>{firstName.toUpperCase()}!</span></> :
           <>YOU'RE <span style={{ color: LUX.gold }}>IN!</span></>}
        </h1>
        <div style={{
          marginTop: 8, fontFamily: 'Inter', fontSize: 13.5, lineHeight: 1.4,
          color: 'rgba(245,240,232,0.7)', textAlign: 'center', maxWidth: 280,
        }}>
          Your entries are locked in. Winner drawn live at the event.
        </div>
      </div>

      {/* Live Bonvoy Package Preview — built from user's answers */}
      <div style={{
        position: 'relative', zIndex: 3,
        margin: '14px 22px 0 22px',
        padding: 0,
        background: 'linear-gradient(160deg, rgba(246,133,34,0.20), rgba(246,133,34,0.04) 60%, rgba(245,240,232,0.04))',
        border: `1px solid ${LUX.gold}`,
        borderRadius: 16,
        overflow: 'hidden',
      }}>
        {/* Header strip */}
        <div style={{
          padding: '10px 14px',
          background: 'rgba(246,133,34,0.18)',
          borderBottom: '1px solid rgba(246,133,34,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: 1.8,
            color: LUX.gold, fontWeight: 700,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: LUX.gold,
              boxShadow: `0 0 8px ${LUX.gold}`,
              animation: 'liveDot 1.6s ease-in-out infinite',
            }}/>
            CURATED FOR YOU
          </div>
          <BonvoyMark color={LUX.gold} size={11} style={{ letterSpacing: 0.4 }}/>
        </div>

        {/* Hero line */}
        <div style={{ padding: '14px 16px 12px' }}>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontWeight: 900,
            fontSize: 22, color: LUX.cream, lineHeight: 1.05,
            letterSpacing: -0.6, marginBottom: 6,
          }}>
            {firstName ? `${firstName}'s ` : 'Your '}<span style={{ color: LUX.gold }}>{tripDest}</span> trip
          </div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(245,240,232,0.65)',
            lineHeight: 1.4, marginBottom: 12,
          }}>
            We pre-built this from your answers. Bonvoy concierge will reach out within 48h to lock it in.
          </div>

          {/* Package details grid */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              ['BRAND', `${brandRouting.name} · ${brandRouting.tagline}`],
              ['NIGHTS', `${packageEstimate.nights} nights`],
              ['EST. PER NIGHT', `$${packageEstimate.perNight.toLocaleString()}`],
              ['EST. TOTAL', `$${packageEstimate.total.toLocaleString()}`],
            ].map(([k, v], i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12,
                padding: '7px 0',
                borderTop: i === 0 ? 'none' : '1px solid rgba(245,240,232,0.08)',
              }}>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: 1.4,
                  color: 'rgba(245,240,232,0.5)', fontWeight: 600, flexShrink: 0,
                }}>{k}</span>
                <span style={{
                  fontFamily: 'Inter', fontSize: 12.5, fontWeight: 600,
                  color: LUX.cream, textAlign: 'right',
                }}>{v}</span>
              </div>
            ))}
          </div>

          {/* Perks chips */}
          {(data?.l8?.perks?.length > 0) && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 12 }}>
              {data.l8.perks.slice(0, 5).map((perk, i) => {
                const labels = {suite:'Suite',spa:'Spa credit',late:'Late checkout',fnb:'F&B credit',transfer:'Airport transfer',kids:"Kids' club",club:'Club lounge',experience:'Curated experience',private:'Private guide'};
                return (
                  <div key={i} style={{
                    padding: '4px 9px',
                    background: 'rgba(246,133,34,0.14)',
                    border: '1px solid rgba(246,133,34,0.35)',
                    borderRadius: 100,
                    fontFamily: 'Inter', fontSize: 10.5, fontWeight: 600,
                    color: LUX.gold, letterSpacing: 0.2,
                  }}>+ {labels[perk] || perk}</div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Confirm rail */}
      <div style={{
        position: 'relative', zIndex: 3,
        margin: '12px 22px 0 22px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '10px 14px',
        background: 'rgba(245,240,232,0.04)',
        border: '1px solid rgba(245,240,232,0.10)',
        borderRadius: 12,
      }}>
        <div style={{
          fontFamily: 'Inter', fontSize: 11.5, color: 'rgba(245,240,232,0.7)',
        }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 1.4,
            color: LUX.gold, fontWeight: 700, display: 'block', marginBottom: 2,
          }}>+{entries} ENTRIES BANKED</span>
          Winner drawn live · {String(Math.floor(seconds/60)).padStart(2,'0')}:{String(seconds%60).padStart(2,'0')} time
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 8 }}/>

      {/* ───── Conversion zone ───── */}
      <div style={{ position: 'relative', zIndex: 3, padding: '8px 22px 24px 22px' }}>
        {actionState === 'idle' && (
          <>
            <button onClick={() => setActionState('timepicker')} style={{
              width: '100%', border: 'none',
              background: LUX.gold, color: '#FFFFFF',
              padding: '15px 18px',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
              fontWeight: 700, letterSpacing: 2.2,
              borderRadius: 12, textTransform: 'uppercase', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              boxShadow: '0 3px 0 rgba(10,10,10,0.85), 0 10px 22px rgba(246,133,34,0.35)',
              marginBottom: 10,
            }}>
              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2, lineHeight: 1.1 }}>
                <span>Request Concierge Call</span>
                <span style={{ fontSize: 9, letterSpacing: 1, opacity: 0.85, fontWeight: 600 }}>A Bonvoy expert · within 48h</span>
              </span>
              <span style={{ fontSize: 16 }}>→</span>
            </button>

            <button onClick={confirmEmail} style={{
              width: '100%',
              background: 'transparent',
              color: LUX.gold,
              border: `1px solid ${LUX.gold}`,
              padding: '15px 18px',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
              fontWeight: 700, letterSpacing: 2.2,
              borderRadius: 12, textTransform: 'uppercase', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2, lineHeight: 1.1 }}>
                <span>Email Me The Details</span>
                <span style={{ fontSize: 9, letterSpacing: 1, opacity: 0.7, fontWeight: 600 }}>Sent to {emailFmt}</span>
              </span>
              <span style={{ fontSize: 16 }}>→</span>
            </button>

            <button onClick={decline} style={{
              width: '100%', marginTop: 10, padding: '8px 0',
              background: 'transparent', border: 'none',
              color: 'rgba(245,240,232,0.5)',
              fontFamily: 'Inter', fontSize: 12, fontWeight: 500,
              cursor: 'pointer',
              textDecoration: 'underline', textUnderlineOffset: 3,
            }}>
              No thanks — just here for the entries
            </button>
          </>
        )}

        {actionState === 'timepicker' && (
          <div style={{
            background: 'rgba(245,240,232,0.04)',
            border: `1px solid ${LUX.gold}`,
            borderRadius: 14,
            padding: '14px 16px 14px',
            animation: 'sheetIn 320ms cubic-bezier(.34,1.56,.64,1)',
          }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 1.6,
              color: LUX.gold, fontWeight: 700, marginBottom: 4,
            }}>WHEN WORKS BEST?</div>
            <div style={{
              fontFamily: 'Inter', fontSize: 12, color: 'rgba(245,240,232,0.65)',
              marginBottom: 12, lineHeight: 1.4,
            }}>
              We'll call <b style={{ color: LUX.cream }}>{phoneFmt}</b>.
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Today', 'Tomorrow', 'This week — anytime'].map(slot => (
                <button key={slot} onClick={() => confirmCall(slot)} style={{
                  width: '100%', padding: '12px 14px',
                  background: 'rgba(246,133,34,0.10)',
                  border: `1px solid rgba(246,133,34,0.4)`,
                  color: LUX.cream,
                  fontFamily: 'Inter', fontSize: 13.5, fontWeight: 600,
                  borderRadius: 10, cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  textAlign: 'left',
                }}>
                  <span>{slot}</span>
                  <span style={{ color: LUX.gold, fontSize: 14 }}>→</span>
                </button>
              ))}
            </div>
            <button onClick={() => setActionState('idle')} style={{
              width: '100%', marginTop: 10, padding: '6px 0',
              background: 'transparent', border: 'none',
              color: 'rgba(245,240,232,0.5)',
              fontFamily: 'Inter', fontSize: 11.5, fontWeight: 500,
              cursor: 'pointer',
            }}>← Back</button>
          </div>
        )}

        {(actionState === 'confirmed-call' || actionState === 'confirmed-email' || actionState === 'declined') && (
          <div style={{
            background: actionState === 'declined'
              ? 'rgba(245,240,232,0.04)'
              : 'linear-gradient(135deg, rgba(246,133,34,0.18), rgba(246,133,34,0.04))',
            border: `1px solid ${actionState === 'declined' ? 'rgba(245,240,232,0.18)' : LUX.gold}`,
            borderRadius: 14,
            padding: '14px 16px 16px',
            animation: 'sheetIn 320ms cubic-bezier(.34,1.56,.64,1)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: actionState === 'declined' ? 'rgba(245,240,232,0.16)' : LUX.gold,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M2 7 L6 11 L12 3" stroke={actionState === 'declined' ? LUX.cream : '#FFF'}
                    strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div style={{
                fontFamily: 'Inter', fontSize: 14, fontWeight: 700, color: LUX.cream,
              }}>
                {actionState === 'confirmed-call' && 'Concierge call booked'}
                {actionState === 'confirmed-email' && 'Email on its way'}
                {actionState === 'declined' && "You're entered. Good luck!"}
              </div>
            </div>
            <div style={{
              fontFamily: 'Inter', fontSize: 12.5, lineHeight: 1.45,
              color: 'rgba(245,240,232,0.75)',
            }}>
              {actionState === 'confirmed-call' && (
                <>A Bonvoy travel advisor will call <b style={{ color: LUX.cream }}>{phoneFmt}</b> · <b style={{ color: LUX.cream }}>{timeSlot}</b>.</>
              )}
              {actionState === 'confirmed-email' && (
                <>Your full {tripDest} package is heading to <b style={{ color: LUX.cream }}>{emailFmt}</b>.</>
              )}
              {actionState === 'declined' && (
                <>+{entries} entries banked. Winner drawn live at the event.</>
              )}
            </div>
            {actionState !== 'declined' && (
              <div style={{
                marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap',
              }}>
                {actionState !== 'confirmed-call' && (
                  <button onClick={() => setActionState('timepicker')} style={{
                    padding: '6px 10px', borderRadius: 100,
                    background: 'transparent',
                    border: '1px solid rgba(246,133,34,0.4)',
                    color: LUX.gold, fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
                    cursor: 'pointer',
                  }}>+ Add concierge call</button>
                )}
                {actionState !== 'confirmed-email' && (
                  <button onClick={confirmEmail} style={{
                    padding: '6px 10px', borderRadius: 100,
                    background: 'transparent',
                    border: '1px solid rgba(246,133,34,0.4)',
                    color: LUX.gold, fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
                    cursor: 'pointer',
                  }}>+ Email it too</button>
                )}
              </div>
            )}
          </div>
        )}

        {/* tiny demo reset — out of the conversion path */}
        <button onClick={onReset} style={{
          width: '100%', marginTop: 12, padding: '6px 0',
          background: 'transparent', border: 'none',
          color: 'rgba(245,240,232,0.32)',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: 1.6,
          cursor: 'pointer', textTransform: 'uppercase', fontWeight: 600,
        }}>↻ Run Demo Again</button>
      </div>
    </div>
  );
}

// ────────── Buyer Overlay (LEFT panel) ──────────
function BuyerOverlay({ step }) {
  const buyers = BUYER_DATA[step] || [];
  const labels = ['HERO','L1 · CONTACT','L2 · VITALS','L3 · LOYALTY','L4 · TRAVEL','L5 · EVENTS','L6 · LEAGUES','L7 · DINING','L8 · TRIP PLANNER','L9 · BOOKING','L10 · SPONSOR','CELEBRATION'];
  return (
    <div style={{
      position: 'fixed', left: 24, top: '50%', transform: 'translateY(-50%)',
      width: 300, zIndex: 50,
      background: 'rgba(15,36,64,0.85)', backdropFilter: 'blur(14px)',
      border: `1px solid rgba(196,163,90,0.3)`,
      borderRadius: 16,
      padding: '18px 18px 16px',
      color: LUX.cream, fontFamily: 'Inter',
      boxShadow: '0 30px 60px rgba(0,0,0,0.4)',
      maxHeight: '80vh', overflow: 'auto',
    }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 2,
        color: LUX.gold, fontWeight: 700, marginBottom: 4,
      }}>WHO BUYS THIS DATA</div>
      <div style={{
        fontFamily: 'Inter, sans-serif', fontWeight: 900,
        fontSize: 22, color: LUX.cream, lineHeight: 1, letterSpacing: -0.4,
        marginBottom: 4,
      }}>{labels[step]}</div>
      <div style={{
        height: 1, background: `linear-gradient(90deg, ${LUX.gold}, transparent)`,
        margin: '10px 0 14px',
      }}/>
      {buyers.length === 0 && (
        <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'rgba(245,240,232,0.5)', fontStyle: 'italic' }}>
          {step === 0 ? 'Tap the entry gate to start collecting buyable data points.' : 'Final step — entries banked.'}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {buyers.map((b, i) => (
          <div key={i} style={{
            padding: '11px 12px',
            background: 'rgba(245,240,232,0.04)',
            border: '1px solid rgba(245,240,232,0.08)',
            borderRadius: 10,
          }}>
            <div style={{
              fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
              color: LUX.cream, letterSpacing: 0.1,
            }}>{b.name}</div>
            <div style={{
              fontFamily: 'Inter', fontSize: 11.5, lineHeight: 1.4,
              color: 'rgba(245,240,232,0.6)', margin: '4px 0 6px',
            }}>{b.why}</div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700,
              color: LUX.gold, letterSpacing: 1,
            }}>{b.price}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ScreenCelebration = ScreenCelebration;
window.BuyerOverlay = BuyerOverlay;