/* ============================================================
   DGUST · Landing B2B — seções. Usa Button do design system e
   as imagens reais de banner (assets/). Chrome local.
   ============================================================ */
const DS = window.DgustAlimentosDesignSystem_91dfd1;
const { Button } = DS;
const BADGE = "/assets/logo-badge-circle.png";
const HERO = "/assets/photo-hero.png";
const PHOTO = {
  fritos:    "/assets/photo-classicos-fritos.png",
  assados:   "/assets/photo-classicos-assados.png",
  folhado:   "/assets/photo-folhados.png",
  premium:   "/assets/photo-linha-premium.png",
  preassada: "/assets/photo-preassada.png",
  gelado:    "/assets/photo-congelados.png",
};
const I = (n, p) => <i data-lucide={n} {...(p||{})}></i>;

function Nav() {
  return (
    <header className="nav">
      <div className="nav-in">
        <a className="brand" href="#"><img src={BADGE} alt="Dgust" /><span>Dgust<em>Alimentos</em></span></a>
        <nav className="nav-links">
          <a href="#familias">Produtos</a>
          <a href="#preassado">Pré-assados</a>
          <a href="#negocio">Para seu negócio</a>
          <a href="#como">Como funciona</a>
        </nav>
        <div className="nav-cta">
          <a className="lnk" href="#">Entrar</a>
          <Button variant="primary" icon={I("shopping-bag")}>Fazer pedido</Button>
        </div>
      </div>
    </header>
  );
}

const STATS = [
  { ic:"package",     v:"33+",   lb:"produtos no catálogo" },
  { ic:"layers",      v:"5",     lb:"linhas de produto" },
  { ic:"flame",       v:"15min", lb:"do forno ao balcão" },
  { ic:"trending-up", v:"2x–3x", lb:"de margem pro revendedor" },
  { ic:"truck",       v:"2x/sem",lb:"entregas por semana" },
  { ic:"store",       v:"+500",  lb:"pontos de venda ativos" },
];

function StatsTicker() {
  const items = [...STATS, ...STATS]; // duplicated for seamless loop
  return (
    <div className="stats-ticker">
      <div className="stats-track">
        {items.map((s, i) => (
          <div className="mq-stat" key={i}>
            <span className="mq-ic">{I(s.ic)}</span>
            <div><b>{s.v}</b><div className="mq-lb">{s.lb}</div></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-l">
          <span className="eyebrow">{I("leaf")} Fábrica de salgados, folhados, bolos e pães</span>
          <h1 className="hero-h">Pediu,<br/><span className="accent">chegou.</span></h1>
          <p className="hero-p">Salgados assados e fritos, massas folhadas, bolos e pães direto da fábrica pro seu balcão. Margem boa, entrega regular e a linha pré-assada que ninguém faz igual.</p>
          <div className="hero-actions">
            <Button variant="primary" size="lg" icon={I("shopping-bag")}>Montar pedido</Button>
            <Button variant="ghost" size="lg" icon={I("download")}>Baixar catálogo</Button>
          </div>
          <div className="hero-trust">
            <div className="avatars"><span></span><span></span><span></span><span></span></div>
            <p><b>+500 pontos de venda</b> no Espírito Santo confiam na Dgust</p>
          </div>
        </div>
        <div className="hero-r">
          <img className="hero-photo" src={HERO} alt="Dgust Salgados — linha clássica" style={{width:"878px", margin:"0px", padding:"0px 181px 0px 0px"}} />
        </div>
      </div>
      <StatsTicker />
    </section>
  );
}

const FAMS = [
  { nm:"Salgados brasileiros fritos", ds:"Coxinha, pastel, bolinho, enroladinho — o clássico que nunca para.", tag:"Volume", photo:"fritos" },
  { nm:"Clássicos assados massa lisa", ds:"Costela, carne seca, catupiry, espetos. Ticket alto, margem que sustenta.", tag:"Margem", photo:"assados" },
  { nm:"Folhados", ds:"Bauru, esfirra, pastel assado, hambúrguer. Forno 15 min, sem fritura.", tag:"Diferencial", photo:"folhado" },
  { nm:"Linha assada premium", ds:"Camarão, bacalhau, quibe, aipim. Picos na Quaresma e nas festas.", tag:"Sazonal", hot:true, photo:"premium" },
  { nm:"Congelados de coquetel", ds:"Pacote fracionado pra gôndola de supermercado e freezer de casa.", tag:"Varejo", photo:"gelado" },
];

function Families() {
  return (
    <section className="section" id="familias">
      <div className="sec-head">
        <span className="kicker">Catálogo</span>
        <h2 className="sec-title">Cinco linhas, um só fornecedor</h2>
        <p className="sec-sub">Cada linha fala com um canal e uma ocasião. Monte o mix certeiro pro seu balcão.</p>
      </div>
      <div className="fam-grid">
        {FAMS.map((f,i) => {
          const links = {0:'fritos', 1:'assados', 2:'folhados', 3:'premium', 4:'gelado'};
          return (
          <a className={"fam-card"+(f.hot?" hot":"")} href={`/catalogo/${links[i]}`} key={i}>
            <div className="fam-art" style={{backgroundImage:`url(${PHOTO[f.photo]})`}}>
              {f.hot && <span className="fam-flag">Destaque</span>}
            </div>
            <div className="fam-body">
              <span className="fam-tag">{f.tag}</span>
              <h3>{f.nm}</h3>
              <p>{f.ds}</p>
              <span className="fam-link">Ver produtos {I("arrow-right")}</span>
            </div>
          </a>
        );
        })}
        <div className="fam-cta">
          <h3>Não sabe por onde começar?</h3>
          <p>A gente monta um mix sob medida pro seu tipo de ponto.</p>
          <Button variant="gold">Falar com vendedor</Button>
        </div>
      </div>
    </section>
  );
}

function PreAssado() {
  const points = [
    { ic:"flame", t:"Sem cozinha estruturada", d:"Forno comum, 15 minutos, produto pronto. Resolve posto, escola e evento." },
    { ic:"heart-pulse", t:"Permissão pra comer salgado", d:"Sem fritura. Apelo de saudabilidade pra um público que cresce todo ano." },
    { ic:"award", t:"Qualidade única no estado", d:"Ninguém entrega pré-assado com esse padrão no Espírito Santo." },
  ];
  return (
    <section className="feature" id="preassado">
      <div className="feature-in">
        <div className="feature-l">
          <span className="kicker gold">{I("leaf")} Linha pré-assada</span>
          <h2 className="feature-h">Forno, 15 minutos,<br/>pronto pra vender</h2>
          <p className="feature-p">É o diferencial competitivo da Dgust. Aquece em forno comum, não precisa de fritadeira nem cozinheiro — e tem a cara de saudável que o consumidor de 2026 procura.</p>
          <ul className="feature-list">
            {points.map((p,i)=>(
              <li key={i}><span className="fl-ic">{I(p.ic)}</span><div><b>{p.t}</b><p>{p.d}</p></div></li>
            ))}
          </ul>
          <Button variant="gold" size="lg">Conhecer a linha pré-assada</Button>
        </div>
        <div className="feature-r"><div className="feature-photo" style={{backgroundImage:`url(${PHOTO.preassada})`}}></div></div>
      </div>
    </section>
  );
}

const CHANNELS = [
  { ic:"graduation-cap", nm:"Escolas & cantinas" },
  { ic:"croissant", nm:"Padarias" },
  { ic:"fuel", nm:"Postos & conveniência" },
  { ic:"beer", nm:"Lanchonetes & bares" },
  { ic:"truck", nm:"Distribuidores" },
  { ic:"shopping-cart", nm:"Supermercados" },
];

function Channels() {
  return (
    <section className="section channels" id="negocio">
      <div className="sec-head">
        <span className="kicker">Para seu negócio</span>
        <h2 className="sec-title">Feito pra quem revende</h2>
        <p className="sec-sub">Entrega regular, pedido mínimo justo e produto que aguenta o balcão. Do posto à rede de supermercados.</p>
      </div>
      <div className="chan-grid">
        {CHANNELS.map((c,i)=>(<div className="chan-card" key={i}><span className="chan-ic">{I(c.ic)}</span><b>{c.nm}</b></div>))}
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:"01", ic:"list-checks", t:"Monte seu pedido", d:"No catálogo digital ou com o vendedor. Mix sugerido pro seu tipo de ponto." },
    { n:"02", ic:"truck", t:"A gente entrega", d:"Rota semanal regular na sua região. Congelado, na temperatura certa." },
    { n:"03", ic:"flame", t:"Asse e venda", d:"Forno e balcão. Margem de 2x a 3x no produto certo." },
  ];
  return (
    <section className="section how" id="como">
      <div className="sec-head"><span className="kicker">Como funciona</span><h2 className="sec-title">Três passos até o balcão</h2></div>
      <div className="how-grid">
        {steps.map((s,i)=>(
          <div className="how-card" key={i}>
            <div className="how-top"><span className="how-n">{s.n}</span><span className="how-ic">{I(s.ic)}</span></div>
            <h3>{s.t}</h3><p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="finalcta">
      <div className="finalcta-in">
        <img className="finalcta-badge" src={BADGE} alt="" />
        <h2>Pronto pra encher seu balcão?</h2>
        <p>Faça seu primeiro pedido hoje ou fale com um vendedor pra montar o mix ideal.</p>
        <div className="finalcta-actions">
          <Button variant="gold" size="lg" icon={I("shopping-bag")}>Fazer pedido</Button>
          <Button variant="outline-light" size="lg" icon={I("phone")}>Falar com vendedor</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-in">
        <div className="footer-brand">
          <a className="brand" href="#"><img src={BADGE} alt="Dgust" /><span>Dgust<em>Alimentos</em></span></a>
          <p>Fábrica de salgados, folhados, bolos e pães. Espírito Santo, Brasil.</p>
        </div>
        <div className="footer-cols">
          <div><h4>Produtos</h4><a href="#">Clássicos</a><a href="#">Premium</a><a href="#">Pré-assados</a><a href="#">Congelados</a></div>
          <div><h4>Negócio</h4><a href="#">Para padarias</a><a href="#">Para escolas</a><a href="#">Distribuidores</a><a href="#">Seja revenda</a></div>
          <div><h4>Contato</h4><a href="#">WhatsApp</a><a href="#">Instagram</a><a href="#">vendas@dgust.com.br</a></div>
        </div>
      </div>
      <div className="footer-bottom"><span>© 2026 Dgust Alimentos</span><span>CNPJ 00.000.000/0001-00</span></div>
    </footer>
  );
}

Object.assign(window, { LandingKit: { Nav, Hero, Families, PreAssado, Channels, HowItWorks, FinalCTA, Footer } });