/**
 * coverage.jsx — "Cobertura": town pills for every area served.
 * Doubles as local-SEO keyword density for town names.
 */

function Coverage() {
  const { t } = useLang();

  return (
    <section className="section coverage" id="cobertura" data-screen-label="Cobertura">
      <div className="container">
        <SectionHead
          center
          kicker={t.coverage.kicker}
          title={t.coverage.title}
          lead={t.coverage.lead}
        />

        <div className="coverage__grid reveal">
          {t.coverage.towns.map((town, i) => (
            <span className="coverage-pill" key={town} style={{ "--s": i }}>
              {town}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Coverage });