(function() {
  const { useState, useRef } = React;
  const Icon = window.CBIcon;

  const STEPS = [
    { num:'01', icon:'camera',   title:'Capture',       desc:'Take a geo-tagged photo of any city location — a park, plaza, empty lot, or building facade.',                                         time:'Instant',      color:'var(--violet)', cls:'ps1' },
    { num:'02', icon:'bot',      title:'Describe',      desc:'Type your vision. "A vibrant green market with solar canopies and seating." AI does the rest.',                                        time:'~12 seconds',  color:'var(--lime)',   cls:'ps2' },
    { num:'03', icon:'sparkles', title:'AI Transforms', desc:'Generative models reimagine the space with stunning photorealism — preserving the exact location geometry.',                           time:'~12 seconds',  color:'var(--cyan)',   cls:'ps3' },
    { num:'04', icon:'box',      title:'3D Rebuild',    desc:'NeRF reconstruction creates a navigable 3D model anchored to real GPS coordinates.',                                                  time:'~8 minutes',   color:'var(--rose)',   cls:'ps4' },
    { num:'05', icon:'radio',    title:'Live in AR',    desc:'Anyone standing at that location can view your vision through their phone — no app download needed.',                                  time:'~2 minutes',   color:'var(--amber)',  cls:'ps5' },
  ];

  function HowItWorks() {
    const [active, setActive] = useState(0);
    const ref = useRef(null);
    window.useReveal(ref);

    return (
      <div style={{ background:'var(--bg-mid)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)' }}>
        <div className="section" ref={ref}>
          <div className="reveal" style={{ textAlign:'center', marginBottom:64 }}>
            <div className="eyebrow" style={{ justifyContent:'center' }}>How It Works</div>
            <h2 className="heading-lg">
              From Photo to <span className="gradient-text">Live AR</span><br />in Under 10 Minutes
            </h2>
          </div>

          <div className="pipeline-grid reveal rd1">
            {STEPS.map((s, i) => (
              <div key={s.num} className={'pipe-step ' + s.cls + (active === i ? ' on' : '')}
                onMouseEnter={() => { document.body.classList.add('hov'); setActive(i); }}
                onMouseLeave={() => document.body.classList.remove('hov')}>
                <div className="ps-num">{s.num}</div>
                <span className="ps-icon" style={{ color: s.color }}><Icon name={s.icon} size={22} /></span>
                <div className="ps-title">{s.title}</div>
                <div className="ps-desc">{s.desc}</div>
                <div className="ps-time" style={{ color: s.color }}><Icon name="clock" size={12} /> {s.time}</div>
              </div>
            ))}
          </div>

          <div className="reveal rd2" style={{ marginTop:24 }}>
            <div className="card">
              <div style={{ display:'flex', alignItems:'center', gap:16 }}>
                <span className="ps-icon" style={{ color: STEPS[active].color, marginBottom: 0, width: 52, height: 52 }}>
                  <Icon name={STEPS[active].icon} size={26} />
                </span>
                <div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:STEPS[active].color, marginBottom:4 }}>
                    Step {STEPS[active].num} — {STEPS[active].title}
                  </div>
                  <div style={{ fontSize:14, color:'var(--text-dim)' }}>
                    {STEPS[active].desc} Average processing time: <strong style={{ color:'var(--text)' }}>{STEPS[active].time}</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.UserHowItWorks = HowItWorks;
})();