// MercadoSections — produtos Panetteria na prateleira de redes de supermercado.
// Frente institucional/aspiracional confirmada pelo dono: NÃO existe nenhum supermercado
// atendido hoje. Por isso, sem mural de clientes/prova social — a página vende a proposta
// (o quê e o porquê), não prova passada. Removida a seção "frente nova que estamos abrindo"
// a pedido do dono, por ser fraca; o foco agora fica 100% no valor pro mercado.

function MkIcon({ name }) {
  const p = {
    star: <path d="M12 2l2.9 6.6L22 9.3l-5 4.9 1.2 7-6.2-3.4L5.8 21.2 7 14.2l-5-4.9 7.1-.7L12 2z"/>,
    badge: <g><circle cx="12" cy="8" r="6"/><path d="M9 13.5 7 22l5-3 5 3-2-8.5"/></g>,
    tool: <path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 1 5.4-5.4L21 6l-3-3-3.3 3.3z"/>,
  }[name];
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
}

// ---------- O QUE VAI PRA PRATELEIRA (as opções) ----------
function MkProdutos() {
  const itens = [
    { img: '../../assets/photos/banco-2026/doce-macarons-calda-chocolate.jpg', t: 'Sonhos', d: 'O clássico da casa, com recheio e ponto que dependem de mão de obra treinada.' },
    { img: '../../assets/photos/strawberry-tart.jpg', t: 'Confeitaria', d: 'Doces e tortas que pedem equipamento e técnica específicos de confeitaria.' },
    { img: '../../assets/photos/banco-2026/pao-trancado-sementes.jpg', t: 'Pães especiais', d: 'Da fermentação natural às receitas próprias, difíceis de reproduzir numa padaria de mercado.' },
    { img: '../../assets/photos/pizza-doce.jpg', t: 'Salgados', d: 'Salgados de festa e de balcão, prontos para vitrine ou congelados.' },
  ];
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">O que pode ir para a prateleira</span>
          <h2>Os itens que a padaria do seu mercado ainda não faz.</h2>
          <p>A Panetteria fornece tudo que é produto de padaria, mas o diferencial está nos itens
            mais sofisticados: os que exigem mão de obra qualificada e equipamento específico, e que
            por isso raramente saem da padaria própria de um supermercado.</p>
        </div>
        <div className="neg-cap-grid neg-mk-grid-4">
          {itens.map((it) => (
            <article className="neg-cap-card neg-mk-card" key={it.t}>
              <img src={it.img} alt="" />
              <div className="b">
                <h3 style={{ color: 'var(--chianti)' }}>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MkProdutos = MkProdutos;

// ---------- POR QUE TER A PANETTERIA NO SEU MERCADO (o porquê, estratégico) ----------
function MkPorque() {
  const items = [
    { icon: 'star', t: 'Diferenciação', d: 'Produtos que a padaria própria do seu mercado não consegue fazer, numa prateleira que hoje é padrão.' },
    { icon: 'badge', t: 'Marca reconhecida', d: 'O cliente já confia na Panetteria. Isso pesa na hora de escolher a prateleira, não só o preço.' },
    { icon: 'tool', t: 'Sem investimento operacional', d: 'Sem contratar mão de obra especializada nem comprar equipamento novo. A produção é nossa.' },
  ];
  return (
    <section className="neg-benef-section" style={{ backgroundImage: 'url(../../assets/photos/banco-2026/vitrine-doces-variados.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 ter a Panetteria no seu mercado</span>
          <h2 style={{ color: '#fff' }}>Prateleira melhor, sem esforço a mais.</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"><MkIcon 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.MkPorque = MkPorque;

// ---------- COMO PODE FUNCIONAR ----------
function MkComoFunciona() {
  return (
    <section className="sec" style={{ background: 'var(--cream-2)' }}>
      <div className="wrap split rev">
        <div className="split-media">
          <img src="../../assets/photos/banco-2026/vitrine-paes-doces.jpg" alt="Prateleira de pães da Panetteria" />
        </div>
        <div className="split-copy">
          <span className="eyebrow">Como pode funcionar</span>
          <h2>Sua prateleira, com a nossa produção.</h2>
          <p>Entendemos o espaço disponível, o giro esperado e o perfil do seu cliente, e montamos
            junto com você a curadoria de itens que faz sentido para a sua loja.</p>
          <p>É uma conversa nova, ainda sem um formato fechado. Por isso vale a pena falar direto
            com o nosso comercial e desenhar juntos o que funciona para o seu mercado.</p>
        </div>
      </div>
    </section>
  );
}
window.MkComoFunciona = MkComoFunciona;