/* Tuo v3 — Main App Shell: scroll spy, section in-view, orchestration */

function TuoNav({ lang, setLang }) {
  const en = lang === 'en';
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('hero');

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Scroll spy
  useEffect(() => {
    const sections = document.querySelectorAll('[data-section]');
    const observer = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) setActiveSection(e.target.id || e.target.dataset.section); });
    }, { rootMargin: '-30% 0px -60% 0px' });
    sections.forEach(s => observer.observe(s));
    return () => observer.disconnect();
  }, []);

  const links = en
    ? [['#concept','Concept'],['#products','Products'],['#performance','Performance'],['#how-it-works','How it works'],['#faq','FAQ']]
    : [['#concept','Concepto'],['#products','Productos'],['#performance','Rendimiento'],['#how-it-works','Cómo funciona'],['#faq','Preguntas']];

  return React.createElement('nav', { className: 'tuo-nav' + (scrolled ? ' scrolled' : '') },
    React.createElement('div', { className: 'nav-inner' },
      React.createElement('a', { href: '#', className: 'nav-logo' },
        // X8 · T + Growth · Dark — placeholder until final SVG from Cloud Design lands
        React.createElement('svg', { width: 36, height: 36, viewBox: '0 0 44 44', fill: 'none' },
          React.createElement('rect', { x: 1, y: 1, width: 42, height: 42, rx: 10, fill: '#171717', stroke: '#2e2e2e', strokeWidth: 1 }),
          React.createElement('path', { d: 'M13 14H31M22 14V24', stroke: '#fafafa', strokeWidth: 3, strokeLinecap: 'round' }),
          React.createElement('path', { d: 'M12 34L18 28L24 31L32 22', stroke: '#3ecf8e', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' })
        ),
        // Wordmark: single span so "tuo" and ".app" are not separated by the flex gap.
        React.createElement('span', { className: 'nav-logo-word' },
          'tuo',
          React.createElement('span', { className: 'nav-logo-tld' }, '.app')
        )
      ),
      React.createElement('div', { className: 'nav-links' + (mobileOpen ? ' open' : '') },
        links.map(([href, label]) => {
          const sectionId = href.replace('#', '');
          const isActive = activeSection === sectionId;
          return React.createElement('a', {
            key: href, href, onClick: () => setMobileOpen(false),
            className: isActive ? 'nav-link-active' : ''
          },
            label,
            isActive && fm && React.createElement(fm.div, {
              layoutId: 'nav-dot', className: 'nav-active-dot',
              transition: { type: 'spring', stiffness: 300, damping: 30 }
            })
          );
        }),
        // Language toggle with spring
        React.createElement('div', { className: 'lang-toggle-wrap' },
          React.createElement('button', {
            className: 'lang-btn' + (lang === 'en' ? ' active' : ''),
            onClick: () => setLang('en')
          }, 'EN'),
          React.createElement('button', {
            className: 'lang-btn' + (lang === 'es' ? ' active' : ''),
            onClick: () => setLang('es')
          }, 'ES'),
          fm && React.createElement(fm.div, {
            className: 'lang-toggle-bg',
            layoutId: 'lang-bg',
            transition: { type: 'spring', stiffness: 400, damping: 30 },
            style: { position: 'absolute', left: lang === 'en' ? 0 : '50%', width: '50%', height: '100%', background: '#3ecf8e', borderRadius: 4, zIndex: 0 }
          })
        ),
        React.createElement(PillBtn, { href: 'https://app.tuo.app', variant: 'primary', comingSoon: true, style: { padding: '7px 20px', fontSize: 13 } },
          en ? 'Launch app' : 'Abrir app'),
      ),
      React.createElement('button', { className: 'nav-hamburger', onClick: () => setMobileOpen(!mobileOpen) },
        React.createElement('span'), React.createElement('span'), React.createElement('span'))
    )
  );
}

function AmbientBg() {
  return React.createElement('div', { className: 'ambient-bg', 'aria-hidden': true },
    React.createElement('svg', { className: 'ambient-noise', xmlns: 'http://www.w3.org/2000/svg' },
      React.createElement('filter', { id: 'noise' },
        React.createElement('feTurbulence', { baseFrequency: 0.9, numOctaves: 2, stitchTiles: 'stitch' }),
        React.createElement('feColorMatrix', { values: '0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0' })
      ),
      React.createElement('rect', { width: '100%', height: '100%', filter: 'url(#noise)' })
    ),
    React.createElement('div', { className: 'ambient-blob-1' }),
    React.createElement('div', { className: 'ambient-blob-2' }),
    React.createElement('div', { className: 'ambient-vignette' })
  );
}

function TuoApp() {
  const [lang, setLang] = useState('en');

  // Persist lang
  useEffect(() => {
    const saved = localStorage.getItem('tuo-lang');
    if (saved === 'es' || saved === 'en') setLang(saved);
  }, []);
  useEffect(() => { localStorage.setItem('tuo-lang', lang); }, [lang]);

  // Card hover spotlight tracking
  useEffect(() => {
    const handler = (e) => {
      const card = e.currentTarget;
      const rect = card.getBoundingClientRect();
      card.style.setProperty('--mx', `${e.clientX - rect.left}px`);
      card.style.setProperty('--my', `${e.clientY - rect.top}px`);
    };
    const attach = () => {
      document.querySelectorAll('.product-card, .stat-tile, .step-card, .pillar-card, .partner-card, .concept-card').forEach(card => {
        card.removeEventListener('mousemove', handler);
        card.addEventListener('mousemove', handler);
      });
    };
    const t = setTimeout(attach, 1500);
    return () => clearTimeout(t);
  }, [lang]);

  // Section in-view observer
  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(e => {
        e.target.classList.toggle('in-view', e.isIntersecting);
      });
    }, { rootMargin: '-20% 0px -20% 0px' });
    const t = setTimeout(() => {
      document.querySelectorAll('.tuo-section').forEach(s => observer.observe(s));
    }, 500);
    return () => { clearTimeout(t); observer.disconnect(); };
  }, []);

  return React.createElement(LangContext.Provider, { value: lang },
    React.createElement('div', { className: 'tuo-app' },
      React.createElement(AmbientBg),
      React.createElement(TuoNav, { lang, setLang }),
      React.createElement(HeroSection),
      React.createElement(ConceptSection),
      React.createElement(DirectionalFrameSection),
      React.createElement(PerformanceSection),
      React.createElement(Dashboard),
      React.createElement(HowItWorksSection),
      React.createElement(ValidationSection),
      React.createElement(PartnersSection),
      React.createElement(CapacitySection),
      React.createElement(FAQSection),
      React.createElement(FooterSection)
    )
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(TuoApp));