// Gravity (problem statement) + Stats bar

function GravitySection() {
  const [ref, vis] = useReveal();
  return (
    <section id="gravity" style={{
      background:'var(--bg)', textAlign:'center',
      borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)',
      padding:'var(--section-py) var(--section-px)',
      position:'relative', overflow:'hidden',
    }}>
      {/* editorial decorative quote mark */}
      <div aria-hidden style={{
        position:'absolute', top:30, left:'50%', transform:'translateX(-50%)',
        fontFamily:'var(--font-display)', fontSize:240, lineHeight:1,
        color:'rgba(var(--accent-rgb),0.05)', fontWeight:900, pointerEvents:'none',
        fontStyle:'italic',
      }}>“</div>

      <div ref={ref} className={`reveal ${vis?'in':''}`} style={{ maxWidth:820, margin:'0 auto', position:'relative' }}>
        <div className="mono" style={{ fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:24 }}>
          // The Problem
        </div>
        <p className="display" style={{
          fontSize:'clamp(24px, 2.9vw, 38px)', fontWeight:700, color:'var(--text)',
          lineHeight:1.35, letterSpacing:'-0.015em',
          textWrap:'pretty',
        }}>
          Your ads are showing. Your ROAS is flat. Your agency takes three weeks to refresh one creative — while your audience has already moved on.
        </p>
        <p style={{ fontSize:16, color:'var(--muted-strong)', marginTop:24, lineHeight:1.75, maxWidth:620, margin:'24px auto 0' }}>
          Meanwhile, the brands you compete against are running <em style={{ color:'var(--accent)' }}>50+ AI-generated variants before lunch</em>. You don't have a budget problem. You have a velocity problem.
        </p>
      </div>
    </section>
  );
}

function StatsBar() {
  const STATS = [
    { value:'+72%',   label:'ROAS Lift',         color:'var(--amber)' },
    { value:'+47%',   label:'CTR Increase',      color:'var(--amber)' },
    { value:'14×',    label:'Conversion Rate',   color:'var(--amber)' },
    { value:'1/10',   label:'Production Cost',   color:'var(--amber)' },
  ];
  const [ref, vis] = useReveal();
  return (
    <section ref={ref} style={{
      background:'var(--bg-alt)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)',
      padding:'44px 24px',
    }}>
      <div style={{ maxWidth:1000, margin:'0 auto' }}>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)',
        }} className="stats-bar-grid">
          {STATS.map((s,i) => {
            const v = useCountUp(s.value, { active: vis, duration: 1500 + i*120 });
            return (
              <div key={s.label} style={{
                textAlign:'center', padding:'18px 12px',
                borderRight: i < STATS.length -1 ? '1px solid var(--border)' : 'none',
              }}>
                <div className="mono" style={{
                  fontSize:'clamp(22px,2.5vw,34px)', fontWeight:700, color:s.color,
                  textShadow:'0 0 calc(20px * var(--glow)) rgba(245,158,11,0.4)',
                  lineHeight:1,
                }}>{v}</div>
                <div style={{ fontSize:10.5, color:'var(--muted)', marginTop:8, fontWeight:500, letterSpacing:'0.1em', textTransform:'uppercase' }}>
                  {s.label}
                </div>
              </div>
            );
          })}
        </div>
        <p style={{ textAlign:'center', fontSize:11.5, color:'var(--muted)', marginTop:18, letterSpacing:'0.04em', fontFamily:'var(--font-mono)' }}>
          Documented results from DFV campaigns — not projections.
        </p>
      </div>
      <style>{`
        @media (max-width: 640px){
          .stats-bar-grid{ grid-template-columns: repeat(2,1fr) !important; }
          .stats-bar-grid > div:nth-child(2){ border-right:none !important; }
          .stats-bar-grid > div:nth-child(1),
          .stats-bar-grid > div:nth-child(2){ border-bottom: 1px solid var(--border); }
        }
      `}</style>
    </section>
  );
}

window.GravitySection = GravitySection;
window.StatsBar = StatsBar;