// Free vs Paid pricing
const FEATURES = [
  { group:'Plan',  rows:[
    ['Floor planner (2D)',                   true, true],
    ['Furniture footprints to scale',        true, true],
  ]},
  { group:'Source', rows:[
    ['Browser clipper (Chrome)',             true, true],
    ['Personal product library',             true, true],
    ['Background removal on upload',         true, true],
  ]},
  { group:'Design', rows:[
    ['Upload your own room photo',           true, true],
    ['Curated preset room scenes',           true, true],
    ['Full canvas builder',                  true, true],
    ['Unlimited rooms',                      true, true],
  ]},
  { group:'Share', rows:[
    ['Hosted room card (unique URL)',        true, true],
    ['Public in the Explore library',        true, true],
    ['Fork other creators’ rooms',           true, true],
  ]},
  { group:'Earn', rows:[
    ['Bring your own affiliate links',       false, true],
    ['Hotspots clickable on shared cards',   false, true],
    ['Static image & shopping-list export',  false, true],
    ['Creator dashboard (shares · clicks)',  false, true],
    ['Hotspots stay live as long as you do', false, true],
  ]},
];

function Tick({on}){
  return on ? (
    <span style={{color:'var(--accent)'}}><Icon.Check size={16}/></span>
  ) : (
    <span style={{color:'var(--muted-2)'}}><Icon.X size={14}/></span>
  );
}

function Pricing(){
  return (
    <section id="pricing" style={{padding:'140px 0', borderTop:'1px solid var(--line)', background:'var(--bg-1)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth:780, margin:'0 auto 64px'}}>
          <span className="mono eyebrow" style={{justifyContent:'center'}}>Pricing</span>
          <h2 className="serif" style={{
            margin:'24px 0 0', fontWeight:300,
            fontSize:'clamp(40px, 5.5vw, 80px)', lineHeight:0.95, letterSpacing:'-0.03em',
          }}>
            Free to design. <br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>$9.99</span>
            <span style={{fontStyle:'italic', color:'var(--ink-2)'}}> to earn.</span>
          </h2>
          <p style={{margin:'24px auto 0', maxWidth:560, color:'var(--muted)', fontSize:15, lineHeight:1.6}}>
            The paywall lives between designing and monetizing. Plan, source, design and share for free —
            forever. Upgrade only when you want your hotspots to fire your affiliate links.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, alignItems:'stretch'}}>
          {/* Free */}
          <Tier
            name="Free"
            price="$0"
            cadence="forever"
            blurb="Plan it. Source it. Design it. Share it. Free creators see exactly what they’re missing — and what they get is already a lot."
            cta="Start designing"
            ctaStyle="ghost"
          />
          {/* Paid */}
          <Tier
            name="Creator"
            price="$9.99"
            cadence="/ month"
            blurb="Activate the earn layer. Every hotspot on every card you publish becomes a live affiliate link — yours, paid by the merchant."
            cta="Become a creator"
            ctaStyle="solid"
            featured
          />
        </div>

        {/* feature matrix */}
        <div style={{marginTop:80, border:'1px solid var(--line)'}}>
          <div style={{
            display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr',
            padding:'18px 28px', borderBottom:'1px solid var(--line)',
          }}>
            <span className="mono" style={{color:'var(--muted-2)'}}>What you get</span>
            <span className="mono" style={{textAlign:'center'}}>Free</span>
            <span className="mono" style={{textAlign:'center', color:'var(--accent)'}}>Creator · $9.99</span>
          </div>

          {FEATURES.map((g,gi)=>(
            <div key={gi}>
              <div style={{
                padding:'18px 28px 10px',
                background: '#0e0c0b',
                borderTop: gi===0 ? 'none' : '1px solid var(--line)',
              }}>
                <span className="serif" style={{fontSize:13, fontStyle:'italic', color:'var(--ink-2)'}}>{g.group}</span>
              </div>
              {g.rows.map((r,ri)=>(
                <div key={ri} style={{
                  display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr',
                  alignItems:'center', padding:'14px 28px',
                  borderTop:'1px solid var(--line-soft)',
                }}>
                  <span style={{fontSize:14, color:'var(--ink-2)'}}>{r[0]}</span>
                  <div style={{display:'grid',placeItems:'center'}}><Tick on={r[1]}/></div>
                  <div style={{display:'grid',placeItems:'center'}}><Tick on={r[2]}/></div>
                </div>
              ))}
            </div>
          ))}
        </div>

        <p style={{margin:'24px 0 0', textAlign:'center', fontSize:12, color:'var(--muted)'}}>
          Hotspots deactivate when a subscription lapses — they reactivate the moment it resumes.
        </p>
      </div>
    </section>
  );
}

function Tier({name, price, cadence, blurb, cta, ctaStyle, featured}){
  return (
    <div style={{
      padding:'44px 40px 40px',
      border:`1px solid ${featured ? 'var(--brass)' : 'var(--line)'}`,
      background: featured
        ? 'linear-gradient(160deg, rgba(58,20,20,0.55) 0%, rgba(28,20,16,0.95) 100%)'
        : 'linear-gradient(180deg, var(--bg-1), var(--bg))',
      position:'relative',
      display:'flex', flexDirection:'column',
      boxShadow: featured ? '0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)' : '0 10px 30px rgba(0,0,0,0.25)',
      overflow:'hidden',
    }}>
      {featured && (
        <React.Fragment>
          <div aria-hidden style={{
            position:'absolute', inset:0, pointerEvents:'none',
            background:'radial-gradient(80% 60% at 90% 10%, rgba(217,119,87,0.18), transparent 55%)',
          }}/>
          <span className="mono" style={{
            position:'absolute', top:-1, right:24, zIndex:2,
            padding:'7px 12px', background:'var(--brass)', color:'#1a0907',
            fontSize:10, fontWeight:500,
          }}>Where you earn</span>
        </React.Fragment>
      )}
      <div className="mono" style={{
        color: featured ? 'var(--brass-2)' : 'var(--muted-2)', position:'relative',
      }}>{name}</div>
      <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:14, position:'relative'}}>
        <span className="serif" style={{
          fontSize:104, fontWeight:300, letterSpacing:'-0.04em', lineHeight:0.95,
          ...(featured ? {
            background:'linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--brass) 100%)',
            WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
          } : { color:'var(--ink)' }),
        }}>{price}</span>
        <span style={{fontSize:14, color: featured ? 'var(--brass-2)' : 'var(--muted)'}}>{cadence}</span>
      </div>
      <p style={{margin:'28px 0 0', color: featured ? 'rgba(245,238,225,0.85)' : 'var(--ink-2)', fontSize:15, lineHeight:1.65, fontWeight:300, position:'relative'}}>{blurb}</p>
      <a href="Hub.html" style={{
        marginTop:36, position:'relative',
        display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10,
        padding:'18px 22px', borderRadius:999,
        background: ctaStyle==='solid' ? 'var(--accent)' : 'transparent',
        color: ctaStyle==='solid' ? '#1a0907' : 'var(--ink)',
        border: ctaStyle==='solid' ? 'none' : '1px solid var(--ink)',
        fontSize:14, fontWeight:600,
        boxShadow: ctaStyle==='solid' ? '0 10px 30px rgba(217,119,87,0.35)' : 'none',
      }}>{cta} <Icon.Arrow size={13}/></a>
    </div>
  );
}

window.Pricing = Pricing;