// ── Features ──────────────────────────────────────────────────────
function Features() {
  return (
    <section className="features" id="features">
      <div className="wrap">
        <span className="eyebrow">PART TWO — The Job</span>
        <h2 className="h-section" style={{marginTop:'24px', maxWidth:'18ch'}}>
          A character who <em>watches</em> your AI bill. Literally.
        </h2>

        <div className="features-grid">
          <div className="feat feat-1">
            <div className="feat-num">01 / COUNT</div>
            <h3 className="feat-title">I count every token across <em>four AIs</em>.</h3>
            <p className="feat-body">Claude, ChatGPT, Gemini, Cursor. Real-time. To the digit. Nothing slips past.</p>
            <div className="feat-visual">
              <div className="viz-pills">
                <span className="viz-pill on">CLAUDE · 14.2K</span>
                <span className="viz-pill on">CHATGPT · 8.9K</span>
                <span className="viz-pill on">GEMINI · 2.1K</span>
                <span className="viz-pill on">CURSOR · 31.4K</span>
              </div>
            </div>
          </div>

          <div className="feat feat-2">
            <div className="feat-num">02 / TRIM</div>
            <h3 className="feat-title">I cut <em>bloated</em> prompts down to the bone.</h3>
            <p className="feat-body">One click turns a 200-token rambler into 12 tokens. Same answer. 85% cheaper.</p>
            <div className="feat-visual" style={{flexDirection:'column', alignItems:'stretch', gap:'8px'}}>
              <div className="viz-count">
                <span style={{color: 'var(--fg-3)', textDecoration:'line-through'}}>200 tok</span>
                <span style={{color:'var(--fg-3)'}}>→</span>
                <span className="viz-count-big">12<span style={{fontSize:'0.4em', color:'var(--fg-3)', marginLeft:'4px', fontStyle:'normal', fontFamily:'var(--mono)'}}>tok</span></span>
              </div>
            </div>
          </div>

          <div className="feat feat-3">
            <div className="feat-num">03 / MISUSE</div>
            <h3 className="feat-title">I catch <em>model misuse</em>.</h3>
            <p className="feat-body">Asking Opus what Haiku could answer? I flag it. Save up to 87% per call.</p>
            <div className="feat-visual">
              <div className="viz-warning">
                <span className="dot"></span>
                <span>OPUS → HAIKU · SAVES 87%</span>
              </div>
            </div>
          </div>

          <div className="feat feat-4">
            <div className="feat-num">04 / SPEND</div>
            <h3 className="feat-title">I show <em>real spend</em>.</h3>
            <p className="feat-body">Down to the cent. Per platform. Per day. Per year. No more guessing.</p>
            <div className="feat-visual">
              <div className="viz-bars">
                {[28, 44, 32, 58, 42, 70, 38, 52, 64, 48, 76, 62].map((h,i) => (
                  <div key={i} className="viz-bar" style={{height: `${h}%`}}></div>
                ))}
              </div>
            </div>
          </div>

          <div className="feat feat-5">
            <div className="feat-num">05 / WARN</div>
            <h3 className="feat-title">I warn <em>before</em> you burn.</h3>
            <p className="feat-body">A ping at 80% of your monthly cap. Your invoice never surprises you.</p>
            <div className="feat-visual">
              <div className="viz-count">
                <span className="viz-count-big" style={{color:'var(--amber)'}}>80%</span>
                <span style={{color:'var(--fg-3)'}}>CAP REACHED</span>
              </div>
            </div>
          </div>

          <div className="feat feat-6">
            <div className="feat-num">06 / LIVES IN YOUR BROWSER</div>
            <h3 className="feat-title" style={{maxWidth:'24ch'}}>
              I live in your browser. <em>Zero setup.</em> Free forever for the basics.
            </h3>
            <div className="feat-visual" style={{justifyContent:'space-between', width:'100%'}}>
              <div className="viz-pills">
                <span className="viz-pill on">CHROME</span>
                <span className="viz-pill">ARC · SOON</span>
                <span className="viz-pill">FIREFOX · SOON</span>
              </div>
              <a className="btn btn-ghost" style={{padding:'10px 18px', fontSize:'13px'}} href="#install">
                Install <span className="btn-arrow">↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Features = Features;