// Hero section for StackVerse
const Hero = () => {
  const [mouseX, setMouseX] = React.useState(50);
  const [mouseY, setMouseY] = React.useState(30);

  React.useEffect(() => {
    const onMove = (e) => {
      setMouseX((e.clientX / window.innerWidth) * 100);
      setMouseY((e.clientY / window.innerHeight) * 100);
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const heroStyles = {
    section: {
      position:'relative',
      minHeight:'100vh',
      paddingTop:'160px',
      paddingBottom:'80px',
      overflow:'hidden',
      borderBottom:'1px solid var(--border)',
    },
    glow: {
      position:'absolute',
      inset:0,
      background:`radial-gradient(600px circle at ${mouseX}% ${mouseY}%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%)`,
      pointerEvents:'none',
      transition:'background .25s ease',
    },
    announcement: {
      display:'inline-flex',alignItems:'center',gap:10,
      padding:'6px 8px 6px 6px',
      border:'1px solid var(--border)',
      background:'var(--surface)',
      borderRadius:999,
      fontSize:12,
      color:'var(--text-dim)',
      marginBottom:32,
    },
    pillTag: {
      background:'var(--accent)',color:'var(--accent-ink)',
      padding:'3px 9px',borderRadius:999,fontSize:11,fontWeight:600,
      fontFamily:'Geist Mono, monospace',letterSpacing:'.04em',
    },
    statusRow: {
      display:'flex',alignItems:'baseline',gap:48,
      marginTop:80,paddingTop:32,
      borderTop:'1px solid var(--border)',
      flexWrap:'wrap',
    },
    statusItem: { display:'flex',flexDirection:'column',gap:6 },
    statusVal: { fontSize:32,fontWeight:500,letterSpacing:'-0.03em',color:'var(--text)' },
    statusLabel: { fontSize:11,fontFamily:'Geist Mono,monospace',letterSpacing:'.12em',textTransform:'uppercase',color:'var(--text-faint)' },
  };

  return (
    <section style={heroStyles.section} data-screen-label="01 Hero">
      <div className="grid-bg"></div>
      <div style={heroStyles.glow}></div>

      <div className="container">
        <a href="#case-helios" style={heroStyles.announcement}>
          <span style={heroStyles.pillTag}>NEW</span>
          <span>Helios Logistics cut dispatch cost by 41%</span>
          <span style={{color:'var(--text-faint)'}}>→</span>
        </a>

        <h1 className="h-display" style={{maxWidth:'15ch'}}>
          When off-the-shelf<br/>
          tools <span className="serif" style={{color:'var(--text-dim)'}}>stop&nbsp;working,</span><br/>
          we build what<br/>
          comes next.
        </h1>

        <p className="lede" style={{marginTop:36, maxWidth:'56ch'}}>
          StackVerse is a custom software studio for operationally complex
          businesses. We replace fragmented stacks, spreadsheets, and brittle
          automations with <strong>systems engineered around how you actually run</strong>.
        </p>

        <div style={{display:'flex',gap:12,marginTop:40,flexWrap:'wrap'}}>
          <a href="#contact" className="btn btn-primary">
            Start a project <span className="btn-arrow">→</span>
          </a>
          <a href="#work" className="btn btn-ghost">
            <span className="mono" style={{fontSize:12,color:'var(--text-faint)'}}>01 /</span>
            See selected work
          </a>
        </div>

        <div style={heroStyles.statusRow}>
          <div style={heroStyles.statusItem}>
            <span style={heroStyles.statusVal}>12<span style={{color:'var(--text-faint)'}}>+</span></span>
            <span style={heroStyles.statusLabel}>Years shipping production systems</span>
          </div>
          <div style={heroStyles.statusItem}>
            <span style={heroStyles.statusVal}>$840M<span style={{color:'var(--text-faint)'}}>+</span></span>
            <span style={heroStyles.statusLabel}>Annual GMV running on our infra</span>
          </div>
          <div style={heroStyles.statusItem}>
            <span style={heroStyles.statusVal}>99.98%</span>
            <span style={heroStyles.statusLabel}>p50 uptime across deployed platforms</span>
          </div>
          <div style={heroStyles.statusItem}>
            <span style={{...heroStyles.statusVal, display:'inline-flex',alignItems:'center',gap:10}}>
              <span style={{width:10,height:10,borderRadius:'50%',background:'var(--accent)'}} className="blink"></span>
              <span style={{fontSize:18,color:'var(--text-dim)',fontWeight:400}}>Booking Q3 engagements</span>
            </span>
            <span style={heroStyles.statusLabel}>Capacity</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;