// App — composes everything + nav + marquee
const Nav = () => (
  <header className="nav">
    <div className="container nav-inner">
      <a href="#" className="brand">
        <span className="brand-mark"></span>
        <span>pitchkit</span>
      </a>
      <nav className="nav-links">
        <a href="#problem">Problem</a>
        <a href="#how">How it works</a>
        <a href="#outputs">Outputs</a>
        <a href="#local">Open source</a>
        <a href="#demo">Demo</a>
      </nav>
      <a href="#install" className="nav-cta">
        <Icon.Github size={12} />
        GitHub
      </a>
    </div>
  </header>
);

const Marquee = () => {
  const items = ['Promo video', 'Pitch deck', 'Landing page', 'Local', 'Free', 'MIT'];
  // Repeat content for seamless loop
  const Row = () => (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="star">✱</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        <Row /><Row />
      </div>
    </div>
  );
};

const App = () => {
  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { rootMargin: '-10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Problem />
      <HowItWorks />
      <Outputs />
      <LocalFree />
      <Demo />
      <CTA />
      <Footer />
    </>
  );
};

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