import React, { useState, useEffect, Suspense, lazy, memo } from 'react';
import { FloatingNav } from './components/FloatingNav';
import { Hero } from './components/Hero';

// Lazy load non-critical sections to speed up initial paint
const TheShift = lazy(() => import('./components/TheShift').then(m => ({ default: m.TheShift })));
const RevenueAddons = lazy(() => import('./components/RevenueAddons').then(m => ({ default: m.RevenueAddons })));
const Amplifier = lazy(() => import('./components/Amplifier').then(m => ({ default: m.Amplifier })));
const PartnershipTabs = lazy(() => import('./components/PartnershipTabs').then(m => ({ default: m.PartnershipTabs })));
const TechnicalPromise = lazy(() => import('./components/TechnicalPromise').then(m => ({ default: m.TechnicalPromise })));
const StrategyAudit = lazy(() => import('./components/StrategyAudit').then(m => ({ default: m.StrategyAudit })));

// Memoized wrapper for the Hero to prevent re-renders on scroll
const MemoHero = memo(Hero);

const App: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    let ticking = false;
    const handleScroll = () => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          const isScrolled = window.scrollY > 50;
          setScrolled(prev => prev !== isScrolled ? isScrolled : prev);
          ticking = false;
        });
        ticking = true;
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleScrollToId = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    e.preventDefault();
    const targetId = href.replace('#', '');
    const elem = document.getElementById(targetId);
    if (elem) {
      elem.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="min-h-screen bg-[#080808] text-[#E0E0E0] selection:bg-[#2631ff] selection:text-white">
      {/* Visual Depth Decor - Flat Gradients (GPU Efficient) */}
      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
        <div className="absolute top-0 -left-1/4 w-full h-full bg-gradient-to-br from-[#2631ff]/5 to-transparent opacity-30" />
        <div className="absolute bottom-0 -right-1/4 w-full h-full bg-gradient-to-tl from-emerald-500/5 to-transparent opacity-20" />
      </div>

      <FloatingNav isScrolled={scrolled} />

      <main className="relative z-10">
        <section id="hero">
          <MemoHero />
        </section>

        <Suspense fallback={<div className="h-96 flex items-center justify-center text-zinc-800 font-display font-bold">LOADING INFRASTRUCTURE...</div>}>
          <section id="shift" className="py-24 md:py-32 px-6 border-y border-white/5 bg-[#0a0a0a]">
            <TheShift />
          </section>

          <section id="services" className="py-24 md:py-32 px-6 bg-[#0a0a0a] border-y border-white/5">
            <RevenueAddons />
          </section>

          <section id="amplifier" className="py-24 md:py-32 px-6 bg-[#0a0a0a] border-y border-white/5">
            <Amplifier />
          </section>

          <section id="models" className="py-24 md:py-32 px-6 bg-[#0a0a0a] border-y border-white/5">
            <PartnershipTabs />
          </section>

          <section id="promise" className="py-24 md:py-32 px-6">
            <TechnicalPromise />
          </section>

          <section id="audit" className="py-24 md:py-32 px-6 bg-gradient-to-b from-[#0a0a0a] to-[#080808]">
            <StrategyAudit />
          </section>
        </Suspense>
      </main>

      <footer className="border-t border-white/5 py-12 bg-[#080808] text-zinc-600 text-sm">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-[#2631ff] rounded-full flex items-center justify-center font-bold text-[9px] text-white shadow-[#2631ff]/20 shadow-lg tracking-tighter">
              FPAI
            </div>
            <span className="font-display font-bold tracking-tighter text-lg text-white">FPAI SOLUTIONS</span>
          </div>
          <p className="font-medium">&copy; {new Date().getFullYear()} FPAI Solutions.</p>
          <div className="flex gap-8">
            <a href="#audit" onClick={(e) => handleScrollToId(e, '#audit')} className="hover:text-white transition-colors">Audit</a>
            <a href="#hero" onClick={(e) => handleScrollToId(e, '#hero')} className="hover:text-white transition-colors">Top</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;