const Problem = () => {
  const p = L('problem');
  return (
    <section className="section-pad">
      <div className="container">
        <div style={{ textAlign:'center', maxWidth:820, margin:'0 auto 80px' }} className="reveal">
          <div className="eyebrow" style={{ marginBottom:18 }}>{p.eyebrow}</div>
          <h2 className="display" style={{ fontSize:'clamp(38px, 5vw, 68px)', margin:0 }}>
            {p.h2a} <br/>
            <span className="serif" style={{ color:'var(--red)' }}>{p.h2b}</span>
          </h2>
          <p style={{ fontSize:18, color:'var(--ink-2)', marginTop:22, lineHeight:1.55 }}>
            {parseInline(p.sub).map((seg, i) => {
              if (typeof seg === 'string' && seg.startsWith('|') && seg.endsWith('|')) {
                return <strong key={i} style={{ color:'var(--ink)' }}>{seg.slice(1,-1)}</strong>;
              }
              return <span key={i}>{seg}</span>;
            })}
          </p>
        </div>

        <div className="reveal" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0,
          border:'1px solid var(--line)', borderRadius:24, overflow:'hidden',
          background:'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0))'
        }} className="stats-grid">
          {p.stats.map((s, i) => (
            <StatBlock key={i} value={s.value} label={s.label} sub={s.sub} highlight={i===1} />
          ))}
        </div>

        <div id="problem-vs" className="reveal" style={{ marginTop:80, display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
          <VsCard kind="bad" title={p.badTitle} items={p.bad} />
          <VsCard kind="good" title={p.goodTitle} items={p.good} />
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .stats-grid { grid-template-columns: 1fr !important; }
          #problem-vs { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const StatBlock = ({ value, label, sub, highlight }) => (
  <div style={{
    padding:'48px 36px', borderRight:'1px solid var(--line)',
    background: highlight ? 'radial-gradient(circle at 50% 100%, rgba(0,228,122,0.08), transparent 70%)' : 'transparent',
    borderBottom:'1px solid var(--line)'
  }}>
    <div className="bignum bignum-green">{value}</div>
    <div style={{ marginTop:18, color:'var(--ink)', fontSize:16, lineHeight:1.4 }}>{label}</div>
    <div style={{ marginTop:8, color:'var(--ink-4)', fontSize:13, fontFamily:"'Geist Mono',monospace" }}>{sub}</div>
  </div>
);

const VsCard = ({ kind, title, items }) => {
  const isGood = kind === 'good';
  return (
    <div style={{
      borderRadius:20,
      border:'1px solid '+ (isGood ? 'rgba(0,228,122,0.25)' : 'var(--line)'),
      background: isGood
        ? 'linear-gradient(180deg, rgba(0,228,122,0.06), rgba(0,228,122,0.01))'
        : 'linear-gradient(180deg, rgba(255,78,92,0.04), rgba(0,0,0,0))',
      padding:'32px 30px',
      position:'relative',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:22 }}>
        <div style={{
          width:36, height:36, borderRadius:10,
          background: isGood ? 'var(--green-soft)' : 'rgba(255,78,92,0.12)',
          color: isGood ? 'var(--green)' : 'var(--red)',
          display:'grid', placeItems:'center'
        }}>
          <Icon name={isGood ? 'check' : 'x'} size={18}/>
        </div>
        <h3 style={{ margin:0, fontSize:22, fontWeight:600, letterSpacing:'-0.01em' }}>{title}</h3>
      </div>
      <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12 }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display:'flex', alignItems:'flex-start', gap:12,
            color: isGood ? 'var(--ink)' : 'var(--ink-2)', fontSize:15, lineHeight:1.5
          }}>
            <span style={{
              flexShrink:0, width:18, height:18, borderRadius:'50%',
              background: isGood ? 'var(--green-soft)' : 'rgba(255,78,92,0.12)',
              color: isGood ? 'var(--green)' : 'var(--red)',
              display:'grid', placeItems:'center', marginTop:2
            }}>
              <Icon name={isGood ? 'check' : 'x'} size={11}/>
            </span>
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
};

window.Problem = Problem;