function Home({ go }) {
  const { Button, Card, Divider, Badge } = NS;
  const amenidades = [
    { eyebrow: 'Golf', title: 'Campo bidimensional', body: 'Un campo único en su tipo en Latinoamérica, diseñado para jugarse en dos configuraciones.', media: '../../assets/imagery-course.webp' },
    { eyebrow: 'Club', title: 'Casa club y wellness', body: 'Alberca, spa, gimnasio y salones para la convivencia de los residentes.', media: '../../assets/imagery-golf-carts.webp' },
    { eyebrow: 'Naturaleza', title: 'Lagos y áreas verdes', body: 'Cuerpos de agua, senderos y vegetación nativa que ordenan todo el master plan.', media: '../../assets/imagery-palm.webp' },
  ];
  return (
    <main>
      <div style={{ position: 'relative', minHeight: 760, display: 'flex', alignItems: 'flex-end', marginTop: -96 }}>
        <img src="../../assets/imagery-family-sunset.webp" alt="Familia al atardecer en Country Lakes"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(18,38,37,0.68) 0%, rgba(18,38,37,0.28) 45%, rgba(18,38,37,0.9) 100%)' }} />
        <div className="shell" style={{ position: 'relative', paddingBottom: 'var(--space-9)' }}>
          <div style={{ maxWidth: 820 }}>
            <div className="eyebrow" style={{ color: 'var(--cl-beige-oscuro)', letterSpacing: 'var(--ls-caps-wide)' }}>Mérida · Yucatán</div>
            <h1 style={{ color: 'var(--cl-blanco-perla)', fontSize: 'var(--fs-display-1)', margin: 'var(--space-5) 0 var(--space-5)', textWrap: 'pretty' }}>
              UNA VIDA DE LUJO<br />EN MEDIO DE LA NATURALEZA
            </h1>
            <p style={{ color: 'var(--text-on-inverse)', fontSize: 'var(--fs-body-lg)', maxWidth: '54ch', margin: '0 0 var(--space-7)' }}>
              Más de 1,100 hectáreas con lotes residenciales, macrolotes para inversionistas,
              amenidades de lujo y un campo de golf único en Latinoamérica.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-4)' }}>
              <Button variant="accent" size="lg" onClick={() => go('contacto')}>Agendar una visita</Button>
              <Button variant="inverse" size="lg" onClick={() => go('plan')}>Ver el master plan</Button>
            </div>
          </div>
        </div>
      </div>

      <section>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div>
            <div className="eyebrow">El proyecto</div>
            <h2 style={{ fontSize: 'var(--fs-display-3)', margin: 'var(--space-4) 0 var(--space-5)' }}>SER UNO CON LA NATURALEZA</h2>
            <p style={{ margin: '0 0 var(--space-4)', maxWidth: '46ch' }}>
              Country Lakes es un espacio para una vida de lujo donde eres uno con la naturaleza,
              perteneciendo a una comunidad exclusiva y única.
            </p>
            <p style={{ margin: '0 0 var(--space-6)', maxWidth: '46ch', color: 'var(--text-muted)' }}>
              Un proyecto ubicado en el estado de Yucatán: la oportunidad de vivir en uno de los mejores
              lugares del mundo por su gran bienestar.
            </p>
            <Button variant="secondary" onClick={() => go('productos')}>Conocer los productos</Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)' }}>
            {[['1,100+', 'hectáreas'], ['18', 'hoyos de golf'], ['450 m²', 'lote desde'], ['4', 'etapas'] ].map(([n, l]) => (
              <div key={l} style={{ borderTop: '1px solid var(--line-hairline)', paddingTop: 'var(--space-4)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 40, color: 'var(--text-display)', lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 'var(--space-2)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--surface-muted)' }}>
        <div className="shell">
          <div style={{ textAlign: 'center', marginBottom: 'var(--space-8)' }}>
            <div className="eyebrow">Amenidades</div>
            <h2 style={{ fontSize: 'var(--fs-display-3)', margin: 'var(--space-4) 0' }}>EXCLUSIVIDAD Y LUJO</h2>
            <p style={{ maxWidth: '58ch', margin: '0 auto', color: 'var(--text-muted)' }}>
              Espacios donde todos los residentes disfrutan de una convivencia inigualable.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--space-5)' }}>
            {amenidades.map((a) => (
              <Card key={a.title} interactive media={a.media} mediaAlt={a.title} eyebrow={a.eyebrow} title={a.title}
                    footer={<Button variant="ghost" onClick={() => go('plan')}>Ver en el plano</Button>}>
                {a.body}
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--cl-verde-rey)' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--cl-beige-oscuro)' }}>Inversión</div>
            <h2 style={{ color: 'var(--cl-blanco-perla)', fontSize: 'var(--fs-display-3)', margin: 'var(--space-4) 0 var(--space-5)' }}>
              MACROLOTES PARA DESARROLLADORES
            </h2>
            <p style={{ color: 'var(--text-on-inverse)', maxWidth: '44ch', margin: '0 0 var(--space-6)' }}>
              Superficies de gran escala dentro del master plan, con infraestructura, accesos y
              vistas al campo de golf y a los lagos.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginBottom: 'var(--space-7)' }}>
              <Badge tone="inverse">Etapa 1 en venta</Badge>
              <Badge tone="inverse">Escrituración inmediata</Badge>
            </div>
            <Button variant="inverse" onClick={() => go('contacto')}>Solicitar el brochure</Button>
          </div>
          <img src="../../assets/imagery-masterplan-1200.webp" alt="Master plan aéreo" style={{ width: '100%' }} />
        </div>
      </section>

      <section>
        <div className="shell" style={{ textAlign: 'center' }}>
          <Divider width="30%" align="center" />
          <blockquote style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'var(--fs-display-3)',
            color: 'var(--text-display)', lineHeight: 1.18, maxWidth: '24ch', margin: 'var(--space-7) auto',
          }}>
            “Un campo de golf bidimensional, único en Latinoamérica.”
          </blockquote>
          <Divider width="30%" align="center" />
        </div>
      </section>
    </main>
  );
}