/* Home page */

const MODELOS = [
  {
    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', 'Mictório', 'Duto de respiro 4"', 'Piso antiderrapante']
  },
  {
    cod: 'CÓD 003',
    name: 'Luxo',
    photo: 'photos/m-luxo.jpg',
    desc: 'Conforto extra com acionamento 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: ['Pia com reservatório', 'Descarga por pedal', 'Porta-papel higiênico', '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 para cadeirantes.',
    features: ['Rampa de acesso', 'Corrimão próximo ao assento', 'Grades de ventilação', 'Duto de respiro', 'Porta-papel higiênico']
  },
];

const SERVICES = [
  { num: '01', icon: 'cube', title: 'Linha Sanitária', desc: '5 modelos — do Standard ao P.N.E. acessível.', href: '#/catalogo' },
  { num: '02', icon: 'droplet', title: 'Linha Hidráulica', desc: 'Cabines hidráulicas e chuveiros móveis.', href: '#/catalogo' },
  { num: '03', icon: 'fence', title: 'Estruturas', desc: 'Containers, guaritas, grades e tendas.', href: '#/catalogo' },
  { num: '04', icon: 'crown', title: 'Banheiro VIP', desc: 'Trailer premium climatizado para eventos.', href: '#/vip' },
];

const LICENSES = [
  { name: 'IBAMA / MMA', logo: 'photos/lic-ibama.png', desc: 'Cadastro Técnico Federal de Atividades Potencialmente Poluidoras junto ao IBAMA / Ministério do Meio Ambiente.', meta: 'FEDERAL · AMBIENTAL' },
  { name: 'ANTT', logo: 'photos/lic-antt.png', desc: 'Agência Nacional de Transportes Terrestres — habilitação para transporte de resíduos sanitários.', meta: 'FEDERAL · TRANSPORTE' },
  { name: 'INEA-RJ', logo: 'photos/lic-inea.png', desc: 'Instituto Estadual do Ambiente — licença para coleta, transporte e destinação de resíduos no estado do RJ.', meta: 'ESTADUAL · AMBIENTAL' },
  { name: 'ANVISA', logo: 'photos/lic-anvisa.png', desc: 'Agência Nacional de Vigilância Sanitária — operação dentro dos padrões sanitários exigidos por lei.', meta: 'FEDERAL · SANITÁRIO' },
];

const CLIENTS = ['CYRELA', 'EVEN', 'DIRECIONAL', 'SESC', 'PARKSHOPPING', 'AUTONOMY', 'RIO PAX', 'CYRELA', 'EVEN', 'DIRECIONAL', 'SESC', 'PARKSHOPPING'];

function Home({ heroVariant = 'A' }) {
  return (
    <main>
      {heroVariant === 'A' && <HeroA/>}
      {heroVariant === 'B' && <HeroB/>}
      {heroVariant === 'C' && <HeroC/>}

      {/* Stats strip */}
      <section className="container">
        <div className="stats-strip">
          <div className="stat">
            <div className="stat-num">+15</div>
            <div className="stat-label">Anos de Mercado</div>
          </div>
          <div className="stat">
            <div className="stat-num">+500</div>
            <div className="stat-label">Unidades Locadas</div>
          </div>
          <div className="stat">
            <div className="stat-num">72h</div>
            <div className="stat-label">Higienização Antiviral</div>
          </div>
          <div className="stat">
            <div className="stat-num">100%</div>
            <div className="stat-label">Licenciados</div>
          </div>
        </div>
      </section>

      {/* Serviços (4 colunas) */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="title-block">
              <div className="eyebrow">// O QUE LOCAMOS</div>
              <h2>Soluções móveis<br/>para obras, eventos<br/>e operações.</h2>
            </div>
            <p style={{maxWidth: 360, color: 'var(--gray-700)', fontSize: 16}}>
              Banheiros químicos, chuveiros, containers e estruturas temporárias.
              Atendimento em todo o Rio de Janeiro com entrega e higienização inclusas.
            </p>
          </div>
          <div className="service-grid">
            {SERVICES.map(s => (
              <a key={s.num} href={s.href} className="service-cell">
                <div>
                  <div className="num">{s.num} / 04</div>
                  <h3 style={{marginTop: 18}}>{s.title}</h3>
                  <p className="desc">{s.desc}</p>
                </div>
                <div className="arrow-link">Ver linha →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Modelos */}
      <section className="section bg-white">
        <div className="container">
          <div className="section-head">
            <div className="title-block">
              <div className="eyebrow">// LINHA SANITÁRIA</div>
              <h2>Qual modelo<br/>combina com sua operação?</h2>
            </div>
            <a className="btn btn-primary" href="#/catalogo">Catálogo completo <Icon name="arrow-right" size={16}/></a>
          </div>
          <div className="models-grid">
            {MODELOS.map(m => (
              <article key={m.cod} className="model-card">
                <div className="photo-wrap">
                  <image-slot id={`home-${m.name.toLowerCase().replace(/\s|\./g,'-')}`} src={m.photo} placeholder={`Foto ${m.name}`}></image-slot>
                  <span className="cod">{m.cod}</span>
                </div>
                <div className="body">
                  <h3>{m.name}</h3>
                  <p className="text-muted" style={{fontSize: 13, marginTop: 6}}>{m.desc}</p>
                  <ul className="features">
                    {m.features.slice(0, 3).map(f => <li key={f}>{f}</li>)}
                  </ul>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Quem Somos teaser */}
      <section className="section">
        <div className="container">
          <div className="about-grid">
            <div className="photo-block">
              <image-slot id="home-about" src="photos/home-about.webp" placeholder="Foto da equipe ou pátio de banheiros — substituir"></image-slot>
            </div>
            <div>
              <div className="eyebrow">// QUEM SOMOS</div>
              <h2 style={{marginTop: 16}}>Pontualidade,<br/>qualidade e<br/>respeito ao ambiente.</h2>
              <p style={{marginTop: 24, color: 'var(--gray-700)', fontSize: 17, lineHeight: 1.6}}>
                Somos uma empresa especializada em soluções móveis. Locamos banheiros químicos, chuveiros, tendas, containers desmontáveis e guaritas — e também prestamos serviços de esgotamento sanitário de fossas.
              </p>
              <p style={{marginTop: 16, color: 'var(--gray-700)'}}>
                Nossa operação é reconhecida pela rigidez no controle de qualidade e na regularidade. Atuamos sempre dentro dos padrões da legalidade e das boas práticas, respeitando o meio ambiente.
              </p>
              <div style={{marginTop: 36, display: 'flex', gap: 12}}>
                <a className="btn btn-primary" href="#/catalogo">Ver nossos serviços <Icon name="arrow-right" size={16}/></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* VIP Block */}
      <section className="section bg-white">
        <div className="container">
          <div className="vip-block">
            <div className="grid">
              <div className="copy">
                <span className="premium-tag">★ Premium ★ Para eventos</span>
                <h2>Que tal levar<br/><span className="gold">o luxo</span> para<br/>o seu evento?</h2>
                <p>Banheiro VIP climatizado com 8 cabines, camarim, decoração, iluminação e Auxiliar de Serviços Gerais. O sanitário que encanta seus convidados.</p>
                <ul className="features-mini">
                  <li>8 cabines (4F + 3M + 1 PNE)</li>
                  <li>Ambiente climatizado</li>
                  <li>Camarim espelhado</li>
                  <li>Iluminação cênica</li>
                  <li>Decoração inclusa</li>
                  <li>ASG dedicado</li>
                </ul>
                <a className="btn btn-gold" href="#/vip">Ver Banheiro VIP <Icon name="arrow-up-right" size={16}/></a>
              </div>
              <div className="photo">
                <image-slot id="home-vip" src="photos/vip-trailer-blackgold.jpg" placeholder="Foto Banheiro VIP"></image-slot>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Licenças */}
      <section className="licenses">
        <div className="container">
          <div className="section-head">
            <div className="title-block">
              <div className="eyebrow eyebrow-dark">// LICENÇAS &amp; CERTIFICAÇÕES</div>
              <h2 style={{color: 'var(--white)', marginTop: 12}}>Operamos<br/>dentro da norma.</h2>
            </div>
            <p style={{maxWidth: 380, color: 'var(--gray-400)', fontSize: 15}}>
              Todas as nossas operações têm respaldo legal e certificações ambientais.
              Documentação atualizada disponível para fiscalização e contratos.
            </p>
          </div>
          <div className="licenses-grid licenses-grid-logos">
            {LICENSES.map(lic => (
              <div key={lic.name} className="license-card license-card-logo">
                <div className="logo-wrap">
                  <img src={lic.logo} alt={lic.name} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Clientes */}
      <section>
        <div className="container" style={{paddingTop: 64, paddingBottom: 24}}>
          <div className="eyebrow">// QUEM CONFIA</div>
          <h3 style={{marginTop: 12, fontSize: 28}}>Marcas que já alugaram com a gente</h3>
        </div>
        <div className="clients-marquee">
          <div className="clients-strip">
            {CLIENTS.concat(CLIENTS).map((c, i) => (
              <span key={i} className="client-logo">{c}</span>
            ))}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section className="cta-strip">
        <div className="container">
          <div>
            <div className="eyebrow" style={{color: 'var(--ink)'}}>// PRÓXIMO PASSO</div>
            <h2 style={{marginTop: 12}}>Pronto pra<br/>locar com a gente?</h2>
            <p style={{marginTop: 16, fontSize: 17, maxWidth: 480}}>
              Receba uma cotação em até 1 hora útil. Entrega e higienização inclusas, atendimento em toda região metropolitana do Rio.
            </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>
  );
}

/* ──────── Hero variants ──────── */

function HeroA() {
  return (
    <section className="hero-a">
      <div className="hero-a-bg"></div>
      <div className="hero-a-overlay"></div>
      <div className="container">
        <div className="hero-a-copy">
          <div className="eyebrow">// SR. BANHEIRO — RIO DE JANEIRO</div>
          <h1 className="display-title">
            Banheiros<br/>
            químicos<br/>
            <span className="yellow-strike">PARA OBRA</span><br/>
            ou evento.
          </h1>
          <p className="lead">
            Locação rápida, higienização de 72h e a frota mais bem cuidada do RJ.
            Standard, Luxo, Super Luxo, P.N.E. e o nosso VIP premium.
          </p>
          <div className="hero-a-cta">
            <a className="btn btn-primary" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener">Faça seu Orçamento <Icon name="arrow-right" size={16}/></a>
            <a className="btn btn-ghost" href="#/catalogo">Ver Catálogo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroB() {
  return (
    <section className="hero-b">
      <div className="bg-photo">
        <image-slot id="hero-b-bg" src="photos/vip-trailer-blackgold.jpg" placeholder="Foto hero — fundo"></image-slot>
      </div>
      <div className="gradient-overlay"></div>
      <div className="hero-b-inner container">
        <div className="eyebrow eyebrow-dark" style={{color: 'var(--yellow)'}}>// SR. BANHEIRO — DESDE 2010</div>
        <h1 style={{marginTop: 16}}>
          A locação<br/>
          <span className="yellow-text">mais limpa</span><br/>
          do Rio.
        </h1>
        <p className="lead">
          Banheiros químicos, chuveiros móveis, containers e nossa linha VIP premium para eventos. Pontualidade, higiene e licenciamento — sempre.
        </p>
        <div style={{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">Faça seu Orçamento <Icon name="arrow-right" size={16}/></a>
          <a className="btn btn-outline-light" href="#/catalogo">Ver Catálogo</a>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  return (
    <section className="hero-c">
      <div className="container">
        <div className="hero-c-grid">
          <div className="hero-c-copy">
            <div>
              <div className="eyebrow eyebrow-dark" style={{color: 'var(--yellow)'}}>// SR. BANHEIRO N.º 010 — 2026</div>
              <h1 style={{marginTop: 28, color: 'var(--white)'}}>
                Banheiros químicos<br/>com a <span style={{color:'var(--yellow)'}}>pegada certa</span>.
              </h1>
              <p style={{marginTop: 28, color: 'rgba(255,255,255,.78)', fontSize: 17, lineHeight: 1.6, maxWidth: 440}}>
                Cinco modelos sanitários, linha hidráulica, estruturas e o nosso premium VIP. Tudo licenciado, higienizado e entregue pontualmente.
              </p>
            </div>
            <div style={{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="#/catalogo">Ver Catálogo</a>
            </div>
          </div>
          <div className="hero-c-photo">
            <image-slot id="hero-c-photo" src="photos/banheiro-azul-clean.png" placeholder="Foto hero — direita"></image-slot>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Home = Home;