// Hero.jsx
const Hero = ({ onNavigate }) => (
  <section className="hero" id="home">
    <div className="hero-bg">
      {/* Subtle network-graph echoing the logo mark */}
      <svg className="hero-grid" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="node-line" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0"   stopColor="#3DB4F2" stopOpacity="0.3"/>
            <stop offset="0.5" stopColor="#4E3CD9" stopOpacity="0.25"/>
            <stop offset="1"   stopColor="#F26A2E" stopOpacity="0.3"/>
          </linearGradient>
        </defs>
        {[[120,90],[310,140],[520,80],[680,160],[180,300],[400,260],[600,340],[250,430],[540,440]].map(([x,y],i) => (
          <circle key={i} cx={x} cy={y} r="3" fill="url(#node-line)" opacity="0.9"/>
        ))}
        {[
          [120,90,310,140],[310,140,520,80],[520,80,680,160],
          [310,140,400,260],[180,300,400,260],[400,260,600,340],
          [180,300,250,430],[400,260,540,440],[600,340,540,440],
        ].map(([x1,y1,x2,y2],i) => (
          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#node-line)" strokeWidth="1"/>
        ))}
      </svg>
      <div className="hero-fog" />
    </div>

    <div className="hero-content">
      <div className="eyebrow">Software studio · India · UAE</div>
      <h1>
        Transform your <span className="grad-text">digital vision</span><br/>into reality.
      </h1>
      <p className="lead">
        Devnity Co is a small team of engineers and designers building software that ships, scales, and looks considered — from marketing sites to full-stack apps.
      </p>
      <div className="hero-cta">
        <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('projects')}>
          View our work
        </Button>
        <Button variant="secondary" size="lg" onClick={() => onNavigate('contact')}>
          Start your project
        </Button>
      </div>
      <div className="hero-meta">
        <span><Icon name="check" size={14}/> 3 client projects</span>
        <span><Icon name="check" size={14}/> 3 founders</span>
        <span><Icon name="check" size={14}/> Two cities</span>
      </div>
    </div>
  </section>
);
window.Hero = Hero;