// Landing da Franquia NexFarm3D — vende o modelo, CTA no hero abre o quiz.
// Visual: industrial-tech premium branco-limpo, com "blocões azuis" arredondados (imersivo),
// dados reais do deck, screenshots reais do Farm Manager e micro-animações vetoriais on-brand.

const track = (n, d) => { try { window.lt && window.lt.track && window.lt.track(n, d || {}); } catch (_) {} };
const REDUCE_MOTION = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

// Dispara uma vez quando entra na viewport
function useInView(threshold = 0.4) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    if (!('IntersectionObserver' in window)) { setSeen(true); return; }
    const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }), { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}

// Número que conta de 0 até o alvo quando aparece (credibilidade em mono)
function CountUp({ to, decimals = 0, prefix = '', suffix = '', dur = 1400 }) {
  const [ref, seen] = useInView(0.5);
  const [v, setV] = React.useState(REDUCE_MOTION ? to : 0);
  React.useEffect(() => {
    if (!seen || REDUCE_MOTION) { setV(to); return; }
    let raf; const t0 = performance.now();
    const tick = (t) => { const p = Math.min(1, (t - t0) / dur); const e = 1 - Math.pow(1 - p, 3); setV(to * e); if (p < 1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen]);
  const txt = Number(v).toLocaleString('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return <span ref={ref}>{prefix}{txt}{suffix}</span>;
}

const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

// Slot de imagem: usa <img> se carregar, senão placeholder rotulado
function Figure({ src, alt, label, icon = 'box', className = '' }) {
  const [err, setErr] = React.useState(false);
  if (src && !err) return <img className={`figure-img ${className}`} src={src} alt={alt || ''} loading="lazy" onError={() => setErr(true)}/>;
  return (
    <div className={`figure-ph ${className}`} role="img" aria-label={alt || label}>
      <span className="figure-grid" aria-hidden="true"/>
      <Icon name={icon} size={30} stroke={1.5}/>
      <span className="figure-label">{label}</span>
    </div>
  );
}

// Moldura de navegador — pra mostrar o software real com cara de produto
function BrowserFrame({ src, alt, label, className = '', tag }) {
  return (
    <div className={`brframe ${className}`}>
      <div className="brframe-bar">
        <span className="brframe-dots" aria-hidden="true"><i/><i/><i/></span>
        {tag && <span className="brframe-tag">{tag}</span>}
      </div>
      <Figure src={src} alt={alt} label={label} icon="bars" className="brframe-img"/>
    </div>
  );
}

// Animação de impressão 3D em camadas (placeholder on-brand até entrar o Lottie)
function PrintAnim() {
  return (
    <div className="printanim" aria-hidden="true">
      <span className="pa-gantry"/>
      <span className="pa-nozzle"/>
      <div className="pa-build">{[0,1,2,3,4,5].map(i => <span key={i} className="pa-layer" style={{ '--i': i }}/>)}</div>
      <span className="pa-base"/>
    </div>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual reveal">
      <span className="hero-glow" aria-hidden="true"/>
      <div className="hero-farm float-a">
        <video
          ref={(el) => { if (el) { el.muted = true; el.defaultMuted = true; const p = el.play(); if (p && p.catch) p.catch(() => {}); } }}
          className="hero-media hero-media--video" autoPlay loop muted playsInline preload="auto" poster="assets/hero-poster.jpg">
          <source src="assets/nexfarm-hero.mp4" type="video/mp4"/>
          <source src="assets/nexfarm-hero.webm" type="video/webm"/>
        </video>
      </div>
      <div className="hero-badge" aria-hidden="true">
        <svg className="hero-badge-svg" viewBox="0 0 120 120">
          <defs>
            <linearGradient id="hbgrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#2a93ef"/><stop offset="1" stopColor="#0a64bd"/></linearGradient>
          </defs>
          <circle cx="60" cy="60" r="58" fill="url(#hbgrad)"/>
          <circle className="hero-badge-dash" cx="60" cy="60" r="51" fill="none" stroke="rgba(255,255,255,.78)" strokeWidth="2" strokeDasharray="1.4 9" strokeLinecap="round"/>
          <circle cx="60" cy="60" r="44" fill="none" stroke="rgba(255,255,255,.16)" strokeWidth="1"/>
        </svg>
        <div className="hero-badge-core">
          <span className="hb-from">A partir de</span>
          <span className="hb-price">R$ 22 mil</span>
        </div>
      </div>
    </div>
  );
}

// Barra de geolocalização (trick de exclusividade por cidade, via IP)
function GeoBanner() {
  const [city, setCity] = React.useState('');
  React.useEffect(() => {
    let ok = true;
    fetch('https://ipapi.co/json/')
      .then(r => r.json())
      .then(d => { if (ok && d && d.city) setCity(d.city); })
      .catch(() => {});
    return () => { ok = false; };
  }, []);
  return (
    <div className="geo-banner">
      <span className="geo-dot"/>
      <Icon name="map-pin" size={13} stroke={2.3}/>
      <span>Condição exclusiva de franquia para <b>{city || 'a sua cidade'}</b></span>
    </div>
  );
}

function LandingPage({ onStart }) {
  useReveal();
  const PLANS = window.PLANS || {};
  const order = window.PLAN_ORDER || ['micro', 'standard', 'pro', 'ultra'];

  const METRICS = [
    { v: '70-90%', l: 'de margem por peça', i: 'percent' },
    { v: 'R$ 2-16 mil', l: 'de faturamento/mês', i: 'trending-up' },
    { v: '40 dias', l: 'pra começar a faturar', i: 'clock-fast' },
    { v: '4 a 6m²', l: 'pra montar em casa', i: 'home' },
  ];

  // Fileira de cards abaixo do hero (estilo Zoom)
  const HEROCARDS = [
    { img: 'assets/icons/printer.png', t: 'Impressoras Bambu Lab', d: 'Já configuradas pra produzir' },
    { img: 'assets/icons/software.png', t: 'Farm Manager 3D', d: 'O sistema que diz o que vender' },
    { img: 'assets/icons/academy.png', t: 'NexFarm Academy', d: 'Do zero ao avançado' },
    { img: 'assets/icons/mentors.png', t: 'Mentoria + 6 mentores', d: 'Ao vivo, 2x por semana' },
  ];

  // Mercado em números (deck "O mercado em números")
  const MARKET = [
    { v: 'R$ 5,9 bi', l: 'mercado de impressão 3D no Brasil (2023)' },
    { v: '20,8% a.a.', l: 'de crescimento médio até 2030' },
    { v: 'R$ 22,1 bi', l: 'de projeção do mercado pra 2030' },
    { v: 'R$ 49', l: 'de ticket de entrada por peça' },
  ];

  const SOFTWARE = [
    { i: 'sparkle', t: 'Robô de Hype', d: 'IA que mostra o que vai vender na semana, antes de você imprimir.' },
    { i: 'bars', t: 'Visão 360 da operação', d: 'Vendas, produção, estoque e margem real num lugar só.' },
    { i: 'store', t: 'Conectado aos marketplaces', d: 'Pedido do Mercado Livre e Shopee cai direto na produção.' },
    { i: 'shield', t: 'Único no Brasil', d: 'Feito por quem opera farm 3D, não por software house genérico.' },
  ];

  // Linhas com print REAL do Farm Manager + explicação ao lado
  const FMROWS = [
    { i: 'sparkle', kicker: 'Robô de Hype', title: 'Sabe o que vai vender antes mesmo de imprimir',
      img: 'assets/fm-hype.png', tag: 'Robô de Hype', alt: 'Sugestões do Robô de Hype com as peças em alta',
      desc: 'Todo dia a IA varre Mercado Livre, Shopee e outros marketplaces e te entrega as peças que estão bombando agora, com o nível de procura de cada uma. Você para de adivinhar e imprime o que o mercado já está comprando, com margem garantida.' },
    { i: 'percent', kicker: 'Precificação', title: 'Preço e margem calculados na hora, sem achismo',
      img: 'assets/fm-calc.png', tag: 'Calculadora', alt: 'Calculadora de margem do Farm Manager',
      desc: 'Você informa o filamento, o gasto de energia e a margem que quer, e o sistema calcula na hora o custo real e o preço de venda sugerido de cada peça. Nunca mais vende no prejuízo nem perde cliente cobrando no chute.' },
    { i: 'bars', kicker: 'Produção', title: 'Do orçamento ao pedido, tudo num quadro só',
      img: 'assets/fm-kanban.png', tag: 'Produção', alt: 'Quadro de produção do Farm Manager',
      desc: 'Cada pedido aparece num quadro visual, de rascunho a aprovado, com cliente, prazo e valor. Você acompanha a operação inteira batendo o olho, sem planilha, sem retrabalho e sem deixar nenhum pedido passar.' },
  ];

  // Mais funções do Farm Manager (tópicos com ícone + explicação)
  const FMFEATURES = [
    { i: 'rocket', t: 'Onboarding guiado', d: 'Um passo a passo da primeira impressão à primeira venda, pra você não se perder no começo.' },
    { i: 'spool', t: 'Estoque de filamento', d: 'Sabe quanto de cada cor você tem e recebe o aviso de quando repor, antes de faltar.' },
    { i: 'users', t: 'Clientes e orçamentos', d: 'Cadastra o cliente e monta um orçamento profissional em segundos, pronto pra aprovação.' },
    { i: 'store', t: 'Pedidos integrados', d: 'O pedido do marketplace entra e vira ordem de produção sozinho, sem você digitar nada.' },
    { i: 'cube', t: 'Protótipos e catálogo', d: 'Controla as peças em teste antes de elas entrarem no seu catálogo de venda.' },
    { i: 'trending-up', t: 'Relatórios de margem real', d: 'Enxerga o lucro de verdade de cada peça e de cada mês, não só o faturamento bruto.' },
  ];

  const STEPS = [
    { n: '01', t: 'Escolha o modelo', d: 'Micro, Standard, Pro ou Ultra, pelo que cabe no seu momento' },
    { n: '02', t: 'Receba a operação', d: 'Máquinas Bambu Lab, filamento, software e academy, montados' },
    { n: '03', t: 'Monte a farm em casa', d: '4 a 6m², com implantação assistida nos primeiros dias' },
    { n: '04', t: 'Aprenda na Academy', d: 'Curso gravado do zero e mentoria ao vivo 2x por semana' },
    { n: '05', t: 'Venda em marketplace', d: 'Shopee, Mercado Livre, Etsy e B2B, com anúncios prontos' },
    { n: '06', t: 'Escale', d: 'Mais máquinas rodando, mais produção, mais margem' },
  ];

  const GIFTS = [
    { img: 'assets/icons/printer.png', t: 'Impressoras Bambu Lab A1', d: '2 a 8 máquinas conforme o modelo, já configuradas pra produzir.' },
    { img: 'assets/icons/filament.png', t: 'Filamento incluso', d: '25 a 70kg pra começar a imprimir e vender no primeiro dia.' },
    { img: 'assets/icons/software.png', t: 'Farm Manager 3D', d: 'O ERP da operação: orçamento, produção, estoque e vendas, já incluso na sua franquia.' },
    { img: 'assets/icons/robot.png', t: 'Robô de Hype (IA)', d: 'Mostra as peças em alta no mercado antes de você imprimir.' },
    { img: 'assets/icons/academy.png', t: 'NexFarm Academy', d: 'Curso gravado do zero ao avançado, atualizado o tempo todo.' },
    { img: 'assets/icons/mentors.png', t: 'Mentoria + 6 mentores', d: 'Ao vivo, terça e quinta às 19h, com quem já construiu de verdade.' },
    { img: 'assets/icons/support.png', t: 'Suporte 24/7', d: 'Resposta rápida quando o problema aparece. Você nunca opera sozinho.' },
    { img: 'assets/icons/market.png', t: 'Integração com marketplaces', d: 'Pedido do Mercado Livre e Shopee cai direto na produção, sem digitar nada.' },
    { img: 'assets/icons/price.png', t: 'Filamento a preço de rede', d: 'Seu insumo sempre mais barato que o mercado, pela escala da rede.' },
  ];

  const FORWHOM = [
    { img: 'assets/icons/persona-clt.png', t: 'É CLT e quer renda extra', d: 'Monta a farm em casa e começa em paralelo ao emprego.' },
    { img: 'assets/icons/persona-first.png', t: 'Vai empreender pela 1ª vez', d: 'Investimento acessível e treinamento do zero, com a mão na massa.' },
    { img: 'assets/icons/persona-app.png', t: 'Trabalha com app e quer sair da rua', d: 'Um negócio previsível, dentro de casa, sem depender de plataforma.' },
    { img: 'assets/icons/persona-diversify.png', t: 'Já empreende e quer diversificar', d: 'Uma nova fonte de margem alta com pouca operação.' },
  ];

  const DIFFS = [
    { i: 'star', t: 'A 1ª franqueadora de Print Farms do Brasil', d: 'Pioneirismo num mercado de bilhões, ainda no começo.' },
    { i: 'printer', t: 'Máquinas Bambu Lab', d: 'As impressoras mais confiáveis do mercado, já configuradas.' },
    { i: 'bars', t: 'Software de gestão próprio', d: 'Você controla produção, financeiro e vendas num lugar só.' },
    { i: 'book', t: 'Academy + 6 mentores', d: 'Do zero ao avançado, com mentoria ao vivo. Você nunca fica sozinho.' },
    { i: 'headset', t: 'Implantação assistida', d: 'Acompanhamento dedicado pra você não travar no começo.' },
    { i: 'percent', t: 'Margem de 70% a 90%', d: 'Cada peça impressa custa pouco e vende bem.' },
  ];

  return (
    <div className="lp">
      <GeoBanner/>

      {/* Hero */}
      <section className="lp-hero">
        <span className="hero-bg" aria-hidden="true"/>
        <div className="lp-container hero-in">
          <div className="hero-copy">
            <span className="eyebrow reveal"><span className="eyebrow-dot"/> Franquia de farms 3D</span>
            <h1 className="hero-title reveal">Transforme impressão 3D numa empresa que <span className="hero-accent">fatura todos os dias, dentro da sua casa</span></h1>
            <p className="hero-sub reveal">A NexFarm3D entrega o <b>negócio completo e pronto pra operar</b>: máquinas, software, treinamento e produtos pra vender. <span className="hl">Margem de 70% a 90%</span> por peça, do investimento ao faturamento em <span className="hl">40 dias</span>.</p>
          </div>
          <HeroVisual/>
        </div>
      </section>

      {/* Fileira de cards (estilo Zoom) */}
      <section className="lp-herocards-wrap">
        <div className="lp-container herocards">
          {HEROCARDS.map((c, i) => (
            <div className="herocard reveal" key={i} style={{ '--d': i * 60 + 'ms' }}>
              <img className="herocard-img" src={c.img} alt="" loading="lazy"/>
              <div><h4 className="herocard-t">{c.t}</h4><p className="herocard-d">{c.d}</p></div>
            </div>
          ))}
        </div>
      </section>

      {/* Faixa de métricas — BLOCÃO AZUL arredondado no branco */}
      <section className="lp-blockwrap">
        <div className="lp-container">
          <div className="blue-block metrics-block reveal">
            <span className="bb-grid" aria-hidden="true"/>
            <span className="bb-rise bb-rise--l" aria-hidden="true"><i/><i/><i/></span>
            <span className="bb-rise bb-rise--r" aria-hidden="true"><i/><i/><i/></span>
            <div className="metrics-row">
              {METRICS.map((m, i) => (
                <div className="metric" key={i} style={{ '--d': i * 70 + 'ms' }}>
                  <span className="metric-ic"><Icon name={m.i} size={22} stroke={2.2}/></span>
                  <span className="metric-v">{m.v}</span>
                  <span className="metric-l">{m.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Problema → Solução */}
      <section className="lp-section">
        <div className="lp-container">
          <div className="ps-grid">
            <div className="ps-card ps-problem reveal">
              <span className="ps-kicker">O problema</span>
              <h3>Comprar a impressora é fácil.<br/>Virar um negócio, não.</h3>
              <ul className="ps-list ps-list--bad">
                <li><span className="ps-ic"><Icon name="x" size={14} stroke={2.6}/></span>Não sabe o que produzir que tem saída</li>
                <li><span className="ps-ic"><Icon name="x" size={14} stroke={2.6}/></span>Não sabe onde nem como vender</li>
                <li><span className="ps-ic"><Icon name="x" size={14} stroke={2.6}/></span>Erra o preço e acaba trabalhando de graça</li>
                <li><span className="ps-ic"><Icon name="x" size={14} stroke={2.6}/></span>A máquina vira enfeite na estante</li>
              </ul>
            </div>
            <div className="ps-arrow" aria-hidden="true"><Icon name="arrow-right" size={22} stroke={2.4}/></div>
            <div className="ps-card ps-solution reveal">
              <span className="ps-kicker accent">A solução</span>
              <h3>A NexFarm entrega o negócio inteiro, montado.</h3>
              <ul className="ps-list ps-list--good">
                <li><span className="ps-ic"><Icon name="check" size={14} stroke={2.6}/></span>Máquinas certas, já configuradas pra produzir</li>
                <li><span className="ps-ic"><Icon name="check" size={14} stroke={2.6}/></span>Software que diz o que vender e por quanto</li>
                <li><span className="ps-ic"><Icon name="check" size={14} stroke={2.6}/></span>Produtos e anúncios prontos pra vender</li>
                <li><span className="ps-ic"><Icon name="check" size={14} stroke={2.6}/></span>Treinamento e mentoria do zero ao avançado</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Mercado — recorte de jornal */}
      <section className="lp-section" id="mercado">
        <div className="lp-container">
          <div className="news reveal">
            <div className="news-masthead">
              <span className="news-rule"/>
              <h2 className="news-name">A Revolução 3D</h2>
              <span className="news-rule"/>
            </div>
            <div className="news-dateline">
              <span>Edição Brasil</span>
              <span>Caderno de Manufatura Digital</span>
              <span>2026</span>
            </div>
            <h3 className="news-headline">Uma oportunidade num mercado de bilhões, ainda no início</h3>
            <div className="news-cols">
              <div className="news-lead">
                <p><span className="news-drop">A</span> manufatura digital cresce no mundo inteiro e o Brasil está só começando. Entrar agora é pegar a onda antes da maioria, com uma operação que cabe dentro da sua casa.</p>
                <p>Enquanto outros mercados estão saturados disputando o mesmo cliente, esse ainda está formando os primeiros operadores profissionais do país. Quem entrou no e-commerce em 2010 construiu império. Quem entrou em 2020 disputou migalhas.</p>
                <p>A impressão 3D no Brasil está vivendo agora o que o e-commerce viveu em 2010. A tecnologia amadureceu, ficou barata e confiável, o consumidor já compra peça impressa todo dia, e mesmo assim quase ninguém montou operação séria. É a mesma janela, só que dessa vez o nome dela é manufatura digital.</p>
                <p>E ao contrário da maioria das franquias, aqui a porta de entrada é baixa. Abrir uma rede tradicional custa caro, exige ponto comercial, funcionários e meses de obra. Uma print farm cabe em 4 metros quadrados da sua casa, começa na faixa dos R$ 22 mil e roda com você mesmo. Menos barreira técnica, menos barreira financeira, mais margem no seu bolso.</p>
              </div>
              <aside className="news-figbox">
                <span className="news-figbox-h">O mercado em números</span>
                <div className="news-figs">
                  {MARKET.map((m, i) => (
                    <div className="news-fig" key={i}>
                      <span className="news-fig-v">{m.v}</span>
                      <span className="news-fig-l">{m.l}</span>
                    </div>
                  ))}
                </div>
                <div className="news-chart" aria-hidden="true">
                  {[42, 58, 70, 84, 100].map((h, i) => <span key={i} style={{ '--h': h + '%', '--i': i }}/>)}
                  <em>crescimento até 2030</em>
                </div>
              </aside>
            </div>
          </div>
        </div>
      </section>

      {/* Farm Manager 3D — o cérebro (BLOCÃO LARANJA, coração da página) */}
      <section className="lp-blockwrap lp-blockwrap--pad" id="software">
        <div className="lp-container">
          <div className="orange-block fm-block">
            <span className="bb-grid" aria-hidden="true"/>
          <div className="section-head reveal">
            <span className="section-eyebrow">O cérebro da operação</span>
            <h2 className="section-title">Farm Manager 3D, o software que separa quem opera de quem improvisa</h2>
            <p className="section-sub">A primeira plataforma brasileira pensada pra quem opera farm 3D.<br/><b>Vem incluso na sua franquia.</b></p>
          </div>

          {/* MacBook com o painel real + features */}
          <div className="fm-hero">
            <div className="macbook reveal">
              <div className="macbook-screen">
                <Figure src="assets/dashboard-real.png" alt="Painel do Farm Manager 3D com faturamento e Robô de Hype" label="Painel Farm Manager 3D" icon="bars" className="macbook-img"/>
              </div>
              <div className="macbook-deck"><span className="macbook-notch"/></div>
            </div>
            <div className="fm-feats reveal">
              <div className="macnote">
                <div className="macnote-bar">
                  <span className="macnote-dots"><i/><i/><i/></span>
                  <span className="macnote-title"><Icon name="bars" size={13} stroke={2.4}/> O que o sistema faz</span>
                </div>
                <div className="macnote-body fm-feats-body">
                  {SOFTWARE.map((s, i) => (
                    <div className="sfeat" key={i}>
                      <span className="sfeat-ic"><Icon name={s.i} size={19} stroke={2}/></span>
                      <div><h4 className="sfeat-t">{s.t}</h4><p className="sfeat-d">{s.d}</p></div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Linhas alternando print real + explicação */}
          <div className="fm-rows">
            {FMROWS.map((r, i) => (
              <div className={`fm-row reveal${i % 2 === 0 ? ' fm-row--rev' : ''}`} key={i}>
                <div className="fm-shot"><BrowserFrame src={r.img} alt={r.alt} label={r.title} tag={r.tag}/></div>
                <div className="fm-text">
                  <div className="macnote">
                    <div className="macnote-bar">
                      <span className="macnote-dots"><i/><i/><i/></span>
                      <span className="macnote-title"><Icon name={r.i} size={13} stroke={2.4}/> {r.kicker}</span>
                    </div>
                    <div className="macnote-body">
                      <h3 className="fm-row-t">{r.title}</h3>
                      <p className="fm-row-d">{r.desc}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Mais funções, em tópicos com ícone */}
          <div className="fm-grid">
            <h3 className="fm-grid-h reveal">E ainda tem tudo isso, na mesma plataforma</h3>
            <div className="fm-grid-items">
              {FMFEATURES.map((f, i) => (
                <div className="fm-gitem reveal" key={i} style={{ '--d': (i % 3) * 60 + 'ms' }}>
                  <span className="fm-gic"><Icon name={f.i} size={20} stroke={2}/></span>
                  <div><h4 className="fm-git">{f.t}</h4><p className="fm-gid">{f.d}</p></div>
                </div>
              ))}
            </div>
          </div>

          <p className="fm-close reveal">UM SISTEMA COMPLETO TRABALHANDO PRA VOCÊ</p>
          </div>
        </div>
      </section>

      {/* Como funciona — removido a pedido (deleta essa seção) */}

      {/* Banda imersiva — bloco AZUL TOTAL (sem foto, Lottie entra à direita) */}
      <section className="lp-blockwrap">
        <div className="lp-container">
          <div className="blue-block band-block reveal">
            <span className="bb-grid" aria-hidden="true"/>
            <div className="band-block-in">
              <div className="lp-band-in">
                <span className="band-eyebrow"><span className="hv-live-dot"/> Imprimindo agora</span>
                <h2>O novo impacto da revolução 3D começa na sua casa</h2>
                <p>Enquanto a maioria ainda nem ouviu falar, você pode estar <b>produzindo e vendendo em 40 dias</b>.</p>
                <button className="btn btn-xl cta-white" onClick={() => onStart('band')}>
                  Quero adquirir uma franquia NexFarm3D
                  <Icon name="arrow-right" size={18} stroke={2.2}/>
                </button>
              </div>
              <div className="band-illu" aria-hidden="true"><img src="assets/icons/illu-banda-w.png" alt=""/></div>
            </div>
          </div>
        </div>
      </section>

      {/* O que você recebe */}
      <section className="lp-section lp-section--surface">
        <div className="lp-container">
          <div className="section-head reveal">
            <span className="section-eyebrow">O que você recebe</span>
            <h2 className="section-title">Tudo que precisa pra operar, sem improviso</h2>
            <p className="section-sub">Não é um curso nem uma máquina solta. É o <span className="hl">negócio completo na sua mão</span>.</p>
          </div>
          <div className="gifts">
            {GIFTS.map((g, i) => (
              <div className="gift reveal" key={i} style={{ '--d': (i % 3) * 60 + 'ms' }}>
                <img className="gift-img" src={g.img} alt="" loading="lazy"/>
                <div><h4 className="gift-t">{g.t}</h4><p className="gift-d">{g.d}</p></div>
              </div>
            ))}
          </div>
          <div className="recebe-mockup reveal">
            <div className="macbook">
              <div className="macbook-screen"><Figure src="assets/dashboard-real.png" alt="Painel do Farm Manager 3D" label="Painel Farm Manager" icon="bars" className="macbook-img"/></div>
              <div className="macbook-deck"><span className="macbook-notch"/></div>
            </div>
          </div>
          <div className="showcase reveal">
            <Figure src="assets/products.png" label="Produtos impressos na farm" alt="Produtos impressos na print farm" icon="cube" className="showcase-img"/>
            <Figure src="assets/farm-clean.png" label="Print farm em operação" alt="Print farm NexFarm3D em operação" icon="cube" className="showcase-img"/>
          </div>
        </div>
      </section>

      {/* Planos — removido a pedido (níveis só após o quiz, sem valor na LP) */}

      {/* Pra quem é — seção azul */}
      <section className="lp-blockwrap lp-blockwrap--pad">
        <div className="lp-container">
          <div className="blue-block forwhom-block reveal">
            <span className="bb-grid" aria-hidden="true"/>
            <div className="forwhom-wrap">
              <Figure src="assets/owner-new.png" alt="Empreendedor operando a print farm em casa" label="Dono da farm em casa" icon="user" className="forwhom-img"/>
              <div>
                <div className="section-head section-head--left">
                  <span className="section-eyebrow light">Pra quem é</span>
                  <h2 className="section-title">Feita pra quem quer começar com o pé no chão</h2>
                </div>
                <div className="forwhom">
                  {FORWHOM.map((f, i) => (
                    <div className="fw" key={i}>
                      <img className="fw-img" src={f.img} alt="" loading="lazy"/>
                      <h4 className="fw-t">{f.t}</h4>
                      <p className="fw-d">{f.d}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Diferenciais — removido a pedido (REMOVER SEÇÃO) */}

      {/* CTA final — BLOCÃO AZUL arredondado no branco */}
      <section className="lp-blockwrap lp-blockwrap--pad">
        <div className="lp-container">
          <div className="blue-block cta-block reveal">
            <span className="bb-grid" aria-hidden="true"/>
            <span className="bb-rise bb-rise--r" aria-hidden="true"><i/><i/><i/></span>
            <div className="cta-final-in">
              <h2>Descubra em 2 minutos qual modelo combina com o seu momento</h2>
              <p>Responde algumas perguntas rápidas e veja a recomendação. Um especialista te mostra os números no WhatsApp.</p>
              <button className="btn btn-xl cta-white" onClick={() => onStart('final')}>
                Quero adquirir uma franquia NexFarm3D
                <Icon name="arrow-right" size={18} stroke={2.2}/>
              </button>
              <span className="cta-final-note"><Icon name="lock" size={12} stroke={2}/> Conversa gratuita e sem compromisso</span>
            </div>
            <div className="cta-illu" aria-hidden="true"><img src="assets/icons/illu-cta-w.png" alt=""/></div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="lp-footer">
        <div className="lp-container lp-footer-in">
          <div className="footer-top">
            <div className="footer-brand">
              <NexLogo size={30} light/>
              <p>A primeira franqueadora de Print Farms 3D do Brasil. Seu negócio de manufatura digital começa aqui.</p>
            </div>
            <div className="footer-links">
              <a href="https://instagram.com/nexfarm3d" target="_blank" rel="noopener"><Icon name="store" size={15} stroke={2}/> @nexfarm3d</a>
              <a href="https://nexfarm3d.com.br" target="_blank" rel="noopener"><Icon name="cube" size={15} stroke={2}/> nexfarm3d.com.br</a>
              <a href="#privacidade"><Icon name="lock" size={15} stroke={2}/> Política de privacidade</a>
            </div>
          </div>
          <p className="footer-disc">As projeções de faturamento são estimativas baseadas no desempenho de unidades da rede e não constituem garantia de resultado futuro. Investir em uma franquia envolve riscos. NexFarm3D &middot; CNPJ a confirmar.</p>
        </div>
      </footer>

      {/* CTA fixo (único, em todas as telas) */}
      <div className="mobile-cta">
        <button className="btn btn-primary btn-block" onClick={() => onStart('sticky')}>
          Quero adquirir uma <br className="brm"/>franquia NexFarm3D
          <Icon name="arrow-right" size={17} stroke={2.2}/>
        </button>
      </div>
    </div>
  );
}

function App() {
  const [open, setOpen] = React.useState(typeof window !== 'undefined' && window.location.hash === '#quiz');
  const start = (where) => { track('CTAClick', { where }); track('QuizStarted', { where }); setOpen(true); };
  return (
    <>
      <LandingPage onStart={start}/>
      <QuizModal open={open} onClose={() => setOpen(false)}/>
    </>
  );
}

Object.assign(window, { App, LandingPage });