/* Torre Auro — Office detail (most specific level) */

function OfficeDetail({ floor, office }) {
  const z = ZONES[floor.zone];
  const eco = z.eco || 'corporativo';
  const types = TYPE_META[eco] || {};
  const tk = typeKey(office);
  const meta = types[tk] || {};
  const isAvail = office.ok;
  const acc = z.accHex;

  // siblings on same floor
  const siblings = floor.offices.filter(o => o.code !== office.code);

  return (
    <div className="ofd">
      {/* HERO */}
      <section className="ofd-hero" style={{ background: z.navy || 'var(--navy)' }}>
        <div className={`bg-cover ${floor.bgClass}`} aria-hidden="true" style={{ opacity:.22 }} />
        <div className="ofd-hero-veil" />
        <div className="container ofd-hero-inner">
          <button className="lvl-back" onClick={() => navigate(floor.route)}>
            <Icon n="ti-arrow-left" /> {floor.sh} · {z.tag}
          </button>
          <div className="ofd-hero-grid">
            <div className="ofd-hero-letter" style={{ color: acc }}>{meta.letter}</div>
            <div>
              <div className="ofd-tag" style={{ color: acc, borderColor: acc }}>
                <span style={{width:6,height:6,background:acc,borderRadius:'50%'}} />
                {meta.label} · Tipo {tk}
              </div>
              <h1 className="ofd-code">{office.code}</h1>
              <p className="ofd-tagline">{meta.tagline}</p>
              <div className="ofd-hero-stats">
                <div><span className="k">Superficie</span><span className="v">{office.m2} m²</span></div>
                <div><span className="k">Renta</span><span className="v">{FMT(office.price)}<small>/mes</small></span></div>
                <div><span className="k">Estado</span><span className="v" style={{ color: isAvail ? acc : 'var(--muted-2)' }}>{isAvail ? 'Disponible' : 'Rentado'}</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BODY */}
      <section className="section tight">
        <div className="container">
          <div className="ofd-body">
            {/* LEFT — content */}
            <div className="ofd-main">
              <div className="ofd-block">
                <div className="ofd-block-no">01 · El espacio</div>
                <p className="ofd-lead">{meta.anchorCopy || `Espacio ${meta.label?.toLowerCase()} de ${office.m2} m² en el nivel ${floor.sh}, dentro del ecosistema de ${z.tag.toLowerCase()}.`}</p>
              </div>

              <div className="ofd-block">
                <div className="ofd-block-no">02 · Ideal para</div>
                <ul className="ofd-ideal">
                  {(meta.idealFor || []).map((it, i) => (
                    <li key={i}><span className="no">{pad2(i+1)}</span>{it}</li>
                  ))}
                </ul>
              </div>

              <div className="ofd-block">
                <div className="ofd-block-no">03 · Ficha técnica</div>
                <div className="ofd-spec">
                  <div><span className="k">Tipo</span><span className="v">{meta.label} · {office.type}</span></div>
                  <div><span className="k">Superficie</span><span className="v">{office.m2} m²</span></div>
                  <div><span className="k">Capacidad</span><span className="v">{meta.capacity}</span></div>
                  <div><span className="k">Entrega</span><span className="v">Obra gris</span></div>
                  <div><span className="k">Acondicionamiento</span><span className="v">2–4 meses</span></div>
                  <div><span className="k">Orientación</span><span className="v">Av. Tiburón · Ruiz Cortines</span></div>
                </div>
              </div>

              {floor.planClass && (
                <div className="ofd-block">
                  <div className="ofd-block-no">04 · Ubicación en el plano</div>
                  <figure className="ofd-plan">
                    <div className={`ofd-plan-img ${floor.planClass}`} role="img" aria-label={`Plano ${floor.sh}`} />
                    <figcaption>
                      <span className="ofd-plan-unit" style={{ color: acc }}><Icon n="ti-map-pin" /> {office.code}</span>
                      <span>{office.use} · {office.m2} m²</span>
                    </figcaption>
                  </figure>
                </div>
              )}
            </div>

            {/* RIGHT — sticky action card */}
            <aside className="ofd-aside">
              <div className="ofd-card">
                <div className="ofd-card-price">{FMT(office.price)}<small>/mes</small></div>
                <div className="ofd-card-meta">{office.m2} m² · {meta.label} · obra gris</div>
                <div className={`ofd-card-status ${isAvail ? 'av' : 'ren'}`}>
                  <span className="dot" style={{ background: isAvail ? acc : 'var(--muted-2)' }} />
                  {isAvail ? 'Disponible ahora' : 'Rentado'}
                </div>
                {isAvail ? (
                  <>
                    <button className="btn btn-gold" style={{ width:'100%', justifyContent:'center' }} onClick={() => openChat(floor.id)}>
                      Agendar visita <Icon n="ti-arrow-right" />
                    </button>
                    <button className="btn btn-outline" style={{ width:'100%', justifyContent:'center' }} onClick={() => openProject(floor.id, office.code)}>
                      <Icon n="ti-users" /> Aplicar al proyecto
                    </button>
                    <p className="ofd-card-note">Súmate al proyecto desde tu rol: comercial, proveedor, diseño o embajador.</p>
                  </>
                ) : (
                  <button className="btn btn-outline" style={{ width:'100%', justifyContent:'center' }} onClick={() => navigate(floor.route)}>
                    Ver otras oficinas del nivel
                  </button>
                )}
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* SIBLINGS */}
      <section className="section tight cream">
        <div className="container">
          <div className="section-head" style={{ marginBottom:32 }}>
            <div className="kicker">/ Más espacios en {floor.sh}</div>
          </div>
          <div className="ofd-siblings">
            {siblings.map(o => {
              const m = types[typeKey(o)] || {};
              return (
                <button key={o.code} className={`ofd-sib ${o.ok ? 'av' : 'ren'}`} onClick={() => { navigate(`/${floor.id}/${o.code}`); window.scrollTo({top:0}); }}>
                  <span className="ofd-sib-letter" style={{ color: acc }}>{m.letter}</span>
                  <span className="ofd-sib-code">{o.code}</span>
                  <span className="ofd-sib-meta">{o.m2} m² · {FMT(o.price)}</span>
                  <span className={`ofd-sib-status ${o.ok ? 'av' : 'ren'}`}>{o.ok ? 'Disponible' : 'Rentado'}</span>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { OfficeDetail });