import React from 'react';
import { Navbar } from './components/Navbar';
import { Hero } from './components/Hero';
import { ProblemComparison } from './components/ProblemComparison';
import { Logic } from './components/Logic';
import { Features } from './components/Features';
import { AppShowcase } from './components/AppShowcase';
import { ChatDemo } from './components/ChatDemo';
import { Testimonials } from './components/Testimonials';
import { Audience } from './components/Audience';
import { Pricing } from './components/Pricing';
import { FAQ } from './components/FAQ';
import { Footer } from './components/Footer';

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-background text-white selection:bg-primary-500/30 font-sans relative overflow-x-hidden">
      <div className="bg-noise"></div>
      <Navbar />
      <main className="relative z-10 pb-24 md:pb-0">
        <Hero />
        <ProblemComparison />
        <AppShowcase />
        <Logic />
        <Features />
        <ChatDemo />
        <Testimonials />
        <Audience />
        <Pricing />
        <FAQ />
      </main>
      <Footer />
      
      {/* Mobile Sticky CTA */}
      <div className="fixed bottom-6 left-4 right-4 z-50 md:hidden">
         <button 
            onClick={() => {
               const el = document.getElementById('pricing');
               if(el) el.scrollIntoView({behavior: 'smooth'});
            }}
            className="w-full py-4 rounded-2xl bg-white text-black font-bold text-lg shadow-[0_0_30px_rgba(255,255,255,0.3)] animate-pulse-slow"
         >
            Build Your Plan
         </button>
      </div>
    </div>
  );
};

export default App;