"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div className="min-h-screen bg-background">
        {/* Hero Section */}
        <div id="hero" data-section="hero" className="relative py-20 px-4 md:px-6 bg-gradient-to-br from-background to-background-accent/10">
          <div className="mx-auto max-w-4xl text-center">
            <h1 className="text-5xl md:text-7xl font-bold mb-6 text-foreground">
              Drive Growth with
              <span className="bg-gradient-to-r from-primary-cta to-accent bg-clip-text text-transparent"> Strategic Marketing</span>
            </h1>
            <p className="text-xl md:text-2xl text-foreground/80 mb-8 max-w-3xl mx-auto">
              We help ambitious businesses scale through data-driven marketing strategies, creative campaigns, and performance optimization.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="primary-button px-8 py-4 text-lg font-semibold text-white rounded-lg">
                Start Your Growth Journey
              </button>
              <button className="secondary-button px-8 py-4 text-lg font-semibold text-foreground rounded-lg">
                View Our Work
              </button>
            </div>
          </div>
        </div>

        {/* Services Section */}
        <div id="services" data-section="services" className="py-20 px-4 md:px-6">
          <div className="mx-auto max-w-6xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-6xl font-bold mb-6 text-foreground">
                Our Services
              </h2>
              <p className="text-xl text-foreground/70 max-w-3xl mx-auto">
                Comprehensive marketing solutions tailored to your business goals
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="card p-8 rounded-lg">
                <div className="w-12 h-12 bg-primary-cta/10 rounded-lg flex items-center justify-center mb-6">
                  <div className="w-6 h-6 bg-primary-cta rounded-sm"></div>
                </div>
                <h3 className="text-2xl font-bold mb-4 text-foreground">Digital Strategy</h3>
                <p className="text-foreground/70">
                  Comprehensive digital marketing strategies that align with your business objectives and drive measurable results.
                </p>
              </div>
              
              <div className="card p-8 rounded-lg">
                <div className="w-12 h-12 bg-primary-cta/10 rounded-lg flex items-center justify-center mb-6">
                  <div className="w-6 h-6 bg-primary-cta rounded-sm"></div>
                </div>
                <h3 className="text-2xl font-bold mb-4 text-foreground">Brand Development</h3>
                <p className="text-foreground/70">
                  Build a powerful brand identity that resonates with your audience and sets you apart from competitors.
                </p>
              </div>
              
              <div className="card p-8 rounded-lg">
                <div className="w-12 h-12 bg-primary-cta/10 rounded-lg flex items-center justify-center mb-6">
                  <div className="w-6 h-6 bg-primary-cta rounded-sm"></div>
                </div>
                <h3 className="text-2xl font-bold mb-4 text-foreground">Performance Marketing</h3>
                <p className="text-foreground/70">
                  Data-driven campaigns optimized for maximum ROI across all digital channels and platforms.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* About Section */}
        <div id="about" data-section="about" className="py-20 px-4 md:px-6 bg-card/30">
          <div className="mx-auto max-w-6xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-4xl md:text-6xl font-bold mb-6 text-foreground">
                  Why Choose Us
                </h2>
                <p className="text-xl text-foreground/70 mb-8">
                  With over a decade of experience in digital marketing, we've helped hundreds of businesses achieve their growth goals through innovative strategies and proven methodologies.
                </p>
                <div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="w-6 h-6 bg-primary-cta rounded-full flex-shrink-0 mt-1"></div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-foreground">Data-Driven Approach</h3>
                      <p className="text-foreground/70">Every decision backed by comprehensive analytics and performance data.</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start gap-4">
                    <div className="w-6 h-6 bg-primary-cta rounded-full flex-shrink-0 mt-1"></div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-foreground">Proven Results</h3>
                      <p className="text-foreground/70">Track record of delivering measurable growth and ROI for our clients.</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start gap-4">
                    <div className="w-6 h-6 bg-primary-cta rounded-full flex-shrink-0 mt-1"></div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-foreground">Expert Team</h3>
                      <p className="text-foreground/70">Seasoned professionals with expertise across all marketing channels.</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="relative">
                <img 
                  src="/placeholders/placeholder1.webp" 
                  alt="Marketing team collaboration" 
                  className="w-full h-96 object-cover rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Contact Section */}
        <div id="contact" data-section="contact" className="py-20 px-4 md:px-6">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="text-4xl md:text-6xl font-bold mb-6 text-foreground">
              Ready to Grow?
            </h2>
            <p className="text-xl text-foreground/70 mb-12">
              Let's discuss how we can help accelerate your business growth with strategic marketing solutions.
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-12">
              <div className="text-left">
                <h3 className="text-2xl font-bold mb-4 text-foreground">Get in Touch</h3>
                <div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-primary-cta rounded-sm"></div>
                    <span className="text-foreground/80">hello@marketingagency.com</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-primary-cta rounded-sm"></div>
                    <span className="text-foreground/80">+1 (555) 123-4567</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-primary-cta rounded-sm"></div>
                    <span className="text-foreground/80">123 Marketing Street, Digital City</span>
                  </div>
                </div>
              </div>
              
              <div className="text-left">
                <form className="space-y-4">
                  <input 
                    type="text" 
                    placeholder="Your Name" 
                    className="w-full px-4 py-3 border border-accent rounded-lg bg-card focus:outline-none focus:border-primary-cta"
                  />
                  <input 
                    type="email" 
                    placeholder="Your Email" 
                    className="w-full px-4 py-3 border border-accent rounded-lg bg-card focus:outline-none focus:border-primary-cta"
                  />
                  <textarea 
                    placeholder="Tell us about your project" 
                    rows={4}
                    className="w-full px-4 py-3 border border-accent rounded-lg bg-card focus:outline-none focus:border-primary-cta resize-none"
                  ></textarea>
                  <button 
                    type="submit" 
                    className="w-full primary-button px-6 py-3 text-white rounded-lg font-semibold"
                  >
                    Send Message
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div id="footer" data-section="footer" className="py-12 px-4 md:px-6 bg-foreground text-background">
          <div className="mx-auto max-w-6xl">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
              <div>
                <h3 className="text-2xl font-bold mb-4">Marketing Agency</h3>
                <p className="text-background/70">
                  Driving growth through strategic marketing solutions.
                </p>
              </div>
              
              <div>
                <h4 className="text-lg font-semibold mb-4">Services</h4>
                <ul className="space-y-2 text-background/70">
                  <li>Digital Strategy</li>
                  <li>Brand Development</li>
                  <li>Performance Marketing</li>
                  <li>Content Creation</li>
                </ul>
              </div>
              
              <div>
                <h4 className="text-lg font-semibold mb-4">Contact</h4>
                <ul className="space-y-2 text-background/70">
                  <li>hello@marketingagency.com</li>
                  <li>+1 (555) 123-4567</li>
                  <li>123 Marketing Street</li>
                  <li>Digital City, DC 12345</li>
                </ul>
              </div>
            </div>
            
            <div className="border-t border-background/20 pt-8">
              <div className="flex flex-col md:flex-row justify-between items-center">
                <p className="text-background/70">
                  © 2024 Marketing Agency. All rights reserved.
                </p>
                <div className="flex gap-6 mt-4 md:mt-0">
                  <a href="#" className="text-background/70 hover:text-background">Privacy</a>
                  <a href="#" className="text-background/70 hover:text-background">Terms</a>
                  <a href="#" className="text-background/70 hover:text-background">Cookie Policy</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}