function ServiceAreas() {
  const broward = [
    { name: "Fort Lauderdale", href: "areas/fort-lauderdale.html" },
    { name: "Plantation",      href: "areas/plantation.html" },
    { name: "Weston",          href: "areas/weston.html" },
    { name: "Davie",           href: "areas/davie.html" },
  ];
  const dade = [
    { name: "Aventura",     href: "areas/aventura.html" },
    { name: "Miami",        href: "areas/miami.html" },
    { name: "Coral Gables", href: "areas/coral-gables.html" },
    { name: "Pinecrest",    href: "areas/pinecrest.html" },
  ];
  const palm = [
    { name: "Boca Raton",       href: "areas/boca-raton.html" },
    { name: "Delray Beach",     href: "areas/delray-beach.html" },
    { name: "West Palm Beach",  href: "areas/west-palm-beach.html" },
    { name: "Jupiter",          href: "areas/jupiter.html" },
  ];

  return (
    <section className="vp-section paper vp-areas-home" id="service-areas">
      <div className="vp-section-head">
        <div className="eyebrow">Where We Build</div>
        <h2>Service <span className="vp-underlined">Areas</span></h2>
        <p className="sub">Proudly serving homeowners across Broward, Miami-Dade, and Palm Beach, from Coral Gables to Boca Raton, Fort Lauderdale, and everywhere between.</p>
      </div>

      <div className="vp-areas-split">
        <div className="vp-areas-map-wrap">
          <iframe
            className="vp-areas-map"
            title="Victory Pro Deck Builders service area, South Florida"
            src="https://www.google.com/maps?q=Miami-Dade+County,+FL&t=&z=9&ie=UTF8&iwloc=&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen
          />
          <div className="vp-areas-map-badge">
            <span className="vp-areas-map-dot" aria-hidden="true" />
            Broward · Miami-Dade · Palm Beach
          </div>
        </div>

        <div className="vp-areas-list">
          <div className="vp-areas-county">
            <div className="vp-areas-county-label">Broward County</div>
            <ul className="vp-areas-chips">
              {broward.map((a, i) => (
                <li key={i}>
                  <a className="vp-area-chip" href={a.href}>
                    <span className="vp-area-marker" aria-hidden="true">
                      <svg width="12" height="14" viewBox="0 0 12 14" fill="none"><path d="M6 0C2.7 0 0 2.7 0 6c0 4.5 6 8 6 8s6-3.5 6-8c0-3.3-2.7-6-6-6zm0 8.2A2.2 2.2 0 116 3.8a2.2 2.2 0 010 4.4z" fill="currentColor"/></svg>
                    </span>
                    {a.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          <div className="vp-areas-county">
            <div className="vp-areas-county-label">Miami-Dade County</div>
            <ul className="vp-areas-chips">
              {dade.map((a, i) => (
                <li key={i}>
                  <a className="vp-area-chip" href={a.href}>
                    <span className="vp-area-marker" aria-hidden="true">
                      <svg width="12" height="14" viewBox="0 0 12 14" fill="none"><path d="M6 0C2.7 0 0 2.7 0 6c0 4.5 6 8 6 8s6-3.5 6-8c0-3.3-2.7-6-6-6zm0 8.2A2.2 2.2 0 116 3.8a2.2 2.2 0 010 4.4z" fill="currentColor"/></svg>
                    </span>
                    {a.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          <div className="vp-areas-county">
            <div className="vp-areas-county-label">Palm Beach County</div>
            <ul className="vp-areas-chips">
              {palm.map((a, i) => (
                <li key={i}>
                  <a className="vp-area-chip" href={a.href}>
                    <span className="vp-area-marker" aria-hidden="true">
                      <svg width="12" height="14" viewBox="0 0 12 14" fill="none"><path d="M6 0C2.7 0 0 2.7 0 6c0 4.5 6 8 6 8s6-3.5 6-8c0-3.3-2.7-6-6-6zm0 8.2A2.2 2.2 0 116 3.8a2.2 2.2 0 010 4.4z" fill="currentColor"/></svg>
                    </span>
                    {a.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <a href="service-areas.html" className="vp-areas-list-cta">
            View all service areas <Icon.ArrowRight size={14} />
          </a>
        </div>
      </div>
    </section>
  );
}

window.ServiceAreas = ServiceAreas;