"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Award, BarChart3, Code, Heart, HelpCircle, Lightbulb, Rocket, ShoppingCart, Star, TrendingUp, Zap, CheckCircle, ArrowRight } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SiteLabs"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "projects" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Start Project",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Build Your Digital Presence with SiteLabs"
          description="We transform businesses through custom web design and development. From concept to launch, we create websites that convert visitors into customers."
          background={{ variant: "gradient-bars" }}
          tag="Web Development Freelance"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Free Consultation", href: "#contact" },
            { text: "View Our Work", href: "#projects" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-modern-web-design-agency-workspace-wit-1773939611611-59c4a629.png"
          imageAlt="A modern web design agency workspace with developers and designers collaborating. Show multiple moni"
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About SiteLabs"
          description="We're a team of experienced web developers, designers, and strategists dedicated to helping businesses succeed online. With over a decade of combined expertise, we've partnered with startups, agencies, and enterprises to build websites that drive real results."
          tag="Our Story"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          buttons={[
            { text: "Learn Our Process", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-professional-team-photo-of-diverse-web-1773939611278-88e0dbd5.png"
          imageAlt="A professional team photo of diverse web developers and designers working together in a collaborativ"
          useInvertedBackground={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySix
          title="Services We Offer"
          description="Comprehensive web solutions tailored to your business needs and goals."
          tag="What We Do"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              title: "Custom Web Design",              description: "Beautiful, responsive websites designed specifically for your brand and audience. We create digital experiences that engage and convert.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-creative-web-designer-working-on-a-bea-1773939613944-9de54ff3.png",              imageAlt: "A creative web designer working on a beautiful responsive website mockup. Show a designer using desi",              buttonIcon: ArrowRight
            },
            {
              title: "Full-Stack Development",              description: "From frontend to backend, we build scalable web applications using modern technologies and best practices.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-full-stack-developer-coding-a-web-appl-1773939612320-40f2716f.png",              imageAlt: "A full-stack developer coding a web application with multiple programming languages visible on scree",              buttonIcon: Code
            },
            {
              title: "E-Commerce Solutions",              description: "Launch your online store with secure payment processing, inventory management, and seamless customer experiences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-professional-e-commerce-storefront-dis-1773939611825-d6bc8121.png",              imageAlt: "A professional e-commerce storefront displayed on an iPad and desktop screens showing a modern onlin",              buttonIcon: ShoppingCart
            },
            {
              title: "SEO & Performance",              description: "Optimize your site for search engines and speed. We ensure your website ranks well and loads fast for every visitor.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/an-seo-analytics-dashboard-showing-websi-1773939614243-8b9c1875.png",              imageAlt: "An SEO analytics dashboard showing website performance metrics, search rankings, traffic charts, and",              buttonIcon: TrendingUp
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View All Services", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardTwo
          title="Recent Projects"
          description="See how we've helped businesses like yours achieve their digital goals."
          tag="Case Studies"
          tagIcon={Award}
          tagAnimation="slide-up"
          products={[
            {
              id: "project-1",              brand: "Fashion Retailer",              name: "E-Commerce Platform Launch",              price: "250K+ Revenue",              rating: 5,
              reviewCount: "97% Customer Satisfaction",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-modern-fashion-e-commerce-website-show-1773939613383-94d084fd.png",              imageAlt: "A modern fashion e-commerce website showcasing beautiful product photography with a clean, minimalis"
            },
            {
              id: "project-2",              brand: "Tech Startup",              name: "SaaS Dashboard Redesign",              price: "3x User Growth",              rating: 5,
              reviewCount: "1000+ Active Users",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-sophisticated-saas-dashboard-interface-1773939612812-70a87ff5.png",              imageAlt: "A sophisticated SaaS dashboard interface showing data visualization, user analytics, and control pan"
            },
            {
              id: "project-3",              brand: "Local Services",              name: "Booking Platform Build",              price: "500+ Monthly Bookings",              rating: 5,
              reviewCount: "4.9/5 Stars",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-booking-and-scheduling-platform-interf-1773939612107-5392fa2f.png",              imageAlt: "A booking and scheduling platform interface showing calendar, appointment management, and reservatio"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[
            { text: "Explore More Work", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Impact by Numbers"
          description="Our track record of success, measured in real business outcomes."
          tag="Our Results"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "metric-1",              value: "150+",              title: "Projects Delivered",              description: "Successful launches across industries",              icon: CheckCircle
            },
            {
              id: "metric-2",              value: "92%",              title: "Client Retention",              description: "Clients who return for more work",              icon: Heart
            },
            {
              id: "metric-3",              value: "8+",              title: "Years Experience",              description: "Building web excellence since day one",              icon: Award
            },
            {
              id: "metric-4",              value: "$15M+",              title: "Client Revenue Impact",              description: "Direct revenue generated for clients",              icon: TrendingUp
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Clients Say"
          description="Real feedback from real businesses we've helped succeed."
          tag="Client Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Johnson",              role: "CEO",              company: "Fashion Forward Co.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939610802-96cd550e.png",              imageAlt: "Professional headshot photo of a confident female CEO in business attire, modern corporate environme"
            },
            {
              id: "testimonial-2",              name: "Michael Chen",              role: "Founder",              company: "TechStart Innovations",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939612524-817c1f46.png",              imageAlt: "Professional headshot photo of a confident Asian male founder in business casual attire, modern tech"
            },
            {
              id: "testimonial-3",              name: "Emily Rodriguez",              role: "Operations Manager",              company: "Local Services Plus",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939610496-317407a9.png",              imageAlt: "Professional headshot photo of a confident Latina woman in business attire, modern corporate office "
            },
            {
              id: "testimonial-4",              name: "David Kim",              role: "Marketing Director",              company: "GrowthCo Digital",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939610707-4ffd9bf9.png",              imageAlt: "Professional headshot photo of a confident Asian male marketing director in business attire, modern "
            },
            {
              id: "testimonial-5",              name: "Jessica Thompson",              role: "Founder",              company: "Creative Ventures LLC",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939611028-fdae70e9.png",              imageAlt: "Professional headshot photo of a confident blonde woman founder in creative business attire, modern "
            },
            {
              id: "testimonial-6",              name: "Robert Martinez",              role: "COO",              company: "Enterprise Solutions Inc.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/professional-headshot-photo-of-a-confide-1773939610995-ebd692a8.png",              imageAlt: "Professional headshot photo of a confident male executive in business suit, modern corporate environ"
            }
          ]}
          kpiItems={[
            { value: "4.9/5", label: "Average Rating" },
            { value: "98%", label: "Recommend Us" },
            { value: "150+", label: "Happy Clients" }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about working with SiteLabs."
          tag="Common Questions"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",              title: "What's your typical project timeline?",              content: "Most projects take 8-12 weeks from discovery to launch, depending on complexity. Simple sites can be completed in 4-6 weeks, while enterprise solutions may take 6+ months. We provide detailed timelines during the discovery phase."
            },
            {
              id: "faq-2",              title: "Do you provide ongoing support?",              content: "Yes! We offer maintenance, hosting, and support packages after launch. You can choose from our tiered support options or opt for project-based support as needed."
            },
            {
              id: "faq-3",              title: "What technologies do you use?",              content: "We work with modern, proven technologies including React, Next.js, Node.js, and various headless CMS platforms. The tech stack is tailored to your project requirements and goals."
            },
            {
              id: "faq-4",              title: "Can you help with existing websites?",              content: "Absolutely! We specialize in website redesigns, migrations, performance optimization, and adding new features. Many clients come to us to modernize outdated sites."
            },
            {
              id: "faq-5",              title: "How much does a website cost?",              content: "Pricing varies based on scope and complexity. Simple marketing sites start around $5K, while custom web applications can range from $25K-$150K+. We provide transparent quotes after understanding your needs."
            },
            {
              id: "faq-6",              title: "Do you guarantee results?",              content: "We guarantee quality code, responsive design, and SEO best practices. While we can't guarantee rankings or sales, our optimized sites consistently help clients see improved metrics and user engagement."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAkmRKoF0MQbpez1jW6bNrv1kZ/a-helpful-customer-support-illustration--1773939611745-b9f15980.png"
          imageAlt="A helpful customer support illustration showing a friendly support representative assisting a custom"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your digital presence? Let's talk about how SiteLabs can help your business grow online."
          animationType="background-highlight"
          buttons={[
            { text: "Schedule Consultation", href: "mailto:hello@sitelabs.com" },
            { text: "Send Us a Message", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SiteLabs"
          leftLink={{
            text: "Privacy Policy",            href: "#"
          }}
          rightLink={{
            text: "Contact",            href: "mailto:hello@sitelabs.com"
          }}
        />
      </div>
    </ThemeProvider>
  );
}
