"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 id="nav" data-section="nav">
        <nav className="w-full bg-background/80 backdrop-blur-sm border-b border-border">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between h-16">
              <div className="flex items-center">
                <span className="text-xl font-bold text-foreground">Ben</span>
              </div>
              <div className="flex items-center">
                <a href="#contact" className="bg-primary-cta text-primary-cta-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
                  Get in Touch
                </a>
              </div>
            </div>
          </div>
        </nav>
      </div>
      
      <div id="hero" data-section="hero">
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto text-center">
            <div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-6">
              <span>3D Creative</span>
            </div>
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6">
              3D Artist & Blender Specialist
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
              <a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
                View Portfolio
              </a>
              <a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
                Get Started
              </a>
            </div>
            <div className="grid grid-cols-3 gap-8 max-w-2xl mx-auto">
              <div className="text-center">
                <div className="text-2xl font-bold text-foreground">8+</div>
                <div className="text-sm text-muted-foreground">Years in 3D</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-foreground">150+</div>
                <div className="text-sm text-muted-foreground">Projects Completed</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-foreground">50+</div>
                <div className="text-sm text-muted-foreground">Happy Clients</div>
              </div>
            </div>
          </div>
        </section>
      </div>
      
      <div id="gallery" data-section="gallery">
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4">Featured Work</h2>
              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D character model" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Character Modeling</h3>
                  <p className="text-sm text-muted-foreground">
                    Advanced character sculpting and topology optimization using Blender. Includes rigging setup, UV unwrapping, and texture preparation for animation pipelines.
                  </p>
                </div>
              </div>
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="3D animation and effects" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Visual Effects</h3>
                  <p className="text-sm text-muted-foreground">
                    Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences.
                  </p>
                </div>
              </div>
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="3D product render" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Product Rendering</h3>
                  <p className="text-sm text-muted-foreground">
                    High-fidelity product visualization with photorealistic lighting and materials. Optimized for e-commerce and marketing presentations.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
      
      <div id="about" data-section="about">
        <section className="py-20 px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-5xl font-bold text-foreground mb-8">
              I bring imagination to life through cutting-edge 3D technology and creative storytelling
            </h2>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a href="#gallery" className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-md hover:opacity-90 transition-opacity">
                View All Work
              </a>
              <a href="#contact" className="border border-border text-foreground px-6 py-3 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors">
                Get Started
              </a>
            </div>
          </div>
        </section>
      </div>
      
      <div id="skills" data-section="skills">
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4">Core Competencies</h2>
              <p className="text-xl text-muted-foreground">
                Specialized expertise in 3D creation and digital art production
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg" alt="3D Modeling" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">3D Modeling</h3>
                  <p className="text-sm text-muted-foreground">
                    Advanced character and environment modeling using Blender and industry-standard techniques
                  </p>
                </div>
              </div>
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg" alt="Rendering & Shading" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Rendering & Shading</h3>
                  <p className="text-sm text-muted-foreground">
                    Photorealistic rendering with Cycles and specialized material development
                  </p>
                </div>
              </div>
              <div className="bg-card rounded-lg overflow-hidden border border-border">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg" alt="Animation" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-card-foreground mb-2">Animation</h3>
                  <p className="text-sm text-muted-foreground">
                    Smooth character rigging, motion capture, and keyframe animation
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
      
      <div id="contact" data-section="contact">
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent-foreground text-sm mb-4">
                  Get Started
                </div>
                <h2 className="text-3xl font-bold text-foreground mb-4">
                  Ready to bring your vision to life?
                </h2>
                <p className="text-lg text-muted-foreground mb-8">
                  Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work.
                </p>
                <div className="flex gap-4">
                  <input
                    type="email"
                    placeholder="your@email.com"
                    className="flex-1 px-4 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  />
                  <button className="bg-primary-cta text-primary-cta-foreground px-6 py-2 rounded-md hover:opacity-90 transition-opacity">
                    Subscribe
                  </button>
                </div>
                <p className="text-sm text-muted-foreground mt-4">
                  We respect your privacy. Unsubscribe anytime.
                </p>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg" alt="Contact section" className="w-full rounded-lg" />
              </div>
            </div>
          </div>
        </section>
      </div>
      
      <div id="footer" data-section="footer">
        <footer className="py-12 px-4 border-t border-border">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <div className="text-xl font-bold text-foreground mb-4">Ben</div>
              </div>
              <div>
                <h3 className="font-semibold text-foreground mb-3">Work</h3>
                <ul className="space-y-2">
                  <li><a href="#gallery" className="text-muted-foreground hover:text-foreground transition-colors">Portfolio</a></li>
                  <li><a href="#skills" className="text-muted-foreground hover:text-foreground transition-colors">Services</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold text-foreground mb-3">About</h3>
                <ul className="space-y-2">
                  <li><a href="#about" className="text-muted-foreground hover:text-foreground transition-colors">Bio</a></li>
                  <li><a href="#contact" className="text-muted-foreground hover:text-foreground transition-colors">Contact</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold text-foreground mb-3">Connect</h3>
                <ul className="space-y-2">
                  <li><a href="mailto:ben@example.com" className="text-muted-foreground hover:text-foreground transition-colors">Email</a></li>
                  <li><a href="#" className="text-muted-foreground hover:text-foreground transition-colors">ArtStation</a></li>
                </ul>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-border text-center text-muted-foreground">
              © 2025 Ben - 3D Artist & Blender Specialist
            </div>
          </div>
        </footer>
      </div>
    </ThemeProvider>
  );
}