/* global React, Icon, SectionHead */
const { useState: useStateN } = React;

// ============ ECOSISTEMA — anatomía vertical + planos por nivel ============
const Ecosistema = () => {
  const stack = [
    {
      n: 6, label: 'Nivel 06', role: 'Piso ancla',
      desc: 'Corporativo regional o nacional. Identidad institucional con vista superior hacia el corredor y la costa.',
      tone: 'gold', plan: 'assets/level-6.png',
      sqm: '627+ m² · Planta completa',
      notes: 'Configuración A · A · A · B · C disponible como planta completa para inquilino ancla. Mejor vista del edificio.'
    },
    {
      n: 5, label: 'Nivel 05', role: 'Ejecutivo',
      desc: 'Alta dirección, despachos boutique y oficinas de socios. Altura, vista parcial al mar y privacidad real.',
      tone: 'navy', plan: 'assets/level-5.png',
      sqm: '85 / 120 / 137 m²',
      notes: 'Cinco oficinas con configuración A · A · A · B · C. Vista parcial hacia la costa. Disponible también como planta completa.'
    },
    {
      n: 4, label: 'Nivel 04', role: 'Operativo',
      desc: 'Altura intermedia. Empresas con identidad consolidada que operan sin que el nivel defina su marca.',
      tone: 'navy', plan: 'assets/level-4.png',
      sqm: '85 / 120 / 137 m²',
      notes: 'Altura cómoda alejada del tráfico vehicular y aún con relación visual al corredor.'
    },
    {
      n: 3, label: 'Nivel 03', role: 'Equilibrio',
      desc: 'Punto medio del edificio. Despachos consolidados con flujo regular de visitas.',
      tone: 'navy', plan: 'assets/level-3.png',
      sqm: '85 / 120 / 137 m²',
      notes: 'Configuración tipo A · A · A · B · C con tarifa intermedia. Punto medio entre acceso y altura.'
    },
    {
      n: 2, label: 'Nivel 02', role: 'Profesional',
      desc: 'Dirección premium con tarifa intermedia. Pensado para profesionistas y firmas en consolidación.',
      tone: 'navy', plan: 'assets/level-2.png',
      sqm: '85 / 120 / 137 m²',
      notes: 'Cinco oficinas tipo A · A · A · B · C. Vistas hacia Ruiz Cortines y hacia el patio interior.'
    },
    {
      n: 1, label: 'Nivel 01', role: 'Primer contacto',
      desc: 'Máxima visibilidad para empresas con alto tráfico de visitantes: notarías, despachos con clientela frecuente.',
      tone: 'navy', plan: 'assets/level-2.png',
      sqm: '85 / 120 / 137 m²',
      notes: 'Configuración tipo idéntica al resto de niveles de oficina. Acceso inmediato desde lobby.'
    },
    {
      n: 'PB', label: 'Planta baja', role: 'Comercio + Lobby',
      desc: 'Local comercial de 281.72 m² sobre Ruiz Cortines, doble acceso vehicular y lobby principal con recepción.',
      tone: 'gold', plan: 'assets/level-pb.png',
      sqm: '281.72 m² · Local libre',
      notes: 'Local con doble frente a Ruiz Cortines y Avenida Tiburón. Lobby principal con recepción y núcleo de circulaciones.'
    },
    {
      n: 'S1', label: 'Subterráneo S1', role: 'Soporte operativo',
      desc: 'Estacionamiento privado, cuarto técnico y bodega general. Capacidad asignada por inquilino.',
      tone: 'slate', plan: 'assets/level-s1.png',
      sqm: 'Estacionamiento subterráneo',
      notes: 'Cajones asignados por inquilino con acceso controlado desde Avenida Tiburón.'
    },
  ];

  const [active, setActive] = useStateN(6);
  const toneColor = { gold: '#c8a45c', navy: '#1a3e51', slate: '#576889' };
  const current = stack.find(s => s.n === active);

  return (
    <section className="section ecosistema" id="ecosistema" style={{ background: 'var(--paper)' }}>
      <div className="wrap">
        <SectionHead
          num="03 — Ecosistema"
          eyebrow="Un entorno empresarial Clase A"
          title='Un edificio entendido como <em class="serif-italic">sistema,</em> no como suma de pisos.'
          lead="Cada nivel cumple una función distinta dentro de una misma lógica Clase A. La planta baja activa el corredor con flujo peatonal; los niveles profesionales sostienen la operación diaria; el piso ancla acoge al corporativo que decide ocupar la dirección por completo. Un ecosistema empresarial con inquilinos seleccionados que comparten lobby, servicios y administración — porque la dirección también comunica."
        />

        <div className="eco-shell">
          {/* Stack vertical del edificio */}
          <div className="eco-stack" role="list">
            {stack.map((s, i) => (
              <button
                key={i}
                className={`eco-layer ${active === s.n ? 'is-active' : ''} tone-${s.tone}`}
                onMouseEnter={() => setActive(s.n)}
                onFocus={() => setActive(s.n)}
                onClick={() => setActive(s.n)}
                aria-pressed={active === s.n}
              >
                <span className="eco-layer-n">{s.n}</span>
                <span className="eco-layer-role">{s.role}</span>
                <span className="eco-layer-line"/>
              </button>
            ))}
          </div>

          {/* Visor de plano + detalle del nivel */}
          <div className="eco-viewer">
            <div className="eco-plan">
              <img src={current.plan} alt={`Plano ${current.label}`}/>
              <div className="eco-plan-tag">{current.label}</div>
            </div>
            <aside className="eco-aside">
              <div className="eyebrow" style={{ color: toneColor[current.tone] }}>{current.label}</div>
              <h3 style={{ marginTop: 12, fontSize: 'clamp(24px, 2.2vw, 34px)' }}>{current.role}.</h3>
              <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.6, margin: 0 }}>{current.desc}</p>

              <div className="nv-stat">
                <span className="lbl">Superficie</span>
                <span className="val">{current.sqm}</span>
              </div>

              <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{current.notes}</p>

              <div className="nv-legend">
                <div className="lg-item"><span className="sw sw-a"/> Oficina A · 85 m²</div>
                <div className="lg-item"><span className="sw sw-b"/> Oficina B · 120 m²</div>
                <div className="lg-item"><span className="sw sw-c"/> Oficina C · 137 m²</div>
              </div>

              <a href="#final" className="btn btn--primary" style={{ marginTop: 8 }}>
                Apartar en este nivel <Icon name="arrow" size={14}/>
              </a>
            </aside>
          </div>
        </div>

        {/* Cifras síntesis del ecosistema */}
        <div className="eco-flow">
          <div className="eco-flow-item">
            <div className="num">281.72</div>
            <div className="lbl">m² Local PB</div>
          </div>
          <div className="eco-flow-item">
            <div className="num">6</div>
            <div className="lbl">Niveles oficina</div>
          </div>
          <div className="eco-flow-item">
            <div className="num">627+</div>
            <div className="lbl">m² Planta completa</div>
          </div>
          <div className="eco-flow-item">
            <div className="num">2</div>
            <div className="lbl">Accesos vehiculares</div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Ecosistema = Ecosistema;