// Main composition + section assembly
const { useState, useEffect, useRef, useMemo } = React;
const {
  Pains, AIDemo, AppDemos, Domains, Pipeline,
  Comparison, UseCases, Pricing, Footer, Ticker, SectionLabel,
} = window;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      padding: scrolled ? '14px 32px' : '22px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 100,
      background: scrolled ? 'rgba(242,238,227,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .3s ease',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Logo />
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>v2.4 · 2026</span>
      </div>
      <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {['Inteligência', 'Plataforma', 'Casos', 'Preços'].map(t => (
          <a key={t} href={'#' + t.toLowerCase()} style={{ fontSize: 14, textDecoration: 'none', color: 'var(--ink-2)' }}>{t}</a>
        ))}
        <button onClick={() => window.open('https://wa.me/5543996261624?text=' + encodeURIComponent('Olá! Quero entrar no Agro Amigo.'), '_blank', 'noopener')} style={{
          background: 'var(--green)', color: 'var(--paper)',
          border: 0, padding: '10px 18px', borderRadius: 999,
          fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em',
        }}>Entrar →</button>
      </div>
    </nav>
  );
}

function Logo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img
        src="/landing/logo-whats.png"
        alt="Agro Amigo"
        style={{
          width: 44,
          height: 44,
          objectFit: 'cover',
          display: 'block',
          borderRadius: '50%',
          background: 'var(--paper)',
          padding: 2,
          boxShadow: '0 0 0 1px var(--line-2)',
        }}
      />
      <span className="serif" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>Agro Amigo</span>
    </div>
  );
}

function Hero() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const pad = n => String(n).padStart(2,'0');
  const tStr = `${pad(time.getHours())}:${pad(time.getMinutes())}:${pad(time.getSeconds())}`;

  return (
    <header style={{ position: 'relative', padding: '140px 32px 60px', zIndex: 2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 48 }}>
          <span className="live-dot" style={{
            width: 8, height: 8, borderRadius: '50%', background: 'var(--terra)',
            boxShadow: '0 0 0 0 rgba(184,84,42,.5)',
            animation: 'liveDot 1.6s ease-out infinite',
          }}/>
          <span className="mono" style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>
            modelo treinado em 1.847.293 hectares brasileiros · ativo agora
          </span>
        </div>

        <h1 className="serif" style={{
          fontSize: 'clamp(56px, 9.5vw, 168px)',
          lineHeight: 0.93,
          margin: 0,
          letterSpacing: '-0.025em',
          fontWeight: 400,
        }}>
          A inteligência<br/>
          que <span className="it" style={{ color: 'var(--terra)' }}>conhece</span> a sua<br/>
          terra de fato.
        </h1>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 48,
          marginTop: 64,
          alignItems: 'end',
        }}>
          <p style={{ fontSize: 20, lineHeight: 1.45, color: 'var(--ink-2)', maxWidth: 620, margin: 0 }}>
            Não é mais um chatbot genérico que repete o óbvio. É um modelo treinado em
            décadas de dados de sertão, cerrado e mata atlântica — que sabe quando o seu
            milho deve ir pro chão, qual o melhor momento de vender, e por quê.
          </p>

          <div style={{
            border: '1px solid var(--line)',
            background: 'var(--paper)',
            padding: 20,
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 16,
          }}>
            <Stat label="Precisão de safra" value="94.2%" sub="vs. 71% média do mercado" />
            <Stat label="Dados/seg" value="12.4k" sub="satélite + clima + solo" />
            <Stat label="Produtores ativos" value="38.219" sub="+ 412 esta semana" />
            <Stat label="Latência média" value="180ms" sub="resposta com contexto" />
          </div>
        </div>

        <div style={{
          marginTop: 80,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          paddingTop: 24,
          borderTop: '1px solid var(--line)',
        }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em' }}>
            01 / SISTEMA OPERACIONAL · {tStr} BRT · BAHIA, BR
          </span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em' }}>
            ↓ ROLE PARA VER A IA EM AÇÃO
          </span>
        </div>
      </div>

      <style>{`
        @keyframes liveDot {
          0% { box-shadow: 0 0 0 0 rgba(184,84,42,.5); }
          100% { box-shadow: 0 0 0 14px rgba(184,84,42,0); }
        }
      `}</style>
    </header>
  );
}

function Stat({ label, value, sub }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>{label}</div>
      <div className="serif" style={{ fontSize: 32, lineHeight: 1, color: 'var(--ink)' }}>{value}</div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Ticker />
      <Pains />
      <AIDemo />
      <AppDemos />
      <Domains />
      <Pipeline />
      <Comparison />
      <UseCases />
      <Pricing />
      <Footer />
    </>
  );
}

// boot
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
setTimeout(() => {
  const b = document.getElementById('boot');
  if (b) { b.classList.add('hidden'); setTimeout(() => b.remove(), 500); }
}, 250);