/* Catálogo page — full product line */

const CAT_SANITARIAS = [
  { cod: 'CÓD 001', name: 'Refil', photo: 'photos/m-refil.jpg',
    desc: 'Cabine sanitária básica para apoio rápido.',
    features: ['Cuba removível']
  },
  { cod: 'CÓD 002', name: 'Standard', photo: 'photos/m-standard.jpg',
    desc: 'Modelo essencial para canteiros de obra.',
    features: ['Caixa de dejetos com assento', 'Porta papel higiênico', 'Porta objetos', 'Duto de respiro 4"', 'Piso antiderrapante', 'Teto translúcido', 'Mictório']
  },
  { cod: 'CÓD 003', name: 'Luxo', photo: 'photos/m-luxo.jpg',
    desc: 'Conforto extra com descarga por pedal.',
    features: ['Caixa de dejetos com descarga', 'Acionamento por pedal', 'Mictório', 'Porta papel higiênico', 'Porta objetos']
  },
  { cod: 'CÓD 004', name: 'Super Luxo', photo: 'photos/m-superluxo.jpg',
    desc: 'Cabine completa com pia e água limpa.',
    features: ['Descarga por pedal', 'Porta papel higiênico', 'Pia com reservatório', 'Porta sabonete líquido', 'Porta papel toalha']
  },
  { cod: 'CÓD 005', name: 'P.N.E. (Acessível)', photo: 'photos/m-pne.jpg',
    desc: 'Acessibilidade total — Rampa + corrimão.',
    features: ['Rampa de acesso', 'Corrimão próximo ao assento', 'Porta papel higiênico carregado', 'Grades de ventilação', 'Duto de respiro']
  },
];

const CAT_HIDRAULICAS = [
  { cod: 'CÓD 006', name: 'Cabine Banheiro Hidráulico', photo: 'photos/cabine-hidraulica-006.jpg',
    desc: 'Cabine ligada à rede de água e esgoto local.',
    features: ['Vaso sanitário', 'Caixa de descarga', 'Lavatório']
  },
  { cod: 'CÓD 007', name: 'Chuveiro', photo: 'photos/chuveiro.jpg',
    desc: 'Cabine de chuveiro móvel para canteiros e eventos.',
    features: ['Chuveiro', 'Chão antiderrapante', 'Saída de água com ralo']
  },
];

const CAT_ESTRUTURAS = [
  { cod: 'CÓD 008', name: 'Container', photo: 'photos/container-008.jpg',
    photos: ['photos/container-008.jpg', 'photos/container-008b.jpg'],
    desc: 'Container desmontável para depósito, escritório ou apoio de obra.',
    features: ['Teto com telha', 'Segurança com pontos para cadeado', 'Paredes de chapa de aço pintada', 'Piso em compensado naval', 'Com ou sem janelas']
  },
  { cod: 'CÓD 009', name: 'Grades', photo: 'photos/grades-009.jpg',
    desc: 'Grades metálicas para isolamento e organização de fluxo.',
    features: ['Separação de ambiente', 'Organização de fila', 'Isolamento de segurança', 'Demarcação de locais']
  },
];

function CardCarousel({ item }) {
  const photos = item.photos || [item.photo];
  const [idx, setIdx] = React.useState(0);
  const n = photos.length;
  const touch = React.useRef(null);
  const go = (i) => setIdx((i + n) % n);
  const onTouchStart = (e) => { touch.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? idx + 1 : idx - 1);
    touch.current = null;
  };
  const baseId = `cat-${item.cod.replace(/\s/g, '')}`;
  return (
    <div
      className="card-carousel"
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      aria-roledescription="carrossel"
    >
      <div className="cc-track">
        {photos.map((src, i) => (
          <div key={i} className={`cc-slide ${i === idx ? 'active' : ''}`} aria-hidden={i !== idx}>
            <image-slot id={n > 1 ? `${baseId}-${i}` : baseId} src={src} placeholder={`Foto ${item.name}`}></image-slot>
          </div>
        ))}
      </div>
      {n > 1 && (
        <React.Fragment>
          <button className="cc-arrow cc-prev" onClick={(e) => { e.stopPropagation(); go(idx - 1); }} aria-label="Foto anterior">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button className="cc-arrow cc-next" onClick={(e) => { e.stopPropagation(); go(idx + 1); }} aria-label="Próxima foto">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
          </button>
          <div className="cc-dots">
            {photos.map((_, i) => (
              <button
                key={i}
                className={`cc-dot ${i === idx ? 'on' : ''}`}
                onClick={(e) => { e.stopPropagation(); go(i); }}
                aria-label={`Ir para foto ${i + 1}`}
              ></button>
            ))}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function CatalogCard({ item }) {
  return (
    <article className="model-card">
      <div className="photo-wrap">
        <CardCarousel item={item} />
        <span className="cod">{item.cod}</span>
      </div>
      <div className="body">
        <h3>{item.name}</h3>
        <p style={{color: 'var(--gray-700)', fontSize: 14, marginTop: 8}}>{item.desc}</p>
        <ul className="features">
          {item.features.map(f => <li key={f}>{f}</li>)}
        </ul>
      </div>
    </article>
  );
}

function CatalogSection({ pill, title, subtitle, items }) {
  return (
    <section className="catalog-section">
      <div className="container">
        <div className="catalog-header">
          <div>
            <span className="pill">{pill}</span>
            <h2 style={{marginTop: 10, fontSize: 'clamp(32px, 4vw, 56px)'}}>{title}</h2>
            {subtitle && <p style={{marginTop: 14, color: 'var(--gray-700)', fontSize: 16, maxWidth: 560}}>{subtitle}</p>}
          </div>
        </div>
        <div className="models-grid">
          {items.map(it => <CatalogCard key={it.cod} item={it} />)}
        </div>
      </div>
    </section>
  );
}

function Catalogo() {
  return (
    <main>
      <section className="page-hero">
        <div className="yellow-wedge"></div>
        <div className="container" style={{position: 'relative'}}>
          <div className="crumb">// Início › Banheiros Químicos</div>
          <h1>Catálogo<br/>de produtos<br/><span style={{color: 'var(--yellow)'}}>2026.</span></h1>
          <p className="lead">
            Linha sanitária completa, soluções hidráulicas e estruturas temporárias. Todas as cabines passam por higienização de 72h com produto antiviral antes da entrega.
          </p>
          <div style={{marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
            <a className="btn btn-yellow" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener">Solicitar Orçamento <Icon name="arrow-right" size={16}/></a>
            <a className="btn btn-outline-light" href="#/vip">Ver Banheiro VIP</a>
          </div>
        </div>
      </section>

      <CatalogSection
        pill="// LINHA SANITÁRIA · 5 MODELOS"
        title="Linha Sanitária"
        subtitle="Do modelo Standard de canteiro à versão Super Luxo com pia. Cabines em polietileno de alta densidade, resistentes a impacto e raios UV."
        items={CAT_SANITARIAS}
      />

      <CatalogSection
        pill="// LINHA HIDRÁULICA · 2 MODELOS"
        title="Linha Hidráulica"
        subtitle="Cabines ligadas à rede de água e esgoto local. Indicadas para canteiros de obra de longa duração e eventos com infraestrutura."
        items={CAT_HIDRAULICAS}
      />

      <CatalogSection
        pill="// ESTRUTURAS TEMPORÁRIAS · 2 ITENS"
        title="Estruturas Temporárias"
        subtitle="Containers desmontáveis e grades metálicas para isolamento, fila e demarcação de áreas."
        items={CAT_ESTRUTURAS}
      />

      {/* VIP teaser */}
      <section className="section bg-white">
        <div className="container">
          <div className="vip-block">
            <div className="grid">
              <div className="copy">
                <span className="premium-tag">★ Premium · Cód. 010</span>
                <h2>O <span className="gold">Banheiro VIP</span><br/>tem página exclusiva.</h2>
                <p>Trailer climatizado com 8 cabines, camarim, decoração inclusa e ASG dedicado. Indicado para casamentos, festivais e eventos corporativos.</p>
                <a className="btn btn-gold" href="#/vip">Conhecer Banheiro VIP <Icon name="arrow-up-right" size={16}/></a>
              </div>
              <div className="photo">
                <image-slot id="cat-vip-teaser" src="photos/vip-trailer-blackgold.jpg" placeholder="Foto VIP"></image-slot>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-strip">
        <div className="container">
          <div>
            <div className="eyebrow" style={{color: 'var(--ink)'}}>// PRÓXIMO PASSO</div>
            <h2 style={{marginTop: 12}}>Conte pra gente<br/>o que você precisa.</h2>
            <p style={{marginTop: 16, fontSize: 17, maxWidth: 480}}>
              Receba uma cotação em até 1 hora útil com disponibilidade e prazo de entrega.
            </p>
          </div>
          <div className="actions">
            <a className="btn btn-primary" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener"><Icon name="whatsapp" size={16}/> Faça seu Orçamento</a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Catalogo = Catalogo;