// HeroSection.jsx — Section 1. Immediate clarity. Headline + lede + tactile image.
const HeroSection = () => (
  <section className="hero" id="top">
    <span className="edge-label">EM · 01 — DEVELOPMENT</span>
    <div className="shell">
      <div className="hero__grid">
        <div>
          <div className="eyebrow eyebrow-rule">Section · 01 — Development</div>
          <h1 className="hero__title">
            Eyewear development, end to end.
          </h1>
          <p className="hero__lede">
            Frame, lens, case, packaging, logistics — integrated through one team.
            For design-led brands launching their first eyewear collection, or
            rebuilding one that's drifted off-brand.
          </p>
          <div className="hero__cta-row">
            <button className="btn btn--primary" onClick={() => window.openContactModal && window.openContactModal()}>Send us a note</button>
            <a className="btn btn--secondary" href="process.html">View the process</a>
          </div>
        </div>
        <div className="hero__media corner-frame">
          <span className="corner-tick corner-tick--tl"></span>
          <span className="corner-tick corner-tick--tr"></span>
          <span className="corner-tick corner-tick--bl"></span>
          <span className="corner-tick corner-tick--br"></span>
          <img src="./assets/imagery/hero-hands-frames.png" alt="Hands holding tortoise frames over technical drawings" />
        </div>
      </div>
    </div>
  </section>
);

window.HeroSection = HeroSection;