// Apartment cards & gallery sections

const { useState: useState2, useEffect: useEffect2 } = React;

// ---------- Apartment cards (overview) ----------
function ApartmentsOverview({ onSelect }) {
  const apts = [window.PHOTOS.apt21, window.PHOTOS.apt26];
  return (
    <section className="apartments" id="apartamentos" data-screen-label="02 Apartments">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Os apartamentos</span>
          <h2>Dois aptos no <em>Edifício Arraia</em></h2>
          <p>Mesma estrutura, mesma vibe família. Pode alugar separados ou juntos — quando a família é grande, dá pra unificar pelas varandas.</p>
        </div>

        <div className="apt-grid">
          {apts.map((apt) => (
            <article className="apt-card" key={apt.slug} onClick={() => onSelect(apt.slug)}>
              <div className="apt-photo">
                <img src={apt.hero} alt={apt.fullName} loading="lazy"/>
                <div className="apt-rating">
                  <Icon name="star" size={14}/> {apt.rating} · {apt.reviewCount} avaliações
                </div>
              </div>
              <div className="apt-body">
                <div className="apt-title">
                  <h3>{apt.name}</h3>
                  <span className="apt-tag">{apt.tagline}</span>
                </div>
                <p className="apt-desc">{apt.description}</p>
                <div className="apt-specs">
                  <span><Icon name="people" size={18}/> {apt.capacity} hóspedes</span>
                  <span><Icon name="door" size={18}/> {apt.bedrooms} quartos</span>
                  <span><Icon name="bed" size={18}/> {apt.beds} camas</span>
                  <span><Icon name="bath" size={18}/> {apt.bathrooms} banheiros</span>
                </div>
                <div className="apt-cta">
                  Ver detalhes e fotos <Icon name="arrow-right" size={18}/>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="combo-banner">
          <div>
            <strong>Família grande?</strong>
            <span>Aluga os dois e une pelas varandas — vira um espaço enorme pra todo mundo.</span>
          </div>
          <a className="btn btn-outline" href="#contato">Consultar combo</a>
        </div>
      </div>
    </section>
  );
}

// ---------- Apartment detail (gallery + rooms + amenities) ----------
function ApartmentDetail({ slug, onBack, onContact }) {
  const apt = window.PHOTOS[slug];
  const [lightbox, setLightbox] = useState2(null);

  if (!apt) return null;

  return (
    <section className="apt-detail" data-screen-label={`03 ${apt.name}`}>
      <div className="container">
        <button className="back-link" onClick={onBack}>
          <Icon name="chevron-left" size={18}/> Voltar
        </button>

        <header className="detail-head">
          <div>
            <span className="eyebrow">{apt.fullName}</span>
            <h2>{apt.name} <span className="thin">— {apt.tagline}</span></h2>
            <div className="detail-meta">
              <span><Icon name="star" size={14}/> {apt.rating} · {apt.reviewCount} avaliações</span>
              <span>·</span>
              <span><Icon name="people" size={16}/> {apt.capacity} hóspedes</span>
              <span>·</span>
              <span><Icon name="door" size={16}/> {apt.bedrooms} quartos</span>
              <span>·</span>
              <span><Icon name="bed" size={16}/> {apt.beds} camas</span>
              <span>·</span>
              <span><Icon name="bath" size={16}/> {apt.bathrooms} banheiros</span>
            </div>
          </div>
          <div className="detail-actions">
            <button className="btn btn-primary" onClick={() => onContact(apt)}>
              <Icon name="whatsapp" size={18}/> Reservar pelo WhatsApp
            </button>
            <a className="btn btn-outline" href={apt.airbnbUrl} target="_blank" rel="noopener">
              Ver no Airbnb <Icon name="arrow-right" size={16}/>
            </a>
          </div>
        </header>

        <div className="gallery-mosaic">
          {apt.gallery.slice(0, 5).map((g, i) => (
            <button
              key={i}
              className={`g-cell g-cell-${i}`}
              onClick={() => setLightbox(i)}
              style={{ backgroundImage: `url(${g.src})` }}
              aria-label={g.label}
            >
              <span className="g-label">{g.label}</span>
            </button>
          ))}
          {apt.gallery.length > 5 && (
            <button className="g-more" onClick={() => setLightbox(0)}>
              +{apt.gallery.length - 5} fotos
            </button>
          )}
        </div>

        <div className="detail-grid">
          <div>
            <h3>Sobre o apartamento</h3>
            <p>{apt.longDescription}</p>

            <h3 style={{marginTop: 36}}>Onde você vai dormir</h3>
            <div className="rooms-grid">
              {apt.rooms.map((r, i) => (
                <div className="room-card" key={i}>
                  <div className="room-photo" style={{ backgroundImage: `url(${r.img})` }}/>
                  <div className="room-info">
                    <strong>{r.name}</strong>
                    <span>{r.detail}</span>
                  </div>
                </div>
              ))}
            </div>

            <h3 style={{marginTop: 36}}>O que esse lugar oferece</h3>
            <div className="amenities-grid">
              {window.AMENITIES.map((a, i) => (
                <div className="amenity" key={i}>
                  <span className="amenity-icon"><Icon name={a.icon} size={22}/></span>
                  <div>
                    <strong>{a.label}</strong>
                    <span>{a.detail}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <aside className="booking-card">
            <div className="bc-rating">
              <Icon name="star" size={16}/>
              <strong>{apt.rating}</strong>
              <span>· {apt.reviewCount} avaliações</span>
            </div>
            <h4>Reserve direto comigo</h4>
            <p>Sem taxas extras de plataforma. Pix, transferência ou cartão.</p>
            <button className="btn btn-primary btn-block" onClick={() => onContact(apt)}>
              <Icon name="whatsapp" size={18}/> Falar pelo WhatsApp
            </button>
            <a className="btn btn-ghost btn-block" href={apt.airbnbUrl} target="_blank" rel="noopener">
              Ou reservar pelo Airbnb
            </a>
            <ul className="bc-list">
              <li><Icon name="check" size={16}/> Check-in: 8h às 20h</li>
              <li><Icon name="check" size={16}/> 2 vagas de garagem</li>
              <li><Icon name="check" size={16}/> Wi-Fi e TV smart</li>
              <li><Icon name="info" size={16}/> Traga roupa de cama, mesa e banho</li>
            </ul>
          </aside>
        </div>
      </div>

      {lightbox !== null && (
        <Lightbox
          images={apt.gallery}
          index={lightbox}
          onClose={() => setLightbox(null)}
          onIndex={setLightbox}
        />
      )}
    </section>
  );
}

// ---------- Lightbox ----------
function Lightbox({ images, index, onIndex, onClose }) {
  useEffect2(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onIndex((index - 1 + images.length) % images.length);
      if (e.key === 'ArrowRight') onIndex((index + 1) % images.length);
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [index, images.length]);

  const img = images[index];
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lb-close" onClick={onClose} aria-label="Fechar"><Icon name="close" size={28}/></button>
      <button className="lb-nav lb-prev" onClick={(e) => { e.stopPropagation(); onIndex((index - 1 + images.length) % images.length); }} aria-label="Anterior">
        <Icon name="chevron-left" size={32}/>
      </button>
      <button className="lb-nav lb-next" onClick={(e) => { e.stopPropagation(); onIndex((index + 1) % images.length); }} aria-label="Próxima">
        <Icon name="chevron-right" size={32}/>
      </button>
      <figure className="lb-frame" onClick={(e) => e.stopPropagation()}>
        <img src={img.src} alt={img.label}/>
        <figcaption>
          <span>{img.label}</span>
          <span className="lb-counter">{index + 1} / {images.length}</span>
        </figcaption>
      </figure>
    </div>
  );
}

window.ApartmentsOverview = ApartmentsOverview;
window.ApartmentDetail = ApartmentDetail;
window.Lightbox = Lightbox;

// ---------- Condomínio (espaços compartilhados) ----------
function Condominio() {
  const [lb, setLb] = useState2(null);
  const c = window.CONDOMINIO;
  return (
    <section className="condominio" id="condominio" data-screen-label="02b Condomínio">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Áreas comuns</span>
          <h2>Edifício Arraia, <em>tranquilo e bem cuidado</em></h2>
          <p>{c.description}</p>
        </div>

        <div className="cond-grid">
          {c.gallery.map((g, i) => (
            <button
              key={i}
              className={`cond-cell cond-cell-${i}`}
              onClick={() => setLb(i)}
              style={{ backgroundImage: `url(${g.src})` }}
              aria-label={g.label}
            >
              <span className="cond-label">{g.label}</span>
            </button>
          ))}
        </div>
      </div>

      {lb !== null && (
        <Lightbox
          images={c.gallery}
          index={lb}
          onClose={() => setLb(null)}
          onIndex={setLb}
        />
      )}
    </section>
  );
}

window.Condominio = Condominio;