// Generated websites grid
function WebsitesGrid() {
  const sites = [
    { name: 'Fontanero', kind: 'fontanero' },
    { name: 'Clínica dental', kind: 'dental' },
    { name: 'Abogado', kind: 'abogado' },
    { name: 'Restaurante', kind: 'restaurante' },
    { name: 'Gimnasio', kind: 'gimnasio' },
    { name: 'Inmobiliaria', kind: 'inmobiliaria' },
    { name: 'Cerrajero', kind: 'cerrajero' },
    { name: 'Peluquería', kind: 'peluqueria' },
  ];

  return (
    <section id="webs" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Webs que genera la IA</span>
          <h2 className="pl-display">No son plantillas. <br /><span className="pl-accent-grad">Son webs reales.</span></h2>
          <p>Cada web está hecha con el nombre, logo, dirección, teléfono y fotos reales del negocio.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {sites.map((s, i) => (
            <div key={i} className="pl-website-card" style={{
              background: '#fff',
              border: '1px solid var(--pl-border)',
              borderRadius: 16,
              overflow: 'hidden',
              boxShadow: 'var(--pl-shadow-sm)',
              transition: 'transform .2s, box-shadow .2s',
              cursor: 'default',
            }}>
              {/* fake browser chrome */}
              <div style={{
                height: 26, padding: '0 10px', display: 'flex', alignItems: 'center', gap: 5,
                background: '#f7f5ff', borderBottom: '1px solid var(--pl-border)',
              }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#fb6f6f' }} />
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#fbcb55' }} />
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#5bd97a' }} />
              </div>
              <div style={{ width: '100%', aspectRatio: '400 / 250', overflow: 'hidden', background: '#fafafa', display: 'block' }}>
                <CategoryMockup kind={s.kind} />
              </div>
              <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--pl-ink)' }}>{s.name}</span>
                <span style={{
                  fontSize: 10.5, fontWeight: 800, letterSpacing: '.06em',
                  padding: '3px 8px', borderRadius: 5,
                  background: 'rgba(124,58,237,.10)', color: 'var(--pl-accent-deep)',
                }}>IA · 100%</span>
              </div>
            </div>
          ))}
        </div>

        <style>{`
          .pl-website-card:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow-lg); }
        `}</style>
      </div>
    </section>
  );
}

window.WebsitesGrid = WebsitesGrid;