"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="plain"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div className="min-h-screen bg-background text-foreground">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4">Code with me</h1>
            <p className="text-xl text-muted-foreground mb-8">
              Learn Web Development & Programming from Industry Experts
            </p>
            <p className="text-lg mb-6">
              Join 2,500+ students learning coding from industry experts. Web development, React, Full Stack courses with 1-on-1 mentorship.
            </p>
            <div className="flex justify-center gap-4 mb-12">
              <a 
                href="#courses" 
                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
              >
                Browse Courses
              </a>
              <a 
                href="#contact" 
                className="px-6 py-3 border border-border rounded-lg hover:bg-accent transition-colors"
              >
                Schedule Demo
              </a>
            </div>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
            <div className="bg-card p-6 rounded-lg border border-border">
              <h3 className="text-xl font-semibold mb-3">Web Development Bootcamp</h3>
              <p className="text-muted-foreground mb-4">
                Start with HTML, CSS, and JavaScript. Build responsive websites and understand the fundamentals.
              </p>
              <p className="text-2xl font-bold text-primary">$299</p>
            </div>
            
            <div className="bg-card p-6 rounded-lg border border-border">
              <h3 className="text-xl font-semibold mb-3">React Mastery Course</h3>
              <p className="text-muted-foreground mb-4">
                Master React, Node.js, and databases. Build full-stack applications ready for production.
              </p>
              <p className="text-2xl font-bold text-primary">$249</p>
            </div>
            
            <div className="bg-card p-6 rounded-lg border border-border">
              <h3 className="text-xl font-semibold mb-3">Full Stack Development</h3>
              <p className="text-muted-foreground mb-4">
                Learn server-side programming, API development, and database architecture for scalable applications.
              </p>
              <p className="text-2xl font-bold text-primary">$399</p>
            </div>
          </div>
          
          <div className="mt-16 text-center">
            <h2 className="text-3xl font-bold mb-6">Simple, Transparent Pricing</h2>
            <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
              <div className="bg-card p-8 rounded-lg border border-border">
                <h3 className="text-xl font-semibold mb-2">Starter</h3>
                <p className="text-3xl font-bold mb-4">$49/month</p>
                <p className="text-muted-foreground mb-6">Perfect for beginners</p>
                <ul className="text-left space-y-2 mb-6">
                  <li>• Access to 3 core courses</li>
                  <li>• Community forum access</li>
                  <li>• Email support</li>
                  <li>• Certificate of completion</li>
                </ul>
                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                  Get Started
                </button>
              </div>
              
              <div className="bg-card p-8 rounded-lg border border-border">
                <h3 className="text-xl font-semibold mb-2">Professional</h3>
                <p className="text-3xl font-bold mb-4">$99/month</p>
                <p className="text-muted-foreground mb-6">Best for serious learners</p>
                <ul className="text-left space-y-2 mb-6">
                  <li>• Access to 15+ advanced courses</li>
                  <li>• 1-on-1 mentorship sessions</li>
                  <li>• Priority support</li>
                  <li>• Exclusive job board</li>
                  <li>• Portfolio review sessions</li>
                </ul>
                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                  Get Started
                </button>
              </div>
              
              <div className="bg-card p-8 rounded-lg border border-border">
                <h3 className="text-xl font-semibold mb-2">Enterprise</h3>
                <p className="text-3xl font-bold mb-4">Custom</p>
                <p className="text-muted-foreground mb-6">For teams and organizations</p>
                <ul className="text-left space-y-2 mb-6">
                  <li>• All Professional features</li>
                  <li>• Custom curriculum design</li>
                  <li>• Team management tools</li>
                  <li>• Dedicated account manager</li>
                  <li>• Advanced analytics and reporting</li>
                </ul>
                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                  Contact Sales
                </button>
              </div>
            </div>
          </div>
          
          <div id="contact" className="mt-16 text-center">
            <h2 className="text-3xl font-bold mb-6">Stay Updated on New Courses</h2>
            <p className="text-lg text-muted-foreground mb-8">
              Subscribe to get updates on new courses, exclusive tips, and special offers delivered to your inbox.
            </p>
            <div className="flex justify-center gap-4 max-w-md mx-auto">
              <input 
                type="email" 
                placeholder="your@email.com" 
                className="flex-1 px-4 py-3 border border-border rounded-lg bg-background"
              />
              <button className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                Subscribe
              </button>
            </div>
            <p className="text-sm text-muted-foreground mt-4">
              We respect your privacy. Unsubscribe anytime.
            </p>
          </div>
          
          <div className="mt-16 pt-8 border-t border-border text-center">
            <p className="text-muted-foreground">
              © 2025 Code with me. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}
