/* global React */
const { Icon: Icon2 } = window.SectionsTop;

// ============================================================
// LINHA NUTROW (3 products)
// ============================================================
function LinhaNutrow() {
  const products = [
    {
      img: "assets/nutrow-engorda-max.png",
      cardDark: true,
      eyebrow: "Ganho de peso acelerado",
      name: "Nutrow Engorda Max",
      desc: "Para o produtor que quer terminar boi mais cedo. Suplementação proteica e energética que acelera o ganho de peso, antecipa o abate e aumenta o rendimento de carcaça.",
      tags: "Bovinos de corte · Recria e engorda · Pasto ou semiconfinamento",
    },
    {
      img: "assets/nutrow-imuno.png",
      eyebrow: "Rebanho forte e saudável",
      name: "Nutrow Imuno",
      desc: "Selênio orgânico, zinco quelado e vitamina E em níveis elevados. Menos bicheira, menos perda de animal, cicatrização mais rápida e rebanho com aspecto saudável o ano todo.",
      tags: "Corte e Leite · Qualquer fase · Uso contínuo",
    },
    {
      img: "assets/nutrow-leite.png",
      eyebrow: "Mais leite no balde",
      name: "Nutrow Leite",
      desc: "Formulado para vacas em lactação. Cálcio, fósforo e magnésio elevados para sustentar e aumentar a produção. Sem ureia — seguro para vacas em lactação e bezerras.",
      tags: "80–120g/dia · SEM UREIA · Vacas em lactação",
    },
  ];
  return (
    <section className="section light" id="produtos">
      <div className="container">
        <div className="linha-head">
          <div className="eyebrow">Linha Nutrow</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Três produtos.<br/><span className="accent">Um rebanho melhor.</span>
          </h2>
          <p className="body-text muted-dark">
            Cada produto formulado para uma necessidade real da sua fazenda.
            Engorda, saúde e produção de leite — direto do fabricante para o seu cocho.
          </p>
        </div>

        <div className="products">
          {products.map((p, i) => (
            <article className={"product-card " + (p.cardDark ? "dark" : "")} key={i}>
              <div className="product-img">
                <img src={p.img} alt={p.name} loading="lazy" />
              </div>
              <div className="product-body">
                <div className="product-eyebrow">{p.eyebrow}</div>
                <h3 className="product-name">{p.name}</h3>
                <p className="product-desc">{p.desc}</p>
                <div className="product-tags">{p.tags}</div>
                <a href="#cta" className="btn btn-ghost-dark product-cta">
                  Quero saber mais <span className="btn-arrow">→</span>
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// COMPOSIÇÃO GARANTIDA
// ============================================================
function ComposicaoGarantida() {
  const rows = [
    ["Cálcio (Ca)",  "−18%", "100%"],
    ["Fósforo (P)",  "−22%", "100%"],
    ["Selênio (Se)", "−35%", "100%"],
    ["Zinco (Zn)",   "−28%", "100%"],
    ["Vitamina A",   "−40%", "100%"],
  ];
  return (
    <section className="section light">
      <div className="container comp-grid">
        <div>
          <div className="eyebrow">Composição garantida</div>
          <h2 className="headline" style={{marginTop: 18}}>
            O que tá no<br/>rótulo,<br/><span className="accent">aparece no gado.</span>
          </h2>
          <div className="short-bar"></div>
          <p className="body-text muted-dark">
            No mercado de suplemento mineral é comum o produto entregar bem
            menos do que promete no rótulo. A NUTROW é uma das poucas fábricas
            que <strong>entrega 100% da composição declarada</strong> — e prova com laudo.
          </p>
          <div className="comp-stamp">
            <div className="comp-stamp-num">100%</div>
            <div className="comp-stamp-lbl">
              <small>Selo Nutrow</small>
              Composição<br/>comprovada
            </div>
          </div>
        </div>

        <div>
          <table className="comp-table">
            <thead>
              <tr><th>Nutriente</th><th>Mercado*</th><th>NUTROW</th></tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td>{r[0]}</td><td>{r[1]}</td><td>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p className="comp-note">
            * Diferença média entre rótulo e composição real em produtos similares — análises públicas do MAPA.
          </p>

          <div className="comp-pillars">
            <div>
              <div className="comp-pillar-icon"><Icon2.Flask /></div>
              <div className="comp-pillar-title">Análise laboratorial</div>
              <p className="comp-pillar-desc">Cada lote é testado em laboratório certificado antes de sair da fábrica. O que está no rótulo está dentro do saco.</p>
            </div>
            <div>
              <div className="comp-pillar-icon"><Icon2.Doc /></div>
              <div className="comp-pillar-title">Rótulo transparente</div>
              <p className="comp-pillar-desc">Composição completa, garantia mínima de cada nutriente e níveis exatos. Sem letra miúda, sem omissão.</p>
            </div>
            <div>
              <div className="comp-pillar-icon"><Icon2.Tag /></div>
              <div className="comp-pillar-title">Rastreabilidade</div>
              <p className="comp-pillar-desc">Cada saco tem lote identificado. Em caso de dúvida, mostramos o laudo do laboratório do mesmo lote.</p>
            </div>
          </div>

          <div className="comp-mapa-bar">
            <div className="eyebrow">Registro MAPA</div>
            <p>
              <Icon2.ShieldSm />
              <span>Produto fiscalizado pelo Ministério da Agricultura. Composição garantida sob responsabilidade técnica.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// AUTORIDADE TÉCNICA
// ============================================================
function AutoridadeTecnica() {
  const team = [
    {
      initials: "DR",
      name: "Dr. Ricardo Almeida",
      role: "Médico Veterinário · Nutrição Animal",
      bio: "Pós-doutorado em Nutrição de Ruminantes (UFV). 22 anos formulando suplementos para bovinos de corte e leite no Centro-Oeste.",
      reg: "CRMV-MG 12.345",
    },
    {
      initials: "EM",
      name: "Dra. Eliane Martins",
      role: "Zootecnista · Responsável Técnica",
      bio: "Mestre em Produção Animal (UFG). Conduz o controle de qualidade de cada lote e assina o registro MAPA dos produtos.",
      reg: "CRMV-GO 8.921",
    },
    {
      initials: "PS",
      name: "Eng. Paulo Siqueira",
      role: "Eng. Agrônomo · Desenvolvimento de Produto",
      bio: "Especialista em manejo de pastagem tropical. Pesquisa de campo direto na fazenda do produtor — não em laboratório isolado.",
      reg: "CREA-MT 45.102",
    },
  ];
  const metrics = [
    { Icon: Icon2.Cap, val: "60+", lbl: "Anos de experiência somados em nutrição animal" },
    { Icon: Icon2.Award, val: "3", lbl: "RTs com registro ativo no CRMV/CREA" },
    { Icon: Icon2.Doc, val: "100%", lbl: "Lotes assinados por responsável técnico" },
    { Icon: Icon2.People, val: "+1.200", lbl: "Produtores acompanhados em campo" },
  ];
  return (
    <section className="section dark">
      <div className="container">
        <div className="auth-head">
          <div className="eyebrow">Autoridade técnica</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Quem formula<br/>o que vai parar<br/><span className="accent">no seu cocho.</span>
          </h2>
          <p>Suplemento bom não nasce em planilha. Nasce de quem entende de boi, de pasto e de ciência. Conheça o time técnico responsável pelo desenvolvimento e pela assinatura de cada lote NUTROW.</p>
        </div>

        <div className="auth-cards">
          {team.map((t, i) => (
            <div className="auth-card" key={i}>
              <div className="auth-card-top">
                <div className="auth-initial">{t.initials}</div>
                <div className="auth-idx">{String(i+1).padStart(2,"0")} / 03</div>
              </div>
              <div className="auth-name">{t.name}</div>
              <div className="auth-role">{t.role}</div>
              <p className="auth-bio">{t.bio}</p>
              <div className="auth-reg"><Icon2.Award /><span>{t.reg}</span></div>
            </div>
          ))}
        </div>

        <div className="auth-metrics">
          {metrics.map((m, i) => (
            <div className="auth-metric" key={i}>
              <div className="auth-metric-icon"><m.Icon /></div>
              <div className="auth-metric-val">{m.val}</div>
              <div className="auth-metric-lbl">{m.lbl}</div>
            </div>
          ))}
        </div>

        <div className="auth-quote">
          <div className="eyebrow">Posicionamento técnico</div>
          <p>
            "Não vendemos suplemento. Vendemos a garantia técnica de que o
            produto faz o que promete. <span className="o">Cada lote sai daqui com o nosso CRMV em cima.</span>"
          </p>
          <cite>Equipe técnica Nutrow</cite>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// POR QUE NUTROW (dark grid 6)
// ============================================================
function PorQueNutrow() {
  const cells = [
    { Icon: Icon2.Factory, title: "Direto do fabricante", desc: "Sem revenda, sem atravessador. Você fala com quem produz o suplemento." },
    { Icon: Icon2.Discount, title: "Até 30% mais barato", desc: "Compre pelo preço de fábrica. Quanto maior o pedido, melhor o desconto." },
    { Icon: Icon2.Truck, title: "Entrega na fazenda", desc: "Frete combinado e entrega direto na sua porteira em todo o Brasil." },
    { Icon: Icon2.ShieldSm, title: "Registro MAPA", desc: "Composição garantida no rótulo. Responsável Técnico em cada lote." },
    { Icon: Icon2.Chat, title: "Suporte no WhatsApp", desc: "Tira-dúvida sobre quantidade, manejo e categoria com nosso técnico." },
    { Icon: Icon2.Award, title: "Garantia de qualidade", desc: "Mesmo produto da revenda, vindo direto da fábrica para você." },
  ];
  return (
    <section className="section dark" id="como-comprar">
      <div className="container">
        <div className="porq-head">
          <div className="eyebrow">Por que Nutrow</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Da fábrica<br/>direto para<br/><span className="accent">sua porteira.</span>
          </h2>
          <p>Nada de revenda inflada. Você compra pelo preço de fábrica, com a garantia de quem produz e atende em todo o Brasil.</p>
        </div>

        <div className="porq-grid">
          {cells.map((c, i) => (
            <div className="porq-cell" key={i}>
              <div className="porq-icon"><c.Icon /></div>
              <div className="porq-title">{c.title}</div>
              <p className="porq-desc">{c.desc}</p>
            </div>
          ))}
        </div>

        <div className="porq-cta-bar">
          <div>
            <div className="eyebrow">Pedido mínimo acessível</div>
            <h4>Atendemos desde o pequeno<br/>ao grande produtor.</h4>
          </div>
          <a href="#cta" className="btn btn-primary">Fazer pedido agora</a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DO WHATSAPP AO COCHO (steps)
// ============================================================
function DoWhatsAppAoCocho() {
  const steps = [
    { Icon: Icon2.Chat, eyebrow: "Passo 01", title: "Fale no Whatsapp", desc: "Conta quantas cabeças você tem e qual seu objetivo. A gente indica o produto certo." },
    { Icon: Icon2.Truck, eyebrow: "Passo 02", title: "Entrega na fazenda", desc: "Pagamento via Pix, boleto ou prazo. Frete combinado e entrega direto na sua porteira." },
    { Icon: Icon2.Cocho, eyebrow: "Passo 03", title: "Coloque no cocho", desc: "Suporte técnico no WhatsApp para tirar dúvida de quantidade, manejo e categoria." },
    { Icon: Icon2.Trend, eyebrow: "Passo 04", title: "Veja o resultado", desc: "Pelo brilhante, animal mais ativo e ganho de peso visível na balança em poucas semanas." },
  ];
  return (
    <section className="section light">
      <div className="container">
        <div className="steps-head">
          <div className="eyebrow">Simples de comprar</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Do WhatsApp<br/><span className="accent">ao cocho.</span>
          </h2>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-big">{String(i+1).padStart(2,"0")}</div>
              <div className="step-icon"><s.Icon /></div>
              <div className="step-eyebrow">{s.eyebrow}</div>
              <div className="step-title">{s.title}</div>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>

        <div className="math-bar">
          <div>
            <div className="eyebrow">A matemática</div>
            <h5>A conta que<br/>sempre fecha.</h5>
          </div>
          <p>
            Sem suplemento, o boi perde até <span className="o">50g de ganho por dia.</span> Em 90 dias são <strong>4,5kg a menos = 0,3 arroba = R$105 de perda por animal</strong>. O suplemento custa muito menos que isso.<br/>
            Suplementar não é custo. É lucro.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DEPOIMENTOS
// ============================================================
function Depoimentos() {
  const items = [
    {
      body: '"Comprei direto da fábrica e economizei quase 30% comparado com a revenda da cidade. Em 60 dias o gado já estava com pelo brilhando. Não troco mais."',
      avatar: "JP", name: "Seu José Pereira", meta: "45 cabeças · Goiás",
    },
    {
      body: '"Testei o Engorda Max em 20 animais por 90 dias. Pesei antes e depois. Ganho médio de 240g a mais por dia comparado ao lote sem suplementar. A conta fechou fácil."',
      avatar: "ZR", name: "Zeca Rodrigues", meta: "120 cabeças · Mato Grosso",
    },
    {
      body: '"Minhas vacas caíram de produção. Mudei para o Nutrow Leite e em 45 dias voltei ao nível anterior. Atendimento no WhatsApp é direto com o técnico, resposta no mesmo dia."',
      avatar: "MD", name: "Maria das Dores", meta: "35 vacas · Minas Gerais",
    },
  ];
  return (
    <section className="section dark">
      <div className="container">
        <div className="testi-head">
          <div className="eyebrow">Resultado real</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Quem usou<br/><span className="accent">não para.</span>
          </h2>
        </div>

        <div className="testi-grid">
          {items.map((t, i) => (
            <div className="testi" key={i}>
              <div className="testi-quote-mark">"</div>
              <p className="testi-body">{t.body}</p>
              <div className="testi-foot">
                <div className="testi-avatar">{t.avatar}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-meta">{t.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQ() {
  const items = [
    {
      q: "Como faço para comprar?",
      a: "Direto pelo WhatsApp. Você fala com a gente, conta quantas cabeças tem e qual seu objetivo. A gente indica o produto, fecha o pedido e entrega na sua fazenda.",
    },
    {
      q: "Quais as formas de pagamento?",
      a: "Aceitamos Pix, boleto bancário e, para clientes recorrentes, parcelamento com prazo combinado. Para pedidos maiores, condições especiais negociadas diretamente.",
    },
    {
      q: "Vocês entregam na minha região?",
      a: "Entregamos em todo o Brasil. O frete é combinado de acordo com o tamanho do pedido e a distância. Fale com a gente que passamos o valor exato.",
    },
    {
      q: "O produto tem registro no MAPA?",
      a: "Sim. Todos os produtos Nutrow possuem registro no Ministério da Agricultura, com composição garantida e responsável técnico assinando cada lote.",
    },
    {
      q: "Posso testar antes de comprar grande quantidade?",
      a: "Pode. Recomendamos começar com um pedido menor para um lote de animais e medir o resultado. A maioria dos produtores fecha pedido recorrente depois do primeiro teste.",
    },
    {
      q: "Posso dar Nutrow Engorda Max para vaca em lactação?",
      a: "Não. O Engorda Max é formulado para corte (recria e engorda). Para vacas em lactação, o produto certo é o Nutrow Leite, que é sem ureia e seguro para a categoria.",
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section light">
      <div className="container">
        <div className="faq-head">
          <div className="eyebrow">Perguntas frequentes</div>
          <h2 className="headline" style={{marginTop: 18}}>
            Dúvidas<br/><span className="accent">frequentes.</span>
          </h2>
        </div>

        <div className="faq-list">
          {items.map((it, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-num">{String(i+1).padStart(2,"0")}</span>
                <span className="faq-text">{it.q}</span>
                <span className="faq-icon">{open === i ? "×" : "+"}</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner"><p>{it.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA + FOOTER
// ============================================================
function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="final-cta-inner">
        <div className="eyebrow">Faça seu pedido</div>
        <h2>Direto da fábrica<br/>para sua fazenda.</h2>
        <p>Sem revenda. Sem atravessador. Fale com a gente no WhatsApp e receba na porteira.</p>
        <div className="final-cta-ctas">
          <a href="https://wa.me/5517996741722" className="btn btn-primary">
            <Icon2.ChatBubble /> Comprar pelo Whatsapp
          </a>
          <a href="#produtos" className="btn btn-ghost-light">Ver produtos</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contato">
      <div className="footer-grid">
        <div className="footer-brand">
          <a href="#top" className="nav-logo"><img src="assets/nutrow-logo.png" alt="NUTROW" /></a>
          <div className="eyebrow">Nutrição animal</div>
          <p>Suplemento mineral e proteico com registro MAPA. Direto do fabricante para sua fazenda.</p>
        </div>
        <div className="footer-col">
          <h6>Produtos</h6>
          <ul>
            <li><a href="#produtos">Nutrow Engorda Max</a></li>
            <li><a href="#produtos">Nutrow Imuno</a></li>
            <li><a href="#produtos">Nutrow Leite</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h6>Empresa</h6>
          <ul>
            <li><a href="#sobre">Quem somos</a></li>
            <li><a href="#como-comprar">Como comprar</a></li>
            <li><a href="#sobre">Registro MAPA</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h6>Contato</h6>
          <ul>
            <li><a href="https://wa.me/5517996741722"><Icon2.ChatBubble /> WhatsApp do fabricante</a></li>
            <li><a href="https://instagram.com/agronutrow"><Icon2.Insta /> @agronutrow</a></li>
            <li><a href="mailto:contato@agronutrow.com.br"><Icon2.Mail /> contato@agronutrow.com.br</a></li>
            <li><a href="#"><Icon2.Pin /> Entregamos em todo o Brasil</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 NUTROW · agronutrow.com.br · Todos os direitos reservados</span>
        <span>Registro MAPA · CNPJ 66.425.241/0001-90</span>
      </div>
    </footer>
  );
}

// ============================================================
// WHATSAPP FAB
// ============================================================
function WhatsAppFab() {
  return (
    <a className="wa-fab" href="https://wa.me/5517996741722" aria-label="WhatsApp">
      <Icon2.WhatsApp />
    </a>
  );
}

window.SectionsBottom = { LinhaNutrow, ComposicaoGarantida, AutoridadeTecnica, PorQueNutrow, DoWhatsAppAoCocho, Depoimentos, FAQ, FinalCTA, Footer, WhatsAppFab };