/* VIP page — dedicated, premium dark+gold */

const VIP_FEATURES = [
{ icon: 'users', title: '8 Cabines completas', desc: '4 femininas, 3 masculinas e 1 P.N.E. acessível. Atende eventos de qualquer porte.' },
{ icon: 'fan', title: 'Ambiente climatizado', desc: 'Ar-condicionado em todas as cabines. Conforto térmico independente do clima ou estação.' },
{ icon: 'mirror', title: 'Camarim espelhado', desc: 'Bancada iluminada estilo Hollywood — perfeito para retoques e fotos.' },
{ icon: 'lightbulb', title: 'Iluminação cênica', desc: 'Iluminação interna e externa que valoriza o ambiente e a fachada do trailer.' },
{ icon: 'flower', title: 'Decoração inclusa', desc: 'Arranjos, vasos e composição visual que combinam com a estética do seu evento.' },
{ icon: 'broom', title: 'ASG dedicado', desc: 'Auxiliar de Serviços Gerais durante todo o evento, mantendo o sanitário impecável.' }];


const GALLERY = [
  { id: 'vip-g-large', src: 'photos/vip-int-3.jpg', alt: 'Bancada com pia, espelho e flor decorativa' },
  { id: 'vip-g-2',     src: 'photos/vip-int-1.jpg', alt: 'Cabine com vaso sanitário e barras de apoio' },
  { id: 'vip-g-3',     src: 'photos/vip-int-2.jpg', alt: 'Cabine com trocador de bebê' },
  { id: 'vip-g-4',     src: 'photos/vip-int-4.jpg', alt: 'Detalhe do teto e sistema de ventilação' },
];

function Lightbox({ index, onClose, onPrev, onNext }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowLeft') onPrev();
      else if (e.key === 'ArrowRight') onNext();
    };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [onClose, onPrev, onNext]);

  const photo = GALLERY[index];
  return (
    <div className="lightbox" onClick={onClose} role="dialog" aria-modal="true">
      <button className="lb-btn lb-close" onClick={(e) => { e.stopPropagation(); onClose(); }} aria-label="Fechar">
        <Icon name="close" size={22}/>
      </button>
      <button className="lb-btn lb-prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Anterior">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button className="lb-btn lb-next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Próximo">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </button>
      <figure className="lb-figure" onClick={(e) => e.stopPropagation()}>
        <img src={photo.src} alt={photo.alt} />
        <figcaption>
          <span className="lb-count">{String(index + 1).padStart(2, '0')} / {String(GALLERY.length).padStart(2, '0')}</span>
          <span className="lb-caption">{photo.alt}</span>
        </figcaption>
      </figure>
    </div>
  );
}

function VIP() {
  const [lightboxIdx, setLightboxIdx] = React.useState(null);
  const openLb = (i) => setLightboxIdx(i);
  const closeLb = () => setLightboxIdx(null);
  const prevLb = () => setLightboxIdx((i) => (i - 1 + GALLERY.length) % GALLERY.length);
  const nextLb = () => setLightboxIdx((i) => (i + 1) % GALLERY.length);

  return (
    <main className="vip-page">
      <section className="vip-page-hero">
        <div className="hero-bg">
          <image-slot id="vip-hero-bg" src="photos/vip-trailer-blackgold.jpg" placeholder="Foto hero VIP — fundo"></image-slot>
        </div>
        <div className="container hero-content">
          <div className="crown">Premium · Cód. 010</div>
          <h1>
            Que tal levar<br />
            <span className="gold">o luxo</span><br />
            ao seu evento?
          </h1>
          <p className="lead">
            O Banheiro VIP do Sr. Banheiro é um trailer sanitário premium pensado para
            casamentos, formaturas, festas corporativas e shows. Conforto, decoração e
            atendimento dedicado — uma experiência que seus convidados vão lembrar.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="btn btn-gold" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener"><Icon name="whatsapp" size={16} /> Cotação para Eventos</a>
          </div>
        </div>
      </section>

      {/* Intro premium pitch */}
      <section className="vip-section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// O DETALHE FAZ A FESTA</div>
              <h2 style={{ color: 'var(--white)', marginTop: 16, fontSize: 'clamp(36px, 4.4vw, 64px)' }}>
                Encante e<br />conquiste com<br /><span style={{ color: 'var(--gold)' }}>nosso VIP.</span>
              </h2>
              <p style={{ color: 'var(--gray-400)', marginTop: 24, fontSize: 17, lineHeight: 1.7 }}>
                Pensamos cada detalhe para que o banheiro deixe de ser um problema operacional e vire um ponto de orgulho do seu evento. Trailer climatizado, decoração elegante, iluminação adequada e um ASG dedicado durante toda a operação.
              </p>
              <p style={{ color: 'var(--gray-400)', marginTop: 16, fontSize: 16, lineHeight: 1.7 }}>
                Atendemos casamentos, formaturas, festivais, eventos corporativos, premiações e produções audiovisuais.
              </p>
              <div style={{ marginTop: 36, display: 'flex', gap: 16, alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--gray-500)', textTransform: 'uppercase' }}>Indicado para</span>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {['Casamentos', 'Formaturas', 'Corporativo', 'Festivais', 'Audiovisual'].map((t) =>
                  <span key={t} style={{ padding: '6px 14px', border: '1px solid var(--gray-700)', borderRadius: 999, fontSize: 12, color: 'var(--gray-400)', fontFamily: 'var(--font-mono)', letterSpacing: '.04em' }}>{t}</span>
                  )}
                </div>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', background: 'var(--gray-700)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', height: "605px" }}>
              <image-slot id="vip-feature-photo" src="photos/vip-trailer-blackgold.jpg" placeholder="Foto vertical — VIP" style={{width: '100%', height: '100%'}}></image-slot>
            </div>
          </div>
        </div>
      </section>

      {/* Features grid */}
      <section className="vip-section vip-section-light">
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
            <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// COMPOSIÇÃO DO BANHEIRO VIP</div>
            <h2 style={{ color: 'var(--white)', marginTop: 16, fontSize: 'clamp(36px, 4.4vw, 56px)' }}>O que está incluso</h2>
          </div>
          <div className="vip-features">
            {VIP_FEATURES.map((f) =>
            <div key={f.title} className="vip-feature">
                <div className="icon"><Icon name={f.icon} size={22} /></div>
                <h3>{f.title}</h3>
                <p className="desc">{f.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="vip-section">
        <div className="container">
          <div className="section-head">
            <div className="title-block">
              <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// DETALHES</div>
              <h2 style={{ color: 'var(--white)', marginTop: 12, fontSize: 'clamp(32px, 3.6vw, 48px)' }}>Por dentro do trailer</h2>
            </div>
            <p style={{ maxWidth: 380, color: 'var(--gray-400)', fontSize: 15 }}>
              Acabamento de alto padrão, ambiente climatizado e composição cuidadosa para um evento memorável.
            </p>
          </div>
          <div className="vip-gallery">
            {GALLERY.map((g, i) => (
              <div
                key={g.id}
                className={`slot ${i === 0 ? 'large' : `s${i + 1}`}`}
                onClick={() => openLb(i)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLb(i); } }}
                aria-label={`Ampliar foto: ${g.alt}`}
              >
                <image-slot id={g.id} src={g.src} placeholder={g.alt}></image-slot>
                <span className="zoom-badge"><Icon name="plus" size={16}/></span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Specs strip */}
      <section className="vip-section vip-section-light">
        <div className="container">
          <div className="section-head">
            <div className="title-block">
              <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// ESPECIFICAÇÕES</div>
              <h2 style={{ color: 'var(--white)', marginTop: 12, fontSize: 'clamp(32px, 3.6vw, 48px)' }}>Ficha técnica</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--gray-700)', border: '1px solid var(--gray-700)' }}>
            {[
            ['Configuração', '8 cabines (4F + 3M + 1 PNE)'],
            ['Climatização', 'Ar-condicionado split em cada cabine'],
            ['Iluminação', 'Interna LED + externa cênica'],
            ['Camarim', 'Bancada com espelho iluminado'],
            ['Equipe', '1 Auxiliar de Serviços Gerais (ASG)'],
            ['Decoração', 'Vasos, arranjos e composição inclusa'],
            ['Acesso', 'Escada com corrimão + carpete'],
            ['Tempo de montagem', '2 horas (ideal)']].
            map(([label, value]) =>
            <div key={label} style={{ background: 'var(--ink)', padding: '28px 24px' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gray-500)' }}>// {label}</div>
                <div style={{ marginTop: 12, color: 'var(--white)', fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16, lineHeight: 1.35 }}>{value}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Compact 2-cabin VIP model */}
      <section className="vip-section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="vip-compact-grid">
            <div className="vip-compact-media">
              <div className="vip-compact-main">
                <image-slot id="vip-compact-1" src="photos/vip-compact-1.jpg" placeholder="VIP compacto — fachada" style={{ width: '100%', height: '100%' }}></image-slot>
              </div>
              <div className="vip-compact-thumb">
                <image-slot id="vip-compact-3" src="photos/vip-compact-3.jpg" placeholder="VIP compacto — vista frontal" style={{ width: '100%', height: '100%' }}></image-slot>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// MODELO COMPACTO</div>
              <h2 style={{ color: 'var(--white)', marginTop: 16, fontSize: 'clamp(36px, 4.4vw, 60px)' }}>
                VIP <span style={{ color: 'var(--gold)' }}>2 cabines</span><br />o mesmo luxo,<br />tamanho reduzido.
              </h2>
              <p style={{ color: 'var(--gray-400)', marginTop: 24, fontSize: 17, lineHeight: 1.7 }}>
                Para eventos menores ou espaços mais compactos, o VIP de 2 cabines (1 feminina + 1 masculina)
                entrega exatamente o mesmo acabamento art déco preto e dourado, climatização e atendimento
                dedicado do nosso trailer maior — em um formato que cabe em qualquer lugar.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--gray-700)', border: '1px solid var(--gray-700)', marginTop: 32 }}>
                {[
                  ['Configuração', '2 cabines (1F + 1M)'],
                  ['Climatização', 'Ambiente climatizado'],
                  ['Acabamento', 'Art déco preto e dourado'],
                  ['Ideal para', 'Eventos íntimos e espaços reduzidos']
                ].map(([label, value]) =>
                  <div key={label} style={{ background: 'var(--ink)', padding: '22px 20px' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gray-500)' }}>// {label}</div>
                    <div style={{ marginTop: 10, color: 'var(--white)', fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15, lineHeight: 1.35 }}>{value}</div>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 32 }}>
                <a className="btn btn-gold" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener"><Icon name="whatsapp" size={16} /> Cotação VIP 2 cabines</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA premium */}
      <section className="vip-section vip-section-light" style={{ paddingBottom: 120, textAlign: 'center' }}>
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--gold-bright)' }}>// VAMOS CONVERSAR</div>
          <h2 style={{ color: 'var(--white)', marginTop: 20, fontSize: 'clamp(40px, 5vw, 80px)' }}>
            Seu evento merece<br /><span style={{
              background: 'linear-gradient(180deg, var(--gold-bright), var(--gold), var(--gold-deep))',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent'
            }}>o melhor banheiro.</span>
          </h2>
          <p style={{ color: 'var(--gray-400)', maxWidth: 560, margin: '24px auto 36px', fontSize: 17 }}>
            Solicite uma proposta personalizada para o seu evento. Respondemos em até 1 hora útil com disponibilidade e cotação.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a className="btn btn-gold" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener"><Icon name="whatsapp" size={16} /> Solicitar cotação VIP</a>
          </div>
        </div>
      </section>

      {lightboxIdx !== null && (
        <Lightbox index={lightboxIdx} onClose={closeLb} onPrev={prevLb} onNext={nextLb} />
      )}
    </main>);

}

window.VIP = VIP;