"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, CheckCircle, Quote, Sparkles, TrendingUp, Users, Zap, MapPin } 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: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Results", id: "results" }
          ]}
          brandName="Hidde Digital"
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Modern Websites That Convert Visitors Into Clients"
          description="Hidde Digital creates high-performing, mobile-optimized websites specifically designed for gyms, sports clubs, coaches, and small businesses. Stop losing potential customers to an outdated online presence."
          background={{ variant: "plain" }}
          kpis={[
            { value: "300%", label: "Avg. Increase in Inquiries" },
            { value: "98%", label: "Mobile Optimized" },
            { value: "24h", label: "Quick Turnaround" }
          ]}
          enableKpiAnimation={true}
          tag="Web Design for Sports & Fitness"
          tagIcon={Zap}
          buttons={[
            { text: "View Our Work", href: "#work" },
            { text: "Book 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="about" data-section="about">
        <MediaAbout
          title="About Me"
          description="I'm a 20-year-old student-athlete from The Hague, Netherlands, currently studying in the United States. Combining athletic dedication with academic excellence and a passion for creating exceptional digital experiences. Your business deserves a professional online presence—we understand the unique needs of gyms, sports clubs, and small businesses. Our websites are built to convert—combining stunning design with strategic psychology to turn visitors into paying clients. Every element is crafted for results."
          tag="Why Hidde Digital"
          tagIcon={CheckCircle}
          buttons={[{ text: "Learn More", href: "#services" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqXgsnzzGzY8t8KhASFkum85OC/uploaded-1773345682402-6uuhacve.jpg"
          imageAlt="Profile picture - About me"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          features={[
            {
              id: 1,
              title: "Mobile-First Design",              description: "Every website we build is optimized for mobile from the ground up. Your customers browse on phones—we make sure they have an amazing experience.",              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 Optimized",              description: "Strategic button placement, compelling copy, and clear CTAs guide visitors toward taking action. We remove friction and maximize inquiries.",              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: "Fast-loading, search-engine friendly websites that rank well and load in seconds. Your potential customers will find you.",              imageSrc: "http://img.b2bpic.net/free-photo/keyword-seo-content-website-tags-search_53876-138495.jpg",              imageAlt: "SEO and performance metrics"
            }
          ]}
          title="What We Build"
          description="Every website is engineered for success. Clean code, premium design, and conversion-focused strategy."
          tag="Our Approach"
          tagIcon={Sparkles}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="results" data-section="results">
        <MetricCardThree
          metrics={[
            { id: "1", icon: Users, title: "Clients Served", value: "150+" },
            { id: "2", icon: TrendingUp, title: "Avg. Inquiry Growth", value: "250%" },
            { id: "3", icon: Zap, title: "Projects Completed", value: "120+" },
            { id: "4", icon: Award, title: "Client Satisfaction", value: "99%" }
          ]}
          title="Proven Results"
          description="Real numbers from real clients. Our websites deliver measurable impact."
          tag="Client Success"
          tagIcon={BarChart3}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          testimonials={[
            {
              id: "1",              name: "Marcus Thompson",              handle: "@fitnesselite",              testimonial: "Our membership inquiries increased by 300% in the first month. The website Hidde built is exactly what we needed to compete with bigger gyms.",              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-oriented. They understood our market and built a website that actually converts parents into enrollments. Worth every penny.",              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. Hidde handled everything and made it simple. My online client inquiries tripled. Highly recommended.",              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: "We finally have a website that represents our professional standards. The design is beautiful and booking inquiries have never been better.",              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="Success stories from gyms, sports clubs, coaches, and small businesses we've transformed."
          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 transform your business with a professional website? Let's talk about how we can help you attract more clients. Email: hiddewilt@gmail.com | Phone: +31622352601"
          animationType="reveal-blur"
          buttons={[
            { text: "Schedule a Free Consultation", href: "https://calendly.com" },
            { text: "Send us an Email", href: "mailto:hiddewilt@gmail.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="Hidde Digital portfolio showcase"
          columns={[
            {
              title: "Product",              items: [
                { label: "Web Design", href: "#services" },
                { label: "SEO Optimization", href: "#services" },
                { label: "Mobile Design", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Me", href: "#about" },
                { label: "Our Work", href: "#work" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          logoText="Hidde Digital"
          copyrightText="© 2025 Hidde Digital. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}