/* global React, ReactDOM, Common, Motion,
   Nav, Hero, AppsMarquee, HowItWorks, TwoPassSection, VideoSection, SpeedSection, StylesSection,
   TraySection, SettingsSection, InvisibleSection, SetupSection, PrivacySection, PricingSection,
   ManifestoSection, RoadmapSection, FAQSection, FooterCTA, Footer */
const { useReveal } = Common;
const { ThemeProvider, CursorGlow } = Motion;

function AppInner() {
  useReveal();
  // Konami easter egg → "imbruttito mode"
  React.useEffect(() => {
    const seq = ["ArrowUp","ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b","a"];
    let i = 0;
    const handler = (e) => {
      if (e.key === seq[i]) {
        i++;
        if (i === seq.length) {
          document.body.style.transition = "filter 600ms";
          document.body.style.filter = "hue-rotate(15deg) saturate(1.3)";
          const t = document.createElement("div");
          t.textContent = "🇮🇹 imbruttito mode attivato. Oh ragazzi, eh.";
          t.style.cssText = "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#EF4444;color:white;padding:10px 18px;border-radius:99px;font:600 13px/1 -apple-system,system-ui;z-index:9999;box-shadow:0 10px 30px rgba(239,68,68,0.4);";
          document.body.appendChild(t);
          setTimeout(() => t.remove(), 3500);
          i = 0;
        }
      } else { i = e.key === seq[0] ? 1 : 0; }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg)", color: "var(--fg)", fontFamily: "var(--font-sans)", position: "relative" }}>
      <CursorGlow color="var(--cursor-glow, rgba(56,189,248,0.06))" size={220}/>
      <Nav/>
      <Hero/>
      <AppsMarquee/>
      <hr className="hr"/>
      <VideoSection/>
      <hr className="hr"/>
      <HowItWorks/>
      <hr className="hr"/>
      <TwoPassSection/>
      <hr className="hr"/>
      <SpeedSection/>
      <hr className="hr"/>
      <StylesSection/>
      <hr className="hr"/>
      <TraySection/>
      <hr className="hr"/>
      <InvisibleSection/>
      <hr className="hr"/>
      <SettingsSection/>
      <hr className="hr"/>
      <SetupSection/>
      <hr className="hr"/>
      <PrivacySection/>
      <hr className="hr"/>
      <PricingSection/>
      <hr className="hr"/>
      <ManifestoSection/>
      <hr className="hr"/>
      <RoadmapSection/>
      <hr className="hr"/>
      <FAQSection/>
      <FooterCTA/>
      <Footer/>
    </div>
  );
}

function App() {
  return <ThemeProvider><AppInner/></ThemeProvider>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);