function MasterPlan({ go }) {
  const { Tabs, Switch, Tooltip, Badge, Button, Divider } = NS;
  const [etapa, setEtapa] = React.useState('e1');
  const [showSold, setShowSold] = React.useState(false);
  const [active, setActive] = React.useState(null);

  const lotes = [
    { id: '104', x: 22, y: 30, m2: 512, status: 'available', etapa: 'e1', vista: 'Golf' },
    { id: '118', x: 34, y: 44, m2: 604, status: 'available', etapa: 'e1', vista: 'Lago' },
    { id: '127', x: 46, y: 26, m2: 455, status: 'reserved', etapa: 'e1', vista: 'Golf' },
    { id: '141', x: 58, y: 52, m2: 780, status: 'sold', etapa: 'e1', vista: 'Lago' },
    { id: '205', x: 68, y: 34, m2: 950, status: 'available', etapa: 'e2', vista: 'Golf' },
    { id: '212', x: 78, y: 58, m2: 1240, status: 'reserved', etapa: 'e2', vista: 'Parque' },
    { id: '308', x: 30, y: 66, m2: 2400, status: 'available', etapa: 'e3', vista: 'Macrolote' },
    { id: '314', x: 52, y: 72, m2: 3100, status: 'sold', etapa: 'e3', vista: 'Macrolote' },
  ];
  const dot = { available: 'var(--status-success)', reserved: 'var(--status-warning)', sold: 'var(--status-danger)' };
  const visible = lotes.filter((l) => l.etapa === etapa && (showSold || l.status !== 'sold'));
  const detail = visible.find((l) => l.id === active) || null;

  return (
    <main>
      <section style={{ paddingBottom: 'var(--space-7)' }}>
        <div className="shell">
          <div className="eyebrow">Master plan</div>
          <h1 style={{ fontSize: 'var(--fs-display-2)', margin: 'var(--space-4) 0 var(--space-5)' }}>MÁS DE 1,100 HECTÁREAS</h1>
          <p style={{ maxWidth: '56ch', color: 'var(--text-muted)', margin: 0 }}>
            Cuatro etapas ordenadas alrededor del campo de golf y de los lagos. Selecciona un lote
            para conocer su superficie, vista y disponibilidad.
          </p>
        </div>
      </section>

      <div className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-6)' }}>
          <Tabs value={etapa} onChange={(v) => { setEtapa(v); setActive(null); }} style={{ flex: 1 }}
                items={[{ value: 'e1', label: 'Etapa 1' }, { value: 'e2', label: 'Etapa 2' }, { value: 'e3', label: 'Macrolotes' }, { value: 'e4', label: 'Etapa 4' }]} />
          <div style={{ paddingBottom: 12 }}>
            <Switch checked={showSold} onChange={() => setShowSold(!showSold)} label="Mostrar vendidos" />
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 'var(--space-6)', marginTop: 'var(--space-6)' }}>
          <div style={{ position: 'relative', border: '1px solid var(--line-hairline)', background: 'var(--surface-muted)' }}>
            <img src="../../assets/imagery-masterplan-1200.webp" alt="Plano maestro" style={{ width: '100%', height: 520, objectFit: 'cover', opacity: 0.96 }} />
            {etapa === 'e4' ? (
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(18,38,37,0.55)' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 30, color: 'var(--cl-blanco-perla)' }}>Próximamente</span>
              </div>
            ) : visible.map((l) => (
              <Tooltip key={l.id} content={`Lote ${l.id} · ${l.m2} m²`}
                       style={{ position: 'absolute', left: l.x + '%', top: l.y + '%' }}>
                <button onClick={() => setActive(l.id)} aria-label={'Lote ' + l.id} style={{
                  width: active === l.id ? 22 : 16, height: active === l.id ? 22 : 16,
                  border: '1.5px solid var(--cl-blanco-perla)', borderRadius: '50%',
                  background: dot[l.status], cursor: 'pointer', padding: 0,
                  transition: 'all var(--dur-fast) var(--ease-brand)',
                }} />
              </Tooltip>
            ))}
            <div style={{ position: 'absolute', left: 16, bottom: 16, display: 'flex', gap: 'var(--space-3)' }}>
              <Badge tone="available">Disponible</Badge>
              <Badge tone="reserved">Apartado</Badge>
              {showSold ? <Badge tone="sold">Vendido</Badge> : null}
            </div>
          </div>

          <aside style={{ border: '1px solid var(--line-hairline)', padding: 'var(--space-5)' }}>
            {detail ? (
              <React.Fragment>
                <div className="eyebrow">Lote {detail.id}</div>
                <h3 style={{ fontSize: 'var(--fs-title)', margin: 'var(--space-3) 0 var(--space-5)' }}>{detail.m2} m²</h3>
                <Divider />
                <dl style={{ margin: 'var(--space-5) 0', display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 'var(--space-4)' }}>
                  {[['Vista', detail.vista], ['Etapa', detail.etapa.replace('e', 'Etapa ')], ['Frente', '18 m'], ['Estatus', detail.status === 'available' ? 'Disponible' : detail.status === 'reserved' ? 'Apartado' : 'Vendido']].map(([k, v]) => (
                    <div key={k}>
                      <dt style={{ fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</dt>
                      <dd style={{ margin: 'var(--space-2) 0 0', fontSize: 'var(--fs-body)' }}>{v}</dd>
                    </div>
                  ))}
                </dl>
                <Button fullWidth onClick={() => go('contacto')}>Solicitar información</Button>
              </React.Fragment>
            ) : (
              <div style={{ color: 'var(--text-muted)' }}>
                <div className="eyebrow">Selección</div>
                <p style={{ marginTop: 'var(--space-4)' }}>
                  Elige un punto en el plano para ver la ficha del lote.
                </p>
                <Divider />
                <p style={{ fontSize: 'var(--fs-body-sm)', marginBottom: 0 }}>
                  {visible.length} lotes visibles en esta etapa.
                </p>
              </div>
            )}
          </aside>
        </div>
      </div>
    </main>
  );
}