function Locator() {
  const store = {
    name: 'AQUO Water Solutions',
    sub: 'Water Shop & Filling Station',
    addr: 'Krugersdorp, Gauteng',
    lat: -26.073989,
    lng: 27.931916,
    mapSrc: 'https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14335.05344514933!2d27.931916!3d-26.073989!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e957503d5ea7289%3A0x74ad6b342efb5a6!2sAquo%20Water%20Solutions%20(Water%20Shop%20%26%20Filling%20Station)!5e0!3m2!1sen!2sza!4v1739708747618!5m2!1sen!2sza',
    mapLink: 'https://www.google.com/maps/place/Aquo+Water+Solutions+(Water+Shop+%26+Filling+Station)/@-26.073989,27.931916,15z/',
  };

  const hours = [
    { d: 'Mon – Fri', t: '08:00 – 17:00' },
    { d: 'Saturday',  t: '08:00 – 13:00' },
    { d: 'Sunday',    t: 'Closed' },
  ];

  const services = [
    'Filling station — bring your own bottles',
    'Free in-store water testing',
    'System installs & servicing',
    'Cartridge swaps while you wait',
  ];

  return (
    <section className="section" data-screen-label="05 Locator">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Visit us / Gauteng</div>
            <h2 className="section-title">
              The flagship <span className="glow">shop</span><br/>
              & <span className="outline">filling station.</span>
            </h2>
          </div>
          <p className="section-note">
            Bring a sample, leave with clarity. Free in-store water testing,
            cartridge swaps, and bulk refills — seven days from your door.
          </p>
        </div>

        <div className="locator-grid">
          <div className="locator-left">
            <div>
              <div className="mono" style={{ color: 'var(--text-dim)', marginBottom: 14 }}>
                FLAGSHIP · LAT {store.lat.toFixed(4)}° LNG {store.lng.toFixed(4)}°
              </div>
              <h3 className="locator-title">
                Meet your water<br/><span className="glow">in person.</span>
              </h3>
            </div>

            <div className="store-card">
              <div className="store-card-head">
                <span className="dot"/>
                <div>
                  <div className="name">{store.name}</div>
                  <div className="sub">{store.sub}</div>
                </div>
              </div>
              <div className="store-addr">{store.addr}</div>

              <div className="store-hours">
                {hours.map(h => (
                  <div className="hrow" key={h.d}>
                    <span className="d">{h.d}</span>
                    <span className="t">{h.t}</span>
                  </div>
                ))}
              </div>

              <ul className="store-services">
                {services.map(s => (
                  <li key={s}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
                    {s}
                  </li>
                ))}
              </ul>

              <a className="store-cta" href={store.mapLink} target="_blank" rel="noopener noreferrer">
                Get directions
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg>
              </a>
            </div>
          </div>

          <div className="locator-right map-frame">
            <div className="map-overlay-top">
              <span className="mono">LIVE MAP · GOOGLE</span>
              <span className="mono pulse-dot"><span/>SIGNAL OK</span>
            </div>
            <iframe
              src={store.mapSrc}
              loading="lazy"
              allowFullScreen=""
              referrerPolicy="no-referrer-when-downgrade"
              title="AQUO Water Solutions on Google Maps"
              className="map-iframe"
            />
            <div className="map-overlay-bot">
              <span className="mono">N ↑ · {store.lat.toFixed(3)}°S {store.lng.toFixed(3)}°E</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Locator = Locator;