// Page sections — Frution editorial landing

const { useState, useEffect, useRef } = React;

// Resource resolver: in standalone-bundled mode, window.__resources[id] holds a blob URL.
// In dev/file mode, falls back to the relative path.
const asset = (id, path) => (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || path;

// Hook for scroll reveal
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

// ============== NAV ==============
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // close menu on resize to desktop / on link click
  useEffect(() => {
    const onR = () => { if (window.innerWidth > 900) setOpen(false); };
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  // lock body scroll when open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [
    ['Sobre','#about'], ['Módulos','#modules'], ['Recursos','#features'],
    ['Preços','#pricing'], ['Clientes','#clients'], ['Contato','#contact']
  ];
  return (
    <nav style={{
      position:'sticky', top:0, zIndex: 50,
      background: 'var(--ink-deep)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
      boxShadow: scrolled ? '0 8px 24px -8px rgba(20,17,15,0.25)' : 'none',
      transition: 'box-shadow 0.25s ease',
    }}>
      {/* coral accent line */}
      <div style={{position:'absolute', bottom:0, left:0, right:0, height:1, background:'linear-gradient(90deg, transparent, var(--primary) 20%, var(--primary) 80%, transparent)', opacity:0.5}}/>
      <div className="container nav-row" style={{display:'flex', alignItems:'center', justifyContent:'space-between', height:104, position:'relative'}}>
        <a href="#home" style={{display:'flex', alignItems:'center', gap:9}} onClick={() => setOpen(false)}>
          <img src={asset('logoBranca','/landing/assets/logo-frution-branca.png')} alt="Frution" className="nav-logo" style={{height: 72, width:'auto', display:'block'}}/>
        </a>
        <div style={{display:'flex', gap:32, alignItems:'center'}} className="nav-links">
          {links.map(([l,h]) => (
            <a key={l} href={h} style={{fontSize:16, color:'rgba(255,255,255,0.78)', fontWeight:400}} className="nav-link">{l}</a>
          ))}
        </div>
        <div style={{display:'flex', gap:8, alignItems:'center'}} className="nav-actions">
          <a href="https://www.frution.com.br/users/sign_in" style={{fontSize:15, color:'rgba(255,255,255,0.78)', padding:'10px 16px'}} className="nav-link nav-signin">Entrar</a>
          <a href="#contact" style={{
            fontSize:15, color:'white', background:'var(--primary)', padding:'12px 22px',
            borderRadius:6, fontWeight:600, display:'flex', alignItems:'center', gap:6,
          }} className="nav-cta">Agendar demo <span style={{fontSize:11}}>→</span></a>
          {/* hamburger */}
          <button
            aria-label={open ? 'Fechar menu' : 'Abrir menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
            className="nav-burger"
            style={{
              display:'none', width:44, height:44, borderRadius:8,
              background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.12)',
              color:'white', alignItems:'center', justifyContent:'center', padding:0,
              marginLeft:4,
            }}>
            <span style={{position:'relative', width:18, height:14, display:'inline-block'}}>
              <span style={{position:'absolute', left:0, right:0, height:1.5, background:'white', borderRadius:1, top: open ? '50%' : 0, transform: open ? 'translateY(-50%) rotate(45deg)' : 'none', transition:'all 0.22s'}}/>
              <span style={{position:'absolute', left:0, right:0, height:1.5, background:'white', borderRadius:1, top:'50%', marginTop:-0.75, opacity: open ? 0 : 1, transition:'opacity 0.18s'}}/>
              <span style={{position:'absolute', left:0, right:0, height:1.5, background:'white', borderRadius:1, bottom: open ? 'auto' : 0, top: open ? '50%' : 'auto', transform: open ? 'translateY(-50%) rotate(-45deg)' : 'none', transition:'all 0.22s'}}/>
            </span>
          </button>
        </div>
      </div>

      {/* mobile menu panel */}
      <div className="nav-mobile" style={{
        position:'absolute', top:'100%', left:0, right:0,
        background:'var(--ink-deep)',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
        boxShadow:'0 24px 48px -16px rgba(0,0,0,0.5)',
        maxHeight: open ? '100vh' : 0,
        overflow:'hidden',
        transition:'max-height 0.32s cubic-bezier(.2,.7,.2,1)',
        display:'none',
      }}>
        <div className="container" style={{padding:'24px 0 32px'}}>
          <ul style={{display:'grid', gap:2}}>
            {links.map(([l,h], i) => (
              <li key={l}>
                <a
                  href={h}
                  onClick={() => setOpen(false)}
                  style={{
                    display:'flex', alignItems:'center', justifyContent:'space-between',
                    padding:'18px 4px',
                    borderBottom:'1px solid rgba(255,255,255,0.06)',
                    fontSize:18, color:'white', fontFamily:'var(--serif)',
                  }}>
                  <span style={{display:'flex', alignItems:'baseline', gap:14}}>
                    <span style={{fontFamily:'var(--mono)', fontSize:11, color:'rgba(255,255,255,0.4)', letterSpacing:'0.1em'}}>0{i+1}</span>
                    {l}
                  </span>
                  <span style={{color:'var(--primary)', fontSize:18}}>→</span>
                </a>
              </li>
            ))}
          </ul>
          <div style={{display:'grid', gap:10, marginTop:24}}>
            <a
              href="#contact"
              onClick={() => setOpen(false)}
              style={{
                background:'var(--primary)', color:'white', padding:'16px 22px',
                borderRadius:8, fontSize:15, fontWeight:600, textAlign:'center',
              }}>Agendar demo →</a>
            <a
              href="https://www.frution.com.br/users/sign_in"
              style={{
                background:'rgba(255,255,255,0.06)', color:'white', padding:'16px 22px',
                borderRadius:8, fontSize:15, fontWeight:500, textAlign:'center',
                border:'1px solid rgba(255,255,255,0.12)',
              }}>Entrar</a>
          </div>
          <div style={{marginTop:24, fontFamily:'var(--mono)', fontSize:11, color:'rgba(255,255,255,0.4)', letterSpacing:'0.12em', textTransform:'uppercase', textAlign:'center'}}>
            Curitiba · Brasil · (41) 3030-7034
          </div>
        </div>
      </div>

      <style>{`
        .nav-link { transition: color 0.15s; }
        .nav-link:hover { color: var(--primary) !important; }
        .nav-cta { transition: background 0.15s, transform 0.15s; }
        .nav-cta:hover { background: #FFA050 !important; }
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
          .nav-burger { display: inline-flex !important; }
          .nav-mobile { display: block !important; }
          .nav-row { height: 76px !important; }
          .nav-logo { height: 48px !important; }
          .nav-signin { display: none !important; }
          .nav-cta { padding: 10px 16px !important; font-size: 13px !important; }
        }
        @media (max-width: 480px) {
          .nav-cta { display: none !important; }
        }
      `}</style>
    </nav>
  );
};

// ============== HERO ==============
const Hero = () => {
  return (
    <section id="home" style={{position:'relative', paddingTop:48, paddingBottom: 80, overflow:'hidden'}}>
      {/* huge serif backdrop */}
      <div className="container" style={{position:'relative', zIndex: 2}}>
        {/* eyebrow */}
        <div data-reveal style={{display:'flex', alignItems:'center', gap:10, marginBottom:34}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', background:'white', border:'1px solid var(--line)', borderRadius: 99, fontSize:12}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#16A34A', boxShadow:'0 0 0 4px rgba(22,163,74,0.15)'}}></span>
            <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', letterSpacing:'0.05em'}}>Plataforma all-in-one · v8.4</span>
          </div>
          <span style={{fontSize:11, fontFamily:'var(--mono)', color:'var(--ink-4)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Curitiba · Brasil</span>
        </div>

        <div style={{display:'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 64, alignItems:'center'}} className="hero-grid">
          {/* left */}
          <div>
            <h1 data-reveal data-reveal-delay="1" className="hero-h1" style={{
              fontFamily:'var(--serif)', fontSize:'clamp(38px, 4.6vw, 76px)', lineHeight: 1.0,
              letterSpacing:'-0.025em', fontWeight:400,
              marginBottom: 32,
            }}>
              <span style={{whiteSpace:'nowrap'}}>Toda sua operação.</span><br/>
              <span style={{color:'var(--primary)', fontStyle:'italic'}}>Uma única plataforma.</span>
            </h1>
            <p data-reveal data-reveal-delay="2" className="hero-lead" style={{
              fontSize:21, lineHeight:1.5, color:'var(--ink-2)', maxWidth: 580, marginBottom: 40,
            }}>
              CRM, BPM, ERP e OmniChannel integrados nativamente. Da primeira oportunidade ao faturamento — sem planilhas, sem retrabalho, sem trocar de sistema.
            </p>
            <div data-reveal data-reveal-delay="3" className="hero-ctas" style={{display:'flex', gap:10, marginBottom: 56, flexWrap:'wrap'}}>
              <a href="#contact" style={{
                background:'var(--ink)', color:'white', padding:'16px 26px', borderRadius:8,
                fontSize:15, fontWeight:500, display:'inline-flex', alignItems:'center', gap:8,
              }}>
                Agendar demonstração
                <span style={{fontSize:13}}>→</span>
              </a>
              <a href="#modules" style={{
                background:'white', color:'var(--ink)', padding:'16px 26px', borderRadius:8,
                fontSize:15, fontWeight:500, border:'1px solid var(--line-strong)',
                display:'inline-flex', alignItems:'center', gap:8,
              }}>Ver módulos</a>
            </div>
            {/* stats */}
            <div data-reveal data-reveal-delay="4" className="hero-stats" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, paddingTop: 28, borderTop:'1px solid var(--line)'}}>
              {[
                ['30+','Empresas ativas'],
                ['99%','Uptime 12 meses'],
                ['8h–18h','Suporte humano'],
              ].map(([n,l]) => (
                <div key={l}>
                  <div className="hero-stat-num" style={{fontFamily:'var(--serif)', fontSize:48, lineHeight:1, fontWeight:400, color:'var(--ink)'}}>{n}</div>
                  <div style={{fontSize:12, color:'var(--ink-3)', marginTop:8, fontFamily:'var(--mono)', textTransform:'uppercase', letterSpacing:'0.06em'}}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* right — floating dashboard */}
          <div data-reveal data-reveal-delay="2" style={{position:'relative'}}>
            {/* coral halo */}
            <div style={{position:'absolute', inset:'-40px -60px', background:'radial-gradient(60% 50% at 60% 40%, rgba(240,138,44,0.18), transparent 70%)', filter:'blur(20px)', zIndex:0}}/>
            <div style={{position:'relative', zIndex:1, transform:'rotate(0.3deg)'}} className="hero-mockup-wrap">
              <div style={{
                position:'relative',
                background:'#000',
                borderRadius: 14,
                overflow:'hidden',
                boxShadow:'0 1px 0 rgba(0,0,0,0.04), 0 30px 60px -20px rgba(20,17,15,0.28), 0 12px 24px -12px rgba(20,17,15,0.12)',
                border:'1px solid rgba(20,17,15,0.06)',
              }}>
                {/* browser chrome */}
                <div style={{
                  height: 36, background:'#FBF9F5', borderBottom:'1px solid var(--line)',
                  display:'flex', alignItems:'center', gap: 8, padding:'0 14px',
                  fontSize: 11, color:'var(--ink-3)', fontFamily:'var(--mono)',
                }}>
                  <span style={{width:10, height:10, borderRadius:'50%', background:'#FF5F57'}}/>
                  <span style={{width:10, height:10, borderRadius:'50%', background:'#FEBC2E'}}/>
                  <span style={{width:10, height:10, borderRadius:'50%', background:'#28C840'}}/>
                  <div style={{flex:1, textAlign:'center'}}>frution.com.br · demo</div>
                </div>
                {/* video */}
                <div style={{position:'relative', width:'100%', aspectRatio:'16/9', background:'#000'}}>
                  <iframe
                    src="https://www.youtube.com/embed/I2Mz5Bxj99c?rel=0&modestbranding=1"
                    title="Frution — demo"
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerPolicy="strict-origin-when-cross-origin"
                    allowFullScreen
                    style={{position:'absolute', inset:0, width:'100%', height:'100%', border:0}}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
          .float-card { display: none !important; }
        }
        @media (max-width: 560px) {
          .hero-h1 { font-size: clamp(40px, 11vw, 56px) !important; line-height: 1 !important; }
          .hero-lead { font-size: 17px !important; }
          .hero-ctas a { padding: 14px 20px !important; font-size: 14px !important; }
          .hero-stats { gap: 16px !important; }
          .hero-stat-num { font-size: 32px !important; }
        }
      `}</style>
    </section>
  );
};

// ============== TICKER (clientes) ==============
const CLIENT_LOGOS = [
  ['Bruke', asset('cliBruke','/landing/assets/clients/bruke.png')],
  ['Diprotec', asset('cliDiprotec','/landing/assets/clients/diprotec.png')],
  ['Flexoseal', asset('cliFlexoseal','/landing/assets/clients/flexoseal.png')],
  ['Fugenband', asset('cliFugenband','/landing/assets/clients/fugenband.png')],
  ['Grantech', asset('cliGrantech','/landing/assets/clients/grantech.jpeg')],
  ['Impermarket', asset('cliImpermarket','/landing/assets/clients/impermarket.png')],
  ['Qualita', asset('cliQualita','/landing/assets/clients/qualita.png')],
  ['Radhex', asset('cliRadhex','/landing/assets/clients/radhex.png')],
  ['Revestech', asset('cliRevestech','/landing/assets/clients/revestech.png')],
  ['Wtec', asset('cliWtec','/landing/assets/clients/wtec.png')],
];

const ClientTicker = () => {
  const items = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <section style={{padding:'40px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', background:'var(--paper-2)', overflow:'hidden'}}>
      <div className="container" style={{marginBottom:24, display:'flex', gap:14, alignItems:'center'}}>
        <span className="eyebrow-num">→</span>
        <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)'}}>Empresas que crescem com a Frution</span>
      </div>
      <div style={{position:'relative', overflow:'hidden'}}>
        <div className="ticker">
          {items.map(([n,src],i) => (
            <div key={i} style={{
              padding:'0 52px', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:52,
              flexShrink: 0, height: 84,
            }}>
              <img src={src} alt={n} style={{maxHeight:64, maxWidth:220, width:'auto', objectFit:'contain', filter:'grayscale(1) brightness(0.5) contrast(1.2)', opacity: 0.7, transition:'all 0.25s'}} className="ticker-logo"/>
              <span style={{width:5, height:5, borderRadius:'50%', background:'var(--primary)', flexShrink:0}}/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .ticker {
          display: flex;
          width: max-content;
          animation: ticker 60s linear infinite;
        }
        .ticker:hover { animation-play-state: paused; }
        .ticker-logo:hover { filter: none !important; opacity: 1 !important; }
        @keyframes ticker {
          to { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  );
};

// ============== ABOUT / MANIFESTO ==============
const About = () => {
  return (
    <section id="about" style={{padding:'100px 0'}}>
      <div className="container">
        {/* TOP: eyebrow row */}
        <div data-reveal style={{display:'flex', alignItems:'baseline', gap:18, marginBottom: 40, flexWrap:'wrap'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--primary)', letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:500}}>01 — Sobre</div>
          <span style={{flex:1, height:1, background:'var(--line)', minWidth:40}}/>
          <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', letterSpacing:'0.12em', textTransform:'uppercase'}}>Desde 2023</div>
        </div>

        {/* MAIN: text left, screenshot right */}
        <div style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1.15fr)', gap:60, alignItems:'center', marginBottom:72}} className="two-col about-main">
          <div>
            <h2 data-reveal style={{
              fontFamily:'var(--serif)', fontSize:'clamp(36px, 3.8vw, 56px)', lineHeight:1.04,
              letterSpacing:'-0.02em', fontWeight:400, marginBottom:24,
            }}>
              Soluções integradas para <span style={{fontStyle:'italic', color:'var(--primary)'}}>todos os tamanhos</span> de negócios.
            </h2>
            <p data-reveal data-reveal-delay="1" style={{fontSize:16.5, lineHeight:1.6, color:'var(--ink-2)', marginBottom:14}}>
              Direto ao ponto. A Frution foi desenvolvida para que a experiência seja completa, objetiva e produtiva — integração total desde o início de uma oportunidade até o faturamento.
            </p>
            <p data-reveal data-reveal-delay="2" style={{fontSize:14, lineHeight:1.6, color:'var(--ink-3)'}}>
              Sem dados desconectados. Sem planilhas paralelas. Sem retrabalho entre times.
            </p>
          </div>

          <div data-reveal data-reveal-delay="2" style={{
            borderRadius: 12,
            overflow: 'hidden',
            border: '1px solid var(--line-strong)',
            boxShadow: '0 30px 60px -25px rgba(20,17,15,0.2), 0 10px 20px -10px rgba(20,17,15,0.08)',
            background: '#FBF9F5',
          }}>
            <div style={{
              display:'flex', alignItems:'center', gap:8,
              padding:'10px 14px', background:'#F2EEE5',
              borderBottom:'1px solid var(--line)',
            }}>
              <span style={{width:10, height:10, borderRadius:'50%', background:'#FF5F57'}}/>
              <span style={{width:10, height:10, borderRadius:'50%', background:'#FEBC2E'}}/>
              <span style={{width:10, height:10, borderRadius:'50%', background:'#28C840'}}/>
              <div style={{
                marginLeft:14, padding:'4px 12px',
                background:'white', border:'1px solid var(--line)',
                borderRadius:6,
                fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-3)',
                display:'inline-flex', alignItems:'center', gap:6,
              }}>
                <span style={{color:'var(--ink-4)'}}>app.frution.com.br</span>
                <span>/funis</span>
              </div>
              <span style={{marginLeft:'auto', fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Plataforma · ao vivo</span>
            </div>
            <img
              src={asset('crmTela','/landing/assets/crm-tela01.png')}
              alt="Frution — Funis de vendas em uso"
              style={{display:'block', width:'100%', height:'auto'}}
            />
          </div>
        </div>

        {/* BOTTOM: 3 pillars */}
        <div data-reveal data-reveal-delay="3" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:32, paddingTop:36, borderTop:'1px solid var(--line)'}} className="about-pillars">
          {[
            ['Integração total','Sistema único para toda sua empresa — CRM, BPM, ERP e OmniChannel falando entre si.'],
            ['Produtividade','Automação inteligente de processos que tira da sua equipe o trabalho repetitivo.'],
            ['Escalável','Cresce junto com seu negócio, do primeiro vendedor à operação multi-filial.'],
          ].map(([t,d]) => (
            <div key={t}>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
                <span style={{width:20, height:20, borderRadius:'50%', background:'var(--primary)', color:'white', fontSize:11, display:'inline-flex', alignItems:'center', justifyContent:'center', fontWeight:700}}>✓</span>
                <strong style={{fontSize:15.5, letterSpacing:'-0.005em'}}>{t}</strong>
              </div>
              <p style={{fontSize:13.5, color:'var(--ink-3)', lineHeight:1.55}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-main { grid-template-columns: 1fr !important; gap: 40px !important; }
          .about-pillars { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

// ============== MODULES (interactive tabs) ==============
const Modules = () => {
  const [active, setActive] = useState('CRM');
  const modules = [
    {key:'CRM', label:'CRM', sub:'Relacionamento', desc:'Gerencie todos os relacionamentos com clientes em um único lugar. Rastreamento de vendas, automação de marketing e análise para melhorar conversão.', tags:['Pipeline','Funis','Forecast','Automação'], Mock: CRMMockup},
    {key:'BPM', label:'BPM', sub:'Automação', desc:'Automação inteligente de processos empresariais. Gerencie fluxos complexos, melhore eficiência operacional e garanta conformidade.', tags:['Workflows','SLAs','Aprovações','Auditoria'], Mock: BPMMockup},
    {key:'ERP', label:'ERP', sub:'Integrado', desc:'Controle completo de estoque, compras, vendas e financeiro. Dados consistentes e processos alinhados em uma plataforma única.', tags:['Financeiro','Estoque','Compras','Fiscal'], Mock: ERPMockup},
    {key:'Omni', label:'OmniChannel', sub:'Comunicação', desc:'Email, WhatsApp, redes sociais e chat centralizados em um único dashboard. Atendimento rápido em todos os canais.', tags:['WhatsApp','Email','Instagram','Chat'], Mock: OmniMockup},
    {key:'Track', label:'Tracking', sub:'Origem das conversas', desc:'Saiba de onde vem cada conversa do seu WhatsApp — Google Ads, Facebook Ads, ChatGPT, busca orgânica ou indicação. Atribuição automática, ROI por canal e fim do achismo nas campanhas.', tags:['Google Ads','Meta Ads','ChatGPT','Orgânico'], Mock: TrackingMockup},
  ];
  const current = modules.find(m => m.key === active);
  return (
    <section id="modules" style={{padding:'120px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1.2fr)', gap:60, alignItems:'flex-end', marginBottom: 56}} className="two-col">
          <div>
            <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>02 — Módulos</div>
            <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(56px, 6.4vw, 104px)', lineHeight:0.98, letterSpacing:'-0.02em', fontWeight:400}}>
              Módulos<br/><span style={{fontStyle:'italic', color:'var(--primary)'}}>poderosos.</span>
            </h2>
          </div>
          <p data-reveal data-reveal-delay="2" style={{fontSize:19, color:'var(--ink-2)', lineHeight:1.55, paddingBottom:14}}>
            Escolha os módulos que sua empresa precisa hoje. Adicione os outros quando crescer — todos compartilham os mesmos dados, contatos e fluxos automaticamente.
          </p>
        </div>

        {/* tabs */}
        <div data-reveal style={{marginBottom: 48}}>
          <div style={{
            fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)',
            letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:14,
            display:'flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:24, height:1, background:'var(--ink-3)', display:'inline-block'}}/>
            Clique para explorar cada módulo
          </div>
          <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
            {modules.map((m,i) => {
              const isActive = active === m.key;
              return (
                <button
                  key={m.key}
                  onClick={() => setActive(m.key)}
                  className="module-tab"
                  style={{
                    padding:'14px 22px',
                    background: isActive ? 'var(--ink)' : 'white',
                    border: isActive ? '1px solid var(--ink)' : '1px solid var(--line-strong)',
                    borderRadius: 99,
                    fontSize: 15, fontWeight: 500,
                    color: isActive ? 'white' : 'var(--ink)',
                    fontFamily:'var(--sans)', cursor:'pointer',
                    display:'inline-flex', alignItems:'center', gap:10,
                    whiteSpace:'nowrap',
                    transition: 'all 0.18s ease',
                    boxShadow: isActive ? '0 6px 18px -6px rgba(20,17,15,0.35)' : '0 1px 2px rgba(20,17,15,0.04)',
                  }}>
                  <span style={{
                    fontFamily:'var(--mono)', fontSize:10,
                    color: isActive ? 'var(--primary)' : 'var(--ink-3)',
                    fontWeight:500, letterSpacing:'0.05em',
                  }}>0{i+1}</span>
                  <span>{m.label}</span>
                  <span style={{
                    fontSize:11, fontWeight:400, fontStyle:'italic', fontFamily:'var(--serif)',
                    color: isActive ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)',
                  }}>· {m.sub}</span>
                </button>
              );
            })}
          </div>
          <style>{`
            .module-tab:hover { transform: translateY(-1px); border-color: var(--ink) !important; }
          `}</style>
        </div>

        {/* active panel */}
        <div key={active} className="module-panel" style={{display:'grid', gridTemplateColumns:'minmax(0,0.7fr) minmax(0,1.3fr)', gap:48, alignItems:'center'}}>
          <div>
            <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--primary)', textTransform:'uppercase', letterSpacing:'0.18em', marginBottom:14}}>{current.sub}</div>
            <h3 style={{fontFamily:'var(--serif)', fontSize:'clamp(40px, 5.4vw, 60px)', lineHeight:1.02, letterSpacing:'-0.015em', marginBottom:24, fontWeight:400}}>
              {current.label}
            </h3>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink-2)', marginBottom:30}}>{current.desc}</p>
            <div style={{display:'flex', gap:6, flexWrap:'wrap', marginBottom:32}}>
              {current.tags.map(t => (
                <span key={t} style={{fontSize:11.5, padding:'5px 11px', background:'white', border:'1px solid var(--line)', borderRadius:99, color:'var(--ink-2)', fontFamily:'var(--mono)'}}>{t}</span>
              ))}
            </div>
            <a href="#contact" style={{fontSize:13, fontWeight:500, color:'var(--ink)', borderBottom:'1px solid var(--ink)', paddingBottom:2, display:'inline-flex', gap:6}}>
              Ver demo do {current.label} →
            </a>
          </div>
          <div className="module-mock-wrap">
            <current.Mock/>
          </div>
        </div>
      </div>
      <style>{`
        .module-panel { animation: fade-up 0.45s cubic-bezier(.2,.7,.2,1); }
        @keyframes fade-up {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .module-mock-wrap { min-width: 0; }
        @media (max-width: 1000px) {
          .module-panel { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 720px) {
          /* full-bleed mockup on phones — escape container, fill viewport */
          .module-mock-wrap {
            overflow: hidden;
            border-radius: 0;
            margin-left: calc(-1 * var(--gutter));
            margin-right: calc(-1 * var(--gutter));
            width: 100vw;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            display: flex;
            justify-content: center;
          }
          .module-mock-wrap > * {
            transform: scale(0.95);
            transform-origin: top center;
            width: 105.3%;
            margin-bottom: -5.2%;
            flex-shrink: 0;
          }
        }
        @media (max-width: 520px) {
          .module-mock-wrap > * {
            transform: scale(0.78);
            width: 128.2%;
            margin-bottom: -22%;
          }
        }
        @media (max-width: 380px) {
          .module-mock-wrap > * {
            transform: scale(0.66);
            width: 151.5%;
            margin-bottom: -34%;
          }
        }
      `}</style>
    </section>
  );
};

// ============== FEATURES ==============
const Features = () => {
  const features = [
    {n:'01', t:'Layout responsivo', d:'Funciona perfeitamente em desktop, tablet e dispositivos móveis com interface otimizada.'},
    {n:'02', t:'Código limpo', d:'Bem estruturado, mantível e escalável para facilitar futuras atualizações.'},
    {n:'03', t:'Funcionalidades premium', d:'Recursos avançados para automação e otimização dos seus processos.'},
    {n:'04', t:'Design moderno', d:'Interface contemporânea com experiência de usuário intuitiva e agradável.'},
    {n:'05', t:'Dashboard gerencial', d:'Painéis analíticos com gráficos, relatórios e KPIs em tempo real.'},
    {n:'06', t:'Acesso fácil e simples', d:'Login intuitivo com múltiplas opções de autenticação para segurança.'},
    {n:'07', t:'Notificações inteligentes', d:'Alertas personalizados em tempo real sobre eventos importantes.'},
    {n:'08', t:'Custo justo', d:'Preços competitivos com flexibilidade de pagamento adaptada ao orçamento.'},
    {n:'09', t:'Features únicas', d:'Recursos exclusivos que diferenciam a Frution da concorrência.'},
    {n:'10', t:'Suporte comercial', d:'Time de atendimento disponível em horário comercial (8h–18h) para o que você precisar.'},
  ];
  return (
    <section id="features" style={{padding:'120px 0'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1.2fr)', gap:60, alignItems:'flex-end', marginBottom:64}} className="two-col">
          <div>
            <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>03 — Recursos</div>
            <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(56px, 6.4vw, 104px)', lineHeight:0.98, letterSpacing:'-0.02em', fontWeight:400}}>
              Funcionalidades<br/><span style={{fontStyle:'italic', color:'var(--primary)'}}>incríveis.</span>
            </h2>
          </div>
          <p data-reveal data-reveal-delay="2" style={{fontSize:19, color:'var(--ink-2)', lineHeight:1.55}}>
            Tudo o que você precisa para gerenciar seu negócio em um único lugar.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px, 1fr))', gap:0, border:'1px solid var(--line)'}} className="features-grid">
          {features.map((f, i) => (
            <div key={f.n} data-reveal data-reveal-delay={(i % 4) + 1} className="feature-cell" style={{
              padding:'28px 24px',
              borderRight:'1px solid var(--line)',
              borderBottom:'1px solid var(--line)',
              background:'var(--paper)',
              minHeight: 200,
              position:'relative',
              transition:'background 0.2s',
            }}>
              <div style={{fontFamily:'var(--mono)', fontSize:13, color:'var(--primary)', letterSpacing:'0.05em', marginBottom:40}}>/{f.n}</div>
              <div style={{fontFamily:'var(--serif)', fontSize:28, fontWeight:400, marginBottom:10, letterSpacing:'-0.01em', lineHeight:1.1}}>{f.t}</div>
              <div style={{fontSize:14.5, color:'var(--ink-3)', lineHeight:1.55}}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .feature-cell:hover { background: white !important; }
      `}</style>
    </section>
  );
};

// ============== TRACKING CTA ==============
const TrackingCTA = () => {
  return (
    <section style={{padding: '100px 0'}}>
      <div className="container">
        <div data-reveal className="tracking-card" style={{
          background:'var(--ink)', color:'white', borderRadius: 18,
          padding:'64px 56px', position:'relative', overflow:'hidden',
        }}>
          {/* decorative */}
          <div style={{position:'absolute', top:-60, right:-60, width:300, height:300, borderRadius:'50%', background:'radial-gradient(circle, rgba(240,138,44,0.35), transparent 70%)', filter:'blur(20px)'}}/>
          <div style={{display:'grid', gridTemplateColumns:'minmax(0,1.3fr) minmax(0,1fr)', gap:48, alignItems:'center', position:'relative'}} className="two-col">
            <div>
              <div className="eyebrow-num" style={{marginBottom:18}}>Frution Tracking</div>
              <h2 style={{fontFamily:'var(--serif)', fontSize:'clamp(44px, 5.2vw, 80px)', lineHeight:1.02, letterSpacing:'-0.02em', fontWeight:400, marginBottom:24}}>
                Rastreie a origem dos seus leads e entenda <span style={{fontStyle:'italic', color:'var(--primary)'}}>onde suas campanhas estão funcionando.</span>
              </h2>
              <p style={{fontSize:18, color:'rgba(255,255,255,0.7)', lineHeight:1.55, marginBottom:30, maxWidth: 560}}>
                UTMs, atribuição multi-touch, ROI por canal. Direto no CRM, sem ferramentas paralelas.
              </p>
              <a href="https://track.frutioncloud.com.br/" style={{
                display:'inline-flex', alignItems:'center', gap:8,
                background:'var(--primary)', color:'white', padding:'14px 22px', borderRadius:8,
                fontSize:14, fontWeight:500,
              }}>Conheça Frution Tracking <span>→</span></a>
            </div>
            <div style={{position:'relative'}}>
              <div style={{background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:12, padding:18}}>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:14}}>Atribuição · últimos 30 dias</div>
                {[
                  ['Google Ads', 38, '#F08A2C'],
                  ['LinkedIn', 24, '#1877F2'],
                  ['Indicação', 18, '#16A34A'],
                  ['Orgânico', 14, '#FBF9F5'],
                  ['Outros', 6, '#5C544E'],
                ].map(([n,p,c]) => (
                  <div key={n} style={{display:'grid', gridTemplateColumns:'90px 1fr 40px', gap:10, alignItems:'center', marginBottom:10, fontSize:12}}>
                    <span style={{color:'rgba(255,255,255,0.85)'}}>{n}</span>
                    <div style={{height:4, borderRadius:99, background:'rgba(255,255,255,0.1)', overflow:'hidden'}}>
                      <div style={{width:`${p}%`, height:'100%', background:c}}/>
                    </div>
                    <span style={{textAlign:'right', fontFamily:'var(--mono)', color:'rgba(255,255,255,0.6)'}}>{p}%</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .tracking-card { padding: 40px 24px !important; border-radius: 14px !important; }
        }
      `}</style>
    </section>
  );
};

// ============== PRICING ==============
const Pricing = () => {
  const plans = [
    {n:'BPM + CRM', d:'Perfeito para pequenas equipes de vendas e operações.', f:['Automação de processos','Gestão de relacionamento','Dashboard básico','Mínimo de 5 usuários','Suporte por email']},
    {n:'OmniChannel', d:'Para empresas focadas em excelência no atendimento.', f:['Tudo do plano anterior','Comunicação multi-canal','WhatsApp, Email integrados','Suporte prioritário'], featured: true},
    {n:'Plano Full', d:'Solução completa para empresas em crescimento.', f:['Todos os módulos (BPM, CRM, ERP, OmniChannel, Tracking)','Dashboard gerencial avançado','Relatórios personalizados','API de integração']},
  ];
  return (
    <section id="pricing" style={{padding:'120px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 740, margin:'0 auto 64px'}}>
          <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>04 — Preços</div>
          <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(56px, 6.4vw, 96px)', lineHeight:1.0, letterSpacing:'-0.02em', fontWeight:400, marginBottom:22}}>
            Para cada negócio,<br/><span style={{fontStyle:'italic', color:'var(--primary)'}}>em qualquer estágio.</span>
          </h2>
          <p data-reveal data-reveal-delay="2" style={{fontSize:18, color:'var(--ink-2)', lineHeight:1.55}}>
            Todos os pacotes têm garantia de devolução do dinheiro em 30 dias.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, alignItems:'stretch', maxWidth: 1100, margin:'0 auto'}} className="pricing-grid">
          {plans.map((p, i) => (
            <div key={p.n} data-reveal data-reveal-delay={i+1} style={{
              background: p.featured ? 'var(--ink-deep)' : 'white',
              color: p.featured ? 'white' : 'var(--ink)',
              padding:'40px 32px',
              borderRadius: i===0?'12px 0 0 12px':i===2?'0 12px 12px 0':'0',
              border: p.featured ? 'none' : '1px solid var(--line)',
              borderRight: i===0 ? 'none' : (p.featured ? 'none' : '1px solid var(--line)'),
              transform: p.featured ? 'scale(1.03)' : 'none',
              boxShadow: p.featured ? '0 30px 60px -20px rgba(20,17,15,0.3)' : 'none',
              position:'relative', zIndex: p.featured ? 2 : 1,
              display:'flex', flexDirection:'column',
            }}>
              {p.featured && (
                <div style={{position:'absolute', top:-12, left:'50%', transform:'translateX(-50%)', background:'var(--primary)', color:'white', fontSize:10.5, padding:'4px 12px', borderRadius:99, fontFamily:'var(--mono)', letterSpacing:'0.1em', fontWeight:600, textTransform:'uppercase'}}>Mais popular</div>
              )}
              <div style={{fontFamily:'var(--mono)', fontSize:11, color: p.featured ? 'rgba(255,255,255,0.55)' : 'var(--ink-4)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:10}}>Plano {String(i+1).padStart(2,'0')}</div>
              <div style={{fontFamily:'var(--serif)', fontSize:36, fontWeight:400, letterSpacing:'-0.015em', marginBottom:10, lineHeight:1.05}}>{p.n}</div>
              <p style={{fontSize:15, color: p.featured ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)', lineHeight:1.55, marginBottom:30, minHeight:46}}>{p.d}</p>
              <div style={{marginBottom:28}}>
                <div style={{display:'flex', alignItems:'baseline', gap:6}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:54, fontWeight:400, fontStyle:'italic', color: p.featured ? 'var(--primary)' : 'var(--primary-deep)', lineHeight:1}}>Consulte</span>
                </div>
                <div style={{fontSize:11, color: p.featured ? 'rgba(255,255,255,0.5)' : 'var(--ink-4)', fontFamily:'var(--mono)', marginTop:4}}>por mês · por usuário</div>
              </div>
              <ul style={{flex:1, marginBottom:24}}>
                {p.f.map(feat => (
                  <li key={feat} style={{display:'flex', gap:10, fontSize:14.5, padding:'10px 0', borderTop: p.featured ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--line)', color: p.featured ? 'rgba(255,255,255,0.85)' : 'var(--ink-2)', lineHeight:1.45}}>
                    <span style={{color:'var(--primary)', flexShrink:0, marginTop:2}}>✓</span>
                    {feat}
                  </li>
                ))}
              </ul>
              <a href="#contact" style={{
                display:'block', textAlign:'center', padding:'13px 18px', borderRadius:8,
                background: p.featured ? 'var(--primary)' : 'var(--ink)',
                color:'white', fontSize:14, fontWeight:500,
              }}>Falar com vendas</a>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .pricing-grid { grid-template-columns: 1fr !important; max-width: 460px !important; gap: 0 !important; }
          .pricing-grid > div { transform: none !important; border-radius: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: none !important; }
          .pricing-grid > div:first-child { border-radius: 12px 12px 0 0 !important; }
          .pricing-grid > div:last-child { border-radius: 0 0 12px 12px !important; }
        }
      `}</style>
    </section>
  );
};

// ============== CLIENTS + TESTIMONIAL ==============
const Clients = () => {
  const clients = CLIENT_LOGOS;
  return (
    <section id="clients" style={{padding:'120px 0'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 720, margin:'0 auto 64px'}}>
          <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>05 — Clientes</div>
          <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(48px, 5.6vw, 88px)', lineHeight:1.02, letterSpacing:'-0.02em', fontWeight:400, marginBottom:16}}>
            Empresas que escolheram a Frution.
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, border:'1px solid var(--line)', borderRadius: 12, overflow:'hidden', marginBottom: 80}} className="clients-grid">
          {clients.map(([n, src], i) => (
            <div key={n} style={{
              padding:'48px 28px',
              borderRight: (i+1)%5===0 ? 'none' : '1px solid var(--line)',
              borderBottom: i<5 ? '1px solid var(--line)' : 'none',
              display:'flex', alignItems:'center', justifyContent:'center',
              background:'white',
              transition:'all 0.25s',
              minHeight: 150,
            }} className="client-cell">
              <img src={src} alt={n} style={{
                maxHeight: 76, maxWidth: '90%', width:'auto', objectFit:'contain',
                filter:'grayscale(1) brightness(0.55) contrast(1.15)',
                opacity: 0.75, transition:'all 0.25s',
              }} className="client-logo"/>
            </div>
          ))}
        </div>

      </div>
      <style>{`
        .client-cell:hover { background: var(--paper) !important; }
        .client-cell:hover .client-logo { filter: none !important; opacity: 1 !important; }
        @media (max-width: 800px) {
          .clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .clients-grid > div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
        }
      `}</style>
    </section>
  );
};

// ============== BLOG ==============
const Blog = () => {
  const posts = [
    {tag:'Novidades', d:'12 ABR', t:'Organização de contatos por etiquetas', e:'Agora ficou ainda mais fácil organizar os contatos da sua carteira. Separe os contatos "Em Atendimento" e organize-os com etiquetas personalizadas.'},
    {tag:'Produto', d:'04 ABR', t:'Agendamento de mensagens via WhatsApp', e:'Programe o envio de mensagens no horário ideal — para clientes, follow-ups e campanhas. Direto do OmniChannel.'},
    {tag:'Lançamento', d:'25 MAR', t:'Eventos Frution', e:'Organizar e acompanhar eventos pode ser um desafio. Planilhas, anotações, contatos espalhados. O Eventos Frution chegou pra mudar isso.'},
  ];
  return (
    <section id="blog" style={{padding:'120px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:56, flexWrap:'wrap', gap:20}}>
          <div>
            <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>06 — Blog</div>
            <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(48px, 5.6vw, 84px)', lineHeight:1.0, letterSpacing:'-0.02em', fontWeight:400}}>
              Novidades & ideias.
            </h2>
          </div>
          <a href="https://www.frution.com.br/blog" style={{fontSize:13, fontWeight:500, color:'var(--ink)', borderBottom:'1px solid var(--ink)', paddingBottom:2}}>
            Ver todos os posts →
          </a>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24}} className="blog-grid">
          {posts.map((p, i) => (
            <a key={p.t} data-reveal data-reveal-delay={i+1} href="https://www.frution.com.br/blog" style={{
              background:'white', borderRadius:14, padding:'28px 28px 32px',
              border:'1px solid var(--line)',
              display:'flex', flexDirection:'column',
              transition:'all 0.25s', cursor:'pointer',
            }} className="blog-card">
              {/* hero strip with mark */}
              <div style={{
                aspectRatio:'16/9', borderRadius:8,
                background: i===0 ? 'linear-gradient(135deg, var(--primary-tint), var(--primary-soft))' :
                            i===1 ? 'linear-gradient(135deg, #FBF9F5, var(--paper-3))' :
                                    'linear-gradient(135deg, var(--ink-2), var(--ink))',
                marginBottom: 24,
                display:'flex', alignItems:'center', justifyContent:'center',
                position:'relative', overflow:'hidden',
              }}>
                <div style={{opacity: 0.4, transform:'scale(1.6)'}}>
                  <FrutionMark size={60}/>
                </div>
              </div>
              <div style={{display:'flex', gap:10, alignItems:'center', marginBottom:14, fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', letterSpacing:'0.05em', textTransform:'uppercase'}}>
                <span style={{color:'var(--primary)'}}>{p.tag}</span>
                <span style={{color:'var(--ink-4)'}}>·</span>
                <span>{p.d}</span>
              </div>
              <h3 style={{fontFamily:'var(--serif)', fontSize:30, fontWeight:400, lineHeight:1.15, letterSpacing:'-0.015em', marginBottom:14}}>{p.t}</h3>
              <p style={{fontSize:14.5, color:'var(--ink-3)', lineHeight:1.55, marginBottom:26, flex:1}}>{p.e}</p>
              <span style={{fontSize:13, fontWeight:500, color:'var(--ink)', display:'inline-flex', gap:6}}>Ler mais →</span>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .blog-card:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -15px rgba(20,17,15,0.12); }
        @media (max-width: 900px) {
          .blog-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

// ============== CONTACT ==============
const Contact = () => {
  const [form, setForm] = useState({nome:'', email:'', tel:'', msg:''});
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (form.nome && form.email && form.msg) setSent(true);
  };
  return (
    <section id="contact" style={{padding:'120px 0'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'minmax(0,1.1fr) minmax(0,1fr)', gap: 80}} className="two-col">
          {/* left */}
          <div>
            <div data-reveal className="eyebrow-num" style={{marginBottom:14}}>07 — Contato</div>
            <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(56px, 6.4vw, 104px)', lineHeight:0.98, letterSpacing:'-0.02em', fontWeight:400, marginBottom:28}}>
              Vamos<br/><span style={{fontStyle:'italic', color:'var(--primary)'}}>conversar.</span>
            </h2>
            <p data-reveal data-reveal-delay="2" style={{fontSize:19, lineHeight:1.55, color:'var(--ink-2)', marginBottom: 56, maxWidth: 480}}>
              Preencha o formulário e nossa equipe responderá em até 24 horas. Ou fale direto com a gente:
            </p>
            <div data-reveal data-reveal-delay="3" style={{display:'grid', gap:24}}>
              {[
                ['Endereço','R. Des. Westphalen, 2390 — Rebouças\nCuritiba, PR · 80220-030'],
                ['Email','contato@frution.com.br'],
                ['WhatsApp','(41) 3030-7034'],
                ['Vendas','(41) 3030-7034'],
              ].map(([l,v]) => (
                <div key={l} style={{paddingTop:18, borderTop:'1px solid var(--line)', display:'grid', gridTemplateColumns: '120px 1fr', gap: 20}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em'}}>{l}</div>
                  <div style={{fontSize:14, color:'var(--ink), whiteSpace:pre-line', whiteSpace:'pre-line', lineHeight:1.5}}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          {/* right */}
          <div data-reveal data-reveal-delay="2">
            <form onSubmit={submit} style={{
              background:'white', border:'1px solid var(--line)', borderRadius: 14,
              padding: 36,
            }}>
              {sent ? (
                <div style={{textAlign:'center', padding:'40px 20px'}}>
                  <div style={{width:56, height:56, borderRadius:'50%', background:'var(--primary-tint)', color:'var(--primary-deep)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:28, marginBottom:16}}>✓</div>
                  <div style={{fontFamily:'var(--serif)', fontSize:28, marginBottom:8}}>Mensagem enviada!</div>
                  <p style={{fontSize:14, color:'var(--ink-3)'}}>Vamos retornar em até 24h.</p>
                </div>
              ) : (
                <>
                  <div style={{display:'grid', gap:20}}>
                    {[
                      ['nome','Nome completo','text', true],
                      ['email','Email','email', true],
                      ['tel','Telefone','tel', false],
                    ].map(([k,l,t,r]) => (
                      <div key={k}>
                        <label style={{fontSize:11, fontFamily:'var(--mono)', color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6, display:'block'}}>{l} {r && <span style={{color:'var(--primary)'}}>*</span>}</label>
                        <input
                          type={t} value={form[k]} required={r}
                          onChange={e => setForm({...form, [k]: e.target.value})}
                          style={{
                            width:'100%', padding:'12px 14px', fontSize:14,
                            border:'1px solid var(--line-strong)', borderRadius:8,
                            background:'var(--paper)', fontFamily:'inherit',
                            outline:'none', transition:'all 0.15s',
                          }}
                          className="form-input"
                        />
                      </div>
                    ))}
                    <div>
                      <label style={{fontSize:11, fontFamily:'var(--mono)', color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6, display:'block'}}>Mensagem <span style={{color:'var(--primary)'}}>*</span></label>
                      <textarea
                        value={form.msg} required rows={5}
                        onChange={e => setForm({...form, msg: e.target.value})}
                        style={{
                          width:'100%', padding:'12px 14px', fontSize:14,
                          border:'1px solid var(--line-strong)', borderRadius:8,
                          background:'var(--paper)', fontFamily:'inherit', resize:'vertical',
                          outline:'none', transition:'all 0.15s',
                        }}
                        className="form-input"
                      />
                    </div>
                  </div>
                  <button type="submit" style={{
                    marginTop:24, width:'100%', background:'var(--ink)', color:'white',
                    padding:'14px 22px', borderRadius:8, fontSize:14, fontWeight:500,
                    border:'none', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
                  }}>Enviar mensagem <span>→</span></button>
                  <p style={{fontSize:11, color:'var(--ink-4)', marginTop:14, textAlign:'center', fontFamily:'var(--mono)'}}>
                    Ao enviar, você concorda com nossa política de privacidade · LGPD
                  </p>
                </>
              )}
            </form>
          </div>
        </div>
      </div>
      <style>{`
        .form-input:focus { border-color: var(--primary) !important; background: white !important; box-shadow: 0 0 0 3px rgba(240,138,44,0.12); }
      `}</style>
    </section>
  );
};

// ============== WHATSAPP FAB ==============
const WhatsAppFAB = () => {
  const phone = '554130307034';
  const msg = encodeURIComponent('Olá! Gostaria de saber mais sobre a Frution.');
  return (
    <>
      <style>{`
        @keyframes wa-pulse { 0%,100% { box-shadow: 0 12px 32px -8px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0.4); } 50% { box-shadow: 0 12px 32px -8px rgba(37,211,102,0.55), 0 0 0 14px rgba(37,211,102,0); } }
        .wa-fab { animation: wa-pulse 2.4s ease-in-out infinite; }
      `}</style>
      <a
        href={`https://wa.me/${phone}?text=${msg}`}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Falar no WhatsApp"
        className="wa-fab link-whats-frution"
        style={{
          position:'fixed', bottom:24, right:24, zIndex: 100,
          width:60, height:60, borderRadius:'50%',
          background:'#25D366', display:'flex', alignItems:'center', justifyContent:'center',
          transition:'transform 0.15s', textDecoration:'none',
        }}
        onMouseEnter={e => e.currentTarget.style.transform='scale(1.06)'}
        onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}
      >
        <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
          <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.42 1.32 4.91L2 22l5.31-1.39a9.86 9.86 0 0 0 4.73 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.13c-1.5 0-2.97-.4-4.24-1.16l-.3-.18-3.15.83.84-3.07-.2-.32a8.21 8.21 0 0 1-1.26-4.32c0-4.54 3.7-8.23 8.24-8.23 4.54 0 8.23 3.69 8.23 8.23 0 4.54-3.69 8.22-8.16 8.22zm4.51-6.16c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.79.97-.15.16-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.22-1.46-1.37-1.7-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.49-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.83-.85 2.03 0 1.2.87 2.36.99 2.52.12.16 1.71 2.61 4.15 3.66.58.25 1.03.4 1.39.51.58.18 1.11.16 1.53.1.47-.07 1.46-.6 1.66-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.18-.47-.31z"/>
        </svg>
      </a>
    </>
  );
};

// ============== FOOTER (com Contato integrado) ==============
const Footer = () => {
  const [form, setForm] = useState({name:'', email:'', phone:'', message:''});
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [feedback, setFeedback] = useState(null); // {type:'success'|'error', text}
  const [sent, setSent] = useState(false);
  const [ip, setIp] = useState('');

  // Fetch user IP for the hidden field
  useEffect(() => {
    fetch('https://api.ipify.org?format=json')
      .then(r => r.json())
      .then(data => setIp(data.ip || ''))
      .catch(err => console.error('Erro ao recuperar o endereço IP:', err));
  }, []);

  const validateField = (k, v) => {
    if (k === 'name') {
      if (!v.trim()) return 'Por favor, insira seu nome';
    }
    if (k === 'email') {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!v.trim()) return 'Por favor, insira seu email';
      if (!re.test(v)) return 'Por favor, insira um email válido';
    }
    if (k === 'message') {
      if (!v.trim()) return 'Por favor, insira sua mensagem';
      if (v.trim().length < 10) return 'A mensagem deve ter pelo menos 10 caracteres';
    }
    return null;
  };

  const onBlur = (k) => () => {
    const err = validateField(k, form[k]);
    setErrors(prev => ({...prev, [k]: err || ''}));
  };

  const onChange = (k) => (e) => {
    const v = e.target.value;
    setForm(prev => ({...prev, [k]: v}));
    if (errors[k]) {
      const err = validateField(k, v);
      setErrors(prev => ({...prev, [k]: err || ''}));
    }
  };

  const submit = async (e) => {
    e.preventDefault();
    const next = {};
    ['name','email','message'].forEach(k => { const er = validateField(k, form[k]); if (er) next[k] = er; });
    setErrors(next);
    if (Object.keys(next).length) return;

    setSubmitting(true);
    setFeedback({type:'success', text:'Enviando...'});

    try {
      const fd = new FormData(e.currentTarget);
      const res = await fetch('https://gestao.frutioncloud.com.br/api/webhook', { method:'POST', body: fd });
      if (!res.ok) throw new Error('Erro ao enviar mensagem');
      setSent(true);
      setFeedback({type:'success', text:'Mensagem enviada com sucesso! Nossa equipe entrará em contato em breve.'});
      setForm({name:'', email:'', phone:'', message:''});
    } catch (err) {
      setFeedback({type:'error', text:'Erro ao enviar mensagem. Por favor, tente novamente mais tarde.'});
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <footer id="contact" style={{background:'var(--ink-deep)', color:'rgba(255,255,255,0.75)', paddingTop: 120, paddingBottom: 36, position:'relative', overflow:'hidden'}}>
      {/* decorative glow */}
      <div style={{position:'absolute', top:-120, right:-120, width:500, height:500, borderRadius:'50%', background:'radial-gradient(circle, rgba(240,138,44,0.18), transparent 70%)', filter:'blur(40px)', pointerEvents:'none'}}/>
      <div className="container" style={{position:'relative'}}>
        {/* CONTACT BLOCK */}
        <div style={{display:'grid', gridTemplateColumns:'minmax(0,1.1fr) minmax(0,1fr)', gap: 80, marginBottom: 96, paddingBottom: 80, borderBottom:'1px solid rgba(255,255,255,0.08)'}} className="footer-contact">
          {/* left */}
          <div>
            <div data-reveal className="eyebrow-num" style={{marginBottom:14, color:'rgba(255,255,255,0.5)'}}>07 — Contato</div>
            <h2 data-reveal data-reveal-delay="1" style={{fontFamily:'var(--serif)', fontSize:'clamp(56px, 6.4vw, 104px)', lineHeight:0.98, letterSpacing:'-0.02em', fontWeight:400, marginBottom:28, color:'white'}}>
              Vamos<br/><span style={{fontStyle:'italic', color:'var(--primary)'}}>conversar.</span>
            </h2>
            <p data-reveal data-reveal-delay="2" style={{fontSize:19, lineHeight:1.55, color:'rgba(255,255,255,0.72)', marginBottom: 48, maxWidth: 480}}>
              Preencha o formulário e nossa equipe responderá em até 24 horas. Ou fale direto com a gente:
            </p>
            <div data-reveal data-reveal-delay="3" style={{display:'grid', gap:20}}>
              {[
                ['Endereço','R. Des. Westphalen, 2390 — Rebouças\nCuritiba, PR · 80220-030'],
                ['Email','contato@frution.com.br'],
                ['WhatsApp','(41) 3030-7034'],
                ['Vendas','(41) 3030-7034'],
              ].map(([l,v]) => (
                <div key={l} style={{paddingTop:16, borderTop:'1px solid rgba(255,255,255,0.1)', display:'grid', gridTemplateColumns: '120px 1fr', gap: 20}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, color:'rgba(255,255,255,0.45)', textTransform:'uppercase', letterSpacing:'0.1em'}}>{l}</div>
                  <div style={{fontSize:14, color:'rgba(255,255,255,0.92)', whiteSpace:'pre-line', lineHeight:1.5}}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          {/* right — form */}
          <div data-reveal data-reveal-delay="2">
            <form id="contactForm" noValidate onSubmit={submit} style={{
              background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)',
              borderRadius: 14, padding: 36, backdropFilter:'blur(8px)',
            }}>
              <input type="hidden" name="source_origin" value="www.frution.com.br/landing"/>
              <input type="hidden" name="origin_id" value="3"/>
              <input type="hidden" name="company_id" value="1"/>
              <input id="ip" type="hidden" name="ip_address" value={ip} readOnly/>
               <input type="hidden" id="frution_tracking_id" name="tracking_id" />
              {sent ? (
                <div style={{textAlign:'center', padding:'40px 20px'}}>
                  <div style={{width:56, height:56, borderRadius:'50%', background:'rgba(240,138,44,0.18)', color:'var(--primary)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:28, marginBottom:16, border:'1px solid rgba(240,138,44,0.4)'}}>✓</div>
                  <div style={{fontFamily:'var(--serif)', fontSize:28, marginBottom:8, color:'white'}}>Mensagem enviada!</div>
                  <p style={{fontSize:14, color:'rgba(255,255,255,0.6)'}}>Nossa equipe entrará em contato em breve.</p>
                  <button type="button" onClick={() => { setSent(false); setFeedback(null); }} style={{marginTop:18, fontSize:12, fontFamily:'var(--mono)', color:'var(--primary)', background:'none', border:'none', cursor:'pointer', textTransform:'uppercase', letterSpacing:'0.1em'}}>Enviar nova mensagem</button>
                </div>
              ) : (
                <>
                  <div style={{display:'grid', gap:18}}>
                    {[
                      ['name','Nome completo','text', true],
                      ['email','Email','email', true],
                      ['phone','Telefone','tel', false],
                    ].map(([k,l,t,r]) => {
                      const hasErr = !!errors[k];
                      return (
                        <div key={k}>
                          <label htmlFor={k} style={{fontSize:11, fontFamily:'var(--mono)', color:'rgba(255,255,255,0.55)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6, display:'block'}}>{l} {r && <span style={{color:'var(--primary)'}}>*</span>}</label>
                          <input
                            id={k} name={k} type={t} value={form[k]}
                            onChange={onChange(k)} onBlur={onBlur(k)}
                            disabled={submitting}
                            aria-invalid={hasErr}
                            style={{
                              width:'100%', padding:'12px 14px', fontSize:14,
                              border: `1px solid ${hasErr ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.14)'}`,
                              borderRadius:8,
                              background:'rgba(0,0,0,0.25)', color:'white',
                              fontFamily:'inherit', outline:'none', transition:'all 0.15s',
                            }}
                            className="form-input-dark"
                          />
                          {hasErr && <div id={`${k}-error`} style={{fontSize:12, color:'#fca5a5', marginTop:6, fontFamily:'var(--mono)'}}>{errors[k]}</div>}
                        </div>
                      );
                    })}
                    <div>
                      <label htmlFor="message" style={{fontSize:11, fontFamily:'var(--mono)', color:'rgba(255,255,255,0.55)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6, display:'block'}}>Mensagem <span style={{color:'var(--primary)'}}>*</span></label>
                      <textarea
                        id="message" name="general_notes" value={form.message} rows={5}
                        onChange={onChange('message')} onBlur={onBlur('message')}
                        disabled={submitting}
                        aria-invalid={!!errors.message}
                        style={{
                          width:'100%', padding:'12px 14px', fontSize:14,
                          border: `1px solid ${errors.message ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.14)'}`,
                          borderRadius:8,
                          background:'rgba(0,0,0,0.25)', color:'white',
                          fontFamily:'inherit', resize:'vertical',
                          outline:'none', transition:'all 0.15s',
                        }}
                        className="form-input-dark"
                      />
                      {errors.message && <div id="message-error" style={{fontSize:12, color:'#fca5a5', marginTop:6, fontFamily:'var(--mono)'}}>{errors.message}</div>}
                    </div>
                  </div>
                  <button type="submit" disabled={submitting} style={{
                    marginTop:22, width:'100%', background:'var(--primary)', color:'white',
                    padding:'14px 22px', borderRadius:8, fontSize:14, fontWeight:600,
                    border:'none', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
                    cursor: submitting ? 'wait' : 'pointer',
                    opacity: submitting ? 0.7 : 1, transition:'opacity 0.15s',
                  }}>
                    {submitting ? 'Enviando...' : <>Enviar mensagem <span>→</span></>}
                  </button>
                  {feedback && (
                    <div style={{
                      marginTop: 14, padding:'12px 14px', borderRadius:8, fontSize:13, lineHeight:1.4,
                      background: feedback.type === 'success' ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
                      border: `1px solid ${feedback.type === 'success' ? 'rgba(34,197,94,0.35)' : 'rgba(239,68,68,0.4)'}`,
                      color: feedback.type === 'success' ? '#86efac' : '#fca5a5',
                      fontFamily:'var(--mono)',
                    }}>{feedback.text}</div>
                  )}
                  <p style={{fontSize:11, color:'rgba(255,255,255,0.4)', marginTop:14, textAlign:'center', fontFamily:'var(--mono)'}}>
                    Ao enviar, você concorda com nossa política de privacidade · LGPD
                  </p>
                </>
              )}
             
            </form>
          </div>
        </div>

        {/* FOOTER COLUMNS */}
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap: 60, marginBottom: 64}} className="footer-grid">
          <div>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom: 18}}>
              <img src={asset('logoBranca','/landing/assets/logo-frution-branca.png')} alt="Frution" style={{height: 72, width:'auto', display:'block'}}/>
            </div>
            <p style={{fontSize:14, color:'rgba(255,255,255,0.6)', lineHeight:1.55, maxWidth: 360, marginBottom: 24}}>
              A plataforma all-in-one para gestão completa da sua empresa. CRM, BPM, ERP e OmniChannel em um só lugar.
            </p>
            <div style={{display:'flex', gap:8}}>
              {[['in','LinkedIn'],['f','Facebook'],['𝕏','Twitter']].map(([i,l]) => (
                <a key={l} href="#" title={l} style={{
                  width:36, height:36, borderRadius:8, background:'rgba(255,255,255,0.08)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:13, color:'white',
                }}>{i}</a>
              ))}
            </div>
          </div>
          {[
            ['Plataforma', [['Módulos','#modules'],['Recursos','#features'],['Preços','#pricing'],['Tracking','https://track.frutioncloud.com.br/']]],
            ['Empresa',['Sobre','#about'].length ? [['Sobre','#about'],['Clientes','#clients'],['Contato','#contact']] : []],
            ['Legal', [['Termos de Uso','#'],['Privacidade','#'],['LGPD','#']]],
          ].map(([title, links]) => (
            <div key={title}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom: 18}}>{title}</div>
              <ul style={{display:'grid', gap:10}}>
                {links.map(([l,h]) => (
                  <li key={l}><a href={h} style={{fontSize:14, color:'rgba(255,255,255,0.78)'}} className="footer-link">{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{paddingTop:28, borderTop:'1px solid rgba(255,255,255,0.1)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:14, fontSize:12, color:'rgba(255,255,255,0.5)', fontFamily:'var(--mono)'}}>
          <div>© 2026 Frution · Curitiba, Brasil · Todos os direitos reservados</div>
          <div style={{display:'flex', gap:6, alignItems:'center'}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#16A34A'}}/>
            Sistemas operacionais · 99.99% uptime
          </div>
        </div>
      </div>
      <style>{`
        .footer-link:hover { color: var(--primary) !important; }
        .form-input-dark:focus { border-color: var(--primary) !important; background: rgba(0,0,0,0.4) !important; box-shadow: 0 0 0 3px rgba(240,138,44,0.18); }
        .form-input-dark::placeholder { color: rgba(255,255,255,0.3); }
        @media (max-width: 900px) {
          .footer-contact { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 800px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

Object.assign(window, { Nav, Hero, ClientTicker, About, Modules, Features, TrackingCTA, Pricing, Clients, Blog, Contact, Footer, WhatsAppFAB, useReveal });
