const Locations = () => {
  const cities = [
    { name: 'Barranquilla', slug: 'barranquilla', tag: 'Sede principal', hsp: '5,2 HSP/día' },
    { name: 'Puerto Colombia', slug: 'puerto-colombia', tag: 'Cobertura activa', hsp: '5,2 HSP/día' },
    { name: 'Santa Marta', slug: 'santa-marta', tag: 'Cobertura activa', hsp: '5,3 HSP/día' },
    { name: 'Cartagena', slug: 'cartagena', tag: 'Cobertura activa', hsp: '5,0 HSP/día' },
    { name: 'Valledupar', slug: 'valledupar', tag: 'Cobertura activa', hsp: '5,4 HSP/día' },
    { name: 'Montería', slug: 'monteria', tag: 'Cobertura activa', hsp: '5,1 HSP/día' },
    { name: 'Sincelejo', slug: 'sincelejo', tag: 'Cobertura activa', hsp: '5,0 HSP/día' },
    { name: 'Riohacha', slug: 'riohacha', tag: 'Cobertura activa', hsp: '5,5 HSP/día' },
  ];
  return (
    <section id="ubicaciones" className="amp-px amp-py" style={{ padding: '96px 48px', background: '#F4F4F0', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <Eyebrow>Cobertura regional</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 600, color: '#0F3518',
            margin: '16px 0 16px', letterSpacing: '-.01em', textWrap: 'balance' }}>
            Presentes en todo el Caribe colombiano
          </h2>
          <p style={{ color: '#1B5C2C', maxWidth: 560, margin: '0 auto', fontSize: 16 }}>
            Operamos en las principales ciudades de la costa caribe con equipos certificados locales.
          </p>
        </div>
        <div className="amp-g4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
          {cities.map(c => (
            <a key={c.slug} href={`/solar/${c.slug}/`} style={{ textDecoration: 'none', color: 'inherit' }}>
              <Card onClick={() => {}} style={{ padding: 24, height: '100%' }}>
                <Icon name="location_on" size={28} color="#C4A84F" style={{ marginBottom: 16, display: 'block' }}/>
                <h4 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, color: '#0F3518',
                  margin: '0 0 6px' }}>{c.name}</h4>
                <p style={{ margin: 0, fontSize: 12, color: '#1B5C2C', fontWeight: 600 }}>{c.tag} · {c.hsp}</p>
              </Card>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Locations = Locations;