// Header + Hero section
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const { t } = useI18n();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
  { key: 'nav.conteudos', href: '#conteudos' },
  { key: 'nav.ferramentas', href: '#ferramentas' },
  { key: 'nav.calendario', href: '#calendario' },
  { key: 'nav.formadores', href: '#formadores' },
  { key: 'nav.faq', href: '#faq' }];


  return (
    <header className="site-header" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      backdropFilter: scrolled ? 'blur(18px)' : 'blur(0px)',
      background: scrolled ? 'rgba(7,7,11,0.72)' : 'transparent',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'all 0.25s ease'
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 28px'
      }}>
        <a href="#top" className="logo-svg" style={{ display: 'flex', alignItems: 'center' }}
        dangerouslySetInnerHTML={{ __html: window.LOGO_SVG || '' }}>
        </a>

        <nav style={{ display: 'flex', gap: 32 }} className="nav-desktop">
          {nav.map((n) =>
          <a key={n.href} href={n.href} style={{ fontSize: 14, color: 'var(--text-dim)', transition: 'color 0.2s' }}
          onMouseOver={(e) => e.currentTarget.style.color = 'var(--text)'}
          onMouseOut={(e) => e.currentTarget.style.color = 'var(--text-dim)'}>
              {t(n.key)}
            </a>
          )}
        </nav>

        <div className="header-actions" style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          <LangToggle />
          <a href="inscricao.html" className="btn btn-primary" style={{ padding: '10px 9px', fontSize: 14, whiteSpace: 'nowrap', minWidth: 104, justifyContent: 'center' }}>
            {t('cta.apply')}
          </a>
        </div>
      </div>
    </header>);

};

const Hero = () => {
  const heroRef = React.useRef(null);
  const { t } = useI18n();
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const [videoReady, setVideoReady] = React.useState(false);

  React.useEffect(() => {
    const onMove = (e) => {
      if (!heroRef.current) return;
      const r = heroRef.current.getBoundingClientRect();
      setMouse({
        x: (e.clientX - r.left - r.width / 2) / r.width,
        y: (e.clientY - r.top - r.height / 2) / r.height
      });
    };
    const el = heroRef.current;
    el?.addEventListener('mousemove', onMove);
    return () => el?.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section id="top" ref={heroRef} style={{ position: 'relative', paddingTop: 140, paddingBottom: 80, overflow: 'hidden' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
        gap: 60, alignItems: 'center', position: 'relative', zIndex: 1
      }}>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <h1 className="h-display" style={{ marginBottom: 24, lineHeight: 1.1 }}>
            Mastery in<br />
            <span className="grad-text">Design with<br />
            Gen AI</span>
          </h1>

          <p style={{ fontSize: 17, color: 'var(--text-dim)', maxWidth: 500, margin: '0 0 18px', lineHeight: 1.6, fontWeight: 400 }}>{t('hero.sub1a')}<br />{t('hero.sub1b')}</p>
          <p style={{ fontSize: 17, color: 'var(--text)', maxWidth: 500, margin: '0 0 28px', lineHeight: 1.6, fontWeight: 600 }}>{t('hero.tagline')}</p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 28 }}>
            <a href="inscricao.html" className="btn btn-primary">
              {t('cta.applyLong')} <Icon name="arrow-right" size={16} />
            </a>
            <a href="#conteudos" className="btn btn-secondary">
              {t('hero.seeProgram')}
            </a>
          </div>

          <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
          </div>
        </div>

        <div className="hero-media" style={{ position: 'relative', aspectRatio: '1/1', minHeight: 500, overflow: 'visible', zIndex: 0 }}>
          <video
            src="assets/hero.mp4"
            autoPlay loop muted playsInline preload="auto"
            onCanPlay={() => setVideoReady(true)}
            style={{
              position: 'relative', width: '100%', height: '100%', objectFit: 'contain', zIndex: 0,
              transform: `translate(${mouse.x * 110}px, ${mouse.y * 110}px) scale(${1.6 + (Math.abs(mouse.x) + Math.abs(mouse.y)) * 0.35})`,
              transformOrigin: 'center',
              transition: 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease',
              opacity: videoReady ? 1 : 0,
              background: 'transparent',
              mixBlendMode: 'lighten'
            }} />
          
        </div>
      </div>

      <style>{`
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-12px); }
        }
        @media (min-width: 901px) and (min-height: 780px) {
          section#top {
            min-height: calc(100vh - 130px);
            display: flex;
            align-items: center;
            padding-top: 120px !important;
            padding-bottom: 40px !important;
          }
          section#top > .container { width: 100%; }
        }
        @media (max-width: 900px) {
          section#top { padding-top: 110px !important; padding-bottom: 40px !important; }
          section#top > div.container { grid-template-columns: 1fr !important; gap: 32px !important; padding-left: 20px !important; padding-right: 20px !important; }
          section#top h1.h-display { font-size: clamp(40px, 9vw, 64px) !important; }
          section#top p { max-width: 100% !important; }
          .nav-desktop { display: none !important; }
          .hero-media { min-height: 0 !important; aspect-ratio: 1/1 !important; max-width: 540px; margin: 0 auto !important; width: 100% !important; }
          .hero-media video { transform: scale(1.66) !important; }
        }
      `}</style>
    </section>);

};

const MetaItem = ({ icon, label, sub }) =>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <span style={{ color: 'var(--violet-2)' }}><Icon name={icon} size={16} /></span>
    <span style={{ fontWeight: 600 }}>{label}</span>
    {sub && <span style={{ color: 'var(--text-dim)', fontSize: 14 }}>{sub}</span>}
  </div>;


Object.assign(window, { Header, Hero });