/* global React, Icon */

const CITIES = [
  "Sønderborg", "Augustenborg", "Nordborg", "Gråsten", "Broager", "Dybbøl",
  "Egernsund", "Kruså", "Padborg", "Aabenraa", "Tinglev", "Rødekro",
  "Bovrup", "Guderup", "Mommark", "Hørup", "Kegnæs", "Sundeved",
  "Tønder", "Haderslev", "Vojens", "Als",
];

function ServiceArea() {
  return (
    <section className="areas" id="areas" data-screen-label="Service area">
      <div className="container">

        <div className="areas__head">
          <span className="eyebrow">Hvor vi arbejder</span>
          <h2 className="section-title">Sønderjylland<br/>er vores hjemmebane.</h2>
        </div>

        <div className="areas__body">

          <div className="areas__map-wrap">
            <iframe
              title="Frederiksen & Jepsen — Sønderborg"
              src="https://maps.google.com/maps?q=54.9131742,9.7706115&z=13&output=embed&hl=da"
              className="areas__map"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>

          <div className="areas__right">
            <div className="areas__pills-head">
              <Icon name="map-pin" size={14} stroke="var(--accent)" />
              Servicebyer · klik for at læse mere
            </div>
            <div className="areas__pills">
              {CITIES.map(c => (
                <a key={c} href={`#${c.toLowerCase().replace(/\s/g, "-")}`} className="city-pill">
                  <span className="city-pill__dot"/>
                  {c}
                </a>
              ))}
            </div>
            <a href="tel:+4574486994" className="btn-cta areas__cta">
              <Icon name="phone" size={18} stroke="#fff"/>
              Ring 74 48 69 94
            </a>
          </div>

        </div>
      </div>

      <style>{`
        .areas { background: #0B1118; padding: var(--section-pad-y) 0; color: #F4F1EC; }
        .areas .eyebrow { color: var(--accent); }
        .areas .eyebrow::before { background: var(--accent); }
        .areas .section-title { color: #F4F1EC; }
        .areas__head { margin-bottom: 48px; max-width: 640px; }

        .areas__body {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 48px;
          align-items: start;
        }

        .areas__right { display: flex; flex-direction: column; }
        .areas__cta { margin-top: 28px; align-self: flex-start; }

        /* City pills */
        .areas__pills-head {
          display: flex; align-items: center; gap: 7px;
          font-family: var(--font-display); font-weight: 600; font-size: 11px;
          letter-spacing: 0.12em; text-transform: uppercase;
          color: rgba(244,241,236,0.45);
          margin-bottom: 16px;
        }
        .areas__pills { display: flex; flex-wrap: wrap; gap: 8px; }
        .city-pill {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-body); font-size: 14px; font-weight: 500;
          color: rgba(244,241,236,0.7);
          background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
          border-radius: 6px; padding: 9px 14px;
          transition: border-color 120ms var(--ease-snappy), background 120ms, color 120ms;
          text-decoration: none;
        }
        .city-pill:hover {
          border-color: var(--accent);
          background: rgba(229,172,49,0.1);
          color: var(--accent);
        }
        .city-pill:hover .city-pill__dot { background: var(--accent); }
        .city-pill__dot {
          width: 6px; height: 6px; border-radius: 999px;
          background: var(--accent); flex-shrink: 0;
          transition: background 120ms;
        }

        /* Map */
        .areas__map-wrap {
          position: relative;
          border-radius: var(--radius-xl);
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.1);
          aspect-ratio: 4/3;
        }
        .areas__map {
          width: 100%; height: 100%;
          border: none; display: block;
        }

        @media (max-width: 960px) {
          .areas__body { grid-template-columns: 1fr; gap: 32px; }
          .areas__map-wrap { aspect-ratio: 16/9; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ServiceArea });