// Hero — full-bleed. Photo placeholder behind, blue-ink protection gradient.
function Hero({ onNav }) {
  return (
    <section className="dep-hero" id="top">
      <div className="dep-hero__bg" aria-hidden="true">
        {/* Photo placeholder — flag: needs real workshop photography */}
        <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
          <defs>
            <linearGradient id="metal" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#2E3849"/>
              <stop offset="1" stopColor="#0E1320"/>
            </linearGradient>
            <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
              <path d="M60 0H0v60" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="1600" height="900" fill="url(#metal)"/>
          <rect width="1600" height="900" fill="url(#grid)"/>
          {/* Abstract industrial shapes */}
          <g opacity="0.18" stroke="#BFC8D6" strokeWidth="1" fill="none">
            <circle cx="1200" cy="450" r="300"/>
            <circle cx="1200" cy="450" r="220"/>
            <circle cx="1200" cy="450" r="140"/>
            <line x1="200" y1="700" x2="1400" y2="700"/>
            <line x1="200" y1="200" x2="900" y2="200"/>
          </g>
        </svg>
        <div className="dep-hero__overlay"></div>
      </div>

      <div className="dep-hero__inner">
        <span className="eyebrow" style={{ color: "#FF8285" }}>Berdiri sejak 1983</span>
        <h1 className="dep-hero__title">
          Jasa <em>electroplating</em> untuk industri yang menuntut presisi.
        </h1>
        <p className="dep-hero__lead">
          Pelapisan zinc dan nickel chrome dengan metode rack &amp; barrel.
          Berbasis di Bandung, melayani pelanggan otomotif, peralatan rumah tangga, dan office supplies.
        </p>
        <div className="dep-hero__ctas">
          <a className="btn btn-primary btn-lg" href="#kontak" onClick={(e) => { e.preventDefault(); onNav("kontak"); }}>
            Minta Penawaran
          </a>
          <a className="btn btn-onbrand btn-lg" href="#layanan" onClick={(e) => { e.preventDefault(); onNav("layanan"); }}>
            Lihat layanan kami →
          </a>
        </div>
        <div className="dep-hero__placeholder-flag">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
          Placeholder — needs real workshop photography
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;