/* ==========================================
   PAGE: HOME
   ========================================== */

const YOHANN_PHOTO = 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/97fad229-f325-4279-6532-23991dc31b00/public';
const YOHANN_PHOTO_2 = 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/988d9fec-1e73-46f9-c1b0-c1dfb935c200/public';
const YOHANN_PHOTO_PORTRAIT = 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4879c721-5a9d-4add-08b6-e46b7a76d600/public';
const YOHANN_PHOTO_PORTRAIT_2 = 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4e8a51d4-ba21-472d-6f29-2c28b73f6500/public';
const YOHANN_GALLERY = [
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/58070ce4-ea18-458e-4d0a-e543d5fd8300/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/dbf22523-e205-49f0-4581-ea06278f7c00/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/3b394f24-6378-4335-d0ae-6818e324a900/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/d8635752-e287-4ab7-d55f-ac114b497500/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/0645258b-5192-4b01-31c2-244fa49a0600/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/aa2fe96a-6a40-4e1f-6c70-9b27eea26700/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/71baab96-6161-4bd0-f48e-afecacca0c00/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/aa6d17b4-334a-459c-6d5f-0a9a7d404600/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/97fad229-f325-4279-6532-23991dc31b00/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/988d9fec-1e73-46f9-c1b0-c1dfb935c200/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4879c721-5a9d-4add-08b6-e46b7a76d600/public',
  'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4e8a51d4-ba21-472d-6f29-2c28b73f6500/public',
];

// ============== HERO MOTION (animated dashboard scene) ==============
const HeroMotion = () => {
  const [t, setT] = React.useState(0);
  const [isPhoneLayout, setIsPhoneLayout] = React.useState(() => (
    typeof window !== 'undefined' && window.matchMedia('(max-width: 600px)').matches
  ));

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

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

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

  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 wave = (offset = 0, amp = 6) => Math.sin(t * 0.8 + offset) * amp;

  return (
    <div className={`hero-motion-wrap${isPhoneLayout ? ' phone-layout' : ''}`}>
      {/* Animated chart card top-right */}
      {!isPhoneLayout && (
        <div className="hero-card hero-card-1" style={{ transform: `translateY(${wave(0)}px)` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, color: '#9A9591', fontWeight: 500 }}>Resultado da operação</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: '#FF6B1A', letterSpacing: '-0.02em' }}>+37%</div>
            </div>
            <SparkStar size={14}/>
          </div>
          <div style={{ fontSize: 10.5, color: '#9A9591' }}>de eficiência operacional</div>
          <svg width="100%" height="44" viewBox="0 0 200 44" style={{ marginTop: 8, overflow: 'visible' }}>
            <defs>
              <linearGradient id="ga1" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.4"/>
                <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0 36 Q25 28 50 30 T100 18 T150 14 T200 6 L200 44 L0 44 Z" fill="url(#ga1)"/>
            <path d="M0 36 Q25 28 50 30 T100 18 T150 14 T200 6" stroke="#FF6B1A" strokeWidth="1.6" fill="none"/>
            <circle cx="200" cy="6" r="3" fill="#FF6B1A">
              <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
      )}

      {/* IA card mid-right */}
      <div className="hero-card hero-card-2" style={{ transform: `translateY(${wave(1.5)}px)` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,107,26,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="brain" size={16} color="#FF6B1A"/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>IA</div>
        </div>
        <div style={{ fontSize: 11, color: '#9A9591', lineHeight: 1.4 }}>Decisões mais inteligentes</div>
      </div>

      {/* Automação card top-left */}
      <div className="hero-card hero-card-3" style={{ transform: `translateY(${wave(2.5)}px)` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,107,26,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="workflow" size={16} color="#FF6B1A"/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Automação</div>
        </div>
        <div style={{ fontSize: 11, color: '#9A9591', lineHeight: 1.4 }}>Fluxos inteligentes</div>
      </div>

      {/* CRM card bottom-left */}
      <div className="hero-card hero-card-4" style={{ transform: `translateY(${wave(0.8)}px)` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,107,26,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="users" size={16} color="#FF6B1A"/>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Marketing e CRM</div>
        </div>
        <div style={{ fontSize: 11, color: '#9A9591', lineHeight: 1.4 }}>Campanhas e relacionamentos<br/>que convertem</div>
      </div>

      {/* Dashboards card bottom-right */}
      {!isPhoneLayout && (
        <div className="hero-card hero-card-5" style={{ transform: `translateY(${wave(2)}px)` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,107,26,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="chart" size={16} color="#FF6B1A"/>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Dashboards</div>
          </div>
          <div style={{ fontSize: 11, color: '#9A9591', lineHeight: 1.4 }}>Dados que viram resultado</div>
        </div>
      )}

      {/* Yohann photo card */}
      <div className="hero-card hero-card-yohann" style={{ transform: `translateY(${wave(3.5)}px)` }}>
        <img src={YOHANN_PHOTO_PORTRAIT} alt="Yohann Escher"/>
      </div>

      {/* Center mini-dashboard (laptop-ish) */}
      <div className="hero-center-dash" style={{ transform: `translate(-50%, ${wave(3.2, 4)}px)` }}>
        <div style={{ background: '#1E2026', borderRadius: 12, padding: 14, border: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
            <div style={{ fontSize: 10.5, color: '#9A9591' }}>Receita projetada</div>
            <div style={{ fontSize: 10.5, color: '#FF6B1A' }}>+24%</div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 10, color: 'white' }}>R$ 1.480.000</div>
          <svg width="100%" height="50" viewBox="0 0 240 50">
            <defs>
              <linearGradient id="ga2" 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 40 Q40 35 80 30 T160 14 T240 8 L240 50 L0 50 Z" fill="url(#ga2)"/>
            <path d="M0 40 Q40 35 80 30 T160 14 T240 8" stroke="#FF6B1A" strokeWidth="2" fill="none"/>
          </svg>
        </div>
      </div>

      {/* Connecting orbital lines */}
      <svg className="orbit-svg" viewBox="0 0 600 460" preserveAspectRatio="none">
        <defs>
          <radialGradient id="glow1" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.4"/>
            <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <ellipse cx="300" cy="230" rx="240" ry="130" fill="none" stroke="rgba(255,107,26,0.18)" strokeWidth="1" strokeDasharray="3 5"/>
        <ellipse cx="300" cy="230" rx="180" ry="90" fill="none" stroke="rgba(255,107,26,0.14)" strokeWidth="1" strokeDasharray="3 5"/>
        <circle cx="300" cy="230" r="220" fill="url(#glow1)"/>
        {/* Floating dots */}
        {[...Array(8)].map((_, i) => {
          const angle = (i / 8) * Math.PI * 2 + t * 0.2;
          const cx = 300 + Math.cos(angle) * 240;
          const cy = 230 + Math.sin(angle) * 130;
          return <circle key={i} cx={cx} cy={cy} r="2" fill="#FF6B1A" opacity={0.5 + 0.5 * Math.sin(t + i)}/>;
        })}
      </svg>
    </div>
  );
};

// ============== HOME PAGE ==============
const HomePage = ({ onNav }) => {
  const [isMotionModalOpen, setIsMotionModalOpen] = React.useState(false);
  const [isPhoneViewport, setIsPhoneViewport] = React.useState(() => (
    typeof window !== 'undefined' && window.matchMedia('(max-width: 480px)').matches
  ));

  React.useEffect(() => {
    if (!isMotionModalOpen) return undefined;

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') setIsMotionModalOpen(false);
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isMotionModalOpen]);

  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);
  }, []);

  const motionModal = isMotionModalOpen && typeof document !== 'undefined'
    ? ReactDOM.createPortal(
        <div
          className="motion-modal"
          onClick={() => setIsMotionModalOpen(false)}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 9999,
            background: 'rgba(6, 7, 10, 0.92)',
            backdropFilter: 'blur(10px)',
            WebkitBackdropFilter: 'blur(10px)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '16px',
          }}
        >
          <div
            className="motion-modal-dialog"
            onClick={(event) => event.stopPropagation()}
            style={{
              width: 'min(96vw, 1600px)',
              height: 'min(92vh, 980px)',
              display: 'flex',
              flexDirection: 'column',
              gap: '14px',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <button
                className="motion-modal-close"
                onClick={() => setIsMotionModalOpen(false)}
                aria-label="Fechar animação"
                style={{
                  height: 46,
                  padding: '0 18px',
                  borderRadius: 999,
                  background: 'rgba(255,255,255,0.10)',
                  border: '1px solid rgba(255,255,255,0.16)',
                  color: '#F4F1EC',
                  fontSize: 14,
                  fontWeight: 600,
                }}
              >
                Fechar
              </button>
            </div>
            <div
              className="motion-modal-frame-wrap"
              style={{
                position: 'relative',
                flex: 1,
                minHeight: 0,
                borderRadius: 28,
                overflow: 'hidden',
                background: '#0B0D10',
                border: '1px solid rgba(255,255,255,0.08)',
                boxShadow: '0 32px 90px rgba(0,0,0,0.4)',
              }}
            >
              <iframe
                className="motion-modal-frame"
                src="motion/hero-motion.html"
                title="Animação Yohann Escher em tela cheia"
                loading="eager"
                allow="autoplay"
                style={{
                  width: '100%',
                  height: '100%',
                  border: 0,
                  display: 'block',
                  background: '#0B0D10',
                }}
              />
            </div>
          </div>
        </div>,
        document.body
      )
    : null;

  return (
    <React.Fragment>
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 0 90px' }}>
        <SunBurst size={500} className="abs" opacity={0.5} />
        <div style={{ position: 'absolute', right: -120, top: 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">IA, automação e sistemas</div>
                <h1 className="h-display mb-5">
                  Sistemas, automação<br/>e IA para transformar<br/>operação em <span className="italic-accent">execução real.</span>
                </h1>
                <p className="muted mb-8" style={{ maxWidth: 520, fontSize: 17 }}>
                  Eu ajudo empresas a construir ativos digitais, organizar a operação e aplicar IA com clareza para gerar eficiência, escala e resultados que se sustentam.
                </p>
                <div className="flex gap-3 mb-8" style={{ flexWrap: 'wrap' }}>
                  <button className="btn btn-primary" onClick={() => onNav('metodo')}>
                    Ver como funciona
                    <Icon name="arrow-right" size={16} className="arrow"/>
                  </button>
                  <button className="btn btn-secondary" onClick={() => onNav('contato')}>
                    Agendar conversa
                  </button>
                </div>
                <div className="flex items-center gap-4">
                  <AvatarStack count={0} more="+" size={32}/>
                  <span style={{ fontSize: 14, color: '#6B6770', fontWeight: 500 }}>
                    Mais de 100 empresas atendidas com clareza, método e resultado.
                  </span>
                </div>
              </Reveal>
            </div>
            <div className="hero-scene-stage" style={{ position: 'relative', height: 460 }}>
              <HeroMotion/>
            </div>
          </div>
        </div>
      </section>

      {/* SOLUÇÕES */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '300px 1fr', gap: 40 }}>
            <div>
              <div className="eyebrow mb-4">02 · Soluções</div>
              <h2 className="h-2 mb-3">Do entendimento<br/>à <span className="italic-accent">execução.</span></h2>
              <p className="muted mb-5">Soluções práticas para estruturar, automatizar e escalar sua operação com inteligência.</p>
              <a className="tlink" onClick={() => onNav('solucoes')} style={{ cursor: 'pointer' }}>
                Ver todas as soluções <Icon name="arrow-right" size={14} className="arrow"/>
              </a>
            </div>
            <Reveal stagger className="grid grid-4 gap-4">
              {[
                { icon: 'brain', title: 'IA aplicada', desc: 'Aplicação prática de IA para analisar, decidir e acelerar resultados.' },
                { icon: 'workflow', title: 'Automações', desc: 'Automatizar processos repetitivos e conectar ferramentas com lógica.' },
                { icon: 'box', title: 'Sistemas sob medida', desc: 'Desenvolvo sistemas que organizam a operação e geram previsibilidade.' },
                { icon: 'target', title: 'Estrutura comercial', desc: 'Organização de processos comerciais para previsibilidade e crescimento consistente.' },
              ].map((s, i) => (
                <div className="card" key={i}>
                  <div className="icon-sq mb-5"><Icon name={s.icon} size={22}/></div>
                  <h3 className="h-3 mb-3">{s.title}</h3>
                  <p className="muted text-sm" style={{ marginBottom: 24 }}>{s.desc}</p>
                  <Icon name="arrow-right" size={18} color="#FF6B1A"/>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* MOTION SHOWCASE */}
      <section className="section-tight bg-dark motion-showcase-section">
        <div className="container">
          <Reveal>
            <div className="motion-showcase-stack">
              <div
                className="motion-showcase-shell"
                style={{
                  position: 'relative',
                  width: '100%',
                  paddingTop: '56.25%',
                  borderRadius: 'clamp(18px, 2vw, 28px)',
                  overflow: 'hidden',
                  border: '1px solid rgba(255,255,255,0.08)',
                  background: '#0B0D10',
                  boxShadow: '0 28px 80px rgba(0,0,0,0.35)',
                }}
              >
                <iframe
                  className="motion-showcase-frame"
                  src="motion/hero-motion.html"
                  title="Animação Yohann Escher"
                  loading="eager"
                  allow="autoplay"
                  style={{
                    position: 'absolute',
                    inset: 0,
                    width: '100%',
                    height: '100%',
                    border: 0,
                    display: 'block',
                    background: '#0B0D10',
                  }}
                />
              </div>
              <div
                className="motion-showcase-actions"
                style={{
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 20,
                }}
              >
                <button
                  className="btn btn-primary"
                  onClick={() => setIsMotionModalOpen(true)}
                  style={{
                    margin: '0 auto',
                    padding: isPhoneViewport ? '10px 14px' : undefined,
                    fontSize: isPhoneViewport ? 12.5 : undefined,
                    gap: isPhoneViewport ? 7 : undefined,
                  }}
                >
                  Visualizar em tela cheia
                  <Icon name="arrow-right" size={16} className="arrow"/>
                </button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* POR QUE COMIGO */}
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
            <Reveal>
              <div className="photo-tinted" style={{ height: 460, borderRadius: 20 }}>
                <img src={YOHANN_GALLERY[4]} alt="Yohann em ação"/>
              </div>
            </Reveal>
            <Reveal>
              <div className="eyebrow mb-4">Por que comigo</div>
              <h2 className="h-2 mb-4">Estratégia, tecnologia e execução em uma <span className="italic-accent">só direção.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                Não trabalho com soluções soltas. Conecto cada decisão tecnológica a um objetivo de negócio claro, com método, transparência e foco no que gera resultado.
              </p>
              <div className="flex flex-col gap-3 mb-6">
                {[
                  ['target','Visão estratégica','Cada projeto começa pelo "porquê" — alinhado ao objetivo de negócio.'],
                  ['cog','Execução com método','Processo testado e iterativo, sem improviso e sem gargalos.'],
                  ['chart-up','Resultados mensuráveis','Indicadores claros do início ao fim — sem caixa-preta.'],
                  ['users','Parceria de longo prazo','Estou junto na evolução, não só na entrega.'],
                ].map(([ic, t, d]) => (
                  <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>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                      <p className="muted text-sm">{d}</p>
                    </div>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary" onClick={() => onNav('sobre')}>
                Conhecer minha história <Icon name="arrow-right" size={16} className="arrow"/>
              </button>
            </Reveal>
          </div>
        </div>
      </section>

      {/* COMO TRABALHO (mirror) */}
      <section className="section-tight">
        <div className="container">
          <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
            <Reveal>
              <div className="eyebrow mb-4">Como trabalho</div>
              <h2 className="h-2 mb-4">Tecnologia com propósito, decisões com <span className="italic-accent">clareza.</span></h2>
              <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
                Cada entrega é pensada para gerar autonomia, escala e previsibilidade. Sem complexidade desnecessária — só o que realmente move o negócio.
              </p>
              <div className="flex flex-col gap-3 mb-6">
                {[
                  ['zap','Velocidade com qualidade','Ciclos curtos de entrega, com testes e validação contínua.'],
                  ['shield','Segurança como base','Boas práticas e dados protegidos em toda a operação.'],
                  ['chart','Decisão por dados','Painéis e métricas claras para guiar cada próximo passo.'],
                  ['cog','Operação que escala','Sistemas modulares que crescem junto com o negócio.'],
                ].map(([ic, t, d]) => (
                  <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>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                      <p className="muted text-sm">{d}</p>
                    </div>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary" onClick={() => onNav('metodo')}>
                Ver o método <Icon name="arrow-right" size={16} className="arrow"/>
              </button>
            </Reveal>
            <Reveal>
              <div style={{ height: 460, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                <img 
                  src="https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/3b394f24-6378-4335-d0ae-6818e324a900/public" 
                  alt="Yohann trabalhando"
                  style={{ maxHeight: '100%', width: 'auto', objectFit: 'contain' }}
                />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* MÉTODO (dark) */}
      <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 · Método</div>
              <h2 className="h-2 mb-4" style={{ color: 'white' }}>
                Um método claro<br/>para gerar <span className="italic-accent">execução</span><br/>que se sustenta.
              </h2>
              <p className="muted-on-dark mb-6">Unimos estratégia, tecnologia e operação com um método simples, iterativo e focado em resultados reais.</p>
              <a className="tlink" onClick={() => onNav('metodo')} style={{ cursor: 'pointer' }}>
                Conheça o método completo <Icon name="arrow-right" size={14} className="arrow"/>
              </a>
            </div>
            <Reveal stagger className="grid grid-4 gap-4" style={{ position: 'relative' }}>
              {[
                { n: '01', icon: 'search', title: 'Diagnóstico', desc: 'Entendemos o contexto, os gargalos e as prioridades do negócio.', tag: 'Clareza sobre o real', bg: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/f56afcba-a5a2-419e-7df3-90fbfd037700/public' },
                { n: '02', icon: 'doc', title: 'Arquitetura', desc: 'Desenhamos a solução, os fluxos e as integrações ideais para o cenário.', tag: 'Plano com direção', bg: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/bc52e414-a2dc-414a-1654-f0e2e6ce5b00/public' },
                { n: '03', icon: 'zap', title: 'Implementação', desc: 'Construímos, integramos e automatizamos com foco em qualidade.', tag: 'Execução com método', bg: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/ba4ef9d1-72df-4e91-5192-c1c565a84400/public' },
                { n: '04', icon: 'chart-up', title: 'Evolução', desc: 'Acompanhamos, medimos e evoluímos continuamente os resultados.', tag: 'Melhoria contínua', bg: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/c1296df3-b38b-4486-ab01-3b95303f6300/public' },
              ].map((s, i) => (
                <div className="card-dark" key={i} style={{ 
                  position: 'relative', 
                  overflow: 'hidden',
                  backgroundImage: `url(${s.bg})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  minHeight: 260
                }}>
                  <div style={{ position: 'relative', zIndex: 2 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                      <span style={{ fontSize: 13, color: '#FF6B1A', fontWeight: 600 }}>{s.n}</span>
                      <Icon name={s.icon} size={20} color="#FF6B1A"/>
                    </div>
                    <h3 className="h-3 mb-3" style={{ color: 'white' }}>{s.title}</h3>
                    <p className="text-sm" style={{ color: '#D9D4CE', marginBottom: 18 }}>{s.desc}</p>
                    <div style={{ paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: 12, color: '#FF6B1A' }}>
                      {s.tag}
                    </div>
                  </div>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* PROJETOS */}
      <section className="section-tight">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '280px 1fr 1fr', gap: 32 }}>
            <div>
              <div className="eyebrow mb-4">04 · Projetos</div>
              <h2 className="h-2 mb-3">Resultados que<br/>viram <span className="italic-accent">rotina.</span></h2>
              <p className="muted mb-5">Alguns projetos entregues com IA, automação e sistemas pensados para escala.</p>
              <a className="tlink" onClick={() => onNav('projetos')} style={{ cursor: 'pointer' }}>
                Ver mais projetos <Icon name="arrow-right" size={14} className="arrow"/>
              </a>
            </div>
            <ProjectCard
              tags={['AUTOMAÇÃO', 'IA', 'INTEGRAÇÕES']}
              title="Central de vendas inteligente"
              desc="Automatização do funil comercial com integração entre CRM, propostas e follow-ups inteligentes."
              kind="funnel"
              onClick={() => onNav('projeto-detalhe')}
            />
            <ProjectCard
              tags={['SISTEMAS', 'PAINÉIS', 'DADOS']}
              title="Painel de performance operacional"
              desc="Sistema sob medida para consolidar dados, acompanhar indicadores e tomar decisões com confiança."
              kind="dashboard"
              onClick={() => onNav('projetos')}
            />
          </div>
        </div>
      </section>

      {/* CTA dark */}
      <section style={{ padding: '0 32px 64px' }}>
        <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: '56px 56px', position: 'relative', overflow: 'hidden' }}>
          <div className="grid" style={{ gridTemplateColumns: '1.1fr 0.9fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div className="eyebrow mb-4" style={{ color: '#FF6B1A' }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: '#FF6B1A', display: 'inline-block' }}/>
                05 · Próximo passo
              </div>
              <h2 className="h-2" style={{ color: 'white' }}>
                Vamos transformar<br/>sua operação em<br/><span className="italic-accent">execução real?</span>
              </h2>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
              <div style={{
                width: 130, height: 170,
                backgroundImage: `url(${YOHANN_PHOTO_2})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                borderRadius: 16,
                flexShrink: 0,
              }}/>
              <div>
                <p style={{ color: '#D9D4CE', fontSize: 15, lineHeight: 1.5, marginBottom: 18 }}>
                  Me conte seu cenário e desafios. Vou mostrar caminhos práticos e claros para gerar resultado de verdade.
                </p>
                <div className="flex flex-col gap-3">
                  <div className="flex items-center gap-2" style={{ fontSize: 13, color: '#D9D4CE' }}>
                    <Icon name="check-circle" size={14} color="#FF6B1A"/>
                    Conversa estratégica
                  </div>
                  <div className="flex items-center gap-2" style={{ fontSize: 13, color: '#D9D4CE' }}>
                    <Icon name="compass" size={14} color="#FF6B1A"/>
                    Direção prática
                  </div>
                  <div className="flex items-center gap-2" style={{ fontSize: 13, color: '#D9D4CE' }}>
                    <Icon name="check" size={14} color="#FF6B1A"/>
                    Sem compromisso
                  </div>
                </div>
              </div>
            </div>
            <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, padding: 24 }}>
              <div style={{ color: 'white', fontWeight: 600, fontSize: 17, marginBottom: 6 }}>Agende uma conversa</div>
              <div style={{ color: '#9A9591', fontSize: 13, marginBottom: 18 }}>Uma conversa de 30 minutos pode mudar a direção do seu negócio.</div>
              <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>
          </div>
        </div>
      </section>
    </div>
    {motionModal}
    </React.Fragment>
  );
};

// Project card variants
const ProjectCard = ({ tags, title, desc, kind, onClick }) => {
  return (
    <div className="card" onClick={onClick} style={{ cursor: 'pointer', padding: 24 }}>
      <div className="flex gap-2 mb-4" style={{ flexWrap: 'wrap' }}>
        {tags.map(t => <span key={t} style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', color: '#6B6770', background: '#F1E0DA', padding: '3px 8px', borderRadius: 999 }}>{t}</span>)}
      </div>
      <h3 className="h-3 mb-3">{title}</h3>
      <p className="muted text-sm mb-5">{desc}</p>
      {kind === 'funnel' && <FunnelMini/>}
      {kind === 'dashboard' && <DashboardMini/>}
      <div className="mt-5">
        <a className="tlink">Ver detalhes do projeto <Icon name="arrow-right" size={14} className="arrow"/></a>
      </div>
    </div>
  );
};

const FunnelMini = () => (
  <div style={{ background: '#FAF3EA', borderRadius: 12, padding: 14 }}>
    <div style={{ fontSize: 11, color: '#6B6770', marginBottom: 10, fontWeight: 600 }}>Resumo do funil</div>
    {[
      { label: 'Novos leads', val: 156, pct: 100, change: '+24%' },
      { label: 'Qualificação', val: 87, pct: 64, change: '+18%' },
      { label: 'Fechado ganho', val: 31, pct: 30, change: '+32%' },
    ].map((r, i) => (
      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ flex: 1, fontSize: 12, color: '#18191D', fontWeight: 500 }}>{r.label}</div>
        <div style={{ width: 90, height: 6, background: '#E5D7C7', borderRadius: 4, overflow: 'hidden' }}>
          <div style={{ width: `${r.pct}%`, height: '100%', background: '#FF6B1A' }}/>
        </div>
        <div style={{ fontSize: 11, fontWeight: 600, width: 28, textAlign: 'right' }}>{r.val}</div>
        <div style={{ fontSize: 10, color: '#FF6B1A', width: 36, textAlign: 'right' }}>{r.change}</div>
      </div>
    ))}
  </div>
);

const DashboardMini = () => (
  <div style={{ background: '#1A1C22', borderRadius: 12, padding: 14, color: 'white' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
      <span style={{ fontSize: 11, color: '#9A9591' }}>Desempenho</span>
      <span style={{ fontSize: 11, color: '#FF6B1A' }}>↗ +18%</span>
    </div>
    <svg width="100%" height="58" viewBox="0 0 200 58">
      <defs>
        <linearGradient id="dmg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FF6B1A" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#FF6B1A" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M0 50 Q30 40 60 36 T120 22 T180 14 T200 8 L200 58 L0 58 Z" fill="url(#dmg)"/>
      <path d="M0 50 Q30 40 60 36 T120 22 T180 14 T200 8" stroke="#FF6B1A" strokeWidth="1.6" fill="none"/>
    </svg>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10 }}>
      <div><div style={{ color: '#9A9591' }}>Receita</div><div style={{ color: 'white', fontWeight: 600, fontSize: 12 }}>R$ 2,4M</div></div>
      <div><div style={{ color: '#9A9591' }}>Margem</div><div style={{ color: 'white', fontWeight: 600, fontSize: 12 }}>85%</div></div>
      <div><div style={{ color: '#9A9591' }}>Entregas</div><div style={{ color: 'white', fontWeight: 600, fontSize: 12 }}>98%</div></div>
    </div>
  </div>
);

window.HomePage = HomePage;
window.ProjectCard = ProjectCard;
window.FunnelMini = FunnelMini;
window.DashboardMini = DashboardMini;
window.YOHANN_PHOTO = YOHANN_PHOTO;
window.YOHANN_PHOTO_2 = YOHANN_PHOTO_2;
window.YOHANN_PHOTO_PORTRAIT = YOHANN_PHOTO_PORTRAIT;
window.YOHANN_PHOTO_PORTRAIT_2 = YOHANN_PHOTO_PORTRAIT_2;
window.YOHANN_GALLERY = YOHANN_GALLERY;