// Creator earnings — oxblood color band, dimensional layout
function Earnings(){
  const [aov, setAov] = React.useState(2000);
  const commission = Math.round(aov * 0.12);
  const fashionComp = Math.round(60 * 0.08);

  return (
    <section id="earn" style={{
      padding:'160px 0',
      borderTop:'1px solid var(--line)',
      background:'linear-gradient(180deg, var(--oxblood) 0%, var(--plum) 100%)',
      position:'relative', overflow:'hidden',
    }}>
      {/* texture lattice */}
      <div aria-hidden style={{
        position:'absolute', inset:0, opacity:0.07, pointerEvents:'none',
        backgroundImage:`radial-gradient(rgba(255,255,255,1) 1px, transparent 1px)`,
        backgroundSize:'28px 28px',
      }}/>
      {/* giant watermark numeral */}
      <div className="serif" aria-hidden style={{
        position:'absolute', right:-80, top:80,
        fontSize:'min(36vw, 540px)', fontStyle:'italic',
        color:'rgba(217,119,87,0.10)',
        fontWeight:300, letterSpacing:'-0.05em', lineHeight:0.85,
        pointerEvents:'none',
      }}>$420</div>

      {/* top edge ornament */}
      <div className="container" style={{position:'relative'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center', marginBottom:64}}>
          <span className="mono" style={{color:'var(--brass-2)'}}>Chapter V · The home decor math</span>
          <span className="mono" style={{color:'rgba(245,238,225,0.4)'}}>pg. 10 / 12</span>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:80, alignItems:'start'}}>
          {/* left — the editorial argument */}
          <div>
            <h2 className="serif" style={{
              margin:0, fontWeight:300, color:'var(--ink)',
              fontSize:'clamp(56px, 8vw, 124px)', lineHeight:0.92, letterSpacing:'-0.04em',
            }}>
              A $2,000 sofa <br/>
              <span style={{
                fontStyle:'italic',
                background:'linear-gradient(180deg, var(--accent-2), var(--accent), var(--brass))',
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
              }}>pays differently</span> <br/>
              than a $60 sweater.
            </h2>

            <p style={{
              margin:'48px 0 0', maxWidth:560,
              color:'rgba(245,238,225,0.85)', fontSize:18, lineHeight:1.6, fontWeight:300,
            }}>
              <span className="serif" style={{
                float:'left', fontSize:60, lineHeight:0.85, fontStyle:'italic',
                color:'var(--brass-2)', paddingRight:14, paddingTop:6, fontWeight:300,
              }}>F</span>
              ashion creators have been splitting{' '}
              <span style={{color:'var(--brass-2)', fontStyle:'italic'}}>$3–$6 commissions</span>{' '}
              for a decade. Home decor lives in a different universe — same audience, same click,
              an order ten to twenty times the size.
            </p>

            <div style={{marginTop:56, display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, maxWidth:580}}>
              <Stat label="Fashion · avg." value="$60" sub="≈ $3–$6 per click" tone="muted"/>
              <Stat label="Home decor · avg." value="$1,400" sub="$140–$420 per click" tone="accent"/>
            </div>
          </div>

          {/* right — interactive calc */}
          <div style={{
            border:'1px solid var(--brass)',
            background:'rgba(12,8,8,0.5)',
            backdropFilter:'blur(8px)',
            padding:'36px 32px',
            boxShadow:'0 40px 100px rgba(0,0,0,0.4)',
            position:'relative',
          }}>
            {/* corner tabs */}
            <span className="mono" style={{
              position:'absolute', top:-1, right:24, padding:'6px 12px',
              background:'var(--brass)', color:'#1a0907', fontSize:10,
            }}>Try the math</span>

            <h4 className="serif" style={{
              margin:'10px 0 0', fontWeight:300, fontSize:28,
              letterSpacing:'-0.02em', color:'var(--ink)',
            }}>
              One product. One click. <br/>
              <span style={{fontStyle:'italic', color:'var(--brass-2)'}}>One creator commission.</span>
            </h4>

            <div style={{marginTop:36}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
                <span className="mono" style={{color:'var(--brass-2)'}}>Product price</span>
                <span className="serif" style={{fontSize:32, fontWeight:300, color:'var(--ink)'}}>${aov.toLocaleString()}</span>
              </div>
              <input type="range" min={120} max={6000} step={20}
                value={aov} onChange={(e)=>setAov(+e.target.value)}
                style={{width:'100%', accentColor:'var(--accent)'}}
              />
              <div style={{display:'flex',justifyContent:'space-between'}}>
                <span className="mono" style={{color:'rgba(245,238,225,0.35)'}}>$120</span>
                <span className="mono" style={{color:'rgba(245,238,225,0.35)'}}>$6,000</span>
              </div>
            </div>

            <div style={{
              marginTop:40, padding:'28px 0',
              borderTop:'1px solid rgba(245,238,225,0.18)',
              borderBottom:'1px solid rgba(245,238,225,0.18)',
            }}>
              <div className="mono" style={{marginBottom:10, color:'var(--brass-2)'}}>You earn ≈</div>
              <div className="serif" style={{
                fontSize:84, fontWeight:300, lineHeight:0.9,
                letterSpacing:'-0.035em',
                background:'linear-gradient(180deg, var(--accent-2), var(--accent) 60%, var(--brass) 100%)',
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
              }}>${commission.toLocaleString()}</div>
              <div style={{fontSize:13, color:'rgba(245,238,225,0.6)', marginTop:10, lineHeight:1.5}}>
                Assuming a 12% creator commission, paid by the merchant — not by you, not by us.
              </div>
            </div>

            <div style={{
              marginTop:24, fontSize:13,
              color:'rgba(245,238,225,0.75)',
              display:'flex',justifyContent:'space-between', alignItems:'baseline',
            }}>
              <span>That same audience on a fashion post:</span>
              <span className="serif" style={{color:'rgba(245,238,225,0.4)', fontSize:22, textDecoration:'line-through'}}>${fashionComp}</span>
            </div>

            <a href="#pricing" style={{
              marginTop:32, display:'inline-flex',alignItems:'center',gap:10,
              padding:'14px 22px', borderRadius:999,
              background:'var(--accent)', color:'#1a0907',
              fontSize:13, fontWeight:600,
              boxShadow:'0 10px 30px rgba(217,119,87,0.4)',
            }}>Activate hotspots — $9.99 / month <Icon.Arrow size={12}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({label, value, sub, tone}){
  const accent = tone==='accent';
  return (
    <div style={{
      borderTop:`1px solid ${accent ? 'var(--brass)' : 'rgba(245,238,225,0.18)'}`,
      paddingTop:22, paddingRight:24,
      borderRight: accent ? '1px solid rgba(255,255,255,0.05)' : 'none',
    }}>
      <div className="mono" style={{color: accent ? 'var(--brass-2)' : 'rgba(245,238,225,0.4)'}}>{label}</div>
      <div className="serif" style={{
        margin:'12px 0 6px', fontSize:56, fontWeight:300, letterSpacing:'-0.03em', lineHeight:1,
        color: accent ? 'var(--ink)' : 'rgba(245,238,225,0.45)',
      }}>{value}</div>
      <div style={{fontSize:13, color: accent ? 'var(--brass-2)' : 'rgba(245,238,225,0.45)'}}>{sub}</div>
    </div>
  );
}

window.Earnings = Earnings;