/* ═══════════════════════════════════════════
   Rta Labs — App Shell
   Assembly, scroll observer, routing
   ═══════════════════════════════════════════ */

function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [activeSection, setActiveSection] = React.useState('');
  const [theme, setTheme] = React.useState(() => localStorage.getItem('rta-theme') || 'light');

  // Scroll listener for nav background
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Theme management
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('rta-theme', theme);
  }, [theme]);

  const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');

  // Intersection Observer for scroll reveals
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  // Active section tracking
  React.useEffect(() => {
    const sectionIds = ['platform', 'agents', 'capabilities', 'principles', 'contact'];
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.2, rootMargin: '-64px 0px -40% 0px' }
    );
    sectionIds.forEach(id => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  const handleNavClick = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <React.Fragment>
      <Nav scrolled={scrolled} activeSection={activeSection} onNavClick={handleNavClick} theme={theme} onToggleTheme={toggleTheme} />
      <Hero />
      <hr className="section-divider" />
      <Platform />
      <Agents />
      <hr className="section-divider" />
      <Capabilities />
      <Principle />
      <hr className="section-divider" />
      <India />
      <hr className="section-divider" />
      <Blog />
      <hr className="section-divider" />
      <section className="section" id="contact">
        <div className="container">
          <div data-animate>
            <div className="label">Contact</div>
            <h2 className="section-head">Start a conversation</h2>
          </div>
          <div className="contact-grid">
            <div className="contact-info" data-animate data-delay="1">
              <h3>Let's discuss your security environment.</h3>
              <p>
                We work with organizations securing complex applications,
                infrastructure, and digital ecosystems. Tell us about your
                environment and we'll explore how Rta Labs can help.
              </p>
              <div className="contact-info-meta">
                <span>Enterprise &amp; Regulated Industries</span>
                <span>AI-Assisted Security Workflows</span>
                <span>Continuous Assessment &amp; Validation</span>
              </div>
            </div>
            <div data-animate data-delay="2">
              <ContactForm theme={theme} />
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </React.Fragment>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);