import Navigation from "@/components/Navigation";
import Hero from "@/components/Hero";
import Services from "@/components/Services";
import About from "@/components/About";
import Contact from "@/components/Contact";
import Footer from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Mail } from "lucide-react";

const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      <Hero />
      <Services />
      <About />
      <Contact />
      
      {/* Subscribe Section */}
      <section className="py-24 bg-background dark-section">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-black/80 backdrop-blur-sm rounded-3xl p-12 border-2 border-primary/30 shadow-2xl">
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              <span className="text-glow">Subscribe</span>
            </h2>
            <p className="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
              Sign up with your email address to receive news and updates.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
              <Input 
                type="email" 
                placeholder="Email Address" 
                className="flex-1 h-12 bg-white/10 border-white/20 text-white placeholder:text-gray-300 focus:border-primary text-lg"
              />
              <Button className="btn-orange-glow h-12 px-8 text-lg">
                <Mail className="w-5 h-5 mr-2" />
                Sign Up
              </Button>
            </div>
          </div>
        </div>
      </section>
      
      <Footer />
    </div>
  );
};

export default Index;
