const Hero = () => {
  const [mx, setMx] = React.useState(0.5);
  const [my, setMy] = React.useState(0.35);

  React.useEffect(() => {
    const onMove = (e) => {
      setMx(e.clientX / window.innerWidth);
      setMy(Math.min(1, e.clientY / window.innerHeight));
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section className="hero" id="top">
      <div
        className="hero-glow"
        style={{
          background: `radial-gradient(60% 50% at ${mx * 100}% ${my * 100}%, var(--accent-glow) 0%, transparent 70%)`
        }}
      />
      <div className="hero-grid" aria-hidden="true" />

      <div className="hero-inner">
        <div className="eyebrow">
          <span className="dot" /> Marketing research for the computer parts industry
        </div>

        <h1 className="display">
          The signal behind every <em>silicon</em> <br className="hide-sm" />decision, decoded.
        </h1>

        <p className="lede">
          Main Street Research delivers unparalleled, category-specific intelligence to the teams building,
          selling, and sourcing the components that power the modern computer.
        </p>

        <div className="hero-cta">
          <a href="#contact" className="btn btn-primary lg">
            Commission a study
            <svg width="14" height="14" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#method" className="btn btn-ghost lg">See how we work</a>
        </div>

        <div className="hero-meta">
          <div><span className="num">200<span className="mini">+</span></span><span className="lbl">Countries researched</span></div>
          <div className="sep" />
          <div><span className="num">420+</span><span className="lbl">SKUs indexed weekly</span></div>
          <div className="sep" />
          <div><span className="num">38</span><span className="lbl">Markets covered</span></div>
        </div>
      </div>

      <div className="hero-device" aria-hidden="true">
        <div className="device">
          <div className="device-bar">
            <span /><span /><span />
            <div className="device-url">msr.report / q2-gpu-pricing</div>
          </div>
          <div className="device-body">
            <div className="d-row">
              <div className="d-tag">LIVE · Q2 · GPU</div>
              <div className="d-tag ghost">Refreshed 2m ago</div>
            </div>
            <div className="d-headline">GPU channel pricing pressure index</div>
            <div className="d-chart">
              <svg viewBox="0 0 320 110" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.55"/>
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <path d="M0,80 L20,72 L40,78 L60,58 L80,62 L100,46 L120,52 L140,36 L160,40 L180,28 L200,34 L220,20 L240,28 L260,18 L280,22 L300,10 L320,14 L320,110 L0,110 Z" fill="url(#g1)"/>
                <path d="M0,80 L20,72 L40,78 L60,58 L80,62 L100,46 L120,52 L140,36 L160,40 L180,28 L200,34 L220,20 L240,28 L260,18 L280,22 L300,10 L320,14" stroke="var(--accent)" strokeWidth="1.5" fill="none"/>
              </svg>
            </div>
            <div className="d-legend">
              <div><span className="sw" style={{background:'var(--accent)'}}/>Index</div>
              <div><span className="sw" style={{background:'#4b4b52'}}/>MSRP</div>
              <div className="spacer" />
              <div className="delta up">▲ 4.2%</div>
            </div>
            <div className="d-grid">
              <div className="d-cell"><span className="k">RTX-tier</span><span className="v">+2.8%</span></div>
              <div className="d-cell"><span className="k">RX-tier</span><span className="v">−0.4%</span></div>
              <div className="d-cell"><span className="k">Integrated</span><span className="v">flat</span></div>
              <div className="d-cell"><span className="k">Mobile</span><span className="v">+1.1%</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;