// ============================================================
// DEMIURGE — LANDING APP
// Composes all sections + nav + global decor.
// ============================================================

const LandingNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="lp-nav" style={scrolled ? { boxShadow: '0 8px 32px rgba(0,0,0,0.4)' } : undefined}>
      <div className="lp-nav-inner">
        <a href="#" className="lp-brand">
          <div className="lp-brand-mark">
            <svg viewBox="0 0 32 32" width="32" height="32">
              <defs>
                <radialGradient id="nav-orb" cx="35%" cy="35%">
                  <stop offset="0%" stopColor="#fff"/>
                  <stop offset="40%" stopColor="#c8a8ff"/>
                  <stop offset="100%" stopColor="#1e1455"/>
                </radialGradient>
                <linearGradient id="nav-ring" x1="0%" x2="100%">
                  <stop offset="0%" stopColor="#4be8ff"/>
                  <stop offset="100%" stopColor="#8b6bff"/>
                </linearGradient>
              </defs>
              <circle cx="16" cy="16" r="11" fill="url(#nav-orb)"/>
              <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="url(#nav-ring)" strokeWidth="1" transform="rotate(-22 16 16)"/>
              <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="rgba(232,201,138,0.4)" strokeWidth="0.5" transform="rotate(22 16 16)"/>
            </svg>
          </div>
          <span className="lp-brand-name">Demiurge</span>
          <span className="lp-brand-sys">/ Systems</span>
        </a>
        <div className="lp-nav-spacer"></div>
        <div className="lp-nav-links">
          <a href="#team">Operators</a>
          <a href="#live">Command</a>
          <a href="#industries">Industries</a>
          <a href="#proof">Case studies</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="lp-nav-status">Cohort 014 · Live</div>
        <a href="#pricing" className="lp-btn primary" style={{padding: '10px 18px', fontSize: 12.5}}>
          Deploy operators
        </a>
      </div>
    </nav>
  );
};

const App = () => (
  <React.Fragment>
    <div className="lp-starfield"></div>
    <div className="lp-vignette"></div>
    <div className="lp-scan"></div>
    <LandingNav/>
    <LandingHero/>
    <TrustSection/>
    <AgentSection/>
    <ChannelsSection/>
    <ProblemSection/>
    <LiveCommandCenter/>
    <IndustrySection/>
    <WorkflowSection/>
    <ComparisonSection/>
    <CaseStudySection/>
    <PricingSection/>
    <ContactSection/>
    <FinalCTA/>
    <Footer/>
  </React.Fragment>
);

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