/* global React, PCBMacro */

function Hero({ headline = "default" }) {
  const headlines = {
    default: <>Precision electronics, <em>built in the Pacific Northwest.</em></>,
    alt1: <>Quiet rigor, <em>circuit by circuit.</em></>,
    alt2: <>From schematic to <em>shipped board</em> — a boutique EMS shop.</>
  };
  return (
    <section className="hero" id="home">
      <div className="hero-bg hero-bg-image" style={{ backgroundImage: 'url(' + ((window.__resources && window.__resources.heroPcb) || 'assets/hero-pcb.png') + ')' }} />
      <div className="hero-shade" />

      <div className="hero-content">
        <span className="eyebrow">EMS · Camas, Washington · Est. 2000</span>
        <h1>{headlines[headline] || headlines.default}</h1>
        <p>
          E-Assembly is an exacting electronics manufacturing services
          partner. We assemble, rework, design, and ship circuit boards for
          OEMs, distributors, and the niche industries that depend on them.
        </p>
        <div className="hero-ctas">
          <button
            className="btn btn-primary btn-lg btn-arrow"
            onClick={() => window.smoothScrollToCenter && window.smoothScrollToCenter('contact')}
          >
            Get a quote
          </button>
          <button
            className="btn btn-secondary btn-lg"
            data-comment-anchor="b5b256d34c-button-24-11"
            onClick={() => window.smoothScrollToCenter && window.smoothScrollToCenter('services')}
          >
            View our services
          </button>
        </div>
        <div className="hero-meta">
          <div className="m"><strong>26&nbsp;yrs</strong>in business</div>
          <div className="m"><strong>50+</strong>clients served</div>
          <div className="m"><strong>1,000+</strong>unique board assemblies</div>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;