// Vantic — main app
const { useState, useEffect, useRef } = React;

// Abstract dark backdrop — deep navy with subtle radial glow and thin geometric accents.
// Matches the tone of the new Vantic mark so the crest sits cleanly on top.
const HERO_BG_SVG = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'>
  <defs>
    <radialGradient id='glow' cx='0.5' cy='0.45' r='0.6'>
      <stop offset='0' stop-color='#12262a'/>
      <stop offset='0.55' stop-color='#0a1b1e'/>
      <stop offset='1' stop-color='#050f11'/>
    </radialGradient>
    <linearGradient id='ray' x1='0' y1='0' x2='0' y2='1'>
      <stop offset='0' stop-color='#C9A961' stop-opacity='0'/>
      <stop offset='0.5' stop-color='#C9A961' stop-opacity='0.22'/>
      <stop offset='1' stop-color='#C9A961' stop-opacity='0'/>
    </linearGradient>
  </defs>
  <rect width='1600' height='1000' fill='url(#glow)'/>
  <!-- thin gold rule lines, architectural without being literal -->
  <rect x='220' y='0' width='1' height='1000' fill='url(#ray)' opacity='0.6'/>
  <rect x='1380' y='0' width='1' height='1000' fill='url(#ray)' opacity='0.6'/>
  <!-- horizon line -->
  <rect x='0' y='720' width='1600' height='1' fill='#C9A961' opacity='0.08'/>
  <!-- faint ornamental diamonds on the horizon -->
  <g fill='#C9A961' opacity='0.18'>
    <polygon points='800,714 806,720 800,726 794,720'/>
    <polygon points='620,716 624,720 620,724 616,720'/>
    <polygon points='980,716 984,720 980,724 976,720'/>
  </g>
</svg>
`)}`;

// ================== NAV ==================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <a href="#top" className="nav-brand">
        <img src="assets/vantic-logo-mark.png" alt="" className="nav-brand-mark" />
        <span className="nav-brand-text">VANTIC</span>
      </a>
      <button className="nav-toggle" aria-label="Menu" onClick={() => document.body.classList.toggle('nav-open')}>
        <span/><span/><span/>
      </button>
      <ul className="nav-links">
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#solucoes">Soluções</a></li>
        <li><a href="#como">Como funciona</a></li>
      </ul>
      <a href="#contato" className="nav-cta">Agendar conversa</a>
    </nav>
  );
}

// ================== HERO ==================
function Hero() {
  const bgRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!bgRef.current) return;
      const y = window.scrollY;
      bgRef.current.style.transform = `translateY(${y * 0.25}px) scale(1.05)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="hero" id="top">
      <div className="hero-bg" ref={bgRef} style={{ backgroundImage: `url("${HERO_BG_SVG}")` }} />
      <div className="hero-overlay" />
      <div className="hero-grain" />
      <div className="hero-inner">
        <h1 className="hero-title">
          Crédito imobiliário<br/>
          <em>sob medida.</em>
        </h1>
        <p className="hero-sub">
          Estruturamos aquisição e crédito com garantia de imóvel, com acesso a um mercado curado de bancos, discrição e um único interlocutor do início ao desembolso.
        </p>
        <div className="hero-ctas">
          <a href="#solucoes" className="btn btn-primary">
            <span>Financiar um imóvel</span>
            <span className="btn-arrow">→</span>
          </a>
          <a href="#solucoes" className="btn">
            <span>Crédito com garantia de imóvel</span>
            <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ================== SOBRE ==================
function Sobre() {
  return (
    <section className="sobre reveal" id="sobre">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">
            <span className="section-eyebrow-line" />
            <span>A Vantic</span>
          </div>
          <h2 className="section-title">
            Uma casa de crédito <em>construída sobre relações</em>.
          </h2>
        </div>

        <div className="sobre-grid">
          <div className="sobre-text">
            <p>
              A Vantic nasceu para atender quem valoriza atendimento personalizado acima de processos padronizados. Operamos como uma boutique de crédito imobiliário — pessoa física e pessoa jurídica — com acesso a uma mesa curada de instituições financeiras e parceiros.
            </p>
            <p>
              Cada operação é estruturada à mão. Analisamos o perfil do cliente, o imóvel, a finalidade e o momento do mercado para desenhar a solução de melhor custo e prazo. Sem intermediações desnecessárias, sem discurso de balcão.
            </p>
            <p>
              Acreditamos em transparência total na formação de taxa, em interlocução direta com quem decide, e na confidencialidade que operações patrimoniais exigem.
            </p>
          </div>
          <aside className="sobre-stats">
            <div className="stat-item">
              <div className="stat-num">3<sup>+</sup></div>
              <div className="stat-label">Propostas comparadas por operação</div>
            </div>
            <div className="stat-item">
              <div className="stat-num">12<sup>+</sup></div>
              <div className="stat-label">Instituições financeiras acessadas</div>
            </div>
            <div className="stat-item">
              <div className="stat-num">48<sup>h</sup></div>
              <div className="stat-label">Para primeiro cenário preliminar</div>
            </div>
            <div className="stat-item">
              <div className="stat-num">1</div>
              <div className="stat-label">Interlocutor do início ao desembolso</div>
            </div>
          </aside>
        </div>

        <div className="partners">
          <p className="partners-label">
            Operamos com bancos públicos e privados, cooperativas de crédito, SCDs e fundos, sempre negociando em paralelo para sua operação.
          </p>
        </div>
      </div>
    </section>
  );
}

// ================== SOLUÇÕES ==================
function Solucoes() {
  return (
    <section className="solucoes reveal" id="solucoes">
      <div className="container">
        <div className="section-header">
          <div className="section-eyebrow">
            <span className="section-eyebrow-line" style={{ background: 'var(--gold)' }} />
            <span>Soluções</span>
          </div>
          <h2 className="section-title" style={{ color: 'var(--cream)' }}>
            Duas soluções, <em>o mesmo cuidado</em>.
          </h2>
        </div>

        <div className="solucoes-grid">
          <article className="solucao-card">
            <span className="solucao-number">I.</span>
            <div className="solucao-label">Aquisição</div>
            <h3 className="solucao-title">Financiamento <em>Imobiliário</em></h3>
            <p className="solucao-desc">
              Aquisição de residência, segundo imóvel, imóvel de investimento ou de alto padrão. Estruturação para pessoa física e pessoa jurídica.
            </p>
            <div className="solucao-divider" />
            <div className="solucao-specs">
              <div className="spec-row">
                <div className="spec-label">Perfil</div>
                <div className="spec-value">Pessoa física e jurídica</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Prazo</div>
                <div className="spec-value">Até <strong>420 meses</strong></div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Financiamento</div>
                <div className="spec-value">Até <strong>80%</strong> do valor do imóvel</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Garantia</div>
                <div className="spec-value">Alienação fiduciária do bem</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Taxa</div>
                <div className="spec-value">Negociada a mercado em cada operação</div>
              </div>
            </div>
            <a href="#contato" className="solucao-cta">
              <span>Solicitar simulação</span>
              <span className="solucao-cta-arrow" />
            </a>
          </article>

          <article className="solucao-card">
            <span className="solucao-number">II.</span>
            <div className="solucao-label">Liquidez</div>
            <h3 className="solucao-title">Crédito com <em>garantia de imóvel</em></h3>
            <p className="solucao-desc">
              Liquidez imediata usando um imóvel próprio como garantia. Prazos longos e taxas entre as mais competitivas do mercado de crédito.
            </p>
            <div className="solucao-divider" />
            <div className="solucao-specs">
              <div className="spec-row">
                <div className="spec-label">Perfil</div>
                <div className="spec-value">Pessoa física e jurídica</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Prazo</div>
                <div className="spec-value">Até <strong>240 meses</strong></div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Crédito</div>
                <div className="spec-value">Até <strong>60%</strong> do valor do imóvel</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Uso</div>
                <div className="spec-value">Capital de giro, expansão, liquidez</div>
              </div>
              <div className="spec-row">
                <div className="spec-label">Taxa</div>
                <div className="spec-value">Negociada a mercado em cada operação</div>
              </div>
            </div>
            <a href="#contato" className="solucao-cta">
              <span>Solicitar simulação</span>
              <span className="solucao-cta-arrow" />
            </a>
          </article>
        </div>
      </div>
    </section>
  );
}

// ================== COMO FUNCIONA ==================
function Como() {
  const steps = [
    {
      num: 'I',
      title: 'Simulação',
      desc: 'Entendemos seu perfil, a operação pretendida e o imóvel envolvido. Montamos um cenário preliminar com taxas, prazos e condições de mercado.',
      meta: '24 horas'
    },
    {
      num: 'II',
      title: 'Análise',
      desc: 'Submissão estruturada às instituições parceiras. Negociamos em paralelo para identificar a melhor combinação de taxa, prazo e garantias.',
      meta: '5 a 10 dias úteis'
    },
    {
      num: 'III',
      title: 'Aprovação',
      desc: 'Apresentamos as propostas formais lado a lado. Você decide com informação completa, sem letra miúda, sem conflito de interesse.',
      meta: 'Seu tempo'
    },
    {
      num: 'IV',
      title: 'Liberação',
      desc: 'Acompanhamos laudo, cartório, registro e liberação. Você recebe um único ponto de contato do início ao desembolso.',
      meta: 'Conforme instituição'
    },
  ];
  return (
    <section className="como reveal" id="como">
      <div className="container">
        <div className="section-header center">
          <div className="section-eyebrow">
            <span className="section-eyebrow-line" />
            <span>Como funciona</span>
            <span className="section-eyebrow-line" />
          </div>
          <h2 className="section-title" style={{ textAlign: 'center' }}>
            Quatro etapas, <em>um interlocutor</em>.
          </h2>
        </div>

        <div className="timeline">
          {steps.map((s, i) => (
            <div className="timeline-step" key={i}>
              <div className="timeline-dot">{s.num}</div>
              <div className="timeline-title">{s.title}</div>
              <div className="timeline-desc">{s.desc}</div>
              <div className="timeline-meta">— {s.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ================== CLOSING ==================
// Webhook N8N "Lead Site Vantic" (workflow id i3OdxYWlOR5JzTi3, ativo em producao)
const WEBHOOK_URL = 'https://n8n.invius.com.br/webhook/lead-site-vantic';
// Numero da Fabiana (WhatsApp Business Vantic). Usado como fallback caso o webhook falhe.
const FABIANA_WA_NUMBER = '5511512283937';
const FABIANA_WA_URL = `https://wa.me/${FABIANA_WA_NUMBER}`;

const TIPO_OPERACAO_TEXTO = {
  aquisicao: 'financiamento para aquisição de um imóvel',
  home_equity: 'crédito com garantia de imóvel',
  avaliando: 'crédito imobiliário (ainda avaliando o formato)',
};

// Mascara visual do WhatsApp: (DD) 9XXXX-XXXX. Nao bloqueia — so formata enquanto o usuario digita.
function formatarWhatsapp(valor) {
  const digitos = valor.replace(/\D/g, '').slice(0, 11);
  if (digitos.length === 0) return '';
  if (digitos.length < 3) return `(${digitos}`;
  if (digitos.length < 7) return `(${digitos.slice(0, 2)}) ${digitos.slice(2)}`;
  if (digitos.length < 11) return `(${digitos.slice(0, 2)}) ${digitos.slice(2, 6)}-${digitos.slice(6)}`;
  return `(${digitos.slice(0, 2)}) ${digitos.slice(2, 7)}-${digitos.slice(7)}`;
}

function Closing() {
  const [nome, setNome] = useState('');
  const [whatsapp, setWhatsapp] = useState('');
  const [tipoOperacao, setTipoOperacao] = useState('aquisicao');
  const [loading, setLoading] = useState(false);
  const [empresaReferencia, setEmpresaReferencia] = useState(''); // honeypot — humano nao ve, bot preenche
  const mountTime = useRef(Date.now());

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (loading) return;

    // Anti-bot 1: honeypot. Se foi preenchido, bot. Finge sucesso e nao faz nada.
    if (empresaReferencia) return;
    // Anti-bot 2: tempo minimo de preenchimento. Humano leva pelo menos uns segundos.
    const tempoPagina = Date.now() - mountTime.current;
    if (tempoPagina < 2500) return;

    setLoading(true);
    try {
      const response = await fetch(WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nome,
          whatsapp,
          tipo_operacao: tipoOperacao,
          origem: 'site_vantic',
          user_agent: navigator.userAgent,
          referrer: document.referrer,
          empresa_referencia: empresaReferencia, // honeypot — backend deve dropar se preenchido
          tempo_pagina_ms: tempoPagina,          // backend pode usar pra outras heuristicas
        }),
      });
      if (!response.ok) throw new Error('bad status');
      const data = await response.json();
      if (!data.wa_url) throw new Error('no wa_url');
      window.location.href = data.wa_url;
    } catch (err) {
      console.warn('[Vantic] webhook falhou, usando fallback wa.me:', err);
      const tipoTxt = TIPO_OPERACAO_TEXTO[tipoOperacao] || 'crédito imobiliário';
      const msg = `Oi, sou ${nome}, preenchi o formulário no site da Vantic e tenho interesse em ${tipoTxt}.`;
      window.location.href = `${FABIANA_WA_URL}?text=${encodeURIComponent(msg)}`;
    }
  };

  return (
    <section className="closing reveal" id="contato">
      <img src="assets/vantic-logo-mark.png" alt="" className="closing-watermark" aria-hidden="true" />
      <div className="container-narrow">
        <h2 className="closing-title">
          Uma conversa <em>reservada</em> é o início de toda boa operação.
        </h2>
        <form className="contact-form" onSubmit={handleSubmit} noValidate>
          {/* Honeypot — invisivel pro humano, preenchido por bot que faz auto-fill */}
          <div className="hp-field" aria-hidden="true">
            <label>
              Não preencha este campo
              <input
                type="text"
                name="empresa_referencia"
                tabIndex={-1}
                autoComplete="off"
                value={empresaReferencia}
                onChange={(e) => setEmpresaReferencia(e.target.value)}
              />
            </label>
          </div>
          <label className="field">
            <span className="field-label">Nome</span>
            <input
              type="text"
              required
              placeholder="Como podemos te chamar"
              value={nome}
              onChange={(e) => setNome(e.target.value)}
              disabled={loading}
            />
          </label>
          <label className="field">
            <span className="field-label">Melhor WhatsApp</span>
            <input
              type="tel"
              required
              inputMode="numeric"
              autoComplete="tel-national"
              maxLength={16}
              placeholder="WhatsApp que mais usa"
              value={whatsapp}
              onChange={(e) => setWhatsapp(formatarWhatsapp(e.target.value))}
              disabled={loading}
            />
          </label>
          <fieldset className="field field-radios" disabled={loading}>
            <span className="field-label">Tipo de operação</span>
            <div className="radio-row">
              <label>
                <input
                  type="radio"
                  name="op"
                  value="aquisicao"
                  checked={tipoOperacao === 'aquisicao'}
                  onChange={() => setTipoOperacao('aquisicao')}
                /> <span>Aquisição</span>
              </label>
              <label>
                <input
                  type="radio"
                  name="op"
                  value="home_equity"
                  checked={tipoOperacao === 'home_equity'}
                  onChange={() => setTipoOperacao('home_equity')}
                /> <span>Crédito com garantia de imóvel</span>
              </label>
              <label>
                <input
                  type="radio"
                  name="op"
                  value="avaliando"
                  checked={tipoOperacao === 'avaliando'}
                  onChange={() => setTipoOperacao('avaliando')}
                /> <span>Ainda avaliando</span>
              </label>
            </div>
          </fieldset>
          <div className="hero-ctas" style={{ justifyContent: 'center', marginTop: '12px' }}>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              <span>{loading ? 'Enviando...' : 'Agendar conversa'}</span>
              {!loading && <span className="btn-arrow">→</span>}
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

// ================== FOOTER ==================
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div className="footer-col">
          <div className="footer-brand">VANTIC</div>
          <p className="footer-tagline">Crédito imobiliário sob medida.</p>
        </div>
        <div className="footer-col">
          <div className="footer-label">Contato</div>
          <a href="https://wa.me/5511512283937">WhatsApp</a>
        </div>
        <div className="footer-col">
          <div className="footer-label">Institucional</div>
          <a href="#sobre">Sobre</a>
          <a href="#solucoes">Soluções</a>
          <a href="/privacidade.html">Política de privacidade</a>
        </div>
        <div className="footer-col">
          <div className="footer-label">Razão social</div>
          <p className="footer-small">
            Vantic Global Ltda.<br/>
            CNPJ 54.540.340/0001-34<br/>
            Alameda Rio Negro, 1030<br/>
            Alphaville, Barueri, SP<br/>
            CEP 06454-000
          </p>
        </div>
      </div>

      <div className="footer-legal">
        <div className="container">
          <p>
            A Vantic é uma plataforma de crédito imobiliário boutique especializada na intermediação de operações, atuando como correspondente bancário em conformidade com as normas do Sistema Financeiro Nacional. Nosso papel é facilitar o acesso a soluções de crédito por meio de parcerias com instituições financeiras e entidades de crédito, oferecendo um processo estruturado, transparente e seguro.
          </p>
          <p>
            Toda a atuação da Vantic segue rigorosamente as diretrizes da Resolução CMN nº 4.935, de 29 de julho de 2021, do Banco Central do Brasil, que regulamenta a atividade de correspondentes no país.
          </p>
          <p>
            A Vantic atua como correspondente de diversas instituições financeiras e entidades de crédito, conforme contratos vigentes e autorizações regulatórias aplicáveis, permitindo ao cliente acessar diferentes alternativas de crédito em um único ambiente. A instituição financeira responsável por cada operação é informada ao cliente ao longo do processo.
          </p>
          <p>
            A Vantic não é uma instituição financeira e não realiza concessão direta de crédito. A análise, aprovação, definição de taxas, prazos e demais condições das operações são de responsabilidade exclusiva das instituições financeiras parceiras.
          </p>
          <p>
            O domínio vantic.com.br pertence à Vantic Global Ltda., inscrita no CNPJ nº 54.540.340/0001-34, com sede na Alameda Rio Negro, 1030, Alphaville, Barueri, SP, CEP 06454-000.
          </p>
        </div>
      </div>

      <div className="footer-bottom">
        <div className="container footer-bottom-inner">
          <span>© {year} Vantic Global Ltda. Todos os direitos reservados.</span>
        </div>
      </div>
    </footer>
  );
}

// ================== COOKIE CONSENT (LGPD) ==================
function CookieConsent() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      if (!localStorage.getItem('vantic_cookies_consent')) {
        const t = setTimeout(() => setVisible(true), 600);
        return () => clearTimeout(t);
      }
    } catch (_) {
      setVisible(true);
    }
  }, []);

  const decidir = (escolha) => {
    try { localStorage.setItem('vantic_cookies_consent', escolha); } catch (_) {}
    setVisible(false);
  };

  if (!visible) return null;
  return (
    <div className="cookie-consent" role="dialog" aria-label="Aviso de cookies">
      <div className="cookie-consent-inner">
        <p className="cookie-consent-text">
          Utilizamos cookies e dados para garantir o funcionamento do site, entender o uso e aprimorar sua experiência, em conformidade com a LGPD (Lei nº 13.709/2018).
          {' '}
          <a href="/privacidade.html">Saiba mais</a>.
        </p>
        <div className="cookie-consent-actions">
          <button type="button" className="cookie-btn cookie-btn-ghost" onClick={() => decidir('recusado')}>
            Recusar
          </button>
          <button type="button" className="cookie-btn cookie-btn-primary" onClick={() => decidir('aceito')}>
            Aceitar
          </button>
        </div>
      </div>
    </div>
  );
}

// ================== APP ==================
function App() {
  // Scroll reveal
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          // Also reveal children marked as reveal
          e.target.querySelectorAll('.reveal-child').forEach(c => c.classList.add('in'));
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Sobre />
      <Solucoes />
      <Como />
      <Closing />
      <Footer />
      <CookieConsent />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);