/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   ICONS — inline SVG set (Lucide-style, stroke 1.75, currentColor)
   ============================================================ */
const I = {
  arrow: (p = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  arrowRight: (p = {}) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  sparkles: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z" />
      <path d="M19 15l.7 1.8L21.5 17.5l-1.8.7L19 20l-.7-1.8L16.5 17.5l1.8-.7L19 15z" />
    </svg>
  ),
  compass: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9" />
      <path d="M16 8l-2.5 5.5L8 16l2.5-5.5L16 8z" />
    </svg>
  ),
  users: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 00-3-3.87" />
      <path d="M16 3.13a4 4 0 010 7.75" />
    </svg>
  ),
  rocket: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z" />
      <path d="M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" />
      <path d="M9 12H5s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
      <path d="M12 15v4s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
    </svg>
  ),
  graduation: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 10L12 4 2 10l10 6 10-6z" />
      <path d="M6 12v5c0 1.5 3 3 6 3s6-1.5 6-3v-5" />
    </svg>
  ),
  mail: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 7l9 6 9-6" />
    </svg>
  ),
  phone: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 16.92V20a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
    </svg>
  ),
  pin: (p = {}) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  check: (p = {}) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 13l4 4L19 7" />
    </svg>
  ),
};

/* ============================================================
   useReveal — IntersectionObserver hook for reveal-on-scroll
   ============================================================ */
function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll('.nl-reveal'));
    const inView = (el) => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      return r.top < vh * 0.92 && r.bottom > 0;
    };
    const reveal = (el) => {
      el.classList.remove('nl-reveal-armed');
      el.classList.add('is-visible');
    };

    // Arm only off-screen elements. On-screen ones never get the armed class,
    // so they remain visible (CSS default). This avoids the same-frame race.
    const offscreen = [];
    els.forEach((el) => {
      if (inView(el)) {
        el.classList.add('is-visible');
      } else {
        el.classList.add('nl-reveal-armed');
        offscreen.push(el);
      }
    });

    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        ticking = false;
        for (const el of offscreen) {
          if (el.classList.contains('nl-reveal-armed') && inView(el)) reveal(el);
        }
      });
    };

    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
      offscreen.forEach((el) => io.observe(el));
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    const safety = setTimeout(() => {
      offscreen.forEach((el) => { if (el.classList.contains('nl-reveal-armed')) reveal(el); });
    }, 2500);

    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      clearTimeout(safety);
      if (io) io.disconnect();
    };
  }, []);
}

/* ============================================================
   AnimatedNumber — counts up when in view
   ============================================================ */
function AnimatedNumber({ to, suffix = '', duration = 1400, decimals = 0 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(to * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  const display = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString('pt-BR');
  return <span ref={ref}>{display}<span className="nl-stat-suffix">{suffix}</span></span>;
}

/* ============================================================
   NAV
   ============================================================ */
function Nav({ onCta }) {
  return (
    <nav className="nl-nav" data-screen-label="Navigation">
      <div className="nl-nav-left">
        <a className="nl-logo" href="#top" aria-label="Next Level Tech">
          <span className="nl-logo-mark" />
          <span className="nl-logo-word">
            <span className="nl-logo-word-1">Next level <span className="nl-accent">tech</span></span>
            <span className="nl-logo-word-2">// Mentoria de IA</span>
          </span>
        </a>
        <div className="nl-nav-links">
          <a className="nl-link is-active" href="#mentorias">Mentorias</a>
          <a className="nl-link" href="#como-funciona">Como funciona</a>
          <a className="nl-link" href="#blog">Blog</a>
          <a className="nl-link" href="#contato">Contato</a>
        </div>
      </div>
      <button className="nl-btn nl-btn-primary" onClick={onCta}>
        Quero começar <I.arrow />
      </button>
    </nav>
  );
}

/* ============================================================
   HERO — three variants A/B/C
   ============================================================ */
function HeroOrbit() {
  // Floating labels around an orbit core
  return (
    <div className="nl-hero-visual">
      <div className="nl-orbit-stage">
        <svg className="nl-orbit-svg" viewBox="0 0 400 400" aria-hidden>
          <defs>
            <radialGradient id="orbitFade" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#3DA3EC" stopOpacity="0.0" />
              <stop offset="70%" stopColor="#3DA3EC" stopOpacity="0.5" />
              <stop offset="100%" stopColor="#3DA3EC" stopOpacity="0" />
            </radialGradient>
          </defs>
          <g className="nl-orbit-ring nl-orbit-ring-3" style={{ transformOrigin: '200px 200px' }}>
            <circle cx="200" cy="200" r="180" fill="none" stroke="rgba(163,176,197,0.18)" strokeWidth="1" strokeDasharray="2 6" />
            <circle cx="200" cy="20"  r="3" fill="#A3B0C5" />
            <circle cx="380" cy="200" r="3" fill="#A3B0C5" />
          </g>
          <g className="nl-orbit-ring nl-orbit-ring-2" style={{ transformOrigin: '200px 200px' }}>
            <circle cx="200" cy="200" r="130" fill="none" stroke="rgba(61,163,236,0.35)" strokeWidth="1" />
            <circle cx="200" cy="70" r="5" fill="#3DA3EC" />
            <circle cx="330" cy="200" r="4" fill="#6EC2F5" />
            <circle cx="200" cy="330" r="3" fill="#A3B0C5" />
          </g>
          <g className="nl-orbit-ring nl-orbit-ring-1" style={{ transformOrigin: '200px 200px' }}>
            <circle cx="200" cy="200" r="80" fill="none" stroke="rgba(61,163,236,0.6)" strokeWidth="1" />
            <circle cx="200" cy="120" r="6" fill="#3DA3EC" />
            <circle cx="280" cy="200" r="5" fill="#6EC2F5" />
          </g>
          <circle cx="200" cy="200" r="36" fill="url(#orbitFade)" />
          <circle cx="200" cy="200" r="9" fill="#3DA3EC" />
        </svg>
        <div className="nl-orbit-label is-on" style={{ top: '14%', right: '8%' }}>// PROMPT_ENGINEERING</div>
        <div className="nl-orbit-label" style={{ top: '52%', left: '4%' }}>// LLM_BÁSICO</div>
        <div className="nl-orbit-label" style={{ bottom: '14%', right: '14%' }}>// AUTOMAÇÃO</div>
        <div className="nl-orbit-label" style={{ top: '36%', right: '-2%' }}>// AGENTES</div>
      </div>
    </div>
  );
}

function HeroConsole() {
  return (
    <div className="nl-hero-visual" style={{ aspectRatio: 'auto' }}>
      <div className="nl-console">
        <div className="nl-console-bar">
          <span className="nl-console-dot" />
          <span className="nl-console-dot" />
          <span className="nl-console-dot" />
          <span className="nl-console-title">// SESSÃO_01 · INTRODUÇÃO</span>
        </div>
        <div className="nl-console-body">
          <p className="nl-console-line"><span className="nl-tok-comment">// pergunte qualquer coisa em linguagem natural</span></p>
          <p className="nl-console-line"><span className="nl-tok-prompt">{'>'}</span>como faço uma planilha entender meus pedidos?</p>
          <p className="nl-console-line"><span className="nl-tok-comment">// resposta gerada</span></p>
          <p className="nl-console-line" style={{ color: '#C8D1DD' }}>
            <span className="nl-tok-key">passo 1.</span> abrir uma conversa com IA<br />
            <span className="nl-tok-key">passo 2.</span> descrever o objetivo em uma frase<br />
            <span className="nl-tok-key">passo 3.</span> revisar, ajustar, repetir<br />
          </p>
          <p className="nl-console-line"><span className="nl-tok-prompt">{'>'}</span>e se eu nunca programei?<span className="nl-console-cursor" /></p>
          <p className="nl-console-line"><span className="nl-tok-comment">// perfeito. é exatamente para você que isso existe.</span></p>
        </div>
      </div>
    </div>
  );
}

function HeroStair() {
  return (
    <div className="nl-hero-visual">
      <div className="nl-stair">
        <svg className="nl-stair-svg" viewBox="0 0 400 400" aria-hidden>
          <defs>
            <linearGradient id="stairGrad" x1="0" y1="100%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#1B6FB0" />
              <stop offset="100%" stopColor="#6EC2F5" />
            </linearGradient>
          </defs>
          {/* dotted backplate */}
          <g opacity="0.4">
            {Array.from({ length: 16 }).map((_, i) =>
              Array.from({ length: 16 }).map((_, j) => (
                <circle key={i + '-' + j} cx={20 + j * 24} cy={20 + i * 24} r="1" fill="#A3B0C5" />
              ))
            )}
          </g>
          {/* stairs ascending */}
          {[
            [40, 320, 80, 40],
            [120, 280, 80, 80],
            [200, 220, 80, 140],
            [280, 140, 80, 220],
          ].map(([x, y, w, h], i) => (
            <g key={i}>
              <rect x={x} y={y} width={w} height={h} fill="rgba(15,26,40,0.95)" stroke="url(#stairGrad)" strokeWidth="1.5" />
              <rect x={x} y={y} width={w} height="3" fill="#3DA3EC" opacity={0.35 + i * 0.2} />
            </g>
          ))}
          {/* trail line */}
          <polyline points="40,320 120,280 200,220 280,140 360,60"
            fill="none" stroke="#3DA3EC" strokeWidth="1.5" strokeDasharray="3 5" opacity="0.7" />
          {/* ascending dot */}
          <circle cx="360" cy="60" r="8" fill="#3DA3EC">
            <animate attributeName="r" values="6;10;6" dur="2.4s" repeatCount="indefinite" />
          </circle>
          <circle cx="360" cy="60" r="20" fill="none" stroke="#3DA3EC" strokeWidth="1" opacity="0.5">
            <animate attributeName="r" values="10;36;10" dur="2.4s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>
    </div>
  );
}

function Hero({ variant }) {
  return (
    <section className="nl-hero" data-screen-label="01 Hero">
      <div className="nl-glow-tr" />
      <div className="nl-dotgrid" />
      <div className="nl-container">
        <div className="nl-hero-grid">
          <div>
            <span className="nl-eyebrow nl-reveal">// IA APLICADA + MENTORIAS · 2026</span>
            <h1 className="nl-display nl-reveal nl-reveal-d1" style={{ marginTop: 28 }}>
              O próximo nível<br />
              <span className="nl-accent">começa aqui.</span>
            </h1>
            <p className="nl-lede nl-reveal nl-reveal-d2" style={{ marginTop: 28 }}>
              Mentoria de inteligência artificial para gente comum.
              <span className="nl-italic-soft"> Sem jargão, sem pressa, sem precisar saber programar.</span> Você aprende a usar IA no seu dia a dia, com acompanhamento real.
            </p>
            <div className="nl-hero-cta-row nl-reveal nl-reveal-d3">
              <button className="nl-btn nl-btn-primary nl-btn-lg" onClick={() => document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' })}>
                Começar agora <I.arrow />
              </button>
              <button className="nl-btn nl-btn-ghost nl-btn-lg" onClick={() => document.getElementById('mentorias')?.scrollIntoView({ behavior: 'smooth' })}>
                Ver as mentorias
              </button>
            </div>
            <div className="nl-hero-meta nl-reveal nl-reveal-d4">
              <div className="nl-hero-meta-item">
                <span className="nl-hero-meta-num"><AnimatedNumber to={420} suffix="+" /></span>
                <span className="nl-hero-meta-lbl">Alunos ativos</span>
              </div>
              <div className="nl-hero-meta-item">
                <span className="nl-hero-meta-num"><AnimatedNumber to={4.9} decimals={1} /></span>
                <span className="nl-hero-meta-lbl">Avaliação média</span>
              </div>
              <div className="nl-hero-meta-item">
                <span className="nl-hero-meta-num"><AnimatedNumber to={12} /></span>
                <span className="nl-hero-meta-lbl">Trilhas guiadas</span>
              </div>
            </div>
          </div>
          <div className="nl-reveal nl-reveal-d2">
            {variant === 'console' && <HeroConsole />}
            {variant === 'stair'   && <HeroStair />}
            {(!variant || variant === 'orbit') && <HeroOrbit />}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   STATS BAND
   ============================================================ */
function Stats() {
  return (
    <section className="nl-stats" data-screen-label="02 Stats">
      <div className="nl-container nl-stats-grid">
        <div className="nl-stat nl-reveal">
          <span className="nl-stat-num"><AnimatedNumber to={420} suffix="+" /></span>
          <span className="nl-stat-lbl">Pessoas formadas</span>
        </div>
        <div className="nl-stat nl-reveal nl-reveal-d1">
          <span className="nl-stat-num"><AnimatedNumber to={92} suffix="%" /></span>
          <span className="nl-stat-lbl">Concluem a trilha</span>
        </div>
        <div className="nl-stat nl-reveal nl-reveal-d2">
          <span className="nl-stat-num"><AnimatedNumber to={6} /></span>
          <span className="nl-stat-lbl">Semanas em média</span>
        </div>
        <div className="nl-stat nl-reveal nl-reveal-d3">
          <span className="nl-stat-num"><AnimatedNumber to={4.9} decimals={1} /></span>
          <span className="nl-stat-lbl">Nota dos alunos</span>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   MENTORIAS — feature block + tracks
   ============================================================ */
const TRACKS = [
  { icon: 'sparkles', tag: '// TRILHA_01 · INICIANTE',  title: 'IA do zero, sem código', desc: 'Comece do absoluto zero. Aprenda a conversar com IA, criar prompts úteis e resolver coisas reais do dia a dia.', dur: '4 semanas', level: 'Iniciante' },
  { icon: 'rocket',    tag: '// TRILHA_02 · INTERMEDIÁRIO', title: 'Automatize sua rotina',     desc: 'Junte IA com ferramentas que você já usa. Crie atalhos para emails, planilhas, escrita e estudos.', dur: '6 semanas', level: 'Intermediário' },
  { icon: 'compass',   tag: '// TRILHA_03 · APLICADO',     title: 'IA para o seu trabalho',  desc: 'Trilhas customizadas por área: marketing, vendas, RH, atendimento, conteúdo, educação.', dur: '8 semanas', level: 'Aplicado' },
  { icon: 'graduation', tag: '// TRILHA_04 · AVANÇADO',    title: 'Construa seus agentes',   desc: 'Para quem já tem base. Aprenda a criar agentes que executam tarefas repetitivas por você.', dur: '10 semanas', level: 'Avançado' },
];

function Mentorias() {
  return (
    <section className="nl-section" id="mentorias" data-screen-label="03 Mentorias">
      <div className="nl-container">
        <div className="nl-mentor-grid">
          <div className="nl-mentor-left">
            <span className="nl-eyebrow nl-reveal">// MENTORIAS</span>
            <h2 className="nl-h2 nl-reveal nl-reveal-d1" style={{ marginTop: 24 }}>
              Aprender IA <span className="nl-muted">não precisa</span><br />
              <span className="nl-accent">ser difícil.</span>
            </h2>
            <p className="nl-lede nl-reveal nl-reveal-d2" style={{ marginTop: 24 }}>
              Mentoria personalizada, em grupos pequenos, com pessoas reais te acompanhando. Você escolhe o ritmo. A gente garante o salto.
            </p>
            <div className="nl-mentor-bullets">
              <div className="nl-mentor-bullet nl-reveal nl-reveal-d2">
                <div className="nl-mentor-bullet-num">// 01</div>
                <div className="nl-mentor-bullet-text">Encontros ao vivo, semanais. Nada de aula gravada que você não termina.</div>
              </div>
              <div className="nl-mentor-bullet nl-reveal nl-reveal-d3">
                <div className="nl-mentor-bullet-num">// 02</div>
                <div className="nl-mentor-bullet-text">Material em português, exemplos do seu cotidiano. Sem traduções estranhas.</div>
              </div>
              <div className="nl-mentor-bullet nl-reveal nl-reveal-d4">
                <div className="nl-mentor-bullet-num">// 03</div>
                <div className="nl-mentor-bullet-text">Acesso direto à mentora pra tirar dúvidas. Resposta em até 24h.</div>
              </div>
            </div>
          </div>
          <div className="nl-tracks">
            {TRACKS.map((t, i) => {
              const Icon = I[t.icon];
              return (
                <div key={t.tag} className={`nl-track nl-reveal nl-reveal-d${(i % 4) + 1}`}>
                  <div className="nl-track-icon"><Icon /></div>
                  <div className="nl-track-body">
                    <span className="nl-track-eyebrow">{t.tag}</span>
                    <span className="nl-track-title">{t.title}</span>
                    <span className="nl-track-desc">{t.desc}</span>
                  </div>
                  <div className="nl-track-meta">
                    <span className="nl-track-meta-strong">{t.dur}</span>
                    <span>{t.level}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   COMO FUNCIONA — 3 steps
   ============================================================ */
function ComoFunciona() {
  const steps = [
    { n: '01', title: 'Você fala com a gente', body: 'Conversa rápida. Entendemos onde você está e onde quer chegar. Sem teste, sem prova.' },
    { n: '02', title: 'Escolhemos a trilha certa', body: 'Indicamos o caminho do tamanho do seu tempo, com material e mentor combinando com seu objetivo.' },
    { n: '03', title: 'Você sai usando IA de verdade', body: 'Ao final, você tem o que faltava: confiança, repertório e ferramentas pra usar IA todo dia.' },
  ];
  return (
    <section className="nl-section nl-section-tight" id="como-funciona" data-screen-label="04 Como funciona">
      <div className="nl-container">
        <span className="nl-eyebrow nl-reveal">// COMO FUNCIONA</span>
        <h2 className="nl-h2 nl-reveal nl-reveal-d1" style={{ marginTop: 24, maxWidth: '24ch' }}>
          Três passos. <span className="nl-muted">Sem mistério, sem promessa milagrosa.</span>
        </h2>
        <div className="nl-howitworks-grid">
          {steps.map((s, i) => (
            <div key={s.n} className={`nl-step-card nl-reveal nl-reveal-d${i + 1}`}>
              <div className="nl-step-num">// {s.n}</div>
              <h3 className="nl-step-title">{s.title}</h3>
              <p className="nl-step-body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BLOG — featured + grid
   ============================================================ */
const POSTS = [
  {
    feat: true,
    cat: 'GUIA',
    title: 'Como pedir as coisas certas para uma IA (sem decorar prompts)',
    excerpt: 'Esqueça as listas mágicas de prompts. O que importa é como você pensa o problema antes de digitar. Um guia prático em quatro perguntas.',
    date: '2026.04.22', read: '8 min', author: 'Marcos G.',
  },
  {
    cat: 'BÁSICO',
    title: 'O que é, afinal, um modelo de linguagem',
    excerpt: 'Sem matemática, sem assustar. Uma explicação honesta para quem nunca abriu um livro de IA.',
    date: '2026.04.15', read: '5 min', author: 'Ana V.',
  },
  {
    cat: 'PRÁTICO',
    title: 'Use IA pra organizar a sua semana em 7 minutos',
    excerpt: 'Um exercício passo a passo. Você sai com um plano funcional pra próxima segunda-feira.',
    date: '2026.04.10', read: '6 min', author: 'Marcos G.',
  },
];

function PostArt({ feat, idx }) {
  // Decorative SVG art per post — simple geometric, on-brand
  if (idx === 0) {
    return (
      <svg className="nl-post-art-svg" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid slice" aria-hidden>
        <defs>
          <radialGradient id="postGlow0" cx="70%" cy="30%" r="60%">
            <stop offset="0%" stopColor="#3DA3EC" stopOpacity="0.45" />
            <stop offset="100%" stopColor="#3DA3EC" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="400" height="200" fill="url(#postGlow0)" />
        <g opacity="0.6">
          {Array.from({ length: 10 }).map((_, i) =>
            Array.from({ length: 20 }).map((_, j) => (
              <circle key={`${i}-${j}`} cx={10 + j * 20} cy={10 + i * 20} r="0.8" fill="#A3B0C5" />
            ))
          )}
        </g>
        <g transform="translate(40 40)">
          <rect x="0" y="0" width="180" height="60" fill="rgba(8,15,23,0.7)" stroke="rgba(61,163,236,0.5)" strokeWidth="1" rx="4" />
          <text x="14" y="24" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#3DA3EC">{'>'} pergunta:</text>
          <text x="14" y="44" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#C8D1DD">o que quero, exatamente?</text>
        </g>
        <g transform="translate(180 110)">
          <rect x="0" y="0" width="180" height="60" fill="rgba(8,15,23,0.7)" stroke="rgba(61,163,236,0.7)" strokeWidth="1" rx="4" />
          <text x="14" y="24" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#3DA3EC">{'>'} resposta:</text>
          <text x="14" y="44" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#C8D1DD">depende. me dá contexto.</text>
        </g>
      </svg>
    );
  }
  if (idx === 1) {
    return (
      <svg className="nl-post-art-svg" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" aria-hidden>
        <g stroke="rgba(61,163,236,0.7)" strokeWidth="1" fill="none">
          {Array.from({ length: 5 }).map((_, i) => (
            <circle key={i} cx="200" cy="125" r={20 + i * 22} opacity={0.8 - i * 0.13} />
          ))}
        </g>
        <circle cx="200" cy="125" r="6" fill="#3DA3EC" />
        <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#A3B0C5" opacity="0.8">
          <text x="60" y="60">// token</text>
          <text x="280" y="80">// vetor</text>
          <text x="60" y="200">// contexto</text>
          <text x="280" y="220">// previsão</text>
        </g>
      </svg>
    );
  }
  return (
    <svg className="nl-post-art-svg" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" aria-hidden>
      <g stroke="rgba(163,176,197,0.18)" strokeWidth="1">
        {Array.from({ length: 7 }).map((_, i) => (
          <line key={i} x1="40" y1={40 + i * 28} x2="360" y2={40 + i * 28} />
        ))}
      </g>
      {[
        { y: 40, w: 260, c: 'rgba(61,163,236,0.6)' },
        { y: 68, w: 180, c: 'rgba(61,163,236,0.4)' },
        { y: 96, w: 220, c: 'rgba(61,163,236,0.5)' },
        { y: 124, w: 140, c: 'rgba(61,163,236,0.7)' },
        { y: 152, w: 280, c: 'rgba(61,163,236,0.45)' },
        { y: 180, w: 200, c: 'rgba(61,163,236,0.55)' },
        { y: 208, w: 160, c: 'rgba(61,163,236,0.35)' },
      ].map((b, i) => (
        <rect key={i} x="40" y={b.y - 6} width={b.w} height="12" fill={b.c} rx="2" />
      ))}
    </svg>
  );
}

function Blog() {
  const featured = POSTS[0];
  const rest = POSTS.slice(1);
  return (
    <section className="nl-section" id="blog" data-screen-label="05 Blog">
      <div className="nl-glow-bl" />
      <div className="nl-container" style={{ position: 'relative' }}>
        <div className="nl-blog-head">
          <div>
            <span className="nl-eyebrow nl-reveal">// INSIGHTS · BLOG</span>
            <h2 className="nl-h2 nl-reveal nl-reveal-d1" style={{ marginTop: 24, maxWidth: '20ch' }}>
              Conteúdo direto<br />
              <span className="nl-accent">para quem está começando.</span>
            </h2>
          </div>
          <a className="nl-btn nl-btn-ghost nl-reveal nl-reveal-d2">
            Ver todos os posts <I.arrow />
          </a>
        </div>
        <div className="nl-blog-grid">
          <article className="nl-post nl-post-feat nl-reveal" style={{ gridRow: 'span 2' }}>
            <div className="nl-post-art nl-post-art-feat">
              <PostArt feat idx={0} />
              <span className="nl-post-art-tag">// {featured.cat}</span>
            </div>
            <div className="nl-post-body">
              <div className="nl-post-meta">
                <span>{featured.date}</span>
                <span className="nl-post-meta-dot" />
                <span>{featured.read}</span>
                <span className="nl-post-meta-dot" />
                <span>{featured.author}</span>
              </div>
              <h3 className="nl-post-title">{featured.title}</h3>
              <p className="nl-post-excerpt">{featured.excerpt}</p>
              <div className="nl-post-foot">
                <span>Ler artigo</span>
                <span className="nl-post-foot-arrow"><I.arrowRight /></span>
              </div>
            </div>
          </article>
          {rest.map((p, i) => (
            <article key={p.title} className={`nl-post nl-reveal nl-reveal-d${i + 1}`}>
              <div className="nl-post-art">
                <PostArt idx={i + 1} />
                <span className="nl-post-art-tag">// {p.cat}</span>
              </div>
              <div className="nl-post-body">
                <div className="nl-post-meta">
                  <span>{p.date}</span>
                  <span className="nl-post-meta-dot" />
                  <span>{p.read}</span>
                </div>
                <h3 className="nl-post-title">{p.title}</h3>
                <p className="nl-post-excerpt">{p.excerpt}</p>
                <div className="nl-post-foot">
                  <span>Ler artigo</span>
                  <span className="nl-post-foot-arrow"><I.arrowRight /></span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function Contact() {
  const [form, setForm] = useState({ nome: '', email: '', objetivo: 'iniciante', mensagem: '' });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  function validate() {
    const e = {};
    if (!form.nome.trim()) e.nome = 'preencha';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'email inválido';
    if (form.mensagem.trim().length < 10) e.mensagem = 'conte um pouco mais';
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function submit(ev) {
    ev.preventDefault();
    if (!validate()) return;
    setSent(true);
  }

  return (
    <section className="nl-section nl-contact" id="contato" data-screen-label="06 Contato">
      <div className="nl-container">
        <div className="nl-contact-grid">
          <div className="nl-contact-left">
            <span className="nl-eyebrow nl-reveal">// CONTATO</span>
            <h2 className="nl-h2 nl-reveal nl-reveal-d1" style={{ marginTop: 24 }}>
              O próximo nível<br />
              <span className="nl-accent">começa aqui.</span>
            </h2>
            <p className="nl-lede nl-reveal nl-reveal-d2" style={{ marginTop: 24 }}>
              Conta um pouco sobre você. A gente responde em até 24h, sem robô e sem spam.
            </p>
            <div className="nl-contact-list">
              <div className="nl-contact-row nl-reveal nl-reveal-d2">
                <span className="nl-contact-row-icon"><I.mail /></span>
                <span className="nl-contact-row-lbl">Email</span>
                <span>marcos@nextleveltechbr.com</span>
              </div>
              <div className="nl-contact-row nl-reveal nl-reveal-d3">
                <span className="nl-contact-row-icon"><I.phone /></span>
                <span className="nl-contact-row-lbl">Whatsapp</span>
                <span>+55 11 90000-0000</span>
              </div>
              <div className="nl-contact-row nl-reveal nl-reveal-d4">
                <span className="nl-contact-row-icon"><I.pin /></span>
                <span className="nl-contact-row-lbl">Onde</span>
                <span>Online · turmas abertas todo mês</span>
              </div>
            </div>
          </div>
          <form className="nl-form nl-reveal nl-reveal-d2" onSubmit={submit} noValidate>
            {sent ? (
              <div className="nl-form-success">
                <div className="nl-form-success-icon"><I.check /></div>
                <h3 className="nl-h3">Pronto. Recebemos seu contato.</h3>
                <p className="nl-body" style={{ maxWidth: 36 + 'ch' }}>
                  A gente responde em até 24h. Enquanto isso, dá uma olhada nas trilhas — talvez você já saiba qual é a sua.
                </p>
                <button type="button" className="nl-btn nl-btn-ghost" onClick={() => { setSent(false); setForm({ nome: '', email: '', objetivo: 'iniciante', mensagem: '' }); }}>
                  Enviar outra mensagem
                </button>
              </div>
            ) : (
              <React.Fragment>
                <div className="nl-form-row">
                  <div className="nl-field">
                    <label htmlFor="nome">Seu nome</label>
                    <input id="nome" className="nl-input" type="text" value={form.nome}
                      onChange={(e) => setForm({ ...form, nome: e.target.value })}
                      placeholder="Como te chamamos?"
                      style={errors.nome ? { borderColor: '#FF7A7A' } : {}} />
                  </div>
                  <div className="nl-field">
                    <label htmlFor="email">Email</label>
                    <input id="email" className="nl-input" type="email" value={form.email}
                      onChange={(e) => setForm({ ...form, email: e.target.value })}
                      placeholder="voce@email.com"
                      style={errors.email ? { borderColor: '#FF7A7A' } : {}} />
                  </div>
                </div>
                <div className="nl-field">
                  <label>Onde você está hoje?</label>
                  <div className="nl-chips">
                    {[
                      { k: 'iniciante',     v: 'Nunca usei IA' },
                      { k: 'curioso',       v: 'Já brinquei um pouco' },
                      { k: 'aplicado',      v: 'Uso no trabalho' },
                      { k: 'avancado',      v: 'Quero ir longe' },
                    ].map((c) => (
                      <button type="button" key={c.k}
                        className={`nl-chip ${form.objetivo === c.k ? 'is-active' : ''}`}
                        onClick={() => setForm({ ...form, objetivo: c.k })}>
                        {c.v}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="nl-field">
                  <label htmlFor="msg">O que você quer aprender?</label>
                  <textarea id="msg" className="nl-textarea" value={form.mensagem}
                    onChange={(e) => setForm({ ...form, mensagem: e.target.value })}
                    placeholder="Conta em duas linhas. Ex: quero usar IA pra organizar minha rotina e ganhar tempo no trabalho."
                    style={errors.mensagem ? { borderColor: '#FF7A7A' } : {}} />
                </div>
                <button type="submit" className="nl-btn nl-btn-primary nl-btn-lg">
                  Quero começar <I.arrow />
                </button>
                <span className="nl-form-fine">// Sem spam · Resposta em até 24h</span>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="nl-footer" data-screen-label="07 Footer">
      <div className="nl-container">
        <div className="nl-footer-row">
          <div className="nl-footer-col">
            <span className="nl-logo" style={{ marginBottom: 12 }}>
              <span className="nl-logo-mark" />
              <span className="nl-logo-word">
                <span className="nl-logo-word-1">Next level <span className="nl-accent">tech</span></span>
                <span className="nl-logo-word-2">// Mentoria de IA</span>
              </span>
            </span>
            <p className="nl-footer-tag">
              Mentoria de IA aplicada para gente comum. O próximo nível começa aqui.
            </p>
          </div>
          <div className="nl-footer-col">
            <span className="nl-footer-h">Mentorias</span>
            <a>IA do zero</a>
            <a>Automatize sua rotina</a>
            <a>IA aplicada à área</a>
            <a>Construa agentes</a>
          </div>
          <div className="nl-footer-col">
            <span className="nl-footer-h">Conteúdo</span>
            <a>Blog</a>
            <a>Newsletter</a>
            <a>Guias gratuitos</a>
          </div>
          <div className="nl-footer-col">
            <span className="nl-footer-h">Contato</span>
            <a>marcos@nextleveltechbr.com</a>
            <a>Whatsapp</a>
            <a>Linkedin</a>
          </div>
        </div>
        <div className="nl-footer-bot">
          <span>// V1.0 · 2026</span>
          <span>© NEXT LEVEL TECH · TODOS OS DIREITOS RESERVADOS</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   APP — root composition
   ============================================================ */
function App({ tweaks, setTweak, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakToggle }) {
  useReveal();

  // map glow intensity to css variable
  useEffect(() => {
    document.documentElement.style.setProperty('--glow-a', String((tweaks.glow ?? 18) / 100));
  }, [tweaks.glow]);

  return (
    <div id="top" data-screen-label="Site Next Level Tech">
      <Nav onCta={() => document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' })} />
      <Hero variant={tweaks.hero || 'orbit'} />
      {tweaks.showStats !== false && <Stats />}
      <Mentorias />
      <ComoFunciona />
      <Blog />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Visual variant"
            options={[
              { value: 'orbit',   label: 'Orbits' },
              { value: 'console', label: 'Console' },
              { value: 'stair',   label: 'Stairs' },
            ]}
            value={tweaks.hero || 'orbit'}
            onChange={(v) => setTweak('hero', v)} />
        </TweakSection>
        <TweakSection title="Atmosfera">
          <TweakSlider
            label="Glow intensity"
            min={0} max={40} step={2}
            value={tweaks.glow ?? 18}
            onChange={(v) => setTweak('glow', v)}
            unit="%" />
        </TweakSection>
        <TweakSection title="Conteúdo">
          <TweakToggle
            label="Mostrar barra de stats"
            value={tweaks.showStats !== false}
            onChange={(v) => setTweak('showStats', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

window.NLTSite = { App };