// Negocios — shared sections for the 2 B2B pages (Restaurantes, Hotéis · Arrendamento).
// Same brand voice as the consumer site, tone shifted to speak with a buyer/decision-maker.

function NgIcon({ name }) {
  const p = {
    check: <polyline points="20 6 9 17 4 12"/>,
    pin: <g><path d="M12 22s7-6.6 7-12a7 7 0 0 0-14 0c0 5.4 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></g>,
    whats: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>,
  }[name];
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
}

// ---------- HERO (dark, full-bleed, reused shape for várias páginas) ----------
function NegHero({ eyebrow, title, subtitle, lead, ctaLabel, ctaHref, bg }) {
  return (
    <section className="neg-hero" style={{ backgroundImage: `url(${bg})` }}>
      <div className="neg-hero-scrim" />
      <div className="wrap neg-hero-inner">
        <span className="eyebrow" style={{ color: 'var(--trigo)' }}>{eyebrow}</span>
        <h1>{title}</h1>
        {subtitle && <p className="neg-hero-subtitle">{subtitle}</p>}
        <p className="lead">{lead}</p>
        {ctaLabel && <a className="ar-btn ar-btn-primary" href={ctaHref}>{ctaLabel}</a>}
      </div>
    </section>
  );
}
window.NegHero = NegHero;

// ---------- QUEM SOMOS (base reaproveitada da apresentação comercial) ----------
// `bridge` personaliza o gancho por audiência: o objetivo da seção não é falar da Panetteria
// em abstrato, é conectar essa origem com a demanda específica de quem está lendo.
function NegQuemSomos({ bridge }) {
  return (
    <section className="sec">
      <div className="wrap split">
        <div className="split-media">
          <img src="../../assets/photos/banco-2026/cesta-paes-fundo-oliva.jpg" alt="Parede de pães da Panetteria" />
        </div>
        <div className="split-copy">
          <span className="eyebrow">Quem somos</span>
          <h2>Pão de verdade,<br/>feito todo dia.</h2>
          <p>A Panetteria nasceu para ser <b>mais que uma padaria</b>, uma casa de produção própria
            com padaria, confeitaria e cozinha sob o mesmo teto, e o forno trabalhando desde o amanhecer.</p>
          {bridge && <p>{bridge}</p>}
        </div>
      </div>
    </section>
  );
}
window.NegQuemSomos = NegQuemSomos;

// ---------- POR QUE A PANETTERIA (verbatim, slide 7 — vale pros dois públicos B2B) ----------
function NegPorque() {
  const items = [
    { t: 'Marca consolidada.', d: 'Identidade forte e reconhecível.' },
    { t: 'Produção própria.', d: 'Padaria, confeitaria e cozinha sob o mesmo teto, com padrão diário.' },
    { t: 'Operação que acolhe.', d: 'Equipe treinada e atendimento que faz o cliente voltar.' },
    { t: 'Escala e constância.', d: 'Volume de fornecimento garantido, com o mesmo padrão em toda entrega.' },
  ];
  return (
    <section className="sec neg-porque">
      <div className="wrap split">
        <div className="split-media">
          <img src="../../assets/photos/banco-2026/maos-croissant-chocolate-1.jpg" alt="Cliente saboreando um croissant da Panetteria" />
        </div>
        <div className="split-copy">
          <span className="eyebrow">Por que a Panetteria</span>
          <h2>Um parceiro que entrega marca,<br/>operação e afeto.</h2>
          <div className="neg-porque-grid">
            {items.map((it) => (
              <div className="neg-check" key={it.t}>
                <span className="tick"><NgIcon name="check" /></span>
                <p><b>{it.t}</b> {it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.NegPorque = NegPorque;

// ---------- COMO FUNCIONA (etapas numeradas — parametrizável por página) ----------
function NegComoFunciona({ eyebrow, title, steps }) {
  return (
    <section className="sec" style={{ background: 'var(--cream-2)' }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">{eyebrow}</span>
          <h2>{title}</h2>
        </div>
        <div className="neg-steps">
          {steps.map((s, i) => (
            <div className="tip" key={s.t}>
              <span className="n">{String(i + 1).padStart(2, '0')}</span>
              <div><h3>{s.t}</h3><p>{s.d}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NegComoFunciona = NegComoFunciona;

// ---------- CONTATO (fecho — parametrizável: autoatendimento × consultivo) ----------
function NegContato({ eyebrow, title, lead, ctaLabel, ctaHref, note }) {
  return (
    <section className="ar-close">
      <img className="mono" src="../../assets/monogram-branco.png" alt="" />
      <div className="inner">
        <span className="eyebrow">{eyebrow}</span>
        <h2>{title}</h2>
        <p>{lead}</p>
        <div className="ar-actions" style={{ justifyContent: 'center' }}>
          <a className="ar-btn ar-btn-primary" href={ctaHref}><NgIcon name="whats" />{ctaLabel}</a>
        </div>
        {note && <p className="neg-contato-note">{note}</p>}
      </div>
    </section>
  );
}
window.NegContato = NegContato;

// ---------- ENDEREÇOS (verbatim, slide 8) ----------
function NegEnderecos() {
  const enderecos = [
    { u: 'Ilha Pura', a: 'Av. Salvador Allende, 3290, Recreio dos Bandeirantes · 22780-160' },
    { u: 'Ipanema', a: 'Rua Visconde de Pirajá, 539, Ipanema · 22410-003' },
  ];
  return (
    <section className="sec">
      <div className="wrap split rev">
        <div className="split-media">
          <img src="../../assets/photos/banco-2026/fachada-letreiro-ilha-pura.jpg" alt="Fachada de uma unidade Panetteria" />
        </div>
        <div className="split-copy">
          <span className="eyebrow">Onde estamos</span>
          <h2>Presença que vira ponto de bairro.</h2>
          <div className="neg-end-list">
            {enderecos.map((e) => (
              <div className="ul" key={e.u}>
                <span className="pin"><NgIcon name="pin" /></span>
                <span className="addr"><b>{e.u}</b><span>{e.a}</span></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.NegEnderecos = NegEnderecos;

// ---------- GANCHOS B2B NA HOME ----------
// Instrução do dono: a home foca no cliente final, mas precisa trazer os outros públicos de forma
// sucinta — só o bastante pra funcionar como gancho e levar a pessoa certa pra página aprofundada
// certa, sem desviar o destaque do público principal. Por isso uma faixa compacta, não outro hero.
function NegHomeHooks() {
  const cards = [
    { t: 'Tem um hotel?', d: 'Fornecimento avulso ou arrendamento completo de A&B.', href: 'hoteis.html' },
    { t: 'Vai fazer um evento?', d: 'Congressos, feiras, recepções e coffee break.', href: 'eventos.html' },
    { t: 'Tem um mercado?', d: 'Leve o padrão Panetteria pra sua prateleira.', href: 'mercado.html' },
  ];
  return (
    <section className="neg-home-hooks">
      <div className="wrap">
        <span className="eyebrow">Para o seu negócio</span>
        <div className="neg-home-hooks-grid">
          {cards.map((c) => (
            <a className="neg-home-hook" href={c.href} key={c.t}>
              <span className="t">{c.t}</span>
              <span className="d">{c.d}</span>
              <span className="go">Saiba mais →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.NegHomeHooks = NegHomeHooks;