/* ==========================================
   PAGE: MENTORIA — IA na Prática (Edição 01 · 2026)
   Sales page com seções dinâmicas e animadas.
   ========================================== */

// ---------- HERO MOTION: notificação de vaga + calendário animado ----------
const TAGS_BY_WEEK = [
  ['Fundamentos','#FFE9D8','#FF6B1A'],
  ['Prompt','#E8DBFF','#7B3FF0'],
  ['Automação','#D7F0E0','#1F9D55'],
  ['Agentes','#FFD9D9','#E84855'],
  ['Construção','#FFF4D1','#C68A00'],
  ['Contexto','#D9EDFF','#1976D2'],
  ['Evolução','#F0E0FF','#7B3FF0'],
];

const MentoriaHeroMotion = () => {
  const [t, setT] = React.useState(0);
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    const tm = setTimeout(() => setMounted(true), 50);
    return () => { cancelAnimationFrame(raf); clearTimeout(tm); };
  }, []);

  // Float suave com período mais longo + amplitudes pequenas
  const float = (offset = 0, amp = 4, period = 0.55) => Math.sin(t * period + offset) * amp;

  // Notificação: ciclo de 9s — 0.0–0.12 fade-in + slide, 0.12–0.78 visível, 0.78–0.92 fade-out, 0.92–1.0 reset
  const notifCycle = (t % 9) / 9;
  let notifOpacity = 0;
  let notifTy = 14;
  if (notifCycle < 0.12) {
    const k = notifCycle / 0.12;
    const ease = 1 - Math.pow(1 - k, 3); // ease-out cubic
    notifOpacity = ease;
    notifTy = 14 - ease * 14;
  } else if (notifCycle < 0.78) {
    notifOpacity = 1;
    notifTy = 0;
  } else if (notifCycle < 0.92) {
    const k = (notifCycle - 0.78) / 0.14;
    const ease = Math.pow(k, 3); // ease-in cubic
    notifOpacity = 1 - ease;
    notifTy = -ease * 8;
  }

  // Sweep contínuo do "evento ativo" no calendário (ciclo lento, 1 evento por seg ~)
  const sweepIdx = Math.floor(t * 0.8) % 21; // 7 semanas * 3 eventos
  const sweepCol = sweepIdx % 7;
  const sweepRow = Math.floor(sweepIdx / 7);

  // Sweep da barra de módulos (smooth)
  const modSweep = (t * 1.1) % 10;

  return (
    <div className={`mentoria-hero-motion${mounted ? ' mh-in' : ''}`}>
      {/* SVG decorativo de fundo */}
      <svg className="mh-orbit" viewBox="0 0 600 480" preserveAspectRatio="none">
        <defs>
          <radialGradient id="mh-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.28"/>
            <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <ellipse cx="300" cy="240" rx="250" ry="150" fill="none" stroke="rgba(255,107,26,0.13)" strokeDasharray="3 5"/>
        <ellipse cx="300" cy="240" rx="180" ry="100" fill="none" stroke="rgba(255,107,26,0.08)" strokeDasharray="2 4"/>
        <circle cx="300" cy="240" r="240" fill="url(#mh-glow)"/>
        {[...Array(10)].map((_, i) => {
          const angle = (i / 10) * Math.PI * 2 + t * 0.18;
          const cx = 300 + Math.cos(angle) * 250;
          const cy = 240 + Math.sin(angle) * 150;
          const op = 0.25 + 0.45 * (0.5 + 0.5 * Math.sin(t * 0.9 + i));
          return <circle key={i} cx={cx} cy={cy} r="1.8" fill="#FF6B1A" opacity={op}/>;
        })}
      </svg>

      {/* Calendário das 7 semanas — top-left */}
      <div className="mh-calendar mh-floater" style={{ '--ty': `${float(0, 4, 0.5)}px`, '--enter-delay': '0ms' }}>
        <div className="mh-calendar-head">
          <div style={{ fontSize: 12, fontWeight: 600 }}>Cronograma · 2026</div>
          <div className="mh-toggle">
            <span className="mh-toggle-pill active">7 sem</span>
            <span className="mh-toggle-pill">21 enc</span>
          </div>
        </div>
        <div className="mh-calendar-grid">
          {['SEM 01','SEM 02','SEM 03','SEM 04','SEM 05','SEM 06','SEM 07'].map((s, i) => (
            <div key={i} className="mh-cal-col">
              <div className="mh-cal-head">{s}</div>
              <div className="mh-cal-body">
                {[0,1,2].map(j => {
                  const isActive = sweepCol === i && sweepRow === j;
                  const [label, bg, fg] = TAGS_BY_WEEK[i];
                  return (
                    <div key={j} className={`mh-event${isActive ? ' pulse' : ''}`} style={{ background: bg, color: fg }}>
                      <div style={{ fontWeight: 600, fontSize: 9.5 }}>{label}</div>
                      <div style={{ fontSize: 8.5, opacity: 0.7 }}>{['19h','20h','21h'][j]}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Notificação de vaga — top-right (sempre montada, opacidade controla visibilidade) */}
      <div className="mh-notification mh-floater" style={{
        '--ty': `${float(0.6, 3, 0.45) + notifTy}px`,
        '--enter-delay': '180ms',
        opacity: notifOpacity,
      }}>
        <div className="mh-notif-stack">
          <div className="mh-notif-card">
            <div className="mh-notif-icon"><SparkStar size={16} color="white"/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: '#0F1014' }}>Vaga aberta · Turma 2026</div>
              <div style={{ fontSize: 11, color: '#6B6770', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Restam poucas vagas · intensiva</div>
            </div>
            <div style={{ fontSize: 10.5, color: '#FF6B1A', fontWeight: 600, flexShrink: 0 }}>agora</div>
          </div>
          <div className="mh-notif-shadow"/>
          <div className="mh-notif-shadow-2"/>
        </div>
      </div>

      {/* Card flutuante: Investimento — middle-right */}
      <div className="mh-card mh-card-invest mh-floater" style={{ '--ty': `${float(2.1, 5, 0.5)}px`, '--enter-delay': '320ms' }}>
        <div style={{ fontSize: 10, color: '#9A9591', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 4 }}>INVESTIMENTO</div>
        <div style={{ fontSize: 22, fontWeight: 700, color: 'white', letterSpacing: '-0.02em' }}>
          R$ <span style={{ color: '#FF6B1A' }}>4.000</span>
        </div>
        <div style={{ fontSize: 10.5, color: '#9A9591' }}>Menos de 200 reais por encontro</div>
      </div>

      {/* Card flutuante: Módulos — bottom-left */}
      <div className="mh-card mh-card-modules mh-floater" style={{ '--ty': `${float(1.2, 4, 0.5)}px`, '--enter-delay': '460ms' }}>
        <div style={{ fontSize: 10, color: '#9A9591', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 8 }}>10 MÓDULOS</div>
        <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
          {[...Array(10)].map((_, i) => {
            const dist = Math.abs(((modSweep - i + 10) % 10) - 0);
            const intensity = Math.max(0, 1 - dist * 0.6);
            const baseAlpha = i < 6 ? 0.4 : 0.12;
            const alpha = Math.min(1, baseAlpha + intensity * 0.6);
            return (
              <div key={i} style={{
                flex: 1, height: 6, borderRadius: 3,
                background: `rgba(255,107,26,${alpha})`,
              }}/>
            );
          })}
        </div>
        <div style={{ fontSize: 11, color: '#9A9591' }}>Progressivo · do entendimento à construção real</div>
      </div>

      {/* Card flutuante: Tríade — bottom-right */}
      <div className="mh-card mh-card-triad mh-floater" style={{ '--ty': `${float(2.8, 4, 0.55)}px`, '--enter-delay': '600ms' }}>
        <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8 }}>A tríade</div>
        <svg width="100%" height="58" viewBox="0 0 120 58">
          <g>
            <line x1="60" y1="14" x2="22" y2="48" stroke="#FF6B1A" strokeWidth="1" strokeDasharray="2 3" opacity={0.4 + 0.3 * (0.5 + 0.5 * Math.sin(t * 1.2))}/>
            <line x1="60" y1="14" x2="98" y2="48" stroke="#FF6B1A" strokeWidth="1" strokeDasharray="2 3" opacity={0.4 + 0.3 * (0.5 + 0.5 * Math.sin(t * 1.2 + 2.1))}/>
            <line x1="22" y1="48" x2="98" y2="48" stroke="#FF6B1A" strokeWidth="1" strokeDasharray="2 3" opacity={0.4 + 0.3 * (0.5 + 0.5 * Math.sin(t * 1.2 + 4.2))}/>
            <circle cx="60" cy="14" r={9 + Math.sin(t * 1.6) * 0.6} fill="#FF6B1A"/>
            <circle cx="22" cy="48" r={9 + Math.sin(t * 1.6 + 2) * 0.6} fill="rgba(255,107,26,0.3)" stroke="#FF6B1A" strokeWidth="1.2"/>
            <circle cx="98" cy="48" r={9 + Math.sin(t * 1.6 + 4) * 0.6} fill="rgba(255,107,26,0.3)" stroke="#FF6B1A" strokeWidth="1.2"/>
            <text x="60" y="17" fontSize="6" textAnchor="middle" fill="white" fontWeight="700">IA</text>
            <text x="22" y="51" fontSize="5.5" textAnchor="middle" fill="#FF6B1A" fontWeight="700">SIS</text>
            <text x="98" y="51" fontSize="5.5" textAnchor="middle" fill="#FF6B1A" fontWeight="700">AUT</text>
          </g>
        </svg>
        <div style={{ fontSize: 10.5, color: '#9A9591', marginTop: 4 }}>Sistema · Automação · IA</div>
      </div>
    </div>
  );
};

// ---------- FLUXO ANIMADO: Trigger > Switch > Action ----------
const FlowAutomacao = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const phase = (t % 7) / 7; // ciclo de 7s
  const triggerActive = phase > 0.05;
  const switchActive = phase > 0.3;
  const branchAActive = phase > 0.55;
  const branchBActive = phase > 0.55;
  const finalActive = phase > 0.78;

  return (
    <div className="flow-canvas">
      {/* Sidebar de processos disponíveis */}
      <div className="flow-sidebar">
        <div className="flow-sidebar-item dim">
          <Icon name="workflow" size={13} color="#9A9591"/> Re-engajar leads
        </div>
        <div className="flow-sidebar-item dim">
          <Icon name="users" size={13} color="#9A9591"/> Roteamento de leads
        </div>
        <div className="flow-sidebar-item dim">
          <Icon name="briefcase" size={13} color="#9A9591"/> Onboarding de cliente
        </div>
        <div className="flow-sidebar-item active">
          <Icon name="sparkles" size={13} color="#FF6B1A"/> IA aplicada · novo fluxo
        </div>
        <div className="flow-sidebar-item dim">
          <Icon name="doc" size={13} color="#9A9591"/> Submissão de formulário
        </div>
        <div className="flow-sidebar-item dim">
          <Icon name="chart-up" size={13} color="#9A9591"/> Saúde do cliente
        </div>
        <div className="flow-sidebar-item dim faint">
          <Icon name="target" size={13} color="#9A9591"/> Oportunidade de expansão
        </div>
      </div>

      {/* Canvas com nós */}
      <div className="flow-canvas-inner">
        <svg className="flow-bg" width="100%" height="100%" viewBox="0 0 460 380" preserveAspectRatio="none">
          {/* Linhas conectando nós */}
          <defs>
            <pattern id="dotgrid" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="0.6" fill="#E8DFD2"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#dotgrid)" opacity="0.7"/>
          {/* Linhas de fluxo */}
          <path d="M 230 80 L 230 130" stroke={triggerActive ? '#FF6B1A' : '#E8DFD2'} strokeWidth="1.5" strokeDasharray={triggerActive ? '0' : '4 4'}/>
          <path d="M 230 200 L 230 230" stroke={switchActive ? '#FF6B1A' : '#E8DFD2'} strokeWidth="1.5"/>
          <path d="M 230 230 L 140 270" stroke={branchAActive ? '#FF6B1A' : '#E8DFD2'} strokeWidth="1.5"/>
          <path d="M 230 230 L 320 270" stroke={branchBActive ? '#FF6B1A' : '#E8DFD2'} strokeWidth="1.5"/>
          {/* Pulsos animados */}
          {triggerActive && (
            <circle cx="230" cy={80 + (phase % 0.3) / 0.3 * 50} r="3" fill="#FF6B1A">
              <animate attributeName="r" values="3;5;3" dur="0.8s" repeatCount="indefinite"/>
            </circle>
          )}
        </svg>

        {/* Trigger node */}
        <div className={`flow-node trigger ${triggerActive ? 'on' : ''}`} style={{ top: 24, left: 130 }}>
          <div className="flow-node-head">
            <span className="flow-pill">Gatilho</span>
            <span className={`flow-status ${triggerActive ? 'on' : ''}`}>{triggerActive ? '✓ Ativado' : 'Aguardando'}</span>
          </div>
          <div className="flow-node-body">
            <Icon name="zap" size={14} color="#FF6B1A"/>
            <span>Quando tarefa identificada</span>
          </div>
          <div className="flow-node-foot">Início do fluxo na rotina</div>
        </div>

        {/* Switch node */}
        <div className={`flow-node switch ${switchActive ? 'on' : ''}`} style={{ top: 138, left: 130 }}>
          <div className="flow-node-head">
            <span className="flow-pill">Decisão</span>
            <span className={`flow-status ${switchActive ? 'on' : ''}`}>{switchActive ? '✓ Roteado' : 'Aguardando'}</span>
          </div>
          <div className="flow-node-body">
            <Icon name="puzzle" size={14} color="#FF6B1A"/>
            <span>Switch · automatizar ou delegar a IA</span>
          </div>
        </div>

        {/* Branch labels */}
        <div className="flow-branch-label" style={{ top: 226, left: 100 }}>Automação</div>
        <div className="flow-branch-label" style={{ top: 226, left: 290 }}>Agente IA</div>

        {/* Branch A — Automação */}
        <div className={`flow-node action ${branchAActive ? 'on' : ''}`} style={{ top: 252, left: 36 }}>
          <div className="flow-node-head">
            <span className="flow-pill">Sequência</span>
          </div>
          <div className="flow-node-body">
            <Icon name="workflow" size={14} color="#FF6B1A"/>
            <span>Roda fluxo automatizado</span>
          </div>
        </div>

        {/* Branch B — Agente IA */}
        <div className={`flow-node action faded ${branchBActive ? 'on' : ''}`} style={{ top: 252, left: 226 }}>
          <div className="flow-node-head">
            <span className="flow-pill">Agente</span>
          </div>
          <div className="flow-node-body">
            <Icon name="brain" size={14} color="#FF6B1A"/>
            <span>Aciona agente com contexto</span>
          </div>
        </div>

        {/* Botão final/add */}
        <div className={`flow-add ${finalActive ? 'pulse' : ''}`} style={{ top: 348, left: 220 }}>
          <Icon name="plus" size={14} color="white"/>
        </div>
      </div>
    </div>
  );
};

// ---------- TIMELINE 7 SEMANAS — animado ----------
const Timeline7Semanas = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const semanas = [
    { n: 'SEM 01', t: 'Fundamentos', mods: 'MÓD. 01', icon: 'lightbulb' },
    { n: 'SEM 02', t: 'Prompt', mods: 'MÓD. 02', icon: 'sparkles' },
    { n: 'SEM 03', t: 'Automação', mods: 'MÓD. 03 · 04', icon: 'workflow' },
    { n: 'SEM 04', t: 'Agentes', mods: 'MÓD. 05', icon: 'brain' },
    { n: 'SEM 05', t: 'Construção', mods: 'MÓD. 06 · 07', icon: 'cube' },
    { n: 'SEM 06', t: 'Contexto', mods: 'MÓD. 08 · 09', icon: 'compass' },
    { n: 'SEM 07', t: 'Evolução', mods: 'MÓD. 10', icon: 'rocket' },
  ];

  const activeIdx = Math.floor(t * 0.6) % semanas.length;

  return (
    <div className="timeline-7">
      <div className="timeline-7-line">
        <div className="timeline-7-progress" style={{ width: `${((activeIdx + 1) / semanas.length) * 100}%` }}/>
      </div>
      <div className="timeline-7-grid">
        {semanas.map((s, i) => (
          <div key={i} className={`timeline-7-step${i === activeIdx ? ' active' : ''}${i < activeIdx ? ' done' : ''}`}>
            <div className="timeline-7-dot">
              <Icon name={s.icon} size={16} color={i === activeIdx ? 'white' : (i < activeIdx ? '#FF6B1A' : '#9A9591')}/>
            </div>
            <div className="timeline-7-label">
              <div className="timeline-7-week">{s.n}</div>
              <div className="timeline-7-title">{s.t}</div>
              <div className="timeline-7-mods">{s.mods}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- ANTES vs DEPOIS — toggle animado ----------
const AntesDepois = () => {
  const [side, setSide] = React.useState('depois');
  React.useEffect(() => {
    const id = setInterval(() => {
      setSide(s => s === 'antes' ? 'depois' : 'antes');
    }, 4500);
    return () => clearInterval(id);
  }, []);

  const antes = [
    { ic: 'x-circle', t: 'Testar sem direção' },
    { ic: 'x-circle', t: 'Consumir conteúdo solto' },
    { ic: 'x-circle', t: 'Travar na aplicação' },
    { ic: 'x-circle', t: 'Sentir sobrecarga' },
  ];
  const depois = [
    { ic: 'check-circle', t: 'Construir com clareza' },
    { ic: 'check-circle', t: 'Organizar a operação' },
    { ic: 'check-circle', t: 'Evoluir com consciência' },
    { ic: 'check-circle', t: 'Direcionar a tecnologia' },
  ];

  const list = side === 'antes' ? antes : depois;

  return (
    <div className="antes-depois-card">
      <div className="ad-toggle">
        <button className={`ad-tab${side === 'antes' ? ' active' : ''}`} onClick={() => setSide('antes')}>Antes · Consumir</button>
        <button className={`ad-tab${side === 'depois' ? ' active' : ''}`} onClick={() => setSide('depois')}>Depois · Construir</button>
        <div className={`ad-indicator ${side}`}/>
      </div>
      <div className="ad-content">
        {list.map((it, i) => (
          <div key={`${side}-${i}`} className="ad-item" style={{ animationDelay: `${i * 80}ms` }}>
            <Icon name={it.ic} size={18} color={side === 'antes' ? '#9A9591' : '#FF6B1A'}/>
            <span style={{ color: side === 'antes' ? '#6B6770' : '#0F1014', fontWeight: 500 }}>{it.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- TRÍADE rotativa (Premium Redesign) ----------
const TriadeViz = () => {
  const [t, setT] = React.useState(0);
  const [hovered, setHovered] = React.useState(null);
  
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => { 
      setT((now - start) / 1000); 
      raf = requestAnimationFrame(tick); 
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const rotation = t * 15;
  const pulse = Math.sin(t * 3) * 0.5 + 0.5;
  const fastPulse = Math.sin(t * 6) * 0.5 + 0.5;

  return (
    <div className="triade-viz-container">
      <div className="triade-viz-wrap">
        <svg width="420" height="420" viewBox="0 0 420 420" style={{ overflow: 'visible' }}>
          <defs>
            <filter id="triade-glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="4" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
            <filter id="triade-glow-strong" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="8" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
            <linearGradient id="energy-grad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0"/>
              <stop offset="50%" stopColor="#FF6B1A" stopOpacity="0.8"/>
              <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
            </linearGradient>
          </defs>

          {/* Orbits Background */}
          <circle cx="210" cy="210" r="160" fill="none" stroke="rgba(255,107,26,0.06)" strokeWidth="1" />
          <circle cx="210" cy="210" r="120" fill="none" stroke="rgba(255,107,26,0.04)" strokeWidth="1" />
          
          {/* Rotating Energy Rings */}
          <g style={{ transform: `rotate(${rotation * 0.5}deg)`, transformOrigin: '210px 210px' }}>
            <circle cx="210" cy="210" r="160" fill="none" stroke="url(#energy-grad)" strokeWidth="1.5" strokeDasharray="100 300" opacity="0.4" />
          </g>
          <g style={{ transform: `rotate(${-rotation * 0.8}deg)`, transformOrigin: '210px 210px' }}>
            <circle cx="210" cy="210" r="120" fill="none" stroke="url(#energy-grad)" strokeWidth="1" strokeDasharray="60 200" opacity="0.3" />
          </g>

          {/* Dynamic Connections */}
          <g opacity="0.6">
            <line x1="210" y1="80" x2="330" y2="280" stroke="#FF6B1A" strokeWidth="1.5" strokeDasharray="4 6" opacity={0.2 + 0.3 * pulse} />
            <line x1="330" y1="280" x2="90" y2="280" stroke="#FF6B1A" strokeWidth="1.5" strokeDasharray="4 6" opacity={0.2 + 0.3 * pulse} />
            <line x1="90" y1="280" x2="210" y2="80" stroke="#FF6B1A" strokeWidth="1.5" strokeDasharray="4 6" opacity={0.2 + 0.3 * pulse} />
          </g>

          {/* Glowing Triangle Outline */}
          <g style={{ transform: `rotate(${t * 4}deg)`, transformOrigin: '210px 210px' }}>
            <polygon points="210,90 315,270 105,270" fill="none" stroke="#FF6B1A" strokeWidth="0.5" opacity="0.15" />
          </g>

          {/* Central Core */}
          <g filter="url(#triade-glow)">
            <circle cx="210" cy="210" r={16 + Math.sin(t * 4) * 2} fill="rgba(255,107,26,0.08)" stroke="#FF6B1A" strokeWidth="1" opacity="0.6" />
            <circle cx="210" cy="210" r={6 + Math.sin(t * 4) * 1.5} fill="#FF6B1A" />
          </g>
          <circle cx="210" cy="210" r={40 + pulse * 20} fill="none" stroke="#FF6B1A" strokeWidth="0.5" opacity={0.1 - pulse * 0.05} />

          {/* Main Nodes */}
          
          {/* Node 1: IA (Top) */}
          <g 
            className="triade-node" 
            onMouseEnter={() => setT(prev => prev)} // placeholder for hover logic if needed
            style={{ cursor: 'pointer' }}
          >
            <circle cx="210" cy="80" r="42" fill="white" filter="url(#triade-glow)" />
            <circle cx="210" cy="80" r="42" fill="#FF6B1A" opacity="1" />
            <text x="210" y="85" fontSize="14" textAnchor="middle" fill="white" fontWeight="800" style={{ letterSpacing: '0.05em' }}>IA</text>
            <text x="210" y="25" fontSize="11" textAnchor="middle" fill="#FF6B1A" fontWeight="700" letterSpacing="0.2em">INTELIGÊNCIA</text>
          </g>

          {/* Node 2: Sistema (Bottom Left) */}
          <g className="triade-node">
            <circle cx="90" cy="280" r="42" fill="white" filter="url(#triade-glow)" />
            <circle cx="90" cy="280" r="42" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2" />
            <text x="90" y="285" fontSize="13" textAnchor="middle" fill="white" fontWeight="800">SIS</text>
            <text x="90" y="340" fontSize="11" textAnchor="middle" fill="#0F1014" fontWeight="700" letterSpacing="0.2em">SISTEMA</text>
          </g>

          {/* Node 3: Automação (Bottom Right) */}
          <g className="triade-node">
            <circle cx="330" cy="280" r="42" fill="white" filter="url(#triade-glow)" />
            <circle cx="330" cy="280" r="42" fill="#1A1C22" stroke="#FF6B1A" strokeWidth="2" />
            <text x="330" y="285" fontSize="13" textAnchor="middle" fill="white" fontWeight="800">AUT</text>
            <text x="330" y="340" fontSize="11" textAnchor="middle" fill="#0F1014" fontWeight="700" letterSpacing="0.2em">AUTOMAÇÃO</text>
          </g>

          {/* Flying Particles */}
          {[...Array(6)].map((_, i) => {
            const angle = (i / 6) * Math.PI * 2 + t * 0.4;
            const r = 160 + Math.sin(t * 2 + i) * 10;
            const px = 210 + Math.cos(angle) * r;
            const py = 210 + Math.sin(angle) * r;
            return <circle key={i} cx={px} cy={py} r="1.5" fill="#FF6B1A" opacity={0.4 + 0.3 * Math.sin(t * 5 + i)} />;
          })}
        </svg>
      </div>
      
      <div className="triade-caption-premium">
        Quando essas três se conectam, você sai do básico e entra em <span className="italic-accent">construção real.</span>
      </div>

      <style>{`
        .triade-viz-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 40px 0;
          position: relative;
        }
        .triade-viz-wrap {
          position: relative;
          width: 420px;
          height: 420px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .triade-node {
          transition: transform 0.3s cubic-bezier(.2,.6,.2,1);
        }
        .triade-node:hover {
          transform: scale(1.05);
        }
        .triade-caption-premium {
          margin-top: 40px;
          text-align: center;
          font-size: 18px;
          color: #6B6770;
          max-width: 400px;
          line-height: 1.5;
        }
        
        @media (max-width: 640px) {
          .triade-viz-wrap {
            transform: scale(0.75);
            margin: -40px 0;
          }
          .triade-caption-premium {
            font-size: 15px;
            padding: 0 20px;
          }
        }
      `}</style>
    </div>
  );
};


// ---------- VAGAS LIMITADAS — countdown / progresso ----------
const VagasBar = ({ isPhoneViewport = false }) => {
  const total = 8;
  const ocupadas = 5;
  const pct = (ocupadas / total) * 100;
  return (
    <div className="vagas-bar-wrap" style={isPhoneViewport ? { padding: 12 } : undefined}>
      <div className="vagas-bar-head" style={isPhoneViewport ? { flexDirection: 'column', alignItems: 'flex-start', gap: 10, marginBottom: 12 } : undefined}>
        <div>
          <div className="vagas-bar-kicker" style={{ fontSize: isPhoneViewport ? 10 : 11, color: '#FF6B1A', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: isPhoneViewport ? 2 : 4, lineHeight: isPhoneViewport ? 1.3 : undefined }}>· Turma 2026 · Edição 01</div>
          <div className="vagas-bar-title" style={{ fontSize: isPhoneViewport ? 15 : 18, fontWeight: 700, color: 'white', lineHeight: isPhoneViewport ? 1.2 : undefined }}>Restam {total - ocupadas} vagas de {total}</div>
        </div>
        <div className="vagas-pulse" style={isPhoneViewport ? { whiteSpace: 'normal', fontSize: 10, lineHeight: 1.2, alignSelf: 'flex-start', maxWidth: '100%' } : undefined}><span/><Icon name="zap" size={12} color="white"/> Inscrições abertas</div>
      </div>
      <div className="vagas-bar-track">
        <div className="vagas-bar-fill" style={{ width: `${pct}%` }}/>
        {[...Array(total)].map((_, i) => (
          <div key={i} className="vagas-bar-tick" style={{ left: `${(i / total) * 100}%` }}/>
        ))}
      </div>
      <div className="vagas-bar-foot" style={isPhoneViewport ? { fontSize: 11, lineHeight: 1.45 } : undefined}>
        Mentoria intensiva · individual · acompanhamento direto. Cada nova vaga sai do quadro.
      </div>
    </div>
  );
};

const MENTORIA_MOTION_PHRASES = [
  { start: 0.6, end: 2.5, parts: [{ text: 'Você não está sem ' }, { text: 'informação.', accent: true }] },
  { start: 3.1, end: 4.9, parts: [{ text: 'Está ' }, { text: 'sobrecarregado.', accent: true }] },
  { start: 5.6, end: 7.1, parts: [{ text: 'Você ' }, { text: 'aprende…', accent: true }] },
  { start: 7.7, end: 9.3, parts: [{ text: 'mas não ' }, { text: 'constrói.', accent: true }] },
  { start: 10.4, end: 12.0, parts: [{ text: 'Mais uma ' }, { text: 'ferramenta.', accent: true }] },
  { start: 12.8, end: 14.4, parts: [{ text: 'Mais um ' }, { text: 'teste.', accent: true }] },
  { start: 15.1, end: 16.8, parts: [{ text: 'E nada ' }, { text: 'muda.', accent: true }] },
  { start: 17.4, end: 19.8, parts: [{ text: 'O problema não é falta de ' }, { text: 'IA.', accent: true }] },
  { start: 20.5, end: 22.2, parts: [{ text: 'É falta de ' }, { text: 'estrutura.', accent: true }] },
  { start: 23.0, end: 24.8, parts: [{ text: 'Sem ' }, { text: 'método,', accent: true }, { text: ' tudo vira ' }, { text: 'caos.', accent: true }] },
  { start: 25.8, end: 27.5, parts: [{ text: 'Você para de ' }, { text: 'testar.', accent: true }] },
  { start: 28.1, end: 29.8, parts: [{ text: 'E começa a ' }, { text: 'construir.', accent: true }] },
];

const MentoriaMotionPhrases = ({ seed = 0, isPhoneViewport = false }) => {
  const [time, setTime] = React.useState(0);

  React.useEffect(() => {
    let raf;
    const start = performance.now();

    const tick = (now) => {
      setTime(((now - start) / 1000) % 30);
      raf = requestAnimationFrame(tick);
    };

    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seed]);

  const activePhrase = MENTORIA_MOTION_PHRASES.find((phrase) => time >= phrase.start && time < phrase.end);

  let opacity = 0;
  let translateY = 0;

  if (activePhrase) {
    const localTime = time - activePhrase.start;
    const introProgress = Math.min(1, localTime / 0.2);
    const outroProgress = Math.min(1, (activePhrase.end - time) / 0.2);
    opacity = Math.min(introProgress, outroProgress);

    if (localTime < 0.2) {
      translateY = (1 - introProgress) * 16;
    } else if (time > activePhrase.end - 0.2) {
      translateY = -(1 - outroProgress) * 10;
    }
  }

  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        marginTop: isPhoneViewport ? 22 : 28,
        padding: isPhoneViewport ? '0 8px' : '0 24px',
      }}
    >
      <div
        aria-live="polite"
        style={{
          minHeight: isPhoneViewport ? 50 : 60,
          textAlign: 'center',
          fontFamily: 'var(--f-sans)',
          fontSize: isPhoneViewport ? 19 : 28,
          fontWeight: 500,
          lineHeight: 1.2,
          letterSpacing: '-0.02em',
          color: '#1E1814',
          opacity,
          transform: `translateY(${translateY}px)`,
          transition: 'opacity 200ms ease, transform 200ms ease',
          willChange: 'opacity, transform',
          maxWidth: 760,
          whiteSpace: 'pre-wrap',
        }}
      >
        {activePhrase ? activePhrase.parts.map((part, index) => (
          <span
            key={`${part.text}-${index}`}
            className={part.accent ? 'italic-accent-dark' : undefined}
            style={part.accent ? {
              color: '#FFFFFF',
              letterSpacing: '-0.01em',
            } : undefined}
          >
            {part.text}
          </span>
        )) : null}
      </div>
    </div>
  );
};

// ---------- PÁGINA PRINCIPAL ----------
const MentoriaPage = ({ onNav }) => {
  const [isPhoneViewport, setIsPhoneViewport] = React.useState(() => (
    typeof window !== 'undefined' && window.matchMedia('(max-width: 480px)').matches
  ));
  const [mentoriaMotionSeed, setMentoriaMotionSeed] = React.useState(0);

  React.useEffect(() => {
    if (typeof window === 'undefined') return undefined;
    const media = window.matchMedia('(max-width: 480px)');
    const syncViewport = (event) => setIsPhoneViewport(event.matches);
    setIsPhoneViewport(media.matches);

    if (media.addEventListener) {
      media.addEventListener('change', syncViewport);
      return () => media.removeEventListener('change', syncViewport);
    }

    media.addListener(syncViewport);
    return () => media.removeListener(syncViewport);
  }, []);

  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 0 90px' }}>
        <SunBurst size={500} className="abs" opacity={0.5} style={{ left: -120, top: 80 }}/>
        <div style={{ position: 'absolute', right: -120, bottom: 60, opacity: 0.6 }}>
          <SunBurst size={420} opacity={0.3}/>
        </div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="grid grid-2 gap-8" style={{ alignItems: 'center', gridTemplateColumns: '1fr 1.05fr' }}>
            <div>
              <Reveal>
                <div className="eyebrow mb-5">Mentoria · Turma 2026 · Edição 01</div>
                <h1 className="h-display mb-5">
                  IA na Prática.<br/>
                  Automação, agentes<br/>
                  & <span className="italic-accent">integrações.</span>
                </h1>
                <p className="muted mb-6" style={{ maxWidth: 540, fontSize: 17 }}>
                  Uma mentoria intensiva, individual e feita à mão para quem quer entender de verdade como usar IA no mundo real — automatizar processos, conectar sistemas e criar soluções simples que aumentam a produtividade.
                </p>
                <div className="flex gap-3 mb-6" style={{ flexWrap: 'wrap' }}>
                  <span className="check-bullet">7 semanas · 21 encontros</span>
                  <span className="check-bullet">10 módulos progressivos</span>
                  <span className="check-bullet">Acompanhamento direto</span>
                </div>
                <div className="flex gap-3 mb-6" style={{ flexWrap: 'wrap' }}>
                  <button className="btn btn-primary" onClick={() => onNav('contato')}>
                    Garantir minha vaga
                    <Icon name="arrow-right" size={16} className="arrow"/>
                  </button>
                  <button className="btn btn-secondary" onClick={() => {
                    const el = document.getElementById('mentoria-modulos');
                    if (el) el.scrollIntoView({ behavior: 'smooth' });
                  }}>
                    Ver os 10 módulos
                  </button>
                </div>
                <div className="hero-vagas-pill">
                  <span className="hero-vagas-dot"/>
                  <span><strong>Vagas limitadas</strong> · turma intensiva e individual.</span>
                </div>
              </Reveal>
            </div>
            <div style={{ position: 'relative', height: 480 }}>
              <MentoriaHeroMotion/>
            </div>
          </div>
        </div>
      </section>

      {/* MOTION BAND */}
      <section
        className="mentoria-motion-section"
        style={{
          padding: isPhoneViewport ? '16px 12px 24px' : '28px 32px 40px',
          background: '#FF6B1A',
        }}
      >
        <div className="container">
          <Reveal>
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                width: '100%',
              }}
            >
              <div
                className="mentoria-motion-shell"
                style={{
                  position: 'relative',
                  width: '100%',
                  paddingTop: isPhoneViewport ? '70%' : '56.25%',
                  borderRadius: isPhoneViewport ? 20 : 28,
                  overflow: 'hidden',
                  border: '1px solid rgba(16,18,20,0.12)',
                  background: '#101214',
                  boxShadow: '0 28px 80px rgba(120,35,0,0.24)',
                }}
              >
                <iframe
                  className="mentoria-motion-frame"
                  src="motion-mentoria/mentoria-motion.html"
                  title="Animação Mentoria Yohann Escher"
                  loading="eager"
                  allow="autoplay"
                  onLoad={() => setMentoriaMotionSeed((current) => current + 1)}
                  style={{
                    position: 'absolute',
                    inset: 0,
                    width: '100%',
                    height: '100%',
                    border: 0,
                    display: 'block',
                    background: '#101214',
                  }}
                />
              </div>
              <MentoriaMotionPhrases
                seed={mentoriaMotionSeed}
                isPhoneViewport={isPhoneViewport}
              />
            </div>
          </Reveal>
        </div>
      </section>

      {/* CENÁRIO — o gap entre entender e aplicar */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <div className="eyebrow mb-4">01 · Cenário</div>
              <h2 className="h-2 mb-4">O entendimento cresce.<br/>A execução não <span className="italic-accent">acompanha.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                Hoje a maioria das pessoas passa pelo mesmo ciclo com IA: aprende o básico, testa ferramentas, entende o potencial — e trava quando tenta aplicar de verdade.
              </p>
              <div className="cenario-pills">
                {['Aprende','Testa','Entende','Trava'].map((p, i) => (
                  <React.Fragment key={p}>
                    <span className={`cenario-pill${i === 3 ? ' alert' : ''}`}>{p}</span>
                    {i < 3 && <span className="cenario-arrow">→</span>}
                  </React.Fragment>
                ))}
              </div>
            </Reveal>
            <Reveal>
              <div className="gap-card">
                <div className="gap-card-row">
                  <div className="gap-card-line">
                    <div style={{ fontSize: 11, color: '#FF6B1A', fontWeight: 700, letterSpacing: '0.1em' }}>ENTENDIMENTO</div>
                    <svg viewBox="0 0 280 80" preserveAspectRatio="none" width="100%" height="80">
                      <defs>
                        <linearGradient id="g-up" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.5"/>
                          <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
                        </linearGradient>
                      </defs>
                      <path d="M0 60 Q50 50 100 35 T200 14 T280 4 L280 80 L0 80 Z" fill="url(#g-up)"/>
                      <path d="M0 60 Q50 50 100 35 T200 14 T280 4" stroke="#FF6B1A" strokeWidth="2" fill="none"/>
                    </svg>
                  </div>
                  <div className="gap-card-line gap-card-line-sub">
                    <div style={{ fontSize: 11, color: '#9A9591', fontWeight: 700, letterSpacing: '0.1em' }}>EXECUÇÃO</div>
                    <svg viewBox="0 0 280 80" preserveAspectRatio="none" width="100%" height="80">
                      <path d="M0 64 Q60 62 120 60 T240 56 T280 56" stroke="#9A9591" strokeWidth="2" fill="none" strokeDasharray="3 3"/>
                    </svg>
                  </div>
                </div>
                <div className="gap-card-divider">
                  <span className="gap-tag">gap</span>
                </div>
                <div className="gap-card-foot">
                  Saber não basta. Falta arquitetura, método e execução conectados.
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* DIAGNÓSTICO — peças soltas */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <div className="diag-grid">
                {[
                  ['PROMPT', 'message'], ['FERRAMENTA', 'cog'], ['AGENTE', 'brain'],
                  ['API', 'globe'], ['AUTOMAÇÃO', 'workflow'], ['INTEGRAÇÃO', 'puzzle'],
                  ['FLUXO', 'zap'], ['DADOS', 'database'],
                ].map(([t, ic], i) => (
                  <div key={t} className="diag-piece" style={{ animationDelay: `${i * 80}ms` }}>
                    <Icon name={ic} size={16} color="#FF6B1A"/>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
              <div className="diag-foot">
                <span style={{ color: '#9A9591', fontSize: 12 }}>peças soltas — sem sistema</span>
              </div>
            </Reveal>
            <Reveal>
              <div className="eyebrow mb-4">02 · Diagnóstico</div>
              <h2 className="h-2 mb-4">Não é falta de capacidade.<br/>É falta de <span className="italic-accent">estrutura.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                O mercado ensina IA de forma fragmentada. Cada conteúdo resolve um pedaço, ninguém conecta tudo. Sem conexão, não existe operação. Só tentativa.
              </p>
              <div className="flex flex-col gap-3">
                {[
                  ['lightbulb', 'Visão de sistema, não de feature solta'],
                  ['workflow', 'Conexão entre prompt, agente, API e fluxo'],
                  ['target', 'Aplicação no seu contexto real'],
                ].map(([ic, t]) => (
                  <div key={t} className="flex items-start gap-3">
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name={ic} size={18} color="#FF6B1A"/>
                    </div>
                    <div style={{ paddingTop: 8 }}>
                      <div style={{ fontWeight: 600 }}>{t}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* INFLEXÃO — IA vira sistema (com fluxo animado) */}
      <section className="section bg-dark" style={{ marginTop: 32, marginBottom: 32, borderRadius: 24, marginLeft: 32, marginRight: 32, position: 'relative', overflow: 'hidden' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '320px 1fr', gap: 56 }}>
            <div>
              <div className="eyebrow mb-4">03 · Inflexão</div>
              <h2 className="h-2 mb-4" style={{ color: 'white' }}>
                Quando IA deixa de ser ferramenta e <span className="italic-accent">vira sistema.</span>
              </h2>
              <p className="muted-on-dark mb-6">
                Você passa a organizar execução, fluxo, automação e integração. É isso que transforma conhecimento em resultado.
              </p>
              <div className="flex flex-col gap-3">
                {[
                  ['01', 'Execução', 'Sai do testar aleatório.'],
                  ['02', 'Fluxo', 'Conecta tudo em uma lógica única.'],
                  ['03', 'Automação', 'Sistemas trabalham por você.'],
                  ['04', 'Integração', 'Ferramentas conversam entre si.'],
                ].map(([n, t, d]) => (
                  <div key={t} className="inflex-row">
                    <span className="inflex-num">{n}</span>
                    <div>
                      <div style={{ color: 'white', fontWeight: 600, fontSize: 14.5 }}>{t}</div>
                      <div style={{ color: '#9A9591', fontSize: 13 }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <Reveal>
              <FlowAutomacao/>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PARA QUEM É — 2 perfis */}
      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <div className="lhs">
              <div className="eyebrow mb-4">04 · Para quem é</div>
              <h2 className="h-1">Para quem entende e quer começar a <span className="italic-accent">construir.</span></h2>
              <p className="muted mt-4" style={{ maxWidth: 560 }}>Dois perfis se beneficiam diretamente desta mentoria. Veja se você se encaixa em um deles.</p>
            </div>
          </div>
          <div className="grid grid-2 gap-4">
            {[
              {
                tag: 'PERFIL 01',
                t: 'Quem entende o básico.',
                d: 'Já passou por ferramentas, prompts e tutoriais. Mas ainda não consegue aplicar com consistência.',
                state: 'TRAVA NA APLICAÇÃO',
                icon: 'lightbulb',
              },
              {
                tag: 'PERFIL 02',
                t: 'Quem quer construir.',
                d: 'Quer parar de testar ferramentas aleatórias e começar a construir algo útil, organizado e aplicável no dia a dia.',
                state: 'PRONTO PARA ESTRUTURAR',
                icon: 'rocket',
              },
            ].map((p, i) => (
              <Reveal key={i} className="perfil-card">
                <div className="flex items-center justify-between mb-4">
                  <span className="tag">{p.tag}</span>
                  <Icon name={p.icon} size={22} color="#FF6B1A"/>
                </div>
                <h3 className="h-2 mb-3" style={{ fontSize: 28 }}>{p.t}</h3>
                <p className="muted mb-5" style={{ fontSize: 15 }}>{p.d}</p>
                <div className="perfil-state">{p.state}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* O QUE VOCÊ VAI CONSTRUIR — cards animados em hover */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '300px 1fr', gap: 40 }}>
            <div>
              <div className="eyebrow mb-4">05 · Construção</div>
              <h2 className="h-2 mb-3">Você não aprende.<br/>Você <span className="italic-accent">constrói.</span></h2>
              <p className="muted mt-4">
                Ao longo da mentoria você desenvolve pequenas estruturas que começam a trabalhar junto com você, trazendo produtividade e clareza.
              </p>
            </div>
            <Reveal stagger className="grid grid-4 gap-4">
              {[
                { ic: 'workflow', n: 'i.', t: 'Automações', d: 'Tarefas repetitivas que rodam sem você.' },
                { ic: 'brain', n: 'ii.', t: 'Agentes', d: 'Execução com propósito e contexto.' },
                { ic: 'puzzle', n: 'iii.', t: 'Fluxos', d: 'Conexão entre todas as peças.' },
                { ic: 'cube', n: 'iv.', t: 'Estruturas', d: 'Operação sólida que escala.' },
              ].map((s, i) => (
                <div className="construir-card" key={i}>
                  <div className="construir-card-bg"/>
                  <span className="construir-num">{s.n}</span>
                  <div className="construir-icon"><Icon name={s.ic} size={22} color="#FF6B1A"/></div>
                  <div className="construir-title">{s.t}</div>
                  <div className="construir-desc">{s.d}</div>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* FORMATO — Timeline 7 semanas */}
      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <div className="lhs">
              <div className="eyebrow mb-4">06 · Formato</div>
              <h2 className="h-1">Sete semanas. Três encontros por semana de <span className="italic-accent">1 hora.</span></h2>
              <p className="muted mt-4" style={{ maxWidth: 560 }}>
                Um ritmo que permite aprofundar, aplicar com calma e integrar os blocos sem pular etapas.
              </p>
            </div>
          </div>
          <Reveal>
            <Timeline7Semanas/>
          </Reveal>
        </div>
      </section>

      {/* MAPA — 10 MÓDULOS */}
      <section className="section-tight" id="mentoria-modulos">
        <div className="container">
          <div className="section-head">
            <div className="lhs">
              <div className="eyebrow mb-4">07 · Mapa</div>
              <h2 className="h-1">10 módulos <span className="italic-accent">progressivos.</span></h2>
              <p className="muted mt-4" style={{ maxWidth: 560 }}>
                Cada módulo constrói a base do próximo. Uma evolução lógica, do entendimento até a construção prática. Nada é isolado. Tudo se conecta.
              </p>
            </div>
          </div>
          <Reveal stagger className="modulos-grid">
            {MODULES.map((m, i) => (
              <div key={m.n} className="modulo-card">
                <div className="modulo-card-head">
                  <span className="modulo-num">{m.n}</span>
                  <Icon name={m.icon} size={18} color="#FF6B1A"/>
                </div>
                <div className="modulo-tag">{m.tag}</div>
                <h3 className="modulo-title">{m.t}</h3>
                <p className="modulo-desc">{m.d}</p>
                <div className="modulo-list">
                  {m.items.map(it => (
                    <div key={it} className="modulo-list-item">
                      <span className="modulo-bullet"/>
                      {it}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* MÉTODO — Adaptado ao seu contexto */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <div className="eyebrow mb-4">08 · Método</div>
              <h2 className="h-2 mb-4">Adaptado ao <span className="italic-accent">seu contexto.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                A gente usa sua rotina, seus projetos e seus objetivos como base. Cada aprendizado é traduzido para o seu caso. Prático, aplicável e funcional.
              </p>
              <div className="flex gap-3 mb-6" style={{ flexWrap: 'wrap' }}>
                {['Sua rotina','Seus projetos','Seus objetivos','Seu contexto'].map(t => (
                  <span key={t} className="chip active" style={{ fontSize: 12 }}>{t}</span>
                ))}
              </div>
              <p className="muted" style={{ fontSize: 14 }}>
                <span style={{ color: '#FF6B1A', fontWeight: 600 }}>Mentoria feita à mão</span> · seu caso → método → resultado.
              </p>
            </Reveal>
            <Reveal>
              <div className="metodo-flow">
                {[
                  { n: '01', t: 'Sua rotina', ic: 'calendar' },
                  { n: '02', t: 'Seus projetos', ic: 'briefcase' },
                  { n: '03', t: 'Seus objetivos', ic: 'target' },
                ].map((s, i) => (
                  <React.Fragment key={i}>
                    <div className="metodo-flow-node">
                      <Icon name={s.ic} size={20} color="#FF6B1A"/>
                      <div className="metodo-flow-num">{s.n}</div>
                      <div className="metodo-flow-label">{s.t}</div>
                    </div>
                    {i < 2 && <div className="metodo-flow-arrow"><Icon name="arrow-right" size={14} color="#FF6B1A"/></div>}
                  </React.Fragment>
                ))}
                <div className="metodo-flow-result">
                  <Icon name="sparkles" size={18} color="white"/>
                  Resultado prático
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TRÍADE */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <TriadeViz/>
            </Reveal>
            <Reveal>
              <div className="eyebrow mb-4">09 · Conceito central</div>
              <h2 className="h-2 mb-4">A tríade que <span className="italic-accent">muda tudo.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                Quando essas três se conectam, você sai do básico e entra em construção real. Não é sobre ter mais ferramentas — é sobre operar com lógica, fluxo e inteligência.
              </p>
              <div className="flex flex-col gap-4">
                {[
                  ['Sistema', 'Lógica, organização, arquitetura que sustenta tudo.', 'cube'],
                  ['Automação', 'Fluxos que trabalham no lugar do trabalho manual.', 'workflow'],
                  ['Inteligência Artificial', 'A camada que pensa, interpreta e executa.', 'brain'],
                ].map(([t, d, ic]) => (
                  <div key={t} className="triade-row">
                    <div className="triade-row-icon"><Icon name={ic} size={18} color="#FF6B1A"/></div>
                    <div>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                      <p className="muted text-sm">{d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* CAPACIDADES — 5 cards */}
      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <div className="lhs">
              <div className="eyebrow mb-4">10 · Capacidades adquiridas</div>
              <h2 className="h-1">Mais do que ferramentas, você aprende a pensar com <span className="italic-accent">estrutura.</span></h2>
            </div>
          </div>
          <Reveal stagger className="capacidades-grid">
            {[
              { n: 'I.', t: 'Automatizar tarefas', tag: 'OPERAÇÃO', ic: 'workflow' },
              { n: 'II.', t: 'Estruturar fluxos', tag: 'LÓGICA', ic: 'puzzle' },
              { n: 'III.', t: 'Criar agentes', tag: 'AÇÃO', ic: 'brain' },
              { n: 'IV.', t: 'Conectar ferramentas', tag: 'INTEGRAÇÃO', ic: 'globe' },
              { n: 'V.', t: 'Pensar com estrutura', tag: 'MENTALIDADE', ic: 'lightbulb' },
            ].map((c, i) => (
              <div key={i} className="capacidade-card">
                <div className="capacidade-num">{c.n}</div>
                <div className="capacidade-icon-wrap"><Icon name={c.ic} size={26} color="#FF6B1A"/></div>
                <div className="capacidade-title">{c.t}</div>
                <div className="capacidade-tag">{c.tag}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* TRANSFORMAÇÃO — Antes vs Depois */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <div className="eyebrow mb-4">11 · Transformação</div>
              <h2 className="h-2 mb-4">De consumo para <span className="italic-accent">construção.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                A virada acontece quando você para de buscar a próxima ferramenta e passa a operar com clareza e direção. O cartão ao lado mostra a diferença na prática.
              </p>
              <div className="flex flex-col gap-3">
                {['Sai do excesso','Foca no que move o ponteiro','Constrói com método'].map(t => (
                  <span key={t} className="check-bullet">{t}</span>
                ))}
              </div>
            </Reveal>
            <Reveal>
              <AntesDepois/>
            </Reveal>
          </div>
        </div>
      </section>

      {/* INVESTIMENTO + VAGAS — DARK URGENT BLOCK */}
      <section className="investimento-section" style={{ padding: isPhoneViewport ? '16px 12px 24px' : '40px 32px' }}>
        <div className="container investimento-bloco" style={isPhoneViewport ? { padding: '20px 16px', borderRadius: 20 } : undefined}>
          <div className="grid investimento-grid" style={{ gridTemplateColumns: isPhoneViewport ? '1fr' : '1fr 1fr', gap: isPhoneViewport ? 24 : 48, alignItems: 'center' }}>
            <div className="investimento-copy">
              <div className="eyebrow mb-3" style={{ color: '#FF6B1A' }}>12 · Proposta</div>
              <h2 className="h-1 mb-4 invest-title" style={{ color: 'white', fontSize: isPhoneViewport ? 'clamp(30px, 11vw, 38px)' : undefined, lineHeight: isPhoneViewport ? 1.04 : undefined }}>
                Mentoria <span className="italic-accent">completa.</span>
              </h2>
              <p className="muted-on-dark mb-6 invest-description" style={{ fontSize: isPhoneViewport ? 14.5 : 16, maxWidth: isPhoneViewport ? '100%' : 480, lineHeight: isPhoneViewport ? 1.55 : undefined }}>
                Uma mentoria pensada para caber no seu presente e mudar o seu próximo ano. Foco total, individual, com método e acompanhamento direto.
              </p>
              <div className="invest-specs" style={isPhoneViewport ? { gridTemplateColumns: '1fr', gap: 10, marginTop: 18 } : undefined}>
                <div className="invest-spec" style={isPhoneViewport ? { padding: '12px 14px', alignItems: 'flex-start' } : undefined}>
                  <Icon name="calendar" size={16} color="#FF6B1A"/>
                  <div style={isPhoneViewport ? { minWidth: 0 } : undefined}>
                    <div style={{ color: 'white', fontWeight: 600, fontSize: isPhoneViewport ? 13 : 14, lineHeight: isPhoneViewport ? 1.25 : undefined, overflowWrap: isPhoneViewport ? 'anywhere' : undefined }}>7 semanas</div>
                    <div style={{ color: '#9A9591', fontSize: isPhoneViewport ? 11 : 12, lineHeight: isPhoneViewport ? 1.35 : undefined }}>Duração</div>
                  </div>
                </div>
                <div className="invest-spec" style={isPhoneViewport ? { padding: '12px 14px', alignItems: 'flex-start' } : undefined}>
                  <Icon name="users" size={16} color="#FF6B1A"/>
                  <div style={isPhoneViewport ? { minWidth: 0 } : undefined}>
                    <div style={{ color: 'white', fontWeight: 600, fontSize: isPhoneViewport ? 13 : 14, lineHeight: isPhoneViewport ? 1.25 : undefined, overflowWrap: isPhoneViewport ? 'anywhere' : undefined }}>3 encontros / semana</div>
                    <div style={{ color: '#9A9591', fontSize: isPhoneViewport ? 11 : 12, lineHeight: isPhoneViewport ? 1.35 : undefined }}>Frequência</div>
                  </div>
                </div>
                <div className="invest-spec" style={isPhoneViewport ? { padding: '12px 14px', alignItems: 'flex-start' } : undefined}>
                  <Icon name="message" size={16} color="#FF6B1A"/>
                  <div style={isPhoneViewport ? { minWidth: 0 } : undefined}>
                    <div style={{ color: 'white', fontWeight: 600, fontSize: isPhoneViewport ? 13 : 14, lineHeight: isPhoneViewport ? 1.25 : undefined, overflowWrap: isPhoneViewport ? 'anywhere' : undefined }}>Acompanhamento direto</div>
                    <div style={{ color: '#9A9591', fontSize: isPhoneViewport ? 11 : 12, lineHeight: isPhoneViewport ? 1.35 : undefined }}>Individual</div>
                  </div>
                </div>
                <div className="invest-spec" style={isPhoneViewport ? { padding: '12px 14px', alignItems: 'flex-start' } : undefined}>
                  <Icon name="sparkles" size={16} color="#FF6B1A"/>
                  <div style={isPhoneViewport ? { minWidth: 0 } : undefined}>
                    <div style={{ color: 'white', fontWeight: 600, fontSize: isPhoneViewport ? 13 : 14, lineHeight: isPhoneViewport ? 1.25 : undefined, overflowWrap: isPhoneViewport ? 'anywhere' : undefined }}>Aplicação prática</div>
                    <div style={{ color: '#9A9591', fontSize: isPhoneViewport ? 11 : 12, lineHeight: isPhoneViewport ? 1.35 : undefined }}>No seu contexto</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="invest-card" style={isPhoneViewport ? { padding: '18px 14px', borderRadius: 18, boxSizing: 'border-box', width: '100%' } : undefined}>
              <div className="invest-card-flag" style={isPhoneViewport ? { display: 'flex', flexWrap: 'wrap', whiteSpace: 'normal', lineHeight: 1.35, fontSize: 9.5, letterSpacing: '0.08em', padding: '6px 10px' } : undefined}>
                <span className="invest-flag-dot"/>
                Vagas limitadas · Edição 01 · 2026
              </div>
              <div style={{ fontSize: 13, color: '#9A9591', marginBottom: 8 }}>Investimento único</div>
              <div className="invest-price" style={isPhoneViewport ? { flexWrap: 'wrap', gap: '6px 8px', alignItems: 'flex-end' } : undefined}>
                <span className="invest-currency" style={isPhoneViewport ? { fontSize: 16 } : undefined}>R$</span>
                <span className="invest-value" style={isPhoneViewport ? { fontSize: 'clamp(38px, 18vw, 48px)', lineHeight: 0.95 } : undefined}>4.000</span>
              </div>
              <div className="invest-price-note" style={{ fontSize: isPhoneViewport ? 13 : 14, color: '#9A9591', marginBottom: isPhoneViewport ? 18 : 24, lineHeight: isPhoneViewport ? 1.45 : undefined }}>
                <strong style={{ color: '#FF6B1A' }}>Menos de 200 reais por encontro</strong> · Pagamento único
              </div>

              <VagasBar isPhoneViewport={isPhoneViewport}/>

              <div className="invest-actions" style={{ marginTop: isPhoneViewport ? 18 : 24 }}>
                <button className="btn btn-primary invest-cta" style={{ width: '100%', justifyContent: 'center', padding: isPhoneViewport ? '13px 16px' : undefined, fontSize: isPhoneViewport ? 14 : undefined }} onClick={() => onNav('contato')}>
                  Quero garantir minha vaga <Icon name="arrow-right" size={16} className="arrow"/>
                </button>
                <button className="btn btn-on-dark-secondary mt-3 invest-whatsapp" style={{ width: '100%', justifyContent: 'center', gap: 10, padding: isPhoneViewport ? '13px 16px' : undefined, fontSize: isPhoneViewport ? 14 : undefined }} onClick={() => window.open('https://wa.me/5562998550007', '_blank')}>
                  <Icon name="whatsapp" size={16}/> Falar no WhatsApp
                </button>
              </div>
              <div className="invest-next-step" style={{ marginTop: 16, fontSize: isPhoneViewport ? 11 : 12, color: '#9A9591', textAlign: 'center', lineHeight: isPhoneViewport ? 1.5 : undefined }}>
                Próximo passo: uma <span style={{ color: '#FF6B1A', fontWeight: 600 }}>conversa de 20 minutos</span> para avaliar se faz sentido.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQSection items={[
        ['Quando começa a próxima turma?', 'A Edição 01 da turma 2026 está com inscrições abertas. Como é uma mentoria intensiva e individual, as vagas são limitadas e fechamos assim que preenchemos.'],
        ['Preciso ter experiência prévia com IA?', 'Não. O perfil ideal é quem já passou por ferramentas e prompts mas trava na aplicação real. Começamos pelos fundamentos e construímos juntos.'],
        ['Como são os encontros?', 'São 3 encontros por semana de 1 hora cada, durante 7 semanas — totalizando 21 encontros. Tudo individual, focado no seu contexto.'],
        ['O que diferencia esta mentoria de um curso gravado?', 'Não é conteúdo solto. A mentoria é construída em torno do seu caso real. Cada módulo é aplicado nos seus projetos, na sua rotina e nos seus objetivos.'],
        ['Vou sair construindo o quê?', 'Você sai com automações, agentes, fluxos e estruturas funcionando dentro da sua rotina. Mais do que conhecimento, sai com ativos.'],
        ['Quanto custa e como pago?', 'O investimento é R$ 4.000 em pagamento único. Após a conversa de avaliação, te envio as instruções para garantir a vaga.'],
      ]}/>

      <section style={{ padding: '0 32px 64px' }}>
        <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: '56px 40px', position: 'relative', overflow: 'hidden' }}>
          <SunBurst size={400} className="abs" opacity={0.15} style={{ right: -100, top: -100 }}/>
          <div className="grid convite-grid" style={{ gridTemplateColumns: '0.8fr 1.1fr 1fr', gap: 40, alignItems: 'center' }}>
            <div className="convite-photo-wrap">
              <img 
                src="https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4879c721-5a9d-4add-08b6-e46b7a76d600/public" 
                alt="Yohann" 
                className="convite-photo"
              />
            </div>
            <div>
              <div className="eyebrow mb-4" style={{ color: '#FF6B1A' }}>Final · Convite</div>
              <h2 className="h-1" style={{ color: 'white' }}>
                Se fizer sentido,<br/>a gente <span className="italic-accent">começa.</span>
              </h2>
              <p className="muted-on-dark mt-5" style={{ maxWidth: 520, fontSize: 16 }}>
                A ideia aqui não é te ensinar IA. É te colocar em um nível onde você consegue usar IA <span style={{ color: '#FF6B1A' }}>de verdade.</span>
              </p>
              <div className="flex gap-3 mt-6" style={{ flexWrap: 'wrap' }}>
                <span className="check-bullet" style={{ color: '#D9D4CE' }}>20 minutos</span>
                <span className="check-bullet" style={{ color: '#D9D4CE' }}>Sem compromisso</span>
                <span className="check-bullet" style={{ color: '#D9D4CE' }}>Avaliação honesta</span>
              </div>
            </div>
            <div className="convite-card">
              <div style={{ fontSize: 13, color: '#FF6B1A', fontWeight: 600, letterSpacing: '0.1em', marginBottom: 8, textTransform: 'uppercase' }}>Próximo passo</div>
              <h3 className="h-3" style={{ color: 'white', marginBottom: 12 }}>Uma conversa.</h3>
              <p style={{ color: '#9A9591', fontSize: 14, marginBottom: 24, lineHeight: 1.5 }}>
                20 minutos para avaliar se faz sentido para você. Sem ruído, sem pressão.
              </p>
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'space-between' }} onClick={() => onNav('contato')}>
                Agendar conversa <Icon name="arrow-right" size={16}/>
              </button>
              <button className="btn btn-on-dark-secondary mt-3" style={{ width: '100%', justifyContent: 'center', gap: 10 }} onClick={() => window.open('https://wa.me/5562998550007', '_blank')}>
                <Icon name="whatsapp" size={16}/> Falar no WhatsApp
              </button>
              <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.06)', fontSize: 12, color: '#9A9591', display: 'flex', justifyContent: 'space-between' }}>
                <span>IA · Automação · Agentes</span>
                <span style={{ color: '#FF6B1A' }}>mmxxvi</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- Dados dos 10 módulos ----------
const MODULES = [
  { n: '01', tag: 'ENTENDIMENTO', t: 'Fundamentos da IA Operacional', icon: 'lightbulb',
    d: 'Visão clara de como a IA funciona no mundo real, saindo do conceito superficial.',
    items: ['Ecossistema de IA na prática', 'Diferença entre ferramenta e sistema', 'Papel da IA na operação', 'Pensamento lógico estruturado'] },
  { n: '02', tag: 'CLAREZA', t: 'Engenharia de Prompt', icon: 'sparkles',
    d: 'Estruturar comandos com clareza e intenção, transformando IA em ferramenta previsível.',
    items: ['Prompts estruturados', 'Padronizar comandos', 'Organizar tarefas com IA', 'Consistência nas respostas'] },
  { n: '03', tag: 'PRODUTIVIDADE', t: 'Automação de Processos', icon: 'workflow',
    d: 'Transformar tarefas manuais em fluxos automatizados com ganho de produtividade visível.',
    items: ['Identificar tarefas automatizáveis', 'Criar fluxos simples', 'Organizar processos repetitivos', 'Reduzir trabalho manual'] },
  { n: '04', tag: 'CONEXÃO', t: 'Integrações & APIs', icon: 'globe',
    d: 'Como ferramentas e sistemas se conectam para o fluxo de trabalho funcionar junto.',
    items: ['Como sistemas conversam', 'Conceito prático de API', 'Integração entre ferramentas', 'Fluxo de dados organizado'] },
  { n: '05', tag: 'AÇÃO', t: 'Agentes de IA', icon: 'brain',
    d: 'Criar agentes com função específica que executam tarefas e ajudam na operação.',
    items: ['Agentes com propósito', 'Definir função e comportamento', 'Trabalhar com contexto', 'Aplicar agentes no dia a dia'] },
  { n: '06', tag: 'CRIAÇÃO', t: 'Construção assistida por IA', icon: 'cube',
    d: 'Usar IA para construir soluções, mesmo sem ser desenvolvedor. Reduzir barreiras técnicas.',
    items: ['Construir soluções com IA', 'Estruturas com apoio de IA', 'Ferramentas modernas', 'Reduzir dependência técnica'] },
  { n: '07', tag: 'ARQUITETURA', t: 'Estruturação de Sistemas', icon: 'puzzle',
    d: 'Organizar tudo em uma lógica de sistema, conectando automações, agentes e integrações.',
    items: ['Fluxos completos', 'Sistemas simples', 'IA + automação integradas', 'Visão de operação'] },
  { n: '08', tag: 'PRÁTICA', t: 'Aplicação no seu Contexto', icon: 'compass',
    d: 'O conhecimento é levado para a sua realidade. Foco em aplicar no seu trabalho e projetos.',
    items: ['IA no seu dia a dia', 'IA nos seus processos', 'IA nos seus projetos', 'IA na sua produtividade'] },
  { n: '09', tag: 'VALOR', t: 'Criação de Ativos com IA', icon: 'star',
    d: 'Usar IA para gerar valor direto, criando conteúdos, estruturas e materiais úteis.',
    items: ['Conteúdos com IA', 'Produzir materiais', 'Gerar ativos úteis', 'Acelerar produção'] },
  { n: '10', tag: 'AUTONOMIA', t: 'Mentalidade & Evolução', icon: 'rocket',
    d: 'Continuar evoluindo com clareza, filtrando o que importa e evitando o excesso de ferramentas.',
    items: ['Critério sobre ferramentas', 'Visão de longo prazo', 'Capacidade de filtragem', 'Autonomia'] },
];

window.MentoriaPage = MentoriaPage;
