// PRICING PREVIEW + FAQ
// Price preview makes the 90% off tangible; FAQ kills the top 4 objections.

function PricePreview() {
  const cards = [
    {label:'Public price (after July 7)',amount:'$997',unit:'/mo',sub:'What every agent pays',muted:true,strike:true},
    {label:'Brand Ambassador — today',amount:'$97',unit:'/mo',sub:'Locked for life · 90% off',featured:true,badge:'SAVE 90%'},
    {label:'Your ROI goal',amount:'2×',unit:'in 90 days',sub:'Or every dollar back'},
  ];
  return (
    <section style={{maxWidth:820,margin:'0 auto 56px',textAlign:'center',padding:'0 8px'}}>
      <Eyebrow>The math · <span style={{color:'var(--mute)',fontWeight:500,letterSpacing:1,textTransform:'none'}}>pricing transparency</span></Eyebrow>
      <h2 style={{
        marginTop:10,marginBottom:24,
        fontSize:'clamp(24px,4vw,32px)',fontWeight:700,color:'var(--ink)',
        letterSpacing:'-0.5px',
      }}>Same product. 90% less. For life.</h2>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginBottom:22}} className="apex-price-grid">
        {cards.map((c,i) => (
          <div key={i} style={{
            background: c.featured ? 'linear-gradient(180deg,var(--card) 0%,rgba(124,58,237,0.04) 100%)' : 'var(--card)',
            border: c.featured ? '1.5px solid var(--purple)' : '1.5px solid var(--border)',
            borderRadius:16,padding:'22px 18px',textAlign:'left',position:'relative',
            boxShadow: c.featured ? '0 0 0 1px rgba(124,58,237,0.18), var(--glow)' : 'var(--shadow)',
            transform: c.featured ? 'scale(1.02)' : 'none',
            opacity: c.muted ? 0.75 : 1,
          }}>
            {c.badge && (
              <div style={{
                position:'absolute',top:-10,right:16,
                background:BRAND.gradient,color:'#fff',
                fontSize:10,fontWeight:800,letterSpacing:1.5,textTransform:'uppercase',
                padding:'5px 12px',borderRadius:999,
                boxShadow:'0 4px 12px rgba(124,58,237,0.35)',
              }}>{c.badge}</div>
            )}
            <div style={{fontSize:11,fontWeight:700,letterSpacing:1.5,textTransform:'uppercase',color:'var(--mute)',marginBottom:12}}>
              {c.label}
            </div>
            <div style={{
              fontSize:'clamp(28px,4vw,36px)',fontWeight:800,
              color: c.muted ? 'var(--mute)' : (c.featured ? undefined : 'var(--ink)'),
              background: c.featured ? BRAND.gradient : undefined,
              WebkitBackgroundClip: c.featured ? 'text' : undefined,
              WebkitTextFillColor: c.featured ? 'transparent' : undefined,
              backgroundClip: c.featured ? 'text' : undefined,
              letterSpacing:'-1px',lineHeight:1,marginBottom:6,
              fontVariantNumeric:'tabular-nums',
              textDecoration: c.strike ? 'line-through' : 'none',
              textDecorationColor: c.strike ? '#ef4444' : undefined,
              textDecorationThickness: c.strike ? 2 : undefined,
            }}>
              {c.amount}
              <span style={{fontSize:13,fontWeight:600,color:'var(--mute)',marginLeft:4,WebkitTextFillColor:'var(--mute)'}}>{c.unit}</span>
            </div>
            <div style={{fontSize:12,color:'var(--mute)',fontWeight:500}}>{c.sub}</div>
          </div>
        ))}
      </div>

      <p style={{fontSize:13.5,color:'var(--mute)',lineHeight:1.6,maxWidth:560,margin:'0 auto'}}>
        Ambassadors see the product first, give us real feedback, and tell a few colleagues.
        In exchange, <strong style={{color:'var(--ink)',fontWeight:700}}>your rate is locked at $97/mo for life</strong> — even as the public price climbs.
      </p>
      <style>{`@media(max-width:640px){.apex-price-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

function FAQBlock() {
  const [open, setOpen] = useState(-1);
  const items = window.FAQ;
  return (
    <section style={{maxWidth:640,margin:'0 auto 56px',padding:'0 4px'}}>
      <Eyebrow style={{textAlign:'center'}}>Top questions</Eyebrow>
      <h2 style={{
        marginTop:8,marginBottom:22,
        fontSize:'clamp(22px,4vw,28px)',fontWeight:700,
        color:'var(--ink)',textAlign:'center',letterSpacing:'-0.5px',
      }}>Before you ask.</h2>
      {items.map((f,i) => (
        <div key={i} style={{
          background:'var(--card)',
          border: open===i ? '1px solid rgba(124,58,237,0.32)' : '1px solid var(--border)',
          borderRadius:14,marginBottom:10,overflow:'hidden',
          boxShadow: open===i ? 'var(--shadow)' : 'none',
          transition:'all 0.2s ease',
        }}>
          <button onClick={() => setOpen(open===i?-1:i)} style={{
            width:'100%',cursor:'pointer',padding:'18px 20px',
            fontSize:14.5,fontWeight:700,color:'var(--ink)',
            background:'transparent',border:'none',
            display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,
            textAlign:'left',
          }}>
            {f.q}
            <span style={{
              color:'var(--purple)',fontSize:22,fontWeight:700,lineHeight:1,
              transform: open===i ? 'rotate(45deg)' : 'rotate(0)',
              transition:'transform 0.25s ease',
            }}>+</span>
          </button>
          {open===i && (
            <div style={{
              padding:'0 20px 18px',fontSize:14,color:'var(--mute)',
              lineHeight:1.6,animation:'apex-fade-in 0.25s',
            }}>{f.a}</div>
          )}
        </div>
      ))}
    </section>
  );
}

Object.assign(window, { PricePreview, FAQBlock });