"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award, BarChart3, Zap, TrendingUp, Users, Quote, CheckCircle, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Why Elevate", id: "why-elevate" },
            { name: "About", id: "about" }
          ]}
          brandName="Elevate Web"
          button={{ text: "Book Consultation", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Modern Websites That Turn Visitors Into Clients"
          description="Premium web design for ambitious businesses. We create high-converting, mobile-first websites that attract your ideal customers and drive real results."
          background={{ variant: "plain" }}
          kpis={[
            { value: "300%", label: "Avg. Conversion Increase" },
            { value: "98%", label: "Mobile Optimized" },
            { value: "2.5s", label: "Average Load Time" }
          ]}
          enableKpiAnimation={true}
          tag="Premium Web Design"
          tagIcon={Sparkles}
          buttons={[
            { text: "View Our Work", href: "#portfolio" },
            { text: "Schedule a Call", href: "#contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-vector/business-workshop-social-media-pack-landing-page_23-2149381280.jpg?_wi=1"
          imageAlt="Modern website design interface"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          features={[
            {
              id: 1,
              title: "Mobile-First Design",              description: "Every pixel optimized for mobile. Your visitors browse on phones—we ensure they have an exceptional experience that converts.",              imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-african-man-sitting-coworking_171337-13496.jpg",              imageAlt: "Responsive design across devices"
            },
            {
              id: 2,
              title: "Conversion-Focused Design",              description: "Strategic psychology meets beautiful design. Clear CTAs, compelling copy, and proven conversion patterns guide visitors toward taking action.",              imageSrc: "http://img.b2bpic.net/free-vector/creativity-process-landing-page-template_23-2148150852.jpg",              imageAlt: "Conversion optimization strategy"
            },
            {
              id: 3,
              title: "Performance & SEO",              description: "Lightning-fast load times and search-engine optimized architecture. Your customers will find you, and your site will perform beautifully.",              imageSrc: "http://img.b2bpic.net/free-photo/keyword-seo-content-website-tags-search_53876-138495.jpg",              imageAlt: "SEO and performance metrics"
            }
          ]}
          title="Our Services"
          description="Premium web design built for results. Every project combines aesthetic excellence with strategic conversion optimization."
          tag="What We Deliver"
          tagIcon={Award}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <MetricCardThree
          metrics={[
            { id: "1", icon: Users, title: "Gym & Fitness Clients", value: "45+" },
            { id: "2", icon: TrendingUp, title: "Tennis Academy Projects", value: "28+" },
            { id: "3", icon: Zap, title: "Personal Trainer Sites", value: "62+" },
            { id: "4", icon: Award, title: "Client Satisfaction", value: "99%" }
          ]}
          title="Portfolio Highlights"
          description="Real projects for real businesses. Gyms, tennis academies, personal trainers, and fitness professionals trust us with their online presence."
          tag="Featured Work"
          tagIcon={BarChart3}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-elevate" data-section="why-elevate">
        <MediaAbout
          title="Why Choose Elevate Web"
          description="We're not just designers—we're digital strategists obsessed with results. Founded by a Dutch student-athlete who understands the discipline required to succeed, we bring that same dedication to every project. We believe your website should work as hard as you do. Every design choice is purposeful. Every line of code is optimized. Every interaction is crafted to move visitors closer to becoming clients. We specialize in helping fitness professionals, gym owners, and sports enthusiasts build an online presence that genuinely converts."
          tag="Our Story"
          tagIcon={CheckCircle}
          buttons={[{ text: "Learn About Our Founder", href: "#about" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqXgsnzzGzY8t8KhASFkum85OC/uploaded-1773345682402-6uuhacve.jpg?_wi=2"
          imageAlt="Founder - Dutch student-athlete"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About the Founder"
          description="I'm a 20-year-old student-athlete from The Hague, Netherlands, currently studying in the United States. This unique perspective—balancing rigorous academics, competitive athletics, and entrepreneurial ambition—shapes everything we do. Growing up in the Netherlands taught me precision and attention to detail. Competing in the USA taught me that excellence requires relentless execution. Both experiences inform my approach to web design: meticulous planning combined with bold, results-driven execution. I founded Elevate Web because I saw too many amazing businesses—gyms, coaches, trainers—losing clients to outdated, underperforming websites. You deserve better. Your business deserves a digital presence that matches your professionalism and your passion."
          tag="Founder Story"
          tagIcon={Sparkles}
          buttons={[{ text: "Work With Us", href: "#contact" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqXgsnzzGzY8t8KhASFkum85OC/uploaded-1773345682402-6uuhacve.jpg?_wi=2"
          imageAlt="Founder portrait"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          testimonials={[
            {
              id: "1",              name: "Marcus Thompson",              handle: "@fitnesselite",              testimonial: "Elevate Web transformed our gym's online presence. Membership inquiries increased 340% in the first month. The design is beautiful and the results speak for themselves.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-fit-man-holding-dumbbells_23-2149517267.jpg",              imageAlt: "Marcus Thompson"
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@tennisacademy",              testimonial: "Professional, fast, and results-focused. They understood our market perfectly and built a website that actually converts parents into enrollments. Best investment we've made.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "James Rodriguez",              handle: "@coachrodriguez",              testimonial: "As a personal trainer, I wasn't technical. The team handled everything seamlessly. My online inquiries tripled. Worth every penny and then some.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/view-man-suit-soccer-field_23-2150888435.jpg",              imageAlt: "James Rodriguez"
            },
            {
              id: "4",              name: "Emma Williams",              handle: "@sportsclubmgr",              testimonial: "Finally, a website that represents our professional standards. The design is stunning and our booking inquiries have never been higher. Highly recommended.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-sports-man-happy-expression_1194-1587.jpg",              imageAlt: "Emma Williams"
            }
          ]}
          showRating={true}
          title="What Our Clients Say"
          description="Real results from real clients. Gyms, tennis academies, personal trainers, and fitness professionals trust us to deliver."
          tag="Client Testimonials"
          tagIcon={Quote}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your online presence? Let's talk about how we can help your business attract more clients and convert visitors into revenue. Book a free consultation today."
          animationType="reveal-blur"
          buttons={[
            { text: "Schedule Free Consultation", href: "https://calendly.com" },
            { text: "Send us an Email", href: "mailto:contact@elevateweb.com" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/business-workshop-social-media-pack-landing-page_23-2149381280.jpg?_wi=2"
          imageAlt="Elevate Web portfolio showcase"
          columns={[
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#services" },
                { label: "Mobile Optimization", href: "#services" },
                { label: "SEO & Performance", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Portfolio", href: "#portfolio" },
                { label: "Client Stories", href: "#testimonials" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          logoText="Elevate Web"
          copyrightText="© 2025 Elevate Web. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
