const { useState, useEffect } = React;

// --- Funcões Auxilares e Máscaras ---
function validarCPF(cpf) {
  cpf = cpf.replace(/[^\d]+/g, '');
  if (cpf.length !== 11 || !!cpf.match(/(\d)\1{10}/)) return false;
  let soma = 0, resto;
  for (let i = 1; i <= 9; i++) soma += parseInt(cpf.substring(i - 1, i)) * (11 - i);
  resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.substring(9, 10))) return false;
  soma = 0;
  for (let i = 1; i <= 10; i++) soma += parseInt(cpf.substring(i - 1, i)) * (12 - i);
  resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.substring(10, 11))) return false;
  return true;
}

function formatCPF(value) {
  if (!value) return '';
  return value.replace(/\D/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1');
}

function formatCNPJ(value) {
  if (!value) return '';
  return value.replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1/$2')
    .replace(/(\d{4})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1');
}

function formatCardNumber(value) {
  return value.replace(/\D/g, '').replace(/(\d{4})/g, '$1 ').trim().substring(0, 19);
}

function formatExpiry(value) {
  const v = value.replace(/\D/g, '');
  if (v.length >= 2) return v.substring(0, 2) + '/' + v.substring(2, 4);
  return v;
}

function validarSenha(senha) {
  const minLength = 8;
  const hasUpperCase = /[A-Z]/.test(senha);
  const hasNumber = /[0-9]/.test(senha);
  const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(senha);

  if (senha.length < minLength) return "A senha deve ter pelo menos 8 caracteres.";
  if (!hasUpperCase) return "A senha deve conter pelo menos uma letra maiúscula.";
  if (!hasNumber) return "A senha deve conter pelo menos um número.";
  if (!hasSpecial) return "A senha deve conter pelo menos um caractere especial.";
  return null;
}

// RemovidonotasDB mock e integrado com MariaDB via backend.
const API_URL = 'https://api.iaagro.app/api';

// Interceptor global de requisições para anexar o JWT Token
const originalFetch = window.fetch;
window.fetch = async function () {
  let [resource, config] = arguments;
  if (typeof resource === 'string' && resource.startsWith(API_URL)) {
    const userStr = localStorage.getItem('iaagro_user');
    if (userStr) {
      try {
        const user = JSON.parse(userStr);
        if (user && user.token) {
          if (!config) config = {};
          if (!config.headers) config.headers = {};

          // URLs de autenticação públicas não exigem token
          const isAuthRoute = resource.includes('/login') ||
            resource.includes('/register') ||
            resource.includes('/forgot') ||
            resource.includes('/reset');

          if (!isAuthRoute) {
            config.headers['Authorization'] = 'Bearer ' + user.token;
          }
        }
      } catch (e) {
        console.error("Erro ao ler token", e);
      }
    }
  }
  return originalFetch(resource, config);
};

function App() {
  const [view, setView] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    if (window.location.hostname === 'portal.iaagro.app') {
      return params.get('view') || 'login';
    }
    return params.get('view') || 'landing';
  });

  const handleSetView = (newView) => {
    const isPortalView = ['login', 'register', 'termos', 'portal', 'checkout-success', 'checkout-cancel'].includes(newView);
    
    // Se está no domínio principal e quer acessar o portal
    if (window.location.hostname === 'iaagro.app' && isPortalView) {
      window.location.href = `https://portal.iaagro.app/?view=${newView}`;
      return;
    }
    
    // Se está no portal e quer voltar ao site
    if (window.location.hostname === 'portal.iaagro.app' && newView === 'landing') {
      window.location.href = 'https://iaagro.app/';
      return;
    }

    setView(newView);
  };
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [notification, setNotification] = useState({ show: false, msg: '', type: 'info' });

  const notify = (msg, type = 'info') => {
    setNotification({ show: true, msg, type });
    setTimeout(() => setNotification({ show: false, msg: '', type: 'info' }), 4000);
  };

  // --- Sistema de Temas ---
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const applyTheme = (isDark) => {
      const newTheme = isDark ? 'dark' : 'light';
      setTheme(newTheme);
      document.documentElement.setAttribute('data-theme', newTheme);
    };

    applyTheme(mediaQuery.matches);
    const handleChange = (e) => applyTheme(e.matches);
    mediaQuery.addEventListener('change', handleChange);

    // Fade-out global loader after React mounts
    const loader = document.getElementById('global-loader');
    if (loader) {
      document.body.style.overflow = 'hidden';
      setTimeout(() => {
        loader.style.opacity = '0';
        loader.style.visibility = 'hidden';
        document.body.style.overflow = '';
        setTimeout(() => loader.remove(), 500);
      }, 300); // Dar um tempo extra para imagens e vídeos começarem a carregar
    }

    // Persistência de Login: Recuperar do localStorage
    const savedUser = localStorage.getItem('iaagro_user');
    if (savedUser) {
      try {
        const parsedUser = JSON.parse(savedUser);

        // 🔥 VALIDAÇÃO REAL NO BACKEND
        fetch(`${API_URL}/user/${parsedUser.id}`)
          .then(res => res.json())
          .then(data => {
            if (!data || data.error) {
              localStorage.removeItem('iaagro_user');
              setUser(null);
              handleSetView(window.location.hostname === 'portal.iaagro.app' ? 'login' : 'landing');
            } else {
              setUser(data);
              handleSetView('portal');
            }
          })
          .catch(() => {
            handleSetView(window.location.hostname === 'portal.iaagro.app' ? 'login' : 'landing');
          });

      } catch (e) {
        localStorage.removeItem('iaagro_user');
      }
    }

    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  // --- Detectar retorno do Stripe Checkout via query params ---
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);

    if (params.get("checkout") === "success") {
      handleSetView('checkout-success');
      window.history.replaceState({}, document.title, window.location.pathname);
    } else if (params.get("checkout") === "cancel") {
      handleSetView('checkout-cancel');
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);

  // --- Observador para Animações de Scroll (Reveal) ---
  useEffect(() => {
    const observerOptions = {
      threshold: 0.15,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
          // Opcional: parar de observar após animar uma vez
          // observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    const revealElements = document.querySelectorAll('.reveal');
    revealElements.forEach(el => observer.observe(el));

    // Re-observar se a view mudar (importante p/ SPA)
    return () => {
      revealElements.forEach(el => observer.unobserve(el));
    };
  }, [view]); // Dispara novamente ao trocar de tela (landing -> portal etc)

  const switchTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  const handleLogin = (userData) => {
    localStorage.setItem('iaagro_user', JSON.stringify(userData));
    setUser(userData);
    handleSetView('portal');
  };

  const handleLogout = () => {
    localStorage.removeItem('iaagro_user');
    setUser(null);
    handleSetView('landing');
  };

  return (
    <React.Fragment>
      <InteractiveBackground />
      {/* Botão Global de Tema - Efeito Glass Fixo (Apenas em outras telas, no landing vai p/ navbar) */}
      {view !== 'landing' && (
        <button onClick={switchTheme} className="theme-toggle-fixed hide-mobile" title="Alternar Tema Escuro/Claro" style={{ zIndex: 9999 }}>
          {theme === 'dark' ? <i className="ph-fill ph-sun"></i> : <i className="ph-fill ph-moon"></i>}
        </button>
      )}

      {view === 'landing' && <Landing onNavigate={handleSetView} theme={theme} onSwitchTheme={switchTheme} />}
      {view === 'login' && <Login onNavigate={handleSetView} onLogin={handleLogin} theme={theme} notify={notify} />}
      {view === 'register' && <Register onNavigate={handleSetView} onLogin={handleLogin} theme={theme} notify={notify} />}
      {view === 'termos' && <Termos onNavigate={handleSetView} theme={theme} />}
      {view === 'portal' && <Portal user={user} onLogout={handleLogout} theme={theme} notify={notify} />}
      {view === 'checkout-success' && <CheckoutResult type="success" onNavigate={handleSetView} theme={theme} />}
      {view === 'checkout-cancel' && <CheckoutResult type="cancel" onNavigate={handleSetView} theme={theme} />}

      {/* Botão de WhatsApp Flutuante */}
      <a href="https://wa.me/551530422070" target="_blank" rel="noreferrer" className="float-wpp" title="Fale pelo WhatsApp">
        <i className="ph-fill ph-whatsapp-logo"></i>
      </a>

      {/* Sistema de Notificação Customizado */}
      <div className={`notification-toast ${notification.show ? 'show' : ''} ${notification.type}`}>
        <i className={`ph-fill ph-${notification.type === 'error' ? 'warning-circle' : 'check-circle'}`}></i>
        {notification.msg}
      </div>
    </React.Fragment>
  );
}

// === LANDING PAGE ===
function Landing({ onNavigate, theme, onSwitchTheme }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [activeDots, setActiveDots] = React.useState(1); // Foco no meio (index 1)
  const [billingCycle, setBillingCycle] = React.useState('annual'); // 'monthly' | 'annual'
  const plansRef = React.useRef(null);

  const [isVideoMuted, setIsVideoMuted] = React.useState(true);
  const [isVideoPlaying, setIsVideoPlaying] = React.useState(true);
  const videoRef = React.useRef(null);

  const toggleVideoMute = () => {
    if (videoRef.current) {
      videoRef.current.muted = !isVideoMuted;
      setIsVideoMuted(!isVideoMuted);
    }
  };

  const toggleVideoPlay = () => {
    if (videoRef.current) {
      if (isVideoPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play();
      }
      setIsVideoPlaying(!isVideoPlaying);
    }
  };

  React.useEffect(() => {
    // Focar no plano Família (meio) no mobile
    if (window.innerWidth <= 768 && plansRef.current) {
      setTimeout(() => {
        if (plansRef.current && plansRef.current.children[1]) {
          const middleElement = plansRef.current.children[1];
          const container = plansRef.current;
          container.scrollLeft = middleElement.offsetLeft - container.offsetLeft - (container.clientWidth / 2) + (middleElement.clientWidth / 2);
        }
      }, 100);
    }
  }, [billingCycle]);

  const handleScroll = (e) => {
    if (window.innerWidth > 768) return;
    const scrollLeft = e.target.scrollLeft;
    const scrollWidth = e.target.scrollWidth - e.target.clientWidth;
    const percentage = scrollLeft / scrollWidth;

    let index = 1;
    if (percentage < 0.25) index = 0;
    else if (percentage > 0.75) index = 2;

    if (index !== activeDots) setActiveDots(index);
  };

  return (
    <div>
      <nav className="glass-navbar">
        {/* Esquerda: Tema no mobile, Logo no desktop */}
        <div className="nav-mobile-left">
          <button onClick={onSwitchTheme} className="theme-toggle-nav" title="Mudar Tema">
            {theme === 'dark' ? <i className="ph-fill ph-sun"></i> : <i className="ph-fill ph-moon"></i>}
          </button>

          <div className="nav-logo hide-mobile">
            <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '28px' }} />
          </div>
        </div>

        {/* Centro: Logo no mobile, Links no desktop */}
        <div className="nav-center-area">
          <div className="nav-logo show-mobile-only">
            <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '28px' }} />
          </div>

          <ul className={`nav-links ${menuOpen ? 'open' : ''}`}>
            <li><a href="#hero" onClick={() => setMenuOpen(false)}>Início</a></li>
            <li><a href="#features" onClick={() => setMenuOpen(false)}>Recursos</a></li>
            <li><a href="#pricing" onClick={() => setMenuOpen(false)}>Planos</a></li>
            <li><a href="#testimonials" onClick={() => setMenuOpen(false)}>Depoimentos</a></li>
            <li><a href="#contact" onClick={() => setMenuOpen(false)}>Dúvidas</a></li>
            <li className="mobile-menu-actions">
              <button className="btn btn-outline" style={{ width: '100%' }} onClick={() => { setMenuOpen(false); onNavigate('login'); }}>Entrar</button>
              <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => { setMenuOpen(false); onNavigate('register'); }}>Registre-se</button>
            </li>
          </ul>
        </div>

        {/* Direita: Acoes/Hamburger */}
        <div className="nav-actions">
          <div className="hide-mobile" style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
            <button className="btn btn-outline" style={{ padding: '0.5rem 1.5rem' }} onClick={() => onNavigate('login')}>Entrar</button>
            <button className="btn btn-primary" style={{ padding: '0.5rem 1.5rem' }} onClick={() => onNavigate('register')}>Registre-se</button>
            <button onClick={onSwitchTheme} title="Alternar Tema Escuro/Claro" style={{ background: 'transparent', border: 'none', color: 'var(--text-primary)', fontSize: '1.4rem', cursor: 'pointer', padding: '0.3rem', display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: '0.5rem' }}>
              {theme === 'dark' ? <i className="ph-fill ph-sun"></i> : <i className="ph-fill ph-moon"></i>}
            </button>
          </div>

          <button className="menu-toggle" onClick={() => setMenuOpen(!menuOpen)}>
            <i className={`ph-bold ph-${menuOpen ? 'x' : 'list'}`}></i>
          </button>
        </div>
      </nav>

      <section id="hero" className="hero-section">
        <div className="hero-content">
          <h1>Emita suas Notas Fiscais pelo<br /><span className="text-gradient">WhatsApp</span> em Segundos</h1>
          <p>Sem burocracia, sem computadores difíceis. Mande um áudio ou texto e a nossa inteligência faz todo o trabalho chato por você.</p>
          <div className="hero-buttons reveal reveal-fade-up">
            <button className="btn btn-primary" onClick={() => onNavigate('register')}>
              Criar Conta Grátis <i className="ph-bold ph-arrow-right"></i>
            </button>
            <button className="btn btn-outline" onClick={() => document.getElementById('features').scrollIntoView()}>
              Entender Como Funciona
            </button>
          </div>
        </div>
      </section>

      {/* RECURSOS */}
      <section id="features" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '4rem' }}>
          <div>
            <h2>Como a IAAGRO trabalha?</h2>
            <p>Um fluxo completo e automatizado, do campo até a Receita Federal.</p>
          </div>
        </div>
        <div className="features-container">
          <div className="features-phone-wrapper reveal reveal-fade-right">
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div className="phone-mockup">
                <div className="phone-island"></div>
                <div className="phone-screen">
                  <video ref={videoRef} src="assets/video.mp4" autoPlay loop muted playsInline></video>
                </div>
              </div>
              <div className="video-controls" style={{ marginTop: '2rem', display: 'flex', gap: '1.5rem' }}>
                <button className="btn-icon" onClick={toggleVideoPlay} title={isVideoPlaying ? "Pausar" : "Tocar"}>
                  <i className={`ph-fill ${isVideoPlaying ? 'ph-pause-circle' : 'ph-play-circle'}`} style={{ fontSize: '2.5rem', color: 'var(--primary-color)' }}></i>
                </button>
                <button className="btn-icon" onClick={toggleVideoMute} title={isVideoMuted ? "Ativar Som" : "Mudo"}>
                  <i className={`ph-fill ${isVideoMuted ? 'ph-speaker-slash' : 'ph-speaker-high'}`} style={{ fontSize: '2.5rem', color: 'var(--primary-color)' }}></i>
                </button>
              </div>
            </div>
          </div>
          <div className="features-content">
            <div className="profile-grid">
              <div className="card reveal reveal-fade-up" style={{ textAlign: 'center' }}>
                <i className="ph-fill ph-whatsapp-logo" style={{ fontSize: '3rem', color: '#25D366', marginBottom: '1rem' }}></i>
                <h3>1. Você usa o WhatsApp?</h3>
                <p style={{ color: 'var(--text-secondary)' }}>É só isso que você precisa. Nada de instalar programas ou aprender sistemas novos.</p>
              </div>
              <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.1s' }}>
                <i className="ph-fill ph-microphone-stage" style={{ fontSize: '3rem', color: 'var(--primary-color)', marginBottom: '1rem' }}></i>
                <h3>2. Envie um áudio, texto ou foto</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Fale ou escreva o que vendeu, a quantidade e o comprador. Nossa inteligência entende tudo.</p>
              </div>
              <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.2s' }}>
                <i className="ph-fill ph-file-pdf" style={{ fontSize: '3rem', color: '#ef4444', marginBottom: '1rem' }}></i>
                <h3>3. Sua nota pronta na hora</h3>
                <p style={{ color: 'var(--text-secondary)' }}>A nota é gerada automaticamente e enviada em PDF direto no seu WhatsApp, pronta para usar.</p>
              </div>
              <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.3s' }}>
                <i className="ph-fill ph-cloud-check" style={{ fontSize: '3rem', color: '#3b82f6', marginBottom: '1rem' }}></i>
                <h3>4. Tudo salvo e seguro</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Suas notas ficam guardadas em segurança enquanto você for nosso cliente. Seu contador pode baixar tudo depois.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="pricing" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div>
            <h2>Escolha seu Plano</h2>
            <p>Flexibilidade para todos os tamanhos de negócios e produtores rurais.</p>
          </div>
          <div className="billing-toggle" style={{ marginTop: '2.5rem' }}>
            <button
              className={`toggle-btn ${billingCycle === 'monthly' ? 'active' : ''}`}
              onClick={() => setBillingCycle('monthly')}
            >
              Mensal
            </button>
            <button
              className={`toggle-btn ${billingCycle === 'annual' ? 'active' : ''}`}
              onClick={() => setBillingCycle('annual')}
            >
              Anual
            </button>
          </div>
        </div>

        <div className="plans-grid" ref={plansRef} onScroll={handleScroll}>
          <div className="plan-card reveal reveal-fade-left">
            <h3 className="plan-name">Produtor</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '74' : '64'}<span style={{ fontSize: '1.2rem' }}>,90</span>
            </div>
            <div className="plan-period">{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
            <ul className="plan-features">
              {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
              <li><i className="ph-bold ph-check"></i> 30 Emissões mensais</li>
              <li><i className="ph-bold ph-check"></i> 1 CNPJ/CPF</li>
              <li><i className="ph-bold ph-check"></i> Via WhatsApp (texto)</li>
              <li><i className="ph-bold ph-check"></i> 3 números autorizados</li>
              <li><i className="ph-bold ph-check"></i> Suporte em 24h úteis</li>
            </ul>
            <button className="btn btn-outline" onClick={() => onNavigate('register')}>Começar</button>
          </div>

          <div className="plan-card popular reveal reveal-fade-up">
            <div className="badge-popular">Mais Escolhido</div>
            <h3 className="plan-name text-gradient">Família</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '104' : '94'}<span style={{ fontSize: '1.2rem' }}>,90</span>
            </div>
            <div className="plan-period">{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
            <ul className="plan-features">
              {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
              <li><i className="ph-bold ph-check"></i> 100 Emissões mensais</li>
              <li><i className="ph-bold ph-check"></i> 3 CNPJs/CPFs</li>
              <li><i className="ph-bold ph-check"></i> Via WhatsApp (texto, áudio, img)</li>
              <li><i className="ph-bold ph-check"></i> 3 Acessos ao portal / 5 WhatsApps</li>
              <li><i className="ph-bold ph-check"></i> Suporte em 12h úteis</li>
            </ul>
            <button className="btn btn-primary" onClick={() => onNavigate('register')}>Assinar Família</button>
          </div>

          <div className="plan-card reveal reveal-fade-right">
            <h3 className="plan-name">Cooperativa</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '174' : '154'}<span style={{ fontSize: '1.2rem' }}>,90</span>
            </div>
            <div className="plan-period">{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
            <ul className="plan-features">
              {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
              <li><i className="ph-bold ph-check"></i> 500 Emissões mensais</li>
              <li><i className="ph-bold ph-check"></i> CNPJ/CPF Ilimitado</li>
              <li><i className="ph-bold ph-check"></i> 5 Acessos ao portal / 10 WhatsApps</li>
              <li><i className="ph-bold ph-check"></i> Relatórios completos por produtor</li>
              <li><i className="ph-bold ph-check"></i> Suporte em 4h úteis</li>
            </ul>
            <button className="btn btn-outline" onClick={() => window.open('https://wa.me/551530422070', '_blank')}>Falar com Vendas</button>
          </div>
        </div>

        {/* Paginação do Carrossel (Mobile Only) */}
        <div className="carousel-dots">
          <span className={`dot ${activeDots === 0 ? 'active' : ''}`}></span>
          <span className={`dot ${activeDots === 1 ? 'active' : ''}`}></span>
          <span className={`dot ${activeDots === 2 ? 'active' : ''}`}></span>
        </div>

        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginTop: '4rem' }}>
          <div>
            <h2>Addons (Adicionais)</h2>
            <p>Potencialize seu plano com recursos extras sob demanda</p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1rem', maxWidth: '800px', margin: '0 auto' }}>
          <div className="card" style={{ padding: '1rem 2rem', textAlign: 'center', margin: 0 }}><strong>Relatório Mensal Email/Wpp</strong><br /><span style={{ color: 'var(--primary-color)' }}>R$ 14,90</span></div>
          <div className="card" style={{ padding: '1rem 2rem', textAlign: 'center', margin: 0 }}><strong>Buscador de NF-e de Compras (Produtor)</strong><br /><span style={{ color: 'var(--primary-color)' }}>R$ 14,90</span></div>
          <div className="card" style={{ padding: '1rem 2rem', textAlign: 'center', margin: 0 }}><strong>Relatório Compras/Vendas (IR)</strong><br /><span style={{ color: 'var(--primary-color)' }}>R$ 14,90</span></div>
          <div className="card" style={{ padding: '1rem 2rem', textAlign: 'center', margin: 0 }}><strong>Autorização de Número Adicional (Emissão)</strong><br /><span style={{ color: 'var(--primary-color)' }}>R$ 4,90</span></div>
        </div>

      </section>

      {/* DEPOIMENTOS */}
      <section id="testimonials" className="section-padding" >
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '3rem' }}>
          <div>
            <h2>O que dizem os produtores</h2>
            <p>Opiniões reais de quem já eliminou processos ultrapassados no agronegócio.</p>
          </div>
        </div>
        <div className="plans-grid">
          <div className="card reveal reveal-fade-up">
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px' }}>CA</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Carlos Almeida</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Fazenda Boa Esperança</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “Antigamente eu perdia horas no computador puxando XML, era horrível estar no pasto e ter que voltar. Hoje eu mando um texto rápido pelo WhatsApp com os dados da carga, e a nota desponta no e-mail do cliente na mesma hora. Fantástico.”
            </p>
          </div>

          <div className="card reveal reveal-fade-up" style={{ transitionDelay: '0.1s' }}>
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px', background: 'linear-gradient(135deg, #f59e0b, #d97706)' }}>MF</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Marta Fidelis</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Cooperativa Agrosul</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “Conseguimos alocar a IAAGRO para operar notas de mais de 12 caminhões por dia. Basta digitar o pedido e a IA faz a conversão tributária exata, zeramos multas por esquecimento de regras estaduais complexas.”
            </p>
          </div>

          <div className="card reveal reveal-fade-up" style={{ transitionDelay: '0.2s' }}>
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px', background: 'linear-gradient(135deg, #10b981, #047857)' }}>RR</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Rafael Rios</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Engenheiro Agrônomo Independente</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “Poder gerar a NF-e pelo WhatsApp é um divisor de águas. O sistema reconhece a descrição dos produtos e fecha a nota em segundos, sem precisar abrir sistemas complexos. Sensacional, recomendo!”
            </p>
          </div>
        </div>
      </section>

      {/* FAQ E DUVIDAS */}
      <section id="contact" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '3rem' }}>
          <div>
            <h2>Dúvidas Frequentes</h2>
            <p>Nossa equipe está pronta para lhe integrar à nova era fiscal.</p>
          </div>
        </div>

        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
          <div className="faq-item reveal reveal-fade-up">
            <h4>Preciso de um certificado digital para que funcione?</h4>
            <p>Sim. É requisito legal da Secretaria da Fazenda que toda empresa possua certificado A1 (.pfx) para gerar a assinatura digital nas transações financeiras. Após o upload o robô assume esta etapa por você.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.1s' }}>
            <h4>É seguro enviar os dados das vendas pelo WhatsApp?</h4>
            <p>Absolutamente. Nosso tráfego emprega criptografia E2EE (ponta-a-ponta) e descartamos históricos temporais de conversão em áudio em servidores imediatamente após a geração do Danfe.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.2s' }}>
            <h4>O bot do WhatsApp funciona aos finais de semana?</h4>
            <p>Sim! A automação operada em infraestrutura da IAAGRO está disponível 24 horas por dia, 7 dias por semana, sem intervenção humana, incluindo feriados nacionais.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.3s' }}>
            <h4>E se a nota gerar um erro por informações enviadas erradas (Cancelamento)?</h4>
            <p>Você pode cancelar a NF-e solicitando por mensagem no chat. O próprio bot faz os testes com o Portal Sefaz, caso alguma variável (como valor e CPF incompatíveis) aconteça, o sistema vai pedir confirmação antes da emissão definitiva (draft).</p>
          </div>
        </div>

        <div style={{ textAlign: 'center', padding: '3rem 0' }}>
          <button className="btn btn-primary" onClick={() => window.open('https://wa.me/551530422070', '_blank')}>
            <i className="ph-fill ph-whatsapp-logo"></i> Chamar no WhatsApp Agora
          </button>
        </div>
      </section>

      {/* FOOTER OFICIAL NUUV*/}
      <footer style={{ padding: '3rem 2rem', textAlign: 'center', borderTop: '1px solid var(--surface-border)', color: 'var(--text-secondary)', background: 'var(--bg-color)', position: 'relative', zIndex: 10 }}>
        <p style={{ marginBottom: '0.5rem', fontWeight: 600 }}>© 2026 IAAGRO. Todos os direitos reservados.</p>
        <p style={{ fontSize: '0.9rem' }}>
          Powered by <a href="https://nuuv.cloud" target="_blank" rel="noreferrer" style={{ color: 'var(--primary-color)', textDecoration: 'none', fontWeight: 'bold' }}>nuuv.cloud</a>
        </p>
      </footer>
    </div>
  );
}

// === TERMOS ===
function Termos({ onNavigate, theme }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  return (
    <div className="auth-container" style={{ padding: '1rem' }}>
      <div className="auth-header-btn" style={{ maxWidth: '800px', width: '100%' }}>
        <button onClick={() => onNavigate('register')} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
          <i className="ph ph-arrow-left"></i> Voltar
        </button>
      </div>
      <div className="auth-card" style={{ maxWidth: '800px', width: '100%', padding: '2rem' }}>
        <div className="auth-header">
          <img src={logoSrc} alt="IAAGRO" style={{ height: '35px', marginBottom: '0.5rem' }} />
          <h1 className="text-gradient" style={{ fontSize: '1.8rem' }}>Termos de Uso e Condições</h1>
        </div>
        <div style={{ color: 'var(--text-secondary)', lineHeight: 1.6, fontSize: '0.95rem', textAlign: 'left' }}>
          <p style={{ marginBottom: '1rem' }}>Ao utilizar os serviços da IAAGRO, você concorda com os seguintes termos e condições:</p>
          <p style={{ marginBottom: '1rem' }}><strong>1. Responsabilidade pelos Dados:</strong> A IAAGRO atua exclusivamente como uma ferramenta tecnológica facilitadora para a emissão de Notas Fiscais Eletrônicas (NF-e). <strong>NÃO NOS RESPONSABILIZAMOS pelos dados fiscais, valores, alíquotas, NCMs ou quaisquer outras informações tributárias informadas ou sugeridas pelo sistema.</strong></p>
          <p style={{ marginBottom: '1rem' }}><strong>2. Sugestões da Inteligência Artificial:</strong> As sugestões de códigos e tributações geradas por nossa Inteligência Artificial são baseadas em padrões de mercado, mas não substituem a validação de um contador qualificado. O cliente deve SEMPRE se atentar e conferir os dados antes de confirmar a emissão, pois apenas emitimos e damos sugestões.</p>
          <p style={{ marginBottom: '1rem' }}><strong>3. Obrigação do Usuário:</strong> É de inteira responsabilidade do produtor rural ou de sua contabilidade garantir que todas as transações fiscais estejam de acordo com a legislação vigente em seu estado.</p>
          <p style={{ marginBottom: '1rem' }}><strong>4. Armazenamento:</strong> Manteremos seus arquivos XML e PDF armazenados de forma segura em nossos servidores pelo período em que você mantiver uma assinatura ativa conosco.</p>
        </div>
        <div style={{ textAlign: 'center', marginTop: '2rem' }}>
          <button className="btn btn-primary" onClick={() => onNavigate('register')}>Li e Aceito</button>
        </div>
      </div>
    </div>
  );
}

// === LOGIN ===
function Login({ onNavigate, onLogin, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);

  // Forgot password state
  const [forgotStep, setForgotStep] = useState(0); // 0=login, 1=enter phone, 2=enter code+newPass
  const [forgotPhone, setForgotPhone] = useState('');
  const [resetCode, setResetCode] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmNewPassword, setConfirmNewPassword] = useState('');
  const [forgotLoading, setForgotLoading] = useState(false);
  const [showNewPass, setShowNewPass] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!phone || !password) return notify("Preencha todos os campos.", "error");

    try {
      const response = await fetch(`${API_URL}/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone: phone.replace(/\D/g, ''), password })
      });

      const data = await response.json();
      if (response.ok) {
        onLogin(data);
        notify("Bem-vindo ao IAAGRO!", "success");
      } else {
        notify(data.error || "Erro ao fazer login.", "error");
      }
    } catch (err) {
      notify("Erro ao conectar com o servidor.", "error");
    }
  };

  const handleForgotSendCode = async (e) => {
    e.preventDefault();
    if (!forgotPhone) return notify("Informe seu telefone.", "error");
    setForgotLoading(true);
    try {
      const res = await fetch(`${API_URL}/forgot-password`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone: forgotPhone.replace(/\D/g, '') })
      });
      const data = await res.json();
      if (res.status === 429) {
        notify(data.error || "Muitas tentativas. Aguarde.", "error");
      } else if (res.ok) {
        notify("Código enviado via WhatsApp! Verifique seu celular.", "success");
        setForgotStep(2);
      } else {
        notify(data.error || "Erro ao enviar código.", "error");
      }
    } catch {
      notify("Erro ao conectar com o servidor.", "error");
    }
    setForgotLoading(false);
  };

  const handleResetPassword = async (e) => {
    e.preventDefault();
    if (!resetCode || !newPassword) return notify("Preencha todos os campos.", "error");

    const erroSenha = validarSenha(newPassword);
    if (erroSenha) return notify(erroSenha, "error");

    if (newPassword !== confirmNewPassword) return notify("As senhas não coincidem.", "error");

    setForgotLoading(true);
    try {
      const res = await fetch(`${API_URL}/reset-password`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          phone: forgotPhone.replace(/\D/g, ''),
          code: resetCode,
          newPassword
        })
      });
      const data = await res.json();
      if (res.ok) {
        notify("Senha redefinida com sucesso! Faça login.", "success");
        setForgotStep(0);
        setResetCode('');
        setNewPassword('');
        setConfirmNewPassword('');
      } else {
        notify(data.error || "Erro ao redefinir senha.", "error");
      }
    } catch {
      notify("Erro ao conectar com o servidor.", "error");
    }
    setForgotLoading(false);
  };

  // --- Forgot password step 1: enter phone ---
  if (forgotStep === 1) {
    return (
      <div className="auth-container">
        <div className="auth-header-btn">
          <button onClick={() => setForgotStep(0)} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
            <i className="ph ph-arrow-left"></i> Voltar ao Login
          </button>
        </div>
        <div className="auth-card">
          <div className="auth-header">
            <img src={logoSrc} alt="IAAGRO" style={{ height: '40px', marginBottom: '1rem' }} />
            <h1 className="text-gradient" style={{ fontSize: '1.8rem' }}>Recuperar Senha</h1>
            <p>Informe seu telefone cadastrado para receber o código via WhatsApp</p>
          </div>
          <form onSubmit={handleForgotSendCode}>
            <div className="form-group">
              <label htmlFor="forgot-phone">Telefone vinculado</label>
              <div className="input-wrapper">
                <input type="text" placeholder="(DDD) 99999-9999" id="forgot-phone" value={forgotPhone} onChange={e => setForgotPhone(e.target.value)} />
                <i className="ph ph-device-mobile form-icon"></i>
              </div>
            </div>
            <button type="submit" className="btn btn-primary btn-full" disabled={forgotLoading}>
              {forgotLoading ? (
                <React.Fragment><i className="ph ph-circle-notch" style={{ animation: 'spin 1s linear infinite' }}></i> Enviando...</React.Fragment>
              ) : (
                <React.Fragment>Enviar Código <i className="ph-bold ph-paper-plane-tilt"></i></React.Fragment>
              )}
            </button>
          </form>
        </div>
      </div>
    );
  }

  // --- Forgot password step 2: enter code + new password ---
  if (forgotStep === 2) {
    return (
      <div className="auth-container">
        <div className="auth-header-btn">
          <button onClick={() => setForgotStep(1)} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
            <i className="ph ph-arrow-left"></i> Reenviar código
          </button>
        </div>
        <div className="auth-card">
          <div className="auth-header">
            <img src={logoSrc} alt="IAAGRO" style={{ height: '40px', marginBottom: '1rem' }} />
            <h1 className="text-gradient" style={{ fontSize: '1.8rem' }}>Nova Senha</h1>
            <p>Digite o código de 6 dígitos enviado via WhatsApp e sua nova senha</p>
          </div>
          <form onSubmit={handleResetPassword}>
            <div className="form-group">
              <label htmlFor="reset-code">Código de verificação</label>
              <div className="input-wrapper">
                <input type="text" placeholder="000000" id="reset-code" value={resetCode} onChange={e => setResetCode(e.target.value)} maxLength={6} style={{ letterSpacing: '0.5em', textAlign: 'center', fontSize: '1.3rem', fontWeight: 'bold' }} />
                <i className="ph ph-key form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="new-password">Nova senha</label>
              <div className="input-wrapper">
                <input type={showNewPass ? "text" : "password"} placeholder="Mínimo 8 caracteres" id="new-password" value={newPassword} onChange={e => setNewPassword(e.target.value)} />
                <i className="ph ph-lock-key form-icon"></i>
                <button type="button" className="btn-icon pass-toggle" onClick={() => setShowNewPass(!showNewPass)}>
                  <i className={`ph ph-eye${showNewPass ? '-slash' : ''}`}></i>
                </button>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="confirm-new-password">Confirmar nova senha</label>
              <div className="input-wrapper">
                <input type={showNewPass ? "text" : "password"} placeholder="Repita a nova senha" id="confirm-new-password" value={confirmNewPassword} onChange={e => setConfirmNewPassword(e.target.value)} />
                <i className="ph ph-lock form-icon"></i>
              </div>
            </div>

            <button type="submit" className="btn btn-primary btn-full" disabled={forgotLoading}>
              {forgotLoading ? (
                <React.Fragment><i className="ph ph-circle-notch" style={{ animation: 'spin 1s linear infinite' }}></i> Redefinindo...</React.Fragment>
              ) : (
                <React.Fragment>Redefinir Senha <i className="ph-bold ph-check-circle"></i></React.Fragment>
              )}
            </button>
          </form>
          <div className="auth-switch" style={{ marginTop: '1rem' }}>
            <button type="button" onClick={handleForgotSendCode} disabled={forgotLoading}>Reenviar código</button>
          </div>
        </div>
      </div>
    );
  }

  // --- Normal login ---
  return (
    <div className="auth-container">
      <div className="auth-header-btn">
        <button onClick={() => onNavigate('landing')} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
          <i className="ph ph-arrow-left"></i> Voltar p/ o Início
        </button>
      </div>
      <div className="auth-card">
        <div className="auth-header">
          <img src={logoSrc} alt="IAAGRO" style={{ height: '40px', marginBottom: '1rem' }} />
          <h1 className="text-gradient" style={{ fontSize: '2rem' }}>Acessar Portal</h1>
          <p>Emita suas notas via IA no WhatsApp</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="phone">Telefone vinculado (Chave)</label>
            <div className="input-wrapper">
              <input type="text" placeholder="(DDD) 99999-9999" id="phone" value={phone} onChange={e => setPhone(e.target.value)} />
              <i className="ph ph-device-mobile form-icon"></i>
            </div>
          </div>

          <div className="form-group">
            <label htmlFor="password">Senha de Acesso</label>
            <div className="input-wrapper">
              <input type={showPass ? "text" : "password"} placeholder="Sua senha secreta" id="password" value={password} onChange={e => setPassword(e.target.value)} />
              <i className="ph ph-lock-key form-icon"></i>
              <button type="button" className="btn-icon pass-toggle" onClick={() => setShowPass(!showPass)}>
                <i className={`ph ph-eye${showPass ? '-slash' : ''}`}></i>
              </button>
            </div>
          </div>

          <button type="submit" className="btn btn-primary btn-full">
            Entrar <i className="ph-bold ph-sign-in"></i>
          </button>
        </form>
        <div className="auth-switch">
          Ainda não é cliente? <button type="button" onClick={() => onNavigate('register')}>Cadastre-se</button>
        </div>
        <div className="auth-switch" style={{ marginTop: '0.5rem' }}>
          <button type="button" onClick={() => { setForgotPhone(phone); setForgotStep(1); }}>Esqueci minha senha</button>
        </div>
      </div>
    </div>
  );
}

// === REGISTER ===
function Register({ onNavigate, onLogin, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [formData, setFormData] = useState({ name: '', cpf: '', email: '', cnpj: '', phone: '', password: '', confirmPassword: '' });
  const [showPass, setShowPass] = useState(false);
  const [termsAccepted, setTermsAccepted] = useState(false);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.id]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.name || !formData.email || !formData.cnpj || !formData.phone || !formData.password || !formData.cpf) {
      return notify("Preencha todos os campos.", "error");
    }

    if (!termsAccepted) {
      return notify("Você deve aceitar os Termos de Uso e Condições.", "error");
    }

    if (!validarCPF(formData.cpf)) {
      return notify("CPF Inválido. Digite um CPF correto.", "error");
    }

    const erroSenha = validarSenha(formData.password);
    if (erroSenha) return notify(erroSenha, "error");

    if (formData.password !== formData.confirmPassword) {
      return notify("As senhas não coincidem.", "error");
    }

    try {
      const response = await fetch(`${API_URL}/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...formData,
          cpf: formData.cpf.replace(/\D/g, ''),
          phone: formData.phone.replace(/\D/g, '')
        })
      });

      const data = await response.json();
      if (response.ok) {
        onLogin(data);
        notify("Cadastro realizado com sucesso!", "success");
      } else {
        notify(data.error || "Erro ao registrar.", "error");
      }
    } catch (err) {
      notify("Erro ao conectar com o servidor.", "error");
    }
  };

  return (
    <div className="auth-container" style={{ padding: '1rem' }}>
      <div className="auth-header-btn" style={{ maxWidth: '580px' }}>
        <button onClick={() => onNavigate('landing')} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
          <i className="ph ph-arrow-left"></i> Voltar p/ o Início
        </button>
      </div>

      <div className="auth-card" style={{ maxWidth: '580px', padding: '2rem' }}>
        <div className="auth-header">
          <img src={logoSrc} alt="IAAGRO" style={{ height: '35px', marginBottom: '0.5rem' }} />
          <h1 className="text-gradient" style={{ fontSize: '1.8rem' }}>Começar Grátis</h1>
          <p>Prepare sua conta e seu certificado A1</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label htmlFor="name">Nome Completo do Responsável</label>
              <div className="input-wrapper">
                <input type="text" id="name" placeholder="Ex: João Silva" value={formData.name} onChange={handleChange} />
                <i className="ph ph-user form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="cpf">CPF do Responsável</label>
              <div className="input-wrapper">
                <input type="text" id="cpf" placeholder="000.000.000-00" value={formatCPF(formData.cpf)} onChange={(e) => setFormData({ ...formData, cpf: e.target.value.replace(/\D/g, '') })} />
                <i className="ph ph-identification-card form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="email">E-mail Profissional</label>
              <div className="input-wrapper">
                <input type="email" id="email" placeholder="nome@agro.com" value={formData.email} onChange={handleChange} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="phone">WhastApp (Chave Emitente)</label>
              <div className="input-wrapper">
                <input type="text" id="phone" placeholder="(11) 99999-9999" value={formData.phone} onChange={handleChange} />
                <i className="ph ph-whatsapp-logo form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="cnpj">CNPJ Emitente</label>
              <div className="input-wrapper">
                <input type="text" id="cnpj" placeholder="00.000.000/0000-00" value={formatCNPJ(formData.cnpj)} onChange={(e) => setFormData({ ...formData, cnpj: e.target.value.replace(/\D/g, '') })} />
                <i className="ph ph-buildings form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="password">Criar Senha de Acesso</label>
              <div className="input-wrapper">
                <input type={showPass ? "text" : "password"} id="password" placeholder="Crie uma senha forte" value={formData.password} onChange={handleChange} />
                <i className="ph ph-lock-key form-icon"></i>
                <button type="button" className="btn-icon pass-toggle" onClick={() => setShowPass(!showPass)}>
                  <i className={`ph ph-eye${showPass ? '-slash' : ''}`}></i>
                </button>
              </div>
              <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Mínimo 8 caracteres, 1 maiúscula, números e símbolos.</p>
            </div>

            <div className="form-group">
              <label htmlFor="confirmPassword">Confirmar Senha</label>
              <div className="input-wrapper">
                <input type={showPass ? "text" : "password"} id="confirmPassword" placeholder="Repita a senha" value={formData.confirmPassword} onChange={handleChange} />
                <i className="ph ph-repeat form-icon"></i>
              </div>
            </div>
          </div>

          <div className="form-group" style={{ marginTop: '1.5rem', marginBottom: '1rem' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontWeight: 'normal' }}>
              <input type="checkbox" checked={termsAccepted} onChange={(e) => setTermsAccepted(e.target.checked)} style={{ display: 'none' }} />
              <div style={{
                width: '22px',
                height: '22px',
                borderRadius: '6px',
                border: termsAccepted ? 'none' : '2px solid var(--text-secondary)',
                background: termsAccepted ? 'var(--primary-color)' : 'transparent',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                transition: 'all 0.2s',
                flexShrink: 0
              }}>
                {termsAccepted && <i className="ph-bold ph-check" style={{ color: '#fff', fontSize: '14px' }}></i>}
              </div>
              <span style={{ fontSize: '0.9rem', color: 'var(--text-primary)' }}>Aceito os <a href="#" onClick={(e) => { e.preventDefault(); e.stopPropagation(); onNavigate('termos'); }} style={{ color: 'var(--primary-color)', textDecoration: 'underline', fontWeight: 'bold' }}>Termos de Uso e Condições</a> propostos</span>
            </label>
          </div>

          <button type="submit" className="btn btn-primary btn-full" style={{ marginTop: '0.5rem' }}>
            Registrar Perfil Completo <i className="ph-fill ph-rocket-launch"></i>
          </button>
        </form>
        <div className="auth-switch">
          Já possui conta? <button type="button" onClick={() => onNavigate('login')}>Fazer Login</button>
        </div>
      </div>
    </div>
  );
}

// === PORTAL DASHBOARD ===
function Portal({ user, onLogout, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [tab, setTab] = useState('perfil');
  const [activeCnpj, setActiveCnpj] = useState(() => {
    if (user.available_cnpjs && user.available_cnpjs.length > 0) {
      return user.available_cnpjs[0];
    }
    return { type: 'main', cnpj: user.cnpj, name: user.name, id: user.id };
  });

  return (
    <div className="portal-layout">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="sidebar-logo">
          <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '36px' }} />
        </div>

        <ul className="nav-menu">
          <li className={`nav-item ${tab === 'notas' ? 'active' : ''}`} onClick={() => setTab('notas')}>
            <i className="ph ph-receipt"></i>
            Minhas Notas
          </li>
          <li className={`nav-item ${tab === 'plano' ? 'active' : ''}`} onClick={() => setTab('plano')}>
            <i className="ph ph-crown"></i>
            Meu Plano
          </li>
          <li className={`nav-item ${tab === 'autorizados' ? 'active' : ''}`} onClick={() => setTab('autorizados')}>
            <i className="ph ph-users-four"></i>
            Números Autorizados
          </li>
        </ul>

        <div className="sidebar-footer">
          <div className="user-snippet">
            <div className="user-avatar" style={{ border: '2px solid var(--primary-color)' }}>
              {user.name.charAt(0).toUpperCase()}
            </div>
            <div className="user-info">
              <div className="name" style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                {user.name.split(' ')[0]}
                <button className="btn-icon" title="Editar Perfil" onClick={() => setTab('perfil')} style={{ color: tab === 'perfil' ? 'var(--primary-color)' : 'inherit', fontSize: '0.9rem' }}>
                  <i className="ph ph-pencil-simple-line"></i>
                </button>
              </div>
              <div className="role">Produtor Autorizado</div>
            </div>
          </div>
          <button className="logout-btn premium-logout" onClick={onLogout}>
            <i className="ph-bold ph-sign-out"></i> Sair do Portal
          </button>
        </div>
      </aside>

      <main className="main-content">
        {!user.subscription_valid && (
          <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: '#7f1d1d', color: '#fecaca', padding: '16px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '20px', zIndex: 9999, boxShadow: '0 -4px 15px rgba(0,0,0,0.5)' }}>
            <div><i className="ph-fill ph-warning" style={{ marginRight: '8px' }}></i><strong>Atenção:</strong> Sua assinatura está vencida.</div>
            <button className="btn btn-outline" style={{ borderColor: '#fecaca', color: '#fecaca', padding: '8px 16px' }} onClick={() => setTab('plano')}>Renovar / Trocar Pagamento</button>
          </div>
        )}

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', padding: '1.5rem', background: 'var(--surface-color)', borderRadius: '12px', border: '1px solid var(--surface-border)' }}>
          <div>
            <h3 style={{ margin: 0, color: 'var(--text-primary)', fontSize: '1rem', marginBottom: '0.5rem' }}>Empresa Ativa (CNPJ)</h3>
            <select 
              value={activeCnpj.cnpj} 
              onChange={(e) => setActiveCnpj(user.available_cnpjs.find(c => c.cnpj === e.target.value))} 
              style={{ padding: '0.6rem 1rem', borderRadius: '8px', border: '1px solid var(--primary-color)', background: 'var(--bg-color)', color: 'var(--text-primary)', width: '350px', fontSize: '1rem', fontWeight: 'bold' }}
            >
              {user.available_cnpjs?.map(c => (
                 <option key={c.cnpj} value={c.cnpj}>{c.name} ({formatCNPJ(c.cnpj)})</option>
              ))}
            </select>
            {activeCnpj.hasCertificate && (
               <div style={{ marginTop: '0.5rem', color: '#10b981', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '4px' }}>
                 <i className="ph-fill ph-check-circle"></i> Certificado Ativo {activeCnpj.certificateExpirationDate ? `(Vence em: ${new Date(activeCnpj.certificateExpirationDate).toLocaleDateString('pt-BR')})` : ''}
               </div>
            )}
          </div>
          <div>
            <button className="btn btn-primary" onClick={() => setTab('nova-empresa')}><i className="ph-bold ph-plus"></i> Adicionar CNPJ</button>
          </div>
        </div>

        {tab === 'notas' && <NotasView user={user} notify={notify} />}
        {tab === 'perfil' && <PerfilView user={user} notify={notify} activeCnpj={activeCnpj} />}
        {tab === 'plano' && <PlanoView user={user} notify={notify} />}
        {tab === 'autorizados' && <AuthorizedNumbersView user={user} notify={notify} />}
        {tab === 'nova-empresa' && <NovaEmpresaView user={user} notify={notify} onAdded={() => window.location.reload()} />}
      </main>
    </div>
  );
}

function NovaEmpresaView({ user, notify, onAdded }) {
  const [cnpj, setCnpj] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!cnpj || !name) return notify("Preencha CNPJ e Nome", "error");
    
    setLoading(true);
    try {
      const userStr = localStorage.getItem('iaagro_user');
      const token = userStr ? JSON.parse(userStr).token : null;
      const res = await fetch(`${API_URL}/user/empresas`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify({ cnpj: cnpj.replace(/\D/g, ''), name })
      });
      const data = await res.json();
      if (res.ok) {
        notify("Empresa adicionada com sucesso!", "success");
        setTimeout(() => onAdded(), 1000);
      } else {
        notify(data.error || "Erro ao adicionar empresa", "error");
      }
    } catch(err) {
      notify("Erro de conexão", "error");
    }
    setLoading(false);
  };

  return (
    <div className="card" style={{ maxWidth: '600px', margin: '0 auto' }}>
      <h3 style={{ marginBottom: '1.5rem', color: 'var(--primary-color)' }}>Adicionar Novo CNPJ</h3>
      <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>Insira os dados da nova empresa. O limite de CNPJs depende do seu plano atual.</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Nome da Empresa (Razão Social)</label>
          <div className="input-wrapper">
            <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Ex: Fazenda Bela Vista" required />
            <i className="ph ph-buildings form-icon"></i>
          </div>
        </div>
        <div className="form-group">
          <label>CNPJ</label>
          <div className="input-wrapper">
            <input type="text" value={cnpj} onChange={e => setCnpj(formatCNPJ(e.target.value))} placeholder="00.000.000/0000-00" required maxLength={18} />
            <i className="ph ph-identification-card form-icon"></i>
          </div>
        </div>
        
        <button type="submit" className="btn btn-primary btn-full" disabled={loading} style={{ marginTop: '1rem' }}>
          {loading ? 'Adicionando...' : 'Cadastrar Empresa'}
        </button>
      </form>
    </div>
  );
}

function NotasView({ user, notify }) {
  const userId = user.id;
  const [notas, setNotas] = useState([]);
  const [search, setSearch] = useState('');
  const [dataInicio, setDataInicio] = useState('');
  const [dataFim, setDataFim] = useState('');
  const [selected, setSelected] = useState([]);

  useEffect(() => {
    const fetchNotas = async () => {
      try {
        const response = await fetch(`${API_URL}/notas?userId=${userId}`);
        const data = await response.json();
        if (response.ok && Array.isArray(data)) {
          setNotas(data);
        } else if (data.error) {
          console.error(data.error);
        }
      } catch (err) {
        console.error("Erro ao carregar notas.");
      }
    };
    if (userId) fetchNotas();
  }, [userId]);

  // Filtragem
  const filteredNotas = notas.filter(n => {
    let match = true;
    if (search && !n.numero.includes(search) && !n.chave.includes(search)) match = false;
    if (dataInicio && n.date < dataInicio) match = false;
    if (dataFim && n.date > dataFim) match = false;
    return match;
  });

  const toggleSelectAll = (e) => {
    if (e.target.checked) setSelected(filteredNotas.map(n => n.id));
    else setSelected([]);
  };

  const toggleSelect = (id) => {
    if (selected.includes(id)) setSelected(selected.filter(s => s !== id));
    else setSelected([...selected, id]);
  };

  const handleDownload = async (nota, type) => {
    const key = type === 'xml' ? nota.xml_key : nota.pdf_key;
    if (!key) return notify("Arquivo não disponível.", "error");

    try {
      notify("Iniciando download...", "info");
      const url = `${API_URL}/download?key=${encodeURIComponent(key)}`;
      const token = localStorage.getItem('iaagro_token');

      const response = await fetch(url, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (!response.ok) throw new Error("Falha no download");

      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = downloadUrl;
      a.download = `nota_${nota.numero}_${type}.${type}`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(a);
      
      notify("Download concluído!", "success");
    } catch (err) {
      console.error(err);
      notify("Erro ao baixar o arquivo. Tente novamente.", "error");
    }
  };

  const handleBulkDownload = (type) => {
    if (selected.length === 0) return notify("Selecione ao menos uma nota.", "error");
    notify(`Preparando arquivo ZIP com ${selected.length} notas (${type.toUpperCase()})`, "success");
  }

  const handleAcao = async (rota, body, msgSucesso) => {
    try {
      const userStr = localStorage.getItem('iaagro_user');
      const token = userStr ? JSON.parse(userStr).token : null;
      notify("Processando requisição no ACBr...", "info");
      const res = await fetch(`${API_URL}/notas/${rota}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify(body)
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Erro na API do ACBr");
      notify(msgSucesso, "success");
    } catch (err) {
      console.error(err);
      notify(err.message, "error");
    }
  };

  const handleCancelar = (n) => {
    if(!n.chave) return notify("A nota não possui chave para ser cancelada.", "error");
    const just = prompt("Informe a justificativa para cancelar (mínimo 15 caracteres):");
    if (!just || just.length < 15) return notify("Justificativa inválida", "error");
    handleAcao('cancelar', { chave: n.chave, justificativa: just }, "Cancelamento processado no ACBr!");
  };

  const handleCce = (n) => {
    if(!n.chave) return notify("A nota não possui chave para carta de correção.", "error");
    const corr = prompt("Informe o texto da Carta de Correção (mínimo 15 caracteres):");
    if (!corr || corr.length < 15) return notify("Texto de correção inválido", "error");
    handleAcao('cce', { chave: n.chave, correcao: corr }, "Carta de Correção processada no ACBr!");
  };

  const handleInutilizar = (n) => {
    const just = prompt("Justificativa para inutilizar numeração (mínimo 15 caracteres):");
    if (!just || just.length < 15) return notify("Justificativa inválida", "error");
    const num = prompt("Informe o número exato para inutilizar (ex: 100):");
    if (!num) return;
    
    const ano = n.date ? new Date(n.date).getFullYear().toString().slice(-2) : new Date().getFullYear().toString().slice(-2);
    handleAcao('inutilizar', {
      ano, modelo: "55", serie: n.serie || "1", numeroInicial: num, numeroFinal: num, justificativa: just
    }, "Inutilização processada no ACBr!");
  };

  const renderStatus = (nota) => {
    const temEvento = nota.status === 'Cancelada' || nota.status === 'Inutilizada' || (nota.eventos && nota.eventos.length > 0);
    if (temEvento) {
      return (
        <div className="custom-tooltip" style={{ alignItems: 'center', color: '#f59e0b' }}>
          <i className="ph-fill ph-warning-circle" style={{ fontSize: '1.2rem', marginRight: '4px' }}></i>
          <span style={{ fontSize: '0.8rem' }}>Aviso na Nota</span>
          <span className="tooltip-text">{nota.eventos && nota.eventos.length > 0 ? nota.eventos.join(', ') : nota.status}</span>
        </div>
      );
    }
    return <i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i>;
  }

  return (
    <div className="animate-fade-in">
      <div className="page-header" style={{ flexWrap: 'wrap', gap: '1rem' }}>
        <div>
          <h2>Notas Emitidas e Processadas</h2>
          <p>Histórico completo de transmissões via Secretaria da Fazenda.</p>
        </div>
        <div className="badge-quota" style={{ background: 'var(--primary-color)', color: '#fff', padding: '0.5rem 1rem', borderRadius: '20px', fontWeight: 'bold' }}>
          Cota: {notas.length} / {user.notes_limit > 1000 ? 'Ilimitado' : (user.notes_limit || 0)} notas
        </div>
      </div>

      <div className="card" style={{ padding: '1.5rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-end', border: '1px solid rgba(0,210,106,0.2)' }}>
        <div style={{ flex: 1, minWidth: '220px' }}>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Buscar Número ou Chave</label>
          <input type="text" className="filter-input" placeholder="Digite número ou chave..." value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <div>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>De Data</label>
          <input type="date" className="filter-input" value={dataInicio} onChange={e => setDataInicio(e.target.value)} />
        </div>
        <div>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Até Data</label>
          <input type="date" className="filter-input" value={dataFim} onChange={e => setDataFim(e.target.value)} />
        </div>
        <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
          <button className="btn btn-outline" style={{ padding: '0.6rem 1rem' }} onClick={() => handleBulkDownload('xml')}>
            <i className="ph ph-code"></i> Baixar XMLs das ({selected.length})
          </button>
          <button className="btn btn-outline" style={{ padding: '0.6rem 1rem' }} onClick={() => handleBulkDownload('pdf')}>
            <i className="ph ph-file-pdf"></i> Baixar PDFs das ({selected.length})
          </button>
        </div>
      </div>

      <div className="card table-container">
        {filteredNotas.length > 0 ? (
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: '40px' }}><input type="checkbox" onChange={toggleSelectAll} checked={selected.length === filteredNotas.length && filteredNotas.length > 0} style={{ width: '16px', height: '16px', cursor: 'pointer' }} /></th>
                <th>Número</th>
                <th>Série</th>
                <th>Data Autorização</th>
                <th style={{ minWidth: '160px', whiteSpace: 'nowrap' }}>Valor Bruto</th>
                <th>Status Sefaz</th>
                <th>Ações Fiscais</th>
                <th>Baixar Lote Único</th>
              </tr>
            </thead>
            <tbody>
              {filteredNotas.map(n => (
                <tr key={n.id}>
                  <td><input type="checkbox" checked={selected.includes(n.id)} onChange={() => toggleSelect(n.id)} style={{ width: '16px', height: '16px', cursor: 'pointer' }} /></td>
                  <td><strong>{n.numero}</strong></td>
                  <td>{n.serie}</td>
                  <td>{n.date ? n.date.split('T')[0].split('-').reverse().join('/') : '--/--/----'}</td>
                  <td style={{ whiteSpace: 'nowrap' }}><span className="text-gradient" style={{ fontWeight: 600 }}>{n.value}</span></td>
                  <td>{renderStatus(n)}</td>
                  <td>
                    <div className="action-buttons">
                      <button className="btn-icon" style={{ color: '#ef4444' }} title="Cancelar NF-e" onClick={() => handleCancelar(n)}><i className="ph ph-x-circle"></i></button>
                      <button className="btn-icon" style={{ color: '#f97316' }} title="Inutilizar Numeração" onClick={() => handleInutilizar(n)}><i className="ph ph-prohibit"></i></button>
                      <button className="btn-icon" style={{ color: '#3b82f6' }} title="Gerar Carta de Correção (CCe)" onClick={() => handleCce(n)}><i className="ph ph-file-text"></i></button>
                    </div>
                  </td>
                  <td>
                    <div className="action-buttons">
                      <button className="btn-icon" style={{ color: '#f59e0b' }} title="Baixar XML Original" onClick={() => handleDownload(n, 'xml')}><i className="ph ph-code"></i></button>
                      <button className="btn-icon" style={{ color: '#ef4444' }} title="Baixar DANFE em PDF" onClick={() => handleDownload(n, 'pdf')}><i className="ph ph-file-pdf"></i></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="empty-state">
            <i className="ph ph-magnifying-glass"></i>
            <h3>Nenhuma nota encontrada nos filtros.</h3>
            <p>Seus apontamentos com IA ainda não geraram uma Sefaz oficial ou os filtros estão vazios.</p>
          </div>
        )}
      </div>
    </div>
  )
}

function PerfilView({ user, notify, activeCnpj }) {
  const targetCnpj = activeCnpj ? activeCnpj.cnpj : user.cnpj;
  const [cnpjData, setCnpjData] = useState(null);
  const [fetchingCnpj, setFetchingCnpj] = useState(false);
  const [codMunicipio, setCodMunicipio] = useState(null);
  const [fetchingCodMunicipio, setFetchingCodMunicipio] = useState(false);
  const [serieNfe, setSerieNfe] = useState(user.serie_nfe || '7');
  const [ultimaNota, setUltimaNota] = useState(user.ultima_nota || 1);
  const [fileError, setFileError] = useState('');
  const [isDrag, setIsDrag] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [correctionField, setCorrectionField] = useState('Razão Social');
  const [correctionData, setCorrectionData] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [certFile, setCertFile] = useState(null);
  const [certPass, setCertPass] = useState('');
  const [saving, setSaving] = useState(false);
  const modalOptions = ["Razão Social", "Endereço / Logradouro", "Inscrição Estadual", "Natureza Jurídica", "Código IBGE"];

  useEffect(() => {
    if (targetCnpj) {
      setFetchingCodMunicipio(true);
      const cleanCnpj = targetCnpj.replace(/\D/g, '');
      fetch(`https://brasilapi.com.br/api/cnpj/v1/${cleanCnpj}`)
        .then(res => res.json())
        .then(data => {
          if (data.razao_social) setCodMunicipio(data);
        })
        .catch(err => console.log('Erro ao buscar código do município'))
        .finally(() => setFetchingCodMunicipio(false));

      fetch(`https://api.opencnpj.org/${cleanCnpj}`)
        .then(res => res.json())
        .then(data => {
          if (data.razao_social) setCnpjData(data);
        })
        .catch(err => console.log('Erro ao buscar CNPJ (Usando Mock Local)'))
        .finally(() => setFetchingCnpj(false));
    }
  }, [targetCnpj]);

  const processFile = (file) => {
    setFileError('');
    if (file) {
      if (!file.name.toLowerCase().endsWith('.pfx')) {
        setFileError('Segurança: Arquivo rejeitado. Por favor, envie o certificado A1 original criptografado em .PFX.');
      } else {
        setFileError('Sucesso: ' + file.name + ' anexado pronto para validação de senha.');
        setCertFile(file);
        console.log("Certificado PFX aceito na checagem front-end", file);
      }
    }
  };

  const handleDrag = (e) => {
    e.preventDefault(); e.stopPropagation();
    if (e.type === 'dragenter' || e.type === 'dragover') setIsDrag(true);
    else setIsDrag(false);
  };

  const handleDrop = (e) => {
    e.preventDefault(); e.stopPropagation();
    setIsDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      processFile(e.dataTransfer.files[0]);
    }
  };

  const handleSaveNfeConfig = async () => {
    try {
      const userStr = localStorage.getItem('iaagro_user');
      const token = userStr ? JSON.parse(userStr).token : null;
      notify("Salvando configurações...", "info");
      
      const res = await fetch(`${API_URL}/user/update-nfe-config`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify({ serie_nfe: serieNfe, ultima_nota: ultimaNota })
      });
      
      if (!res.ok) throw new Error("Erro ao salvar configuração.");
      notify("Configuração de NF-e salva com sucesso!", "success");
    } catch (err) {
      notify(err.message, "error");
    }
  };

  return (
    <div className="animate-fade-in relative">
      <div className="page-header">
        <div>
          <h2>Meu Perfil Físcal</h2>
          <p>Mantenha seus dados e certificados atualizados para o motor de Inteligência Artificial processar sem falhas.</p>
        </div>
      </div>

      {fetchingCnpj && <div className="api-block"><i className="ph ph-spinner-gap ph-spin" style={{ fontSize: '1.5rem' }}></i> Sincronizando metadados...</div>}

      {cnpjData && !fetchingCnpj && (
        <div className="api-block" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
          <i className="ph-fill ph-check-circle" style={{ color: 'var(--primary-color)', fontSize: '2rem' }}></i>
          <div style={{ flex: 1 }}>
            <strong>Dados da Empresa Sincronizados Oficialmente!</strong>
            <p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
              Dados retonados e validados do Emitente {cnpjData.razao_social}
            </p>
          </div>
          <button className="btn btn-outline" style={{ fontSize: '0.85rem', padding: '0.6rem 1.2rem', borderColor: '#f97316', color: '#f97316' }} onClick={(e) => { e.preventDefault(); setShowModal(true); }}>
            <i className="ph ph-warning"></i> Algum dado incorreto?
          </button>
        </div>
      )}

      {showModal && (
        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 99999 }}>
          <div className="card" style={{ minWidth: '400px', maxWidth: '90%', border: '1px solid #f97316', overflow: 'visible' }}>
            <h3 style={{ marginBottom: '1.5rem', color: '#f97316' }}>Solicitar Correção de Dado</h3>
            <div className="form-group">
              <label>Qual dado oficial está retornando incorreto?</label>

              <div style={{ position: 'relative' }}>
                <div className="filter-input" onClick={() => setDropdownOpen(!dropdownOpen)} style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', userSelect: 'none' }}>
                  <span>{correctionField}</span>
                  <i className={`ph ph-caret-${dropdownOpen ? 'up' : 'down'}`}></i>
                </div>

                {dropdownOpen && (
                  <div style={{ position: 'absolute', top: '100%', left: 0, width: '100%', zIndex: 100, padding: '0.5rem', marginTop: '0.5rem', boxShadow: '0 10px 30px rgba(0,0,0,0.5)', background: 'var(--surface-color)', border: '1px solid var(--primary-color)', borderRadius: '12px' }}>
                    {modalOptions.map(opt => (
                      <div key={opt}
                        onMouseEnter={(e) => e.target.style.background = opt === correctionField ? 'var(--primary-color)' : 'rgba(128,128,128,0.1)'}
                        onMouseLeave={(e) => e.target.style.background = opt === correctionField ? 'var(--primary-color)' : 'transparent'}
                        style={{
                          padding: '0.8rem 1rem',
                          borderRadius: '8px',
                          cursor: 'pointer',
                          transition: 'background 0.2s',
                          backgroundColor: correctionField === opt ? 'var(--primary-color)' : 'transparent',
                          color: correctionField === opt ? '#000' : 'var(--text-primary)',
                          fontWeight: correctionField === opt ? '600' : 'normal',
                          marginBottom: '2px'
                        }}
                        onClick={() => { setCorrectionField(opt); setDropdownOpen(false); }}>
                        {opt}
                      </div>
                    ))}
                  </div>
                )}
              </div>

            </div>
            <div className="form-group" style={{ marginTop: '1rem' }}>
              <label>Informe com atenção o dado correto:</label>
              <textarea className="filter-input" rows="3" placeholder="Ex: A Razão correta sem liminares de processo é 'Fazenda Nova Crixas LTDA'." value={correctionData} onChange={e => setCorrectionData(e.target.value)}></textarea>
            </div>
            <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end', marginTop: '2rem' }}>
              <button className="btn btn-outline" type="button" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-primary" type="button" style={{ background: '#f97316' }} onClick={() => {
                const limitStr = encodeURIComponent(`Olá equipe iaagro!\n\nGostaria de abrir um ticket para correção manual de dados.\n\n*CNPJ:* ${formatCNPJ(user.cnpj)}\n*Campo Inconsistente:* ${correctionField}\n*Dado Atualizado / Informação Correta:* ${correctionData}\n\nAguardo a aprovação.`);
                window.open(`https://wa.me/551530422070?text=${limitStr}`, '_blank');
                setShowModal(false);
                setCorrectionData('');
              }}>Enviar via WhatsApp</button>
            </div>
          </div>
        </div>
      )}

      <div className="card">
        <form>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label htmlFor="p-name">Nome do Gestor ou Sócio</label>
              <div className="input-wrapper">
                <input type="text" id="p-name" defaultValue={user.name} />
                <i className="ph ph-user form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-cpf">CPF do Gestor</label>
              <div className="input-wrapper">
                <input type="text" id="p-cpf" defaultValue={formatCPF(user.cpf)} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-identification-card form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-email">E-mail Comercial Monitorado</label>
              <div className="input-wrapper">
                <input type="email" id="p-email" defaultValue={user.email} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-cnpj">CNPJ Verificado</label>
              <div className="input-wrapper">
                <input type="text" id="p-cnpj" defaultValue={cnpjData ? formatCNPJ(cnpjData.cnpj) : formatCNPJ(targetCnpj)} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-lock-key form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-phone">Chave WhatsApp (Não editável)</label>
              <div className="input-wrapper">
                <input type="text" id="p-phone" defaultValue={user.phone} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-phone form-icon"></i>
              </div>
            </div>
          </div>

          <h3 style={{ marginTop: '2.5rem', marginBottom: '1rem', color: 'var(--primary-color)', borderBottom: '1px solid var(--surface-border)', paddingBottom: '0.5rem' }}>
            Configuração de Emissão (NF-e)
          </h3>
          <div className="custom-tooltip" style={{ marginBottom: '1rem', color: '#f59e0b', display: 'flex', alignItems: 'center', gap: '8px' }}>
            <i className="ph-fill ph-warning-circle" style={{ fontSize: '1.2rem' }}></i>
            <span style={{ fontSize: '0.9rem', fontWeight: 'bold' }}>Atenção: Apenas altere estes dados se você souber o que está fazendo. Padrão: Série 7 e Última Nota Emitida 1.</span>
          </div>
          <div className="profile-grid">
            <div className="form-group">
              <label>Série NF-e</label>
              <div className="input-wrapper">
                <input type="text" value={serieNfe} onChange={(e) => setSerieNfe(e.target.value)} />
                <i className="ph ph-hash form-icon"></i>
              </div>
            </div>
            <div className="form-group">
              <label>Última Nota Emitida</label>
              <div className="input-wrapper">
                <input type="number" value={ultimaNota} onChange={(e) => setUltimaNota(e.target.value)} />
                <i className="ph ph-file-text form-icon"></i>
              </div>
            </div>
            <div className="form-group" style={{ display: 'flex', alignItems: 'flex-end' }}>
              <button type="button" className="btn btn-outline" onClick={handleSaveNfeConfig} style={{ width: '100%', padding: '0.8rem' }}>
                <i className="ph ph-floppy-disk"></i> Salvar Numeração
              </button>
            </div>
          </div>

          <h3 style={{ marginTop: '2.5rem', marginBottom: '1rem', color: 'var(--primary-color)', borderBottom: '1px solid var(--surface-border)', paddingBottom: '0.5rem' }}>
            Dados Tributários (Portal Automático)
          </h3>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label>Razão Social Oficial</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? cnpjData.razao_social : ''} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-buildings form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Tipo Logradouro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? (cnpjData.tipo_logradouro || (cnpjData.logradouro ? cnpjData.logradouro.split(' ')[0] : 'S/ TR')) : '...'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-road-horizon form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Logradouro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.logradouro || 'Sem Logradouro Fixo'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-pin form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Número</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.numero || 'S/N'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-hash form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Complemento</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.complemento || 'Nenhum'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-plus form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>CEP</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.cep || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Bairro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.bairro || 'Sem Bairro'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-trifold form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Código Município IBGE</label>
              <div className="input-wrapper">
                <input type="text" value={codMunicipio?.codigo_municipio || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-barcode form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Município</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.municipio || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-city form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Estado (UF)</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.uf || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-pin-line form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>País</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? "Brasil" : 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-flag form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label>Natureza Jurídica</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.natureza_juridica || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-briefcase form-icon"></i>
              </div>
            </div>
          </div>

          <h3 style={{ marginTop: '2.5rem', marginBottom: '1rem', color: 'var(--primary-color)', borderBottom: '1px solid var(--surface-border)', paddingBottom: '0.5rem' }}>
            Certificado Digital Sefaz
          </h3>
          <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
            Para habilitar o disparo criptografado das notas, faça o upload de seu arquivo <strong>.PFX Tipo A1</strong> válido.
          </p>

          {activeCnpj?.hasCertificate && (
             <div style={{ marginBottom: '1.5rem', padding: '1rem', background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10b981', borderRadius: '8px', color: '#10b981' }}>
                <i className="ph-fill ph-check-circle" style={{ marginRight: '8px', fontSize: '1.2rem' }}></i>
                <strong>Certificado Ativo na ACBr!</strong> Você já possui um certificado configurado {activeCnpj.certificateExpirationDate ? `(Vence em ${new Date(activeCnpj.certificateExpirationDate).toLocaleDateString('pt-BR')})` : ''}. Não é necessário enviar novamente, a menos que queira substituí-lo.
             </div>
          )}

          <div className="profile-grid" style={{ alignItems: 'flex-start' }}>
            <div className="form-group full-width">
              <label>Substituição ou Novo Certificado</label>

              <div
                className={`drop-zone ${isDrag ? 'drag-active' : ''}`}
                onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
              >
                <input type="file" accept=".pfx, application/x-pkcs12" onChange={e => processFile(e.target.files[0])} className="drop-input" />
                <i className="ph ph-upload-simple" style={{ fontSize: '3rem', color: 'var(--primary-color)' }}></i>
                <p style={{ marginTop: '1rem', color: 'var(--text-secondary)' }}>Arraste seu certificado <strong>.pfx</strong> aqui ou clique para procurar</p>
                {fileError && <p style={{ color: fileError.includes('Sucesso') ? 'var(--primary-color)' : 'var(--danger)', fontSize: '0.9rem', marginTop: '0.5rem' }}><i className="ph-fill ph-info"></i> {fileError}</p>}
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="p-cert-pass">Senha Privada do Certificado (PIN / Token Oculto)</label>
              <div className="input-wrapper">
                <input type="password" id="p-cert-pass" placeholder="Insira a senha do A1" value={certPass} onChange={e => setCertPass(e.target.value)} />
                <i className="ph ph-key form-icon"></i>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '2rem' }}>
            <button type="button" className="btn btn-primary" disabled={saving} onClick={async (e) => {
              e.preventDefault();
              if (!certFile || !certPass) return alert("Selecione o arquivo PFX e digite a senha.");
              setSaving(true);
              const fd = new FormData();
              fd.append('userId', user.id);
              fd.append('certPassword', certPass);
              fd.append('certificate', certFile);
              fd.append('cnpj', targetCnpj);
              try {
                const res = await fetch(`${API_URL}/user/update-certificate`, { method: 'POST', body: fd });
                const data = await res.json();
                if (res.ok) notify("Certificado A1 salvo com sucesso no S3!", "success");
                else notify(data.error, "error");
              } catch (err) { notify("Erro ao conectar com servidor.", "error"); }
              finally { setSaving(false); }
            }}>
              <i className={`ph-bold ${saving ? 'ph-spinner-gap ph-spin' : 'ph-floppy-disk'}`}></i> {saving ? 'Enviando...' : 'Validar e Salvar Configurações'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function AuthorizedNumbersView({ user, notify }) {
  const { id: userId, plan_key: planKey } = user;
  const [numbers, setNumbers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [newName, setNewName] = useState('');
  const [newPhone, setNewPhone] = useState('');

  const limits = { produtor: 3, produtor_anual: 3, familia: 5, familia_anual: 5, cooperativa: 10, cooperativa_anual: 10, iniciante: 5 };
  const maxNum = limits[planKey] || 0;

  const fetchNumbers = async () => {
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/${userId}`);
      const data = await res.json();
      if (res.ok && Array.isArray(data)) {
        setNumbers(data);
      } else {
        setNumbers([]);
        if (data.error) console.error(data.error);
      }
    } catch (err) { console.error(err); setNumbers([]); }
    finally { setLoading(false); }
  };

  useEffect(() => { fetchNumbers(); }, []);

  const handleAdd = async (e) => {
    e.preventDefault();
    if (!newName || !newPhone) return notify("Preencha nome e número.", "error");
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/add`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, name: newName, phone: newPhone })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        setNewName(''); setNewPhone('');
        fetchNumbers();
        notify("Número autorizado com sucesso!", "success");
      } else {
        notify(data.error || "Erro ao adicionar.", "error");
      }
    } catch (err) { console.error(err); notify("Erro no servidor.", "error"); }
  };

  const handleDelete = async (id) => {
    if (!confirm("Deseja remover esta autorização?")) return;
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/${id}`, { method: 'DELETE' });
      if (res.ok) {
        fetchNumbers();
        notify("Autorização removida.", "info");
      }
    } catch (err) { console.error(err); }
  };

  return (
    <div className="animate-fade-in">
      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
        <div>
          <h2>Números Autorizados</h2>
          <p>Gerencie quem pode emitir notas fiscais pelo WhatsApp em seu nome.</p>
        </div>
        <div style={{ background: 'var(--surface-color)', padding: '0.75rem 1.5rem', borderRadius: '1rem', border: '1px solid var(--surface-border)', textAlign: 'center' }}>
          <strong style={{ fontSize: '1.2rem', color: maxNum > 0 && numbers.length >= maxNum ? 'var(--danger)' : 'var(--primary-color)' }}>{numbers.length} / {maxNum || 0}</strong>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Números em uso</div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: '2rem' }}>
        <h3 style={{ marginBottom: '1.5rem' }}>Adicionar Nova Autorização</h3>
        <form onSubmit={handleAdd} style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
          <div className="form-group" style={{ flex: 2, minWidth: '200px' }}>
            <label>Nome do Colaborador / Familiar</label>
            <input type="text" className="filter-input" value={newName} onChange={e => setNewName(e.target.value)} placeholder="Ex: João da Fazenda" />
          </div>
          <div className="form-group" style={{ flex: 1, minWidth: '200px' }}>
            <label>WhatsApp (Com DDD)</label>
            <input type="text" className="filter-input" value={newPhone} onChange={e => setNewPhone(e.target.value)} placeholder="1530422070" />
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '1.5rem' }}>
            <button type="submit" className="btn btn-primary">
              <i className="ph ph-plus-circle"></i> Autorizar
            </button>
          </div>
        </form>
      </div>

      <div className="card">
        <h3>Lista de Autorizados</h3>
        {loading ? <p>Carregando...</p> : (
          <table className="data-table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Número (WhatsApp)</th>
                <th>Data Autorização</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {numbers.map(n => (
                <tr key={n.id}>
                  <td style={{ fontWeight: '600' }}>{n.name}</td>
                  <td>{n.phone}</td>
                  <td>{new Date(n.created_at).toLocaleDateString()}</td>
                  <td>
                    <button className="btn-icon" style={{ color: 'var(--danger)' }} onClick={() => handleDelete(n.id)}>
                      <i className="ph ph-trash"></i>
                    </button>
                  </td>
                </tr>
              ))}
              {numbers.length === 0 && (
                <tr>
                  <td colSpan="4" style={{ textAlign: 'center', padding: '2rem' }}>Ninguém autorizado ainda.</td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function PlanoView({ user, notify }) {
  const [loading, setLoading] = useState(false);
  const [currentUser, setCurrentUser] = useState(user);
  const [showPayForm, setShowPayForm] = useState(null); // 'iniciante', 'profissional', etc
  const [cardData, setCardData] = useState({ holderName: '', number: '', expiry: '', cvv: '' });
  const [billingCycle, setBillingCycle] = React.useState('annual');

  useEffect(() => {
    // Atualiza dados do usuário para pegar plano/vencimento novo
    fetch(`${API_URL}/user/${user.id}`)
      .then(res => res.json())
      .then(data => { if (data.id) setCurrentUser(data); });
  }, []);

  const handleSubscribe = async (planKey) => {
    setLoading(true);
    try {
      const response = await fetch(`${API_URL}/subscription/checkout`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: user.id, planKey })
      });
      const data = await response.json();
      if (response.ok) {
        if (data.invoiceUrl) {
          const width = 600;
          const height = 800;
          const left = (window.screen.width / 2) - (width / 2);
          const top = (window.screen.height / 2) - (height / 2);
          const popup = window.open(data.invoiceUrl, 'AsaasCheckout', `width=${width},height=${height},top=${top},left=${left}`);

          if (!popup || popup.closed || typeof popup.closed === 'undefined') {
            notify("Checkout bloqueado pelo navegador. Por favor, libere popups e tente novamente.", "error");
            // Adicional: Abrir fallback em aba normal
            window.open(data.invoiceUrl, '_blank');
          } else {
            notify("Janela de pagamento aberta! Aguarde a conclusão.", "info");
          }

          // Polling para verificar quando o plano muda
          const checkStatus = setInterval(async () => {
            const res = await fetch(`${API_URL}/user/${user.id}`);
            const updated = await res.json();
            // Ele só deve dar confirmed se o pagamento aprovar e o plano mudar no banco
            if (updated.subscription_status === 'ACTIVE' && updated.plan_key === planKey) {
              setCurrentUser(updated);
              notify("Pagamento confirmado! Plano ativado com sucesso.", "success");
              clearInterval(checkStatus);
            }
          }, 5000);
          // Limpar polling após 10 minutos
          setTimeout(() => clearInterval(checkStatus), 600000);

        } else {
          notify("Requisição concluída.", "success");
        }
      } else {
        notify(data.error || "Erro ao processar assinatura.", "error");
      }
    } catch (err) {
      notify("Erro de conexão.", "error");
    } finally {
      setLoading(false);
    }
  };

  const isCurrentPlan = (key) => currentUser.plan_key === key;
  const isScheduled = (key) => currentUser.next_plan_key === key;

  return (
    <div className="animate-fade-in">
      <div className="page-header">
        <div>
          <h2>Gestão de Assinatura</h2>
          <p>Status atual: <strong style={{ color: currentUser.subscription_status === 'ACTIVE' ? 'var(--primary-color)' : '#999' }}>
            {currentUser.subscription_status === 'ACTIVE'
              ? `Pago - Válido até ${new Date(currentUser.due_date).toLocaleDateString()}`
              : 'Aguardando Pagamento / Inativo'}
          </strong></p>
          <div className="usage-stats" style={{ marginTop: '1rem', background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '8px', display: 'block' }}>
            <p style={{ marginBottom: '0.5rem', fontSize: '1rem', color: '#fff', fontWeight: 'bold' }}>
              Cota de Emissão: <span style={{ color: 'var(--primary-color)' }}>{currentUser.notes_used || 0} / {currentUser.notes_limit > 1000 ? 'Ilimitado' : (currentUser.notes_limit || 0)}</span> notas
            </p>
            <div className="usage-progress-bg" style={{ width: '100%', height: '10px', background: 'rgba(255,255,255,0.1)', borderRadius: '5px', overflow: 'hidden' }}>
              <div style={{ width: `${Math.min(100, (currentUser.notes_used / (currentUser.notes_limit || 1)) * 100) || 0}%`, height: '100%', background: 'var(--primary-color)', transition: 'width 0.5s ease' }}></div>
            </div>
          </div>
        </div>
      </div>

      {/* --- Toggle Mensal/Anual (Removido, plano fixo no anual) --- */}

      <div className="plans-grid">
        <div className={`plan-card ${isCurrentPlan('produtor') || isCurrentPlan('produtor_anual') ? 'active-plan' : ''}`}>
          {(isCurrentPlan('produtor') || isCurrentPlan('produtor_anual')) && <div className="badge-popular">Seu Plano</div>}
          <h3 className="plan-name">Produtor</h3>
          <div className="plan-price"><span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '74,90' : '64,90'}<span className="plan-period">/mês</span></div>
          <div className="plan-period" style={{ marginTop: '-10px', marginBottom: '1.5rem' }}>{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
          <ul className="plan-features">
            {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
            <li><i className="ph-bold ph-check"></i> 30 Emissões mensais</li>
            <li><i className="ph-bold ph-check"></i> 1 CNPJ/CPF</li>
            <li><i className="ph-bold ph-check"></i> 3 Números Autorizados</li>
          </ul>
          <div style={{ display: 'flex', gap: '10px', marginTop: '10px', flexDirection: 'column' }}>
            {billingCycle === 'monthly' ? (
              <button
                className={`btn ${isScheduled('produtor') ? 'btn-info' : 'btn-outline'}`}
                disabled={loading || isCurrentPlan('produtor') || isScheduled('produtor')}
                onClick={() => handleSubscribe('produtor')}
              >
                {isCurrentPlan('produtor') ? 'Plano Atual' : (isScheduled('produtor') ? 'Troca Agendada' : 'Assinar Mensal')}
              </button>
            ) : (
              <button
                className={`btn ${isScheduled('produtor_anual') ? 'btn-info' : 'btn-outline'}`}
                disabled={loading || isCurrentPlan('produtor_anual') || isScheduled('produtor_anual')}
                onClick={() => handleSubscribe('produtor_anual')}
              >
                {isCurrentPlan('produtor_anual') ? 'Plano Atual' : (isScheduled('produtor_anual') ? 'Troca Agendada' : 'Assinar Anual')}
              </button>
            )}
          </div>
        </div>

        <div className={`plan-card popular ${isCurrentPlan('familia') || isCurrentPlan('familia_anual') ? 'active-plan' : ''}`}>
          {(isCurrentPlan('familia') || isCurrentPlan('familia_anual')) ? <div className="badge-popular">Seu Plano</div> : <div className="badge-popular">Recomendado</div>}
          <h3 className="plan-name text-gradient">Família</h3>
          <div className="plan-price"><span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '104,90' : '94,90'}<span className="plan-period">/mês</span></div>
          <div className="plan-period" style={{ marginTop: '-10px', marginBottom: '1.5rem' }}>{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
          <ul className="plan-features">
            {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
            <li><i className="ph-bold ph-check"></i> 100 Emissões mensais</li>
            <li><i className="ph-bold ph-check"></i> 3 CNPJ/CPF</li>
            <li><i className="ph-bold ph-check"></i> 5 Números Autorizados</li>
          </ul>
          <div style={{ display: 'flex', gap: '10px', marginTop: '10px', flexDirection: 'column' }}>
            {billingCycle === 'monthly' ? (
              <button
                className={`btn ${isScheduled('familia') ? 'btn-info' : 'btn-primary'}`}
                disabled={loading || isCurrentPlan('familia') || isScheduled('familia')}
                onClick={() => handleSubscribe('familia')}
              >
                {isCurrentPlan('familia') ? 'Plano Atual' : (isScheduled('familia') ? 'Troca Agendada' : 'Assinar Mensal')}
              </button>
            ) : (
              <button
                className={`btn ${isScheduled('familia_anual') ? 'btn-info' : 'btn-primary'}`}
                disabled={loading || isCurrentPlan('familia_anual') || isScheduled('familia_anual')}
                onClick={() => handleSubscribe('familia_anual')}
              >
                {isCurrentPlan('familia_anual') ? 'Plano Atual' : (isScheduled('familia_anual') ? 'Troca Agendada' : 'Assinar Anual')}
              </button>
            )}
          </div>
        </div>

        <div className={`plan-card ${isCurrentPlan('cooperativa') || isCurrentPlan('cooperativa_anual') ? 'active-plan' : ''}`}>
          {(isCurrentPlan('cooperativa') || isCurrentPlan('cooperativa_anual')) && <div className="badge-popular">Seu Plano</div>}
          <h3 className="plan-name">Cooperativa</h3>
          <div className="plan-price"><span className="plan-currency">R$</span>{billingCycle === 'monthly' ? '174,90' : '154,90'}<span className="plan-period">/mês</span></div>
          <div className="plan-period" style={{ marginTop: '-10px', marginBottom: '1.5rem' }}>{billingCycle === 'monthly' ? 'mensal' : 'mensal (faturado anualmente)'}</div>
          <ul className="plan-features">
            {billingCycle === 'annual' && <li><i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i> 1 Certificado A1 Grátis</li>}
            <li><i className="ph-bold ph-check"></i> 500 Emissões mensais</li>
            <li><i className="ph-bold ph-check"></i> CNPJ/CPF Ilimitado</li>
            <li><i className="ph-bold ph-check"></i> 10 Números Autorizados</li>
          </ul>
          <div style={{ display: 'flex', gap: '10px', marginTop: '10px', flexDirection: 'column' }}>
            {billingCycle === 'monthly' ? (
              <button
                className={`btn ${isScheduled('cooperativa') ? 'btn-info' : 'btn-outline'}`}
                disabled={loading || isCurrentPlan('cooperativa') || isScheduled('cooperativa')}
                onClick={() => handleSubscribe('cooperativa')}
              >
                {isCurrentPlan('cooperativa') ? 'Plano Atual' : (isScheduled('cooperativa') ? 'Troca Agendada' : 'Assinar Mensal')}
              </button>
            ) : (
              <button
                className={`btn ${isScheduled('cooperativa_anual') ? 'btn-info' : 'btn-outline'}`}
                disabled={loading || isCurrentPlan('cooperativa_anual') || isScheduled('cooperativa_anual')}
                onClick={() => handleSubscribe('cooperativa_anual')}
              >
                {isCurrentPlan('cooperativa_anual') ? 'Plano Atual' : (isScheduled('cooperativa_anual') ? 'Troca Agendada' : 'Assinar Anual')}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// === COMPONENTE DE FUNDO INTERATIVO ===
function InteractiveBackground() {
  const glowRef = React.useRef(null);
  const gridRef = React.useRef(null);

  useEffect(() => {
    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;

    const handleMouseMove = (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    };
    window.addEventListener('mousemove', handleMouseMove);

    let animationFrameId;
    let currentX = mouseX;
    let currentY = mouseY;

    const render = () => {
      currentX += (mouseX - currentX) * 0.06;
      currentY += (mouseY - currentY) * 0.06;
      if (glowRef.current) {
        glowRef.current.style.transform = `translate(calc(${currentX}px - 50%), calc(${currentY}px - 50%))`;
      }
      if (gridRef.current) {
        // Mascara o GRID iluminando somente a área envolta do cursor dinamicamente
        const maskStyle = `radial-gradient(circle 350px at ${currentX}px ${currentY}px, black 0%, transparent 100%)`;
        gridRef.current.style.maskImage = maskStyle;
        gridRef.current.style.WebkitMaskImage = maskStyle;
      }
      animationFrameId = requestAnimationFrame(render);
    };
    render();

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  return (
    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', zIndex: -2, overflow: 'hidden' }}>
      {/* O Grid Transparente que é revelado pelo mouse */}
      <div ref={gridRef} className="interactive-grid"></div>

      {/* Orbe dinâmico de luz verde/neon */}
      <div
        ref={glowRef}
        style={{
          position: 'absolute',
          top: 0, left: 0,
          width: '700px', height: '700px',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(0, 210, 106, 0.025) 0%, rgba(0, 0, 0, 0) 70%)',
          filter: 'blur(40px)',
          transform: 'translate(-50%, -50%)',
          willChange: 'transform'
        }}
      ></div>
    </div>
  );
}

function CheckoutResult({ type, onNavigate, theme }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';

  return (
    <div className="auth-container" style={{ padding: '2rem' }}>
      <div className="auth-card" style={{ maxWidth: '500px', textAlign: 'center', padding: '3rem 2rem' }}>
        <img src={logoSrc} alt="IAAGRO" style={{ height: '40px', marginBottom: '2rem' }} />

        {type === 'success' ? (
          <>
            <div style={{
              width: '80px', height: '80px',
              borderRadius: '50%', background: 'rgba(0, 210, 106, 0.15)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 1.5rem', border: '2px solid var(--primary-color)'
            }}>
              <i className="ph-fill ph-check-circle" style={{ fontSize: '3rem', color: 'var(--primary-color)' }}></i>
            </div>
            <h1 className="text-gradient" style={{ fontSize: '2rem', marginBottom: '1rem' }}>Pagamento Concluído!</h1>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem', fontSize: '1.1rem' }}>
              Parabéns! Sua assinatura foi ativada com sucesso. Você já pode emitir suas Notas Fiscais no WhatsApp com o poder da IA.
            </p>
          </>
        ) : (
          <>
            <div style={{
              width: '80px', height: '80px',
              borderRadius: '50%', background: 'rgba(239, 68, 68, 0.15)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 1.5rem', border: '2px solid #ef4444'
            }}>
              <i className="ph-fill ph-warning-circle" style={{ fontSize: '3rem', color: '#ef4444' }}></i>
            </div>
            <h1 style={{ fontSize: '2rem', color: '#ef4444', marginBottom: '1rem' }}>Pagamento Cancelado</h1>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem', fontSize: '1.1rem' }}>
              O processo de pagamento não foi concluído. Fique tranquilo, nenhuma cobrança foi realizada.
            </p>
          </>
        )}

        <button className="btn btn-primary" onClick={() => onNavigate('portal')} style={{ width: '100%', padding: '1rem', fontSize: '1.1rem' }}>
          Voltar para o Portal
        </button>
      </div>
    </div>
  );
}

// Render do React
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);