// AJM Logística — página principal (pt-BR)
const { useState, useEffect, useRef } = React;

function Landing({ onQuote, tweaks = {} }) {
  return (
    <div className="page" data-screen-label="01 Home">
      <div className="grain"></div>
      <Nav onQuote={onQuote} />
      <Hero onQuote={onQuote} showLiveBanner={tweaks.showLiveBanner !== false} />
      <HeroFeatureStrip />
      <HeroTrustBand />
      <LogoStrip />
      <Features />
      <HowItWorks onQuote={onQuote} />
      <StatsBand />
      <Story />
      <Coverage />
      <Testimonials />
      <WhatsAppProof />
      <Trust />
      <FAQ />
      <FinalCTA onQuote={onQuote} />
      <Footer />
      <WhatsAppFloat />
      {tweaks.showStickyMobile !== false && <MobileStickyCTA onQuote={onQuote} />}
    </div>
  );
}

function Nav({ onQuote }) {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#">
          <span className="brand-mark"><AJMLogo size={28}/></span>
          <span className="brand-text">
            <b>A.J.M</b>
            <small>Transportes &amp; Logística</small>
          </span>
        </a>
        <div className="nav-links">
          <a href="#services">Serviços</a>
          <a href="#how">Como funciona</a>
          <a href="#proof">Avaliações</a>
          <a href="#faq">Dúvidas</a>
        </div>
        <div className="nav-cta">
          <div className="nav-phone">
            <Phone size={14}/>
            <span>(31) 99184-1682</span>
          </div>
          <button className="btn primary sm" onClick={onQuote}>
            Solicitar Orçamento
            <span className="btn-arrow"><ArrowRight size={12}/></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onQuote, showLiveBanner = true }) {
  return (
    <header className="hero">
      <div className="hero-amber"></div>
      <div className="wrap hero-stage">
        <div className="hero-copy">
          {showLiveBanner && (
            <span className="eyebrow">
              <span className="dot"></span>
              <b>Online agora</b>· 47 orçamentos na última hora
            </span>
          )}
          <h1>
            Fretes para
            <br/><span className="underline">Todo o Brasil</span>
          </h1>
          <p className="lead">
            Transporte de cargas com segurança, agilidade e rastreamento
            em tempo real.
          </p>
          <div className="hero-cta-row">
            <button className="btn primary lg" onClick={onQuote}>
              Solicitar Orçamento
              <span className="btn-arrow"><ArrowRight size={14}/></span>
            </button>
          </div>
          <p className="cta-note">
            <Check size={14}/> Grátis e sem compromisso · resposta em ~8 min no WhatsApp
          </p>
          <div className="hero-meta">
            <div><b>30 anos</b><span>de estrada</span></div>
            <div><b>98,6<sup>%</sup></b><span>entregas no prazo</span></div>
            <div><b>27</b><span>estados atendidos</span></div>
          </div>
        </div>

        {/* Caminhão — visual protagonista flutuante */}
        <div className="hero-truck">
          <div className="hero-truck-glow"></div>
          <div className="hero-truck-float">
            <image-slot
              id="hero-truck"
              shape="rounded"
              radius="22"
              fit="cover"
              src="hero-truck.png"
              placeholder="Arraste a foto do caminhão A.J.M aqui"
            ></image-slot>
            <div className="hero-truck-lights"></div>
            <div className="hero-truck-fade"></div>
          </div>
          <div className="hero-truck-shadow"></div>
        </div>
      </div>
    </header>
  );
}

const HERO_FEATURES = [
  { Icon: FileCheck,   t: 'ANTT Regularizada',        s: 'Empresa licenciada e fiscalizada' },
  { Icon: Shield,      t: 'Seguro de Carga',          s: 'Sua mercadoria sempre protegida' },
  { Icon: MapPin,      t: 'Rastreamento Tempo Real',  s: 'Acompanhe sua carga a qualquer hora' },
  { Icon: Globe,       t: 'Cobertura Nacional',       s: 'Todos os 27 estados do Brasil' },
  { Icon: HeadsetIcon, t: 'Atendimento Especializado',s: 'Suporte humano e ágil' },
];

function HeroFeatureStrip() {
  return (
    <div className="wrap">
      <div className="feature-strip">
        {HERO_FEATURES.map((f, i) => (
          <div className="fs-item" key={i}>
            <span className="fs-icon"><f.Icon size={20}/></span>
            <div className="fs-text">
              <b>{f.t}</b>
              <span>{f.s}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroTrustBand() {
  const proof = [
    { Icon: Shield,    t: 'Empresa Regulamentada', big: 'ANTT', s: 'Transporte regularizado e seguro' },
    { Icon: FileCheck, t: 'Seguro de Carga',        s: 'Sua mercadoria sempre protegida' },
    { Icon: Box,       t: '+10.000 Entregas',       s: 'Realizadas com sucesso em todo o Brasil' },
  ];
  return (
    <div className="wrap">
      <div className="trust-band">
        {proof.map((p, i) => (
          <div className="tb-item" key={i}>
            <span className="tb-icon"><p.Icon size={22}/></span>
            <div className="tb-text">
              {p.big ? <b className="tb-big">{p.t} <strong>{p.big}</strong></b> : <b>{p.t}</b>}
              <span>{p.s}</span>
            </div>
          </div>
        ))}
        <div className="tb-item tb-reviews">
          <div className="tb-avatars">
            {['AR','LF','MC','JP'].map((a, i) => <span className="tb-av" key={i}>{a}</span>)}
          </div>
          <div className="tb-text">
            <b className="tb-stars">
              {[...Array(5)].map((_, j) => <Star key={j} size={14}/>)}
              <span className="tb-score">4,9/5</span>
            </b>
            <span>Mais de 2.000 avaliações no Google</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroCard() {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    let f = 0;
    const id = setInterval(() => {
      f = (f + 1) % 100;
      setProgress(20 + Math.sin(f / 18) * 12 + f * 0.3 % 50);
    }, 80);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hero-card">
      <div className="hc-head">
        <strong style={{ fontFamily: 'var(--font-display)', fontSize: 15, letterSpacing: '-0.01em' }}>
          Envio AJM-8421
        </strong>
        <span className="live"><span className="dot"></span> rastreio ao vivo</span>
      </div>
      <div className="hc-route">
        <div className="hc-route-row">
          <span className="hc-pin origin"><MapPin size={12}/></span>
          <div>
            <b>Belo Horizonte, MG</b>
            <br/><span>Coleta · Savassi</span>
          </div>
          <span className="km">08:14</span>
        </div>
        <div className="hc-route-row">
          <span className="hc-pin dest"><MapPin size={12}/></span>
          <div>
            <b>Salvador, BA</b>
            <br/><span>Entrega · Pituba</span>
          </div>
          <span className="km">amanhã</span>
        </div>
      </div>

      <div style={{ marginTop: 18 }}>
        <div className="hc-progress-labels">
          <span>Belo Horizonte</span>
          <span>Vitória da Conquista</span>
          <span>Salvador</span>
        </div>
        <div className="hc-progress"><i style={{ width: `${Math.min(86, Math.max(20, progress))}%` }}/></div>
      </div>

      <div className="hc-stats">
        <div>
          <b>1.398 km</b>
          <span>Rota total</span>
        </div>
        <div>
          <b>62%</b>
          <span>Concluído</span>
        </div>
        <div>
          <b>—11h</b>
          <span>Para chegar</span>
        </div>
      </div>
      <div className="hc-quote">
        <div>
          <div className="qlbl">Frete estimado</div>
          <div className="qprice">R$ 2.840 <small>· tudo incluído</small></div>
        </div>
        <Shield size={32} style={{ color: '#fff', opacity: 0.85 }}/>
      </div>
    </div>
  );
}

function LogoStrip() {
  return (
    <div className="wrap">
      <div className="logo-strip">
        <div className="logo-strip-inner">
          <span className="logo-strip-label">A confiança de 2.800+ empresas brasileiras</span>
          <div className="logo-strip-logos">
            <span>Móveis Aurora</span>
            <span>Lume Café</span>
            <span>OctaParts</span>
            <span>Pampa Brewing</span>
            <span>Casa Bossa</span>
            <span>Roteiro 24</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const FEATURES = [
  { num: '01', Icon: Globe, title: 'Atendimento em todo o Brasil', body: 'Todos os 27 estados e 5.570 municípios atendidos pela nossa frota e parceiros certificados.' },
  { num: '02', Icon: HeadsetIcon, title: 'Atendimento especializado', body: 'Suporte humano 24/7 no WhatsApp, telefone e e-mail. Tempo médio de resposta: 90 segundos.' },
  { num: '03', Icon: Shield, title: 'Transporte seguro', body: 'Todos os envios são segurados. Veículos com GPS, carga lacrada e protocolos certificados de manuseio.' },
  { num: '04', Icon: Users, title: 'Equipe profissional', body: 'Motoristas com background verificado, certificação ANTT e em média 8+ anos de estrada.' },
  { num: '05', Icon: Rocket, title: 'Entregas rápidas', body: 'Same-day em 12 capitais. Próximo dia útil em 80% do país. Modalidade expressa para cargas urgentes.' },
  { num: '06', Icon: PriceTag, title: 'Melhor custo-benefício', body: 'Orçamento transparente em menos de 2 minutos. Sem taxas escondidas — o preço que você vê é o que paga.' },
];

function Features() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="section-tag">O que entregamos</span>
            <h2>Cada envio tratado <span className="red-em">como se fosse nosso.</span></h2>
            <p className="lead">Uma operação logística completa — frota, tecnologia e gente — feita para mover sua carga com segurança por todo o Brasil.</p>
          </div>
        </div>
        <div className="features">
          {FEATURES.map((f, i) => (
            <div className="feature" key={i}>
              <span className="feature-num">{f.num}</span>
              <span className="feature-icon"><f.Icon size={22}/></span>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ onQuote }) {
  const steps = [
    { n: '01', Icon: Sparkle,    t: 'Solicite o orçamento', b: 'Responda 5 perguntas rápidas sobre o seu envio. Leva menos de 2 minutos.' },
    { n: '02', Icon: HeadsetIcon, t: 'A gente te chama', b: 'Um especialista analisa a rota e entra em contato no WhatsApp com as melhores opções.' },
    { n: '03', Icon: Box,        t: 'Coleta agendada', b: 'Buscamos sua carga na porta, no dia e horário que funcionarem para você.' },
    { n: '04', Icon: Check,      t: 'Entregue e assinado', b: 'Rastreamento em tempo real do início ao fim, com comprovante de entrega assinado.' },
  ];
  return (
    <section className="section" id="how" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="section-head center">
          <div>
            <span className="section-tag">Como funciona</span>
            <h2>Simples, <span className="red-em">rápido e seguro.</span></h2>
            <p className="lead">Entenda como é fácil enviar sua carga com a A.J.M Transportes.</p>
          </div>
        </div>
        <div className="timeline">
          <div className="tl-line"></div>
          {steps.map((s, i) => (
            <div className="tl-step" key={i}>
              <div className="tl-node">
                <span className="tl-node-icon"><s.Icon size={22}/></span>
                <span className="tl-badge">{s.n}</span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
        <div className="timeline-cta">
          <button className="btn primary lg" onClick={onQuote}>
            Começar meu orçamento agora
            <span className="btn-arrow"><ArrowRight size={14}/></span>
          </button>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  return (
    <section className="section" style={{ paddingTop: 30, paddingBottom: 60 }}>
      <div className="wrap">
        <div className="stats-band">
          <div className="stat"><b>184.000<sup>+</sup></b><span>Fretes concluídos</span></div>
          <div className="stat"><b>5.570</b><span>Cidades atendidas</span></div>
          <div className="stat"><b>98,6<sup>%</sup></b><span>Entregas no prazo</span></div>
          <div className="stat"><b>4,9<sup>/5</sup></b><span>Nota média no Google</span></div>
        </div>
      </div>
    </section>
  );
}

function Coverage() {
  const regions = [
    { name: 'Sudeste', cities: 'SP · RJ · MG · ES', count: '1.668 cidades', pct: 100 },
    { name: 'Nordeste', cities: 'BA · PE · CE · MA · PI · RN · PB · AL · SE', count: '1.794 cidades', pct: 98 },
    { name: 'Sul', cities: 'RS · SC · PR', count: '1.191 cidades', pct: 100 },
    { name: 'Centro-Oeste', cities: 'GO · MT · MS · DF', count: '467 cidades', pct: 96 },
    { name: 'Norte', cities: 'AM · PA · RO · AC · RR · AP · TO', count: '450 cidades', pct: 88 },
    { name: 'Internacional', cities: 'Parceiros do Mercosul', count: 'sob consulta', pct: 60 },
  ];
  return (
    <section className="section" id="coverage" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="section-tag">Cobertura</span>
            <h2>Do Oiapoque ao Chuí. <span className="red-em">O mapa inteiro, coberto.</span></h2>
            <p className="lead">5.570 cidades. 27 estados. Um único operador.</p>
          </div>
        </div>
        <div className="coverage">
          <div className="coverage-map">
            <span className="cov-chip cov-chip-tl"><span className="dot"></span> Frota própria · 12 capitais</span>
            <span className="cov-chip cov-chip-br"><b>100%</b> do território nacional</span>
            <BrazilMap />
          </div>
          <div className="coverage-list">
            {regions.map((r, i) => (
              <div className="reg" key={i}>
                <b>{r.name}</b>
                <span>{r.cities}</span>
                <div className="reg-bar"><i style={{ width: `${r.pct}%` }}/></div>
                <span className="count">{r.count}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BrazilMap() {
  const dots = [];
  const seed = (x, y) => Math.abs(Math.sin(x * 12.9898 + y * 78.233)) * 43758.5453 % 1;
  const inBrazil = (x, y) => {
    if (x < 18 || x > 92) return false;
    if (y < 5 || y > 112) return false;
    if (x > 70 && y < 25) return false;
    if (x < 30 && y < 30) return false;
    if (x > 78 && y > 90) return false;
    if (x < 35 && y > 95) return false;
    if (x < 25 && y < 60) return false;
    if (x > 85 && y > 65) return false;
    return true;
  };
  for (let y = 4; y < 115; y += 4) {
    for (let x = 14; x < 96; x += 4) {
      if (inBrazil(x, y)) {
        const s = seed(x, y);
        dots.push({ x, y, r: s > 0.96 ? 1.6 : s > 0.8 ? 1.1 : 0.7, hi: s > 0.96 });
      }
    }
  }
  const hubs = [
    { x: 62, y: 60, name: 'SP' },
    { x: 67, y: 56, name: 'RJ' },
    { x: 59, y: 52, name: 'BH' },
    { x: 73, y: 38, name: 'SSA' },
    { x: 74, y: 28, name: 'REC' },
    { x: 70, y: 18, name: 'FOR' },
    { x: 52, y: 22, name: 'BSB' },
    { x: 38, y: 30, name: 'MAN' },
    { x: 55, y: 86, name: 'POA' },
    { x: 50, y: 75, name: 'CWB' },
  ];
  const edges = [
    [0,1],[0,2],[0,3],[1,2],[2,3],[3,4],[4,5],[2,6],[6,7],[0,8],[0,9],[8,9],[6,3],[7,4]
  ];
  return (
    <svg viewBox="0 0 110 120" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="line" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="var(--brand-blue)" stopOpacity="0.9"/>
          <stop offset="1" stopColor="var(--brand-red)" stopOpacity="0.6"/>
        </linearGradient>
        <radialGradient id="hub" cx="50%" cy="50%" r="50%">
          <stop offset="0" stopColor="var(--brand-red)" stopOpacity="1"/>
          <stop offset="1" stopColor="var(--brand-red)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      {dots.map((d, i) => (
        <circle key={i} cx={d.x} cy={d.y} r={d.r}
                fill={d.hi ? 'rgba(255, 59, 72, 0.7)' : 'rgba(245, 246, 250, 0.18)'}/>
      ))}
      {edges.map(([a, b], i) => (
        <line key={i} x1={hubs[a].x} y1={hubs[a].y} x2={hubs[b].x} y2={hubs[b].y}
              stroke="url(#line)" strokeWidth="0.35" strokeDasharray="0.6 0.6"/>
      ))}
      {hubs.map((h, i) => (
        <g key={i}>
          <circle cx={h.x} cy={h.y} r="2" fill="var(--brand-red)" opacity="0.5">
            <animate attributeName="r" values="2;7;2" dur="2.8s" begin={`${i * 0.35}s`} repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.5;0;0.5" dur="2.8s" begin={`${i * 0.35}s`} repeatCount="indefinite"/>
          </circle>
          <circle cx={h.x} cy={h.y} r="5" fill="url(#hub)" opacity="0.5"/>
          <circle cx={h.x} cy={h.y} r="1.8" fill="var(--brand-red)"/>
          <text x={h.x + 2.5} y={h.y + 0.5} fontSize="2.2" fontFamily="var(--font-mono)"
                fill="rgba(245, 246, 250, 0.7)" fontWeight="600"
                style={{ letterSpacing: '0.1em' }}>
            {h.name}
          </text>
        </g>
      ))}
    </svg>
  );
}

const TESTIMONIALS = [
  {
    initials: 'CM',
    name: 'Carla Mendes',
    role: 'Líder de Operações · Móveis Aurora',
    quote: 'Em três anos despachando para o Brasil inteiro, a A.J.M é a primeira transportadora que me deixa dormir tranquila. Cada carga chega no prazo, lacrada e com o comprovante na hora. Virou parte da nossa operação.',
  },
  {
    initials: 'RG',
    name: 'Rafael Guimarães',
    role: 'Fundador · OctaParts',
    quote: 'Orçamento em 2 minutos, coleta na manhã seguinte, comprovante assinado antes do meio-dia. É assim que um parceiro logístico moderno funciona.',
  },
  {
    initials: 'JS',
    name: 'Juliana Souza',
    role: 'Mudança · Curitiba → Florianópolis',
    quote: 'Estava nervosa com a mudança do apartamento inteiro. A equipe me acompanhou em cada etapa pelo WhatsApp. Zero dano, zero estresse.',
  },
];

function Story() {
  const milestones = [
    { Icon: Truck, yr: 'Anos 2000', t: 'Uma Kombi e um sonho', b: 'Muito jovem e cheio de garra, Jeferson pegou a estrada com uma Kombi velha, fazendo pequenos fretes pelas ruas de Belo Horizonte. Pouca estrutura, mas vontade de sobra.' },
    { Icon: Box,   yr: 'O primeiro caminhão', t: 'A carroceria que mudou tudo', b: 'De tanto entregar bem e cumprir a palavra, veio o primeiro caminhão de carroceria. Cada cliente satisfeito abria caminho para uma rota nova.' },
    { Icon: Building, yr: 'A virada', t: 'Da carroceria ao baú', b: 'A confiança virou estrutura: caminhões baú, cargas maiores e mais segurança. A A.J.M deixou de ser “um caminhão” para virar uma transportadora de verdade.' },
    { Icon: Rocket, yr: 'Hoje · 30 anos', t: 'Um legado sobre rodas', b: 'Três décadas depois, a frota é nova, a operação cobre o Brasil inteiro e o nome que começou numa Kombi virou um legado construído para os filhos darem continuidade.' },
  ];
  return (
    <section className="section" id="story" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="story-grid">
          <div className="story-aside">
            <span className="section-tag">Nossa história</span>
            <h2>De uma Kombi em BH a <span className="red-em">30 anos de estrada.</span></h2>
            <p className="lead">
              Tudo começou com Jeferson, o “Pretinho”: um jovem de Belo Horizonte
              que pegou a estrada numa Kombi e a palavra cumprida em cada entrega.
              Foi assim que a Kombi virou caminhão, o caminhão virou frota e a
              frota virou um legado. Hoje, são <strong style={{ color: 'var(--text)' }}>30 anos de
              estrada</strong>, caminhões novos rodando o Brasil inteiro e uma
              história que segue de pai para filho.
            </p>
            <div className="story-photo">
              <image-slot
                id="story-founder"
                shape="rounded"
                radius="18"
                fit="cover"
                placeholder="Arraste uma foto do Jeferson ou da Kombi"
              ></image-slot>
            </div>
            <div className="story-sign">
              <b>Jeferson “Pretinho”</b>
              <span>Fundador · A.J.M Transportes e Logística</span>
            </div>
          </div>
          <div className="story-timeline">
            {milestones.map((m, i) => (
              <div className="story-step" key={i}>
                <div className="story-step-rail">
                  <span className="story-step-dot"><m.Icon size={18}/></span>
                </div>
                <div className="story-step-body">
                  <span className="story-step-yr">{m.yr}</span>
                  <h4>{m.t}</h4>
                  <p>{m.b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const WA_MESSAGES = [
  {
    time: '14:32',
    client: ['Jeferson, chegou tudo certinho aqui em Salvador! Sem um arranhão sequer.', 'Já é a terceira carga que mando com a A.J.M. Confiança total 🙏'],
    reply: 'Que notícia boa! 🙏 Muito obrigado pela confiança de sempre. É uma honra levar sua carga — pode contar com a gente na próxima também! 🚚',
  },
  {
    time: '09:07',
    client: ['Gente, vocês salvaram minha mudança! A equipe foi pontual, embalou tudo com cuidado e montou os móveis no destino.', 'Recomendo de olhos fechados 👏'],
    reply: 'Fico muito feliz em saber! 🙏 Cuidar da sua mudança como se fosse a nossa é o nosso compromisso. Obrigado por confiar na A.J.M!',
  },
  {
    time: '17:45',
    client: ['Melhor transportadora que já contratei. Acompanhei o rastreamento o tempo todo e a entrega saiu antes do prazo.', 'Parabéns pelo trabalho! 🚚'],
    reply: 'Obrigado demais pelo carinho! 👏 Seguir merecendo essa confiança é o que move a A.J.M todos os dias. Um abraço!',
  },
];

function WhatsAppProof() {
  return (
    <section className="section" id="wa-proof" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="section-head center">
          <div>
            <span className="section-tag">Direto de quem confia</span>
            <h2>Conversas reais de <span className="red-em">clientes A.J.M.</span></h2>
            <p className="lead">Mensagens que chegam todos os dias no nosso WhatsApp. Por privacidade, mantemos a identidade dos clientes em sigilo.</p>
          </div>
        </div>
        <div className="wa-grid">
          {WA_MESSAGES.map((m, i) => (
            <div className="wa-print" key={i}>
              <div className="wa-thread">
                {m.client.map((ln, j) => (
                  <div className="wa-bubble out" key={j}>
                    {ln}
                    {j === m.client.length - 1 && (
                      <span className="wa-meta">{m.time}<svg viewBox="0 0 18 12" width="16" height="11" aria-hidden="true"><path d="M1 6.5 4 9.5 10 2.5" fill="none" stroke="#53bdeb" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/><path d="M6.5 6.5 9.5 9.5 15.5 2.5" fill="none" stroke="#53bdeb" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    )}
                  </div>
                ))}
                <div className="wa-bubble in">
                  <span className="wa-sender">Jeferson · A.J.M</span>
                  {m.reply}
                  <span className="wa-meta dark">{m.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [lead, ...rest] = TESTIMONIALS;
  return (
    <section className="section" id="proof" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="section-tag">O que dizem nossos clientes</span>
            <h2>4,9 estrelas em mais de 1.200 avaliações. <span className="red-em">E lemos cada uma delas.</span></h2>
          </div>
        </div>

        <div className="tcard featured">
          <div className="tcard-quote-mark">”</div>
          <div className="tcard-rating">
            {[...Array(5)].map((_, j) => <Star key={j}/>)}
            <span className="glogo">
              <svg width="14" height="14" viewBox="0 0 24 24"><path fill="#4285F4" d="M22 12.2c0-.8-.1-1.4-.2-2H12v3.8h5.7c-.1.9-.7 2.3-2 3.2l3.2 2.5c1.9-1.8 3.1-4.4 3.1-7.5"/><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.7-2.4l-3.2-2.5c-.9.6-2 1-3.5 1-2.7 0-5-1.8-5.8-4.3L3 16.3C4.7 19.7 8.1 22 12 22"/><path fill="#FBBC05" d="M6.2 13.8c-.2-.6-.3-1.2-.3-1.8s.1-1.2.3-1.8L3 7.7C2.4 9 2 10.5 2 12s.4 3 1 4.3l3.2-2.5"/><path fill="#EA4335" d="M12 5.9c1.5 0 2.9.5 3.9 1.5L18.7 4.6C17 3 14.7 2 12 2 8.1 2 4.7 4.3 3 7.7l3.2 2.5C7 7.7 9.3 5.9 12 5.9"/></svg>
              Google
            </span>
          </div>
          <p>“{lead.quote}”</p>
          <div className="tcard-author">
            <div className="tcard-avatar">{lead.initials}</div>
            <div>
              <b>{lead.name}</b>
              <span>{lead.role}</span>
            </div>
          </div>
        </div>

        <div className="testimonials">
          {rest.map((t, i) => (
            <div className="tcard" key={i}>
              <div className="tcard-rating">
                {[...Array(5)].map((_, j) => <Star key={j}/>)}
                <span className="glogo">
                  <svg width="14" height="14" viewBox="0 0 24 24"><path fill="#4285F4" d="M22 12.2c0-.8-.1-1.4-.2-2H12v3.8h5.7c-.1.9-.7 2.3-2 3.2l3.2 2.5c1.9-1.8 3.1-4.4 3.1-7.5"/><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.7-2.4l-3.2-2.5c-.9.6-2 1-3.5 1-2.7 0-5-1.8-5.8-4.3L3 16.3C4.7 19.7 8.1 22 12 22"/><path fill="#FBBC05" d="M6.2 13.8c-.2-.6-.3-1.2-.3-1.8s.1-1.2.3-1.8L3 7.7C2.4 9 2 10.5 2 12s.4 3 1 4.3l3.2-2.5"/><path fill="#EA4335" d="M12 5.9c1.5 0 2.9.5 3.9 1.5L18.7 4.6C17 3 14.7 2 12 2 8.1 2 4.7 4.3 3 7.7l3.2 2.5C7 7.7 9.3 5.9 12 5.9"/></svg>
                  Google
                </span>
              </div>
              <p>“{t.quote}”</p>
              <div className="tcard-author">
                <div className="tcard-avatar">{t.initials}</div>
                <div>
                  <b>{t.name}</b>
                  <span>{t.role}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const TRUST = [
  { Icon: FileCheck, t: 'Certificação ANTT', b: 'Transportadora com RNTRC ativo · certificada 4501-2018.' },
  { Icon: Shield,    t: 'Seguro de carga',   b: 'Cobertura de até R$ 500.000 por envio, incluída em todo orçamento.' },
  { Icon: Lock,      t: 'Transporte lacrado', b: 'Lacres numerados, alertas anti-violação e GPS em todos os veículos.' },
  { Icon: HeadsetIcon, t: 'Atendimento humano', b: 'Especialistas de verdade no WhatsApp — 24/7, em português.' },
];

function Trust() {
  return (
    <section className="section" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="trust">
          <div>
            <span className="section-tag">Feita para inspirar confiança</span>
            <h2 style={{ fontSize: 36, margin: '0 0 14px' }}>Certificada, segurada <span className="red-em">e verificável.</span></h2>
            <p className="lead" style={{ fontSize: 16 }}>
              Temos todas as certificações que uma transportadora precisa no Brasil —
              e algumas que ninguém costuma pedir. Documentos disponíveis sob solicitação.
            </p>
          </div>
          <div className="trust-badges">
            {TRUST.map((b, i) => (
              <div className="tbadge" key={i}>
                <span className="tbadge-icon"><b.Icon size={16}/></span>
                <b>{b.t}</b>
                <span>{b.b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'Em quanto tempo recebo o orçamento?',
    a: 'Em menos de dois minutos. Depois que você termina o formulário de 5 etapas, um especialista avalia a rota e envia o valor final no WhatsApp — normalmente em até 15 minutos durante o horário comercial.' },
  { q: 'Vocês fazem mudanças residenciais?',
    a: 'Sim. Cuidamos de mudanças completas de apartamentos e casas, incluindo embalagem, desmontagem e remontagem de móveis. Basta selecionar "Mudança residencial" como tipo de carga no formulário.' },
  { q: 'Minha carga é segurada?',
    a: 'Todo envio é automaticamente segurado em até R$ 500.000 — já incluído no preço do frete. Coberturas superiores estão disponíveis sob solicitação.' },
  { q: 'Posso rastrear meu envio em tempo real?',
    a: 'Sim. Você recebe o link de rastreamento por WhatsApp assim que a coleta é feita. GPS atualizado a cada 60 segundos e notificações em cada ponto de checagem.' },
  { q: 'Atendem o país inteiro?',
    a: 'Todos os 27 estados e 5.570 municípios. Nossa frota própria atende 12 capitais; parceiros certificados cobrem o restante com o mesmo SLA.' },
  { q: 'Quais formas de pagamento aceitam?',
    a: 'PIX, todos os principais cartões de crédito (em até 12x) e transferência bancária. Clientes corporativos podem solicitar conta faturada com NF-e e prazo.' },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="faq-layout">
          <div className="faq-intro">
            <span className="section-tag">Dúvidas frequentes</span>
            <h2>Perguntas, <span className="red-em">respondidas direto ao ponto.</span></h2>
            <p className="lead">Não achou o que procurava? Fale agora com um especialista — a gente responde em minutos.</p>
            <div className="faq-help">
              <div className="faq-help-icon"><HeadsetIcon size={22}/></div>
              <div>
                <b>Ainda tem dúvidas?</b>
                <span>Atendimento humano, 24/7 no WhatsApp.</span>
              </div>
              <button className="btn primary sm" onClick={() => window.dispatchEvent(new CustomEvent('go-quiz'))}>
                <WhatsApp size={14}/> Falar agora
              </button>
            </div>
          </div>
          <div className="faq">
            {FAQS.map((f, i) => (
              <div className="faq-item" data-open={open === i} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="chev"><ChevPlus size={14}/></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onQuote }) {
  return (
    <section className="section" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="final-cta">
          <h2>Seu orçamento de frete em <span className="red-em">menos de 2 minutos.</span></h2>
          <p>Conte para onde vai. A gente retorna no WhatsApp com o melhor preço, prazo estimado e um atendimento de verdade do início ao fim.</p>
          <div className="row">
            <button className="btn primary lg" onClick={onQuote}>
              Solicitar Orçamento <span className="btn-arrow"><ArrowRight size={14}/></span>
            </button>
            <a className="btn ghost lg" href="tel:+5531991841682">
              <Phone size={16}/> (31) 99184-1682
            </a>
          </div>
          <p className="cta-note centered">
            <Check size={14}/> Grátis e sem compromisso · sem cadastro · resposta em minutos
          </p>
          <div className="final-trust">
            <span><FileCheck size={15}/> Regularizada ANTT</span>
            <span><Shield size={15}/> Seguro de carga incluso</span>
            <span><Box size={15}/> +184 mil fretes entregues</span>
            <span><Star size={14}/> 4,9/5 · +2.000 avaliações</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <a className="brand" href="#">
              <span className="brand-mark"><AJMLogo size={28}/></span>
              <span className="brand-text">
                <b>A.J.M</b>
                <small>Transportes &amp; Logística</small>
              </span>
            </a>
            <p>Fretes pelo Brasil, logística profissional e mudanças porta a porta — em todos os 27 estados.</p>
            <button className="btn primary sm" onClick={() => window.dispatchEvent(new CustomEvent('go-quiz'))}>
              <WhatsApp size={14}/> Falar no WhatsApp
            </button>
          </div>
          <div className="footer-col">
            <h5>Serviços</h5>
            <a href="#">Transporte de cargas</a>
            <a href="#">Mudança residencial</a>
            <a href="#">Mudança comercial</a>
            <a href="#">Entrega expressa</a>
            <a href="#">Logística corporativa</a>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <a href="#">Sobre a AJM</a>
            <a href="#">Cobertura</a>
            <a href="#">Trabalhe conosco</a>
            <a href="#">Parceiros</a>
            <a href="#">Imprensa</a>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <a href="tel:+5531991841682">(31) 99184-1682</a>
            <a href="#">contato@ajmtransportes.com.br</a>
            <a href="#">Belo Horizonte · MG · Brasil</a>
            <a href="#">Seg–Sáb · 7h–22h (BRT)</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 A.J.M Transportes e Logística · CNPJ 24.811.402/0001-66 · RNTRC 4501-2018</span>
          <div className="legal">
            <a href="#">Privacidade</a>
            <a href="#">Termos</a>
            <a href="#">LGPD</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setExpanded(true), 1800);
    const t2 = setTimeout(() => setExpanded(false), 6000);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);
  return (
    <button className="wa-float" data-expanded={expanded}
            onClick={() => window.dispatchEvent(new CustomEvent('go-quiz'))}
            aria-label="Falar no WhatsApp">
      <span className="wa-icon">
        <WhatsApp/>
        <span className="wa-online"></span>
      </span>
      <span className="wa-label">
        <b>Falar com um especialista</b>
        <span><span className="wa-ldot"></span>Online agora · responde em minutos</span>
      </span>
    </button>
  );
}

function MobileStickyCTA({ onQuote }) {
  return (
    <div className="mobile-cta">
      <button className="btn primary lg" onClick={onQuote}>
        Solicitar Orçamento <ArrowRight size={14}/>
      </button>
    </div>
  );
}

Object.assign(window, { Landing });