function Service({ onServiceRequest }) {
  const [hover, setHover] = React.useState(null);

  return (
    <section id="serwis" className="svc">
      <div className="container">
        <div className="section-hdr">
          <div className="col">
            <div className="eyebrow" style={{color: "oklch(0.75 0.04 145)"}}>
              <span className="dot"></span>Mobilny serwis kamperów
            </div>
            <h2 className="h2" style={{marginTop: 16}}>
              Twój kamper <em>kaprysi</em>?<br/>Pakujemy narzędzia i jedziemy do Ciebie.
            </h2>
          </div>
          <div className="col">
            <p className="lede">
              Zamiast holować pojazd do warsztatu — to my pakujemy narzędzia i ruszamy do Ciebie.
              Kemping, podjazd przed domem, planowany przegląd przed dłuższą trasą. Szybko i bez stresu.
            </p>
            <button className="btn btn-ember" style={{marginTop: 20}} onClick={onServiceRequest}>
              Zamów serwis <window.Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>

        <div className="svc-list">
          {window.SERVICES.map((s, i) => (
            <div className="svc-item" key={i} onClick={onServiceRequest}
                 onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}>
              <div className="num">{s.n}</div>
              <div>
                <h4>{s.title}</h4>
                <p>{s.desc}</p>
              </div>
              <div className="price">{s.from}</div>
            </div>
          ))}
        </div>

        <div className="svc-regions">
          <div className="svc-regions-label">
            <div className="eyebrow" style={{color: "oklch(0.75 0.04 145)"}}>
              <span className="dot"></span>Zasięg
            </div>
            <p style={{margin: "10px 0 0", fontSize: 15, maxWidth: "32ch", color: "oklch(0.85 0.014 80)"}}>
              Aktualnie obsługujemy 4 województwa na południu Polski.
            </p>
          </div>
          <div className="svc-regions-list">
            {window.REGIONS.map((r, i) => (
              <span className="region-chip" key={i}>
                <window.Icon name="pin" size={14}/>
                {r.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Abstract dot-grid map of Poland's 16 voivodeships
// Service area is 4 regions in south PL: małopolskie, śląskie, świętokrzyskie, podkarpackie
function ServiceMap({ onServiceRequest }) {
  // Each voivodeship as a cluster of dots roughly placed on a 12×10 grid
  const VOIV = {
    "ZP": { name: "zachodniopomorskie", cells: [[1,1],[2,1],[1,2],[2,2],[3,1]] },
    "PM": { name: "pomorskie", cells: [[4,1],[5,1],[6,1],[4,2],[5,2],[6,2]] },
    "WM": { name: "warmińsko-mazurskie", cells: [[7,1],[8,1],[9,1],[10,1],[8,2],[9,2]] },
    "LB": { name: "lubuskie", cells: [[1,3],[2,3],[1,4]] },
    "WP": { name: "wielkopolskie", cells: [[3,3],[4,3],[5,3],[3,4],[4,4],[5,4]] },
    "KP": { name: "kujawsko-pomorskie", cells: [[6,3],[7,3],[6,4]] },
    "MZ": { name: "mazowieckie", cells: [[7,4],[8,3],[8,4],[9,3],[9,4],[10,3],[8,5]] },
    "PD": { name: "podlaskie", cells: [[10,2],[11,2],[10,4],[11,3],[11,4]] },
    "DS": { name: "dolnośląskie", cells: [[2,5],[3,5],[2,6],[3,6],[1,5]], active: false },
    "OP": { name: "opolskie", cells: [[4,5],[4,6]] },
    "LD": { name: "łódzkie", cells: [[5,5],[6,5],[7,5],[6,4]] },
    "LU": { name: "lubelskie", cells: [[9,5],[10,5],[9,6],[10,6],[11,5]] },
    "SL": { name: "śląskie", cells: [[4,7],[5,7],[4,8]], active: true },
    "MA": { name: "małopolskie", cells: [[5,8],[6,8],[5,7],[6,7]], active: true },
    "SK": { name: "świętokrzyskie", cells: [[7,6],[7,7],[8,6]], active: true },
    "PK": { name: "podkarpackie", cells: [[8,7],[9,7],[10,7],[8,8],[9,8]], active: true },
  };

  const cell = 24;
  const dotR = 6;
  const cols = 13, rows = 10;
  const W = cols * cell;
  const H = rows * cell;

  return (
    <div className="map-wrap">
      <div className="map-hdr">
        <div>
          <h4>Zasięg mobilnego serwisu</h4>
          <p style={{margin: "6px 0 0", fontSize: 13, color: "oklch(0.78 0.04 145)"}}>
            Wyjeżdżamy też dalej — po wcześniejszym ustaleniu.
          </p>
        </div>
        <div className="legend">
          <span style={{color: "var(--ember)"}}>●</span> aktywne · 4 wojew.
        </div>
      </div>

      <svg className="map-svg" viewBox={`0 0 ${W} ${H}`} aria-label="Mapa Polski — zasięg serwisu">
        {Object.entries(VOIV).map(([code, v]) => (
          <g key={code}>
            {v.cells.map(([x, y], i) => (
              <circle
                key={i}
                cx={x * cell}
                cy={y * cell}
                r={dotR}
                fill={v.active ? "var(--ember)" : "oklch(0.45 0.03 145)"}
                opacity={v.active ? 1 : 0.55}
              />
            ))}
          </g>
        ))}
        {/* labels for active regions */}
        <g>
          <text x={4.5 * cell} y={7.4 * cell} className="map-label" textAnchor="middle">ŚLĄSKIE</text>
          <text x={5.5 * cell} y={9 * cell} className="map-label" textAnchor="middle">MAŁOPOLSKIE</text>
          <text x={7.5 * cell} y={6.4 * cell} className="map-label" textAnchor="middle">ŚWIĘTOKRZ.</text>
          <text x={9 * cell} y={9 * cell} className="map-label" textAnchor="middle">PODKARPACKIE</text>
        </g>
      </svg>

      <div className="map-legend-list">
        {window.REGIONS.map((r, i) => (
          <span className="chip" key={i}>
            <span className="sw"></span>{r.name}
          </span>
        ))}
      </div>
    </div>
  );
}

window.Service = Service;