function Products({ go }) {
  const { Tag, Card, Button, Badge, Divider } = NS;
  const [filters, setFilters] = React.useState(['Frente al golf']);
  const toggle = (t) => setFilters((f) => f.includes(t) ? f.filter((x) => x !== t) : f.concat(t));
  const all = ['Frente al golf', 'Frente al lago', 'Más de 600 m²', 'Macrolotes', 'Etapa 1'];

  const productos = [
    { media: '../../assets/imagery-course.webp', eyebrow: 'Lotes residenciales', title: 'Fairway Collection', m2: 'Desde 450 m²', body: 'Lotes con frente directo al campo de golf, listos para construir.', tags: ['Frente al golf', 'Etapa 1'] },
    { media: '../../assets/imagery-palm.webp', eyebrow: 'Lotes residenciales', title: 'Lakeside Collection', m2: 'Desde 520 m²', body: 'Frente a los cuerpos de agua, con vegetación nativa preservada.', tags: ['Frente al lago', 'Más de 600 m²'] },
    { media: '../../assets/imagery-villa-dusk.webp', eyebrow: 'Residencias', title: 'Villas de autor', m2: '320 m² construidos', body: 'Residencias terminadas con arquitectura de clima cálido y patios interiores.', tags: ['Etapa 1'] },
    { media: '../../assets/imagery-masterplan-1200.webp', eyebrow: 'Macrolotes', title: 'Macrolotes para inversión', m2: 'Desde 2,400 m²', body: 'Superficies de gran escala para desarrolladores e inversionistas.', tags: ['Macrolotes', 'Más de 600 m²'] },
  ];
  const shown = filters.length ? productos.filter((p) => p.tags.some((t) => filters.includes(t))) : productos;

  return (
    <main>
      <section style={{ paddingBottom: 'var(--space-6)' }}>
        <div className="shell">
          <div className="eyebrow">Productos</div>
          <h1 style={{ fontSize: 'var(--fs-display-2)', margin: 'var(--space-4) 0 var(--space-5)' }}>LOTES Y MACROLOTES</h1>
          <p style={{ maxWidth: '56ch', color: 'var(--text-muted)', margin: 0 }}>
            Cuatro familias de producto dentro del mismo master plan, para vivir o para invertir.
          </p>
        </div>
      </section>

      <div className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginBottom: 'var(--space-6)' }}>
          {all.map((t) => (
            <Tag key={t} selected={filters.includes(t)} onClick={() => toggle(t)} style={{ cursor: 'pointer' }}>{t}</Tag>
          ))}
        </div>
        <Divider />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-6)' }}>
          {shown.map((p) => (
            <Card key={p.title} interactive media={p.media} mediaAlt={p.title} eyebrow={p.eyebrow} title={p.title}
                  footer={
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <Badge tone="available">Disponible</Badge>
                      <Button variant="ghost" onClick={() => go('plan')}>Ver en el plano</Button>
                    </div>
                  }>
              <div style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-display)', marginBottom: 'var(--space-3)' }}>{p.m2}</div>
              {p.body}
            </Card>
          ))}
        </div>
        {shown.length === 0 ? <p style={{ color: 'var(--text-muted)' }}>Ningún producto coincide con los filtros seleccionados.</p> : null}
      </div>

      <section style={{ background: 'var(--surface-accent)' }}>
        <div className="shell" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-7)' }}>
          <div>
            <h2 style={{ fontSize: 'var(--fs-title)', margin: '0 0 var(--space-3)' }}>¿QUIERES CONOCERLO EN PERSONA?</h2>
            <p style={{ margin: 0, color: 'var(--cl-verde-rey)' }}>Recorre el master plan con un asesor de Boma Desarrollos.</p>
          </div>
          <Button onClick={() => go('contacto')} size="lg">Agendar una visita</Button>
        </div>
      </section>
    </main>
  );
}