// HotelSections — página única "Hotéis": abre em fornecimento avulso, desce para o
// arrendamento completo de A&B. Substitui RestaurantesSections.jsx + ArrendamentoSections.jsx
// (v1 tratava avulso e arrendamento como 2 públicos/páginas — corrigido pelo dono: é uma
// relação só, uma página só).

function HtIcon({ name }) {
  const p = {
    check: <polyline points="20 6 9 17 4 12"/>,
    coin: <g><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 9.5a2.5 2.5 0 0 1 2.5-1.5h1a2 2 0 0 1 0 4h-1a2 2 0 0 0 0 4h1a2.5 2.5 0 0 0 2.5-1.5"/></g>,
    ruler: <g><path d="M3 8h18v8H3z"/><path d="M7 8v3M11 8v3M15 8v3"/></g>,
    heart: <path d="M20.8 8.6c0 4.6-8.8 10.4-8.8 10.4S3.2 13.2 3.2 8.6a4.6 4.6 0 0 1 8.8-1.8 4.6 4.6 0 0 1 8.8 1.8z"/>,
  }[name];
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
}

// ---------- CAPACIDADE DE FABRICAÇÃO (avulso — slide 4, verbatim) ----------
function HtCapacidade() {
  const cards = [
    { img: '../../assets/photos/banco-2026/bastidores-pizzaiolo-colocando-forno.jpg', t: 'Produção própria',
      items: ['Pães e panificação diária', 'Confeitaria e doces da casa', 'Pizzas e massas próprias', 'Salgados e cozinha'] },
    { img: '../../assets/photos/banco-2026/bastidores-maos-queijo-massa.jpg', t: 'Versatilidade & criação',
      items: ['Cardápios sob medida', 'Desenvolvimento de produtos', 'Sazonais e datas comemorativas', 'Também fermentação natural'] },
    { img: '../../assets/photos/banco-2026/vitrine-paes-doces.jpg', t: 'Qualidade & constância',
      items: ['Ingredientes selecionados', 'Boas práticas e controle', 'Escala de fornecimento', 'Entrega no prazo, todo dia'] },
  ];
  return (
    <section className="sec" style={{ background: 'var(--chianti)' }}>
      <div className="wrap">
        <div className="sec-head" style={{ maxWidth: 900 }}>
          <span className="eyebrow" style={{ color: 'var(--trigo)' }}>Fornecimento avulso: capacidade de fabricação</span>
          <h2 style={{ color: '#fff' }}>Estrutura para abastecer o seu hotel.</h2>
        </div>
        <div className="neg-cap-grid">
          {cards.map((c) => (
            <article className="neg-cap-card" key={c.t}>
              <img src={c.img} alt="" />
              <div className="b">
                <h3>{c.t}</h3>
                <ul>{c.items.map((it) => <li key={it}>{it}</li>)}</ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HtCapacidade = HtCapacidade;

// ---------- O QUE SERVIMOS (slide 5, verbatim) ----------
function HtProdutos() {
  const cats = [
    { img: '../../assets/photos/banco-2026/pao-trancado-sementes.jpg', t: 'Pães & panificação', s: 'Variedade assada todo dia' },
    { img: '../../assets/photos/banco-2026/suspiros-merengue.jpg', t: 'Confeitaria', s: 'Doces e sonhos da casa' },
    { img: '../../assets/photos/banco-2026/bastidores-pizzaiolo-jogando-massa.jpg', t: 'Pizzas & massas', s: 'Forno a lenha' },
    { img: '../../assets/photos/banco-2026/vitrine-doces-variados.jpg', t: 'Café & mesa', s: 'Do balcão ao salão' },
  ];
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">O que servimos</span>
          <h2>Do pão ao vinho, sabor o dia todo.</h2>
        </div>
        <div className="neg-prod-row-grid">
          {cats.map((c) => (
            <div className="neg-prod-row" key={c.t}>
              <img src={c.img} alt="" />
              <div><h3>{c.t}</h3><p>{c.s}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HtProdutos = HtProdutos;

// ---------- PROVA SOCIAL — mural de hotéis, COM FOTO (slide 6) ----------
// Fotos reais, as mesmas da apresentação comercial (apresentacao/img/hotel-*),
// copiadas para assets/photos/hotels/ — mesmo impacto visual do material original.
function HtProva() {
  const hoteis = [
    { n: 'Laghetto Stilo Barra Rio', img: '../../assets/photos/hotels/hotel-laghetto-stilo.jpg' },
    { n: 'Vogue Square', img: '../../assets/photos/hotels/hotel-vogue.webp' },
    { n: 'Astoria Ipanema', img: '../../assets/photos/hotels/hotel-astoria-ipanema.jpeg' },
    { n: 'Lagune Barra Hotel', img: '../../assets/photos/hotels/hotel-lagune-barra.jpeg' },
    { n: 'Astoria Palace', img: '../../assets/photos/hotels/hotel-astoria-palace.jpg' },
    { n: 'Nobile Copacabana', img: '../../assets/photos/hotels/hotel-nobile-copa.jpeg' },
    { n: 'Nobile Inn Dutra', img: '../../assets/photos/hotels/hotel-nobile-dutra.jpg' },
  ];
  return (
    <section className="sec" style={{ background: 'var(--cream-2)' }}>
      <div className="wrap">
        <div className="sec-head" style={{ maxWidth: 900 }}>
          <span className="eyebrow">Quem confia na nossa casa</span>
          <h2>Nascemos dentro da operação hoteleira.</h2>
          <p>Aprendemos a acolher, entender e resolver os desafios diários de grandes casas.
            Seguimos abastecendo hotéis do Rio com o mesmo padrão, todo dia.</p>
        </div>
        <div className="neg-hotelwall-photo neg-hotelwall-compact">
          {hoteis.map((h) => (
            <figure className="neg-hotel-ph" key={h.n}>
              <img src={h.img} alt={h.n} />
              <figcaption>{h.n}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HtProva = HtProva;

// ---------- TRANSIÇÃO avulso → arrendamento (foto de fundo, não só texto) ----------
function HtTransicao() {
  return (
    <section className="neg-transicao" style={{ backgroundImage: 'url(../../assets/photos/banco-2026/cadeiras-panetteria-fileira.jpg)' }}>
      <div className="neg-transicao-scrim" />
      <div className="wrap neg-transicao-inner">
        <span className="eyebrow" style={{ color: 'var(--trigo)' }}>Para alguns hotéis, vamos além</span>
        <h2>O fornecimento pode evoluir para a Panetteria dentro da sua rede.</h2>
      </div>
    </section>
  );
}
window.HtTransicao = HtTransicao;

// ---------- O QUE É O ARRENDAMENTO ----------
function HtEscopo() {
  const itens = [
    'Equipe própria, treinada e gerenciada pela Panetteria',
    'Cardápio e cozinha desenvolvidos para o perfil do hotel',
    'Café da manhã',
    'Room service',
    'Delivery',
  ];
  return (
    <section className="sec" style={{ background: 'var(--cream-2)' }}>
      <div className="wrap split rev">
        <div className="split-media">
          <img src="../../assets/photos/banco-2026/funcionaria-uniformizada-b.jpg" alt="Equipe da Panetteria em operação" />
        </div>
        <div className="split-copy">
          <span className="eyebrow">O que é o arrendamento de A&amp;B</span>
          <h2>A Panetteria assume a operação<br/>de A&amp;B do seu hotel.</h2>
          <p>Não é fornecimento pontual. É a Panetteria dentro da sua rede, com padrão, marca e
            constância próprios, para que o seu time se concentre na hospedagem.</p>
          <ul className="neg-scope-list">
            {itens.map((it) => (
              <li key={it}><span className="tick"><HtIcon name="check" /></span>{it}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
window.HtEscopo = HtEscopo;

// ---------- POR QUE TERCEIRIZAR A&B (dor/benefício — substitui "como funciona"; o dono
// pediu explicitamente para NÃO detalhar o processo de negociação, e sim bater nas dores) ----------
function HtBeneficios() {
  const items = [
    { icon: 'coin', t: 'Economia', d: 'Reduza o custo operacional de manter uma equipe própria de A&B. A Panetteria assume a estrutura.' },
    { icon: 'ruler', t: 'Padrão', d: 'O mesmo padrão de qualidade e constância da Panetteria em toda a operação do seu hotel.' },
    { icon: 'heart', t: 'Experiência do hóspede', d: 'Eleve a experiência de A&B do seu hóspede com uma marca consolidada e querida pelo carioca.' },
  ];
  return (
    <section className="neg-benef-section" style={{ backgroundImage: 'url(../../assets/photos/banco-2026/fachada-recreio-dia.jpg)' }}>
      <div className="neg-benef-scrim" />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="sec-head center">
          <span className="eyebrow" style={{ color: 'var(--trigo)' }}>Por que terceirizar A&amp;B</span>
          <h2 style={{ color: '#fff' }}>O que muda pro seu hotel.</h2>
        </div>
        <div className="neg-benef-grid">
          {items.map((it) => (
            <div className="neg-benef-card neg-benef-card-dark" key={it.t}>
              <span className="ic"><HtIcon name={it.icon} /></span>
              <h3 style={{ color: '#fff' }}>{it.t}</h3>
              <p style={{ color: 'rgba(255,255,255,.82)' }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HtBeneficios = HtBeneficios;