const { SectionHeading, Tag } = window.CerrajerosLaSaforDesignSystem_88370e;

const TOWNS = ['Gandía','Oliva','Tavernes de la Valldigna','Beniflá','Xeraco','Cullera','Beniarjó','Palmera','Piles','Miramar','Real de Gandía','Bellreguard','Daimús','Guardamar de la Safor',"L'Alqueria de la Comtessa"];

function SiteCoverage({ onNav }) {
  return (
    <section id="cobertura" className="section-y" style={{ background: 'var(--stone-2)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--space-10)', alignItems: 'start' }} className="cov-grid">
          <div>
            <SectionHeading eyebrow="Dónde llegamos" title="Toda la comarca de La Safor" size="md" />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: '38ch', margin: 'var(--space-5) 0 0' }}>
              Si vives en alguno de estos municipios, estamos a menos de 30 minutos de ti.
            </p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
            {TOWNS.map((t) => <Tag key={t}>{t}</Tag>)}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteCoverage });