"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { TrendingUp, Users, Globe, Zap, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="plain"
      cardStyle="solid-accent-light"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Apex"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="APEX"
          description="Streamline your workflow with intelligent automation and seamless collaboration"
          buttons={[
            { text: "Start Free Trial", href: "contact" },
            { text: "View Demo", href: "features" }
          ]}
          slides={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774067-2ykbdnfh.jpg",
              imageAlt: "Apex dashboard interface"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400733690-y49703av.jpg",
              imageAlt: "Apex application technology"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg",
              imageAlt: "Apex team collaboration"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Trusted by thousands of teams worldwide who are transforming their productivity"
          metrics={[
            { icon: TrendingUp, label: "Productivity Increase", value: "320%" },
            { icon: Users, label: "Active Users", value: "50K+" },
            { icon: Globe, label: "Global Teams", value: "120+" },
            { icon: Zap, label: "Tasks Automated", value: "10M" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="How it Works"
          description="Follow our proven process to unlock your team's full potential"
          tag="Process"
          tagIcon={Sparkles}
          features={[
            {
              id: 1,
              title: "Research & Planning",
              description: "We analyze your workflow to identify bottlenecks and optimization opportunities",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890613975-qn26d6fo.jpg"
            },
            {
              id: 2,
              title: "Design & Integration",
              description: "Custom solutions designed to seamlessly fit into your existing ecosystem",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg"
            },
            {
              id: 3,
              title: "Development & Testing",
              description: "Rigorous testing ensures reliability and performance at every step",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767287743504-ozf8l6dr.jpg"
            },
            {
              id: 4,
              title: "Launch & Support",
              description: "Smooth deployment with ongoing support to ensure sustained success",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890617949-iq0qbvod.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Team"
          description="Talented individuals dedicated to your success"
          members={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "CEO & Co-founder",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              role: "CTO & Co-founder",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg"
            },
            {
              id: "3",
              name: "Elena Rodriguez",
              role: "Head of Design",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg"
            },
            {
              id: "4",
              name: "David Park",
              role: "Lead Engineer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399071735-aq7lptqc.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Loved by Teams"
          description="Real stories from companies transforming their operations with Apex"
          testimonials={[
            {
              id: "1",
              name: "Jessica Martinez",
              role: "Product Manager",
              company: "TechFlow Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg"
            },
            {
              id: "2",
              name: "Alex Thompson",
              role: "Operations Director",
              company: "StartupHub",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg"
            },
            {
              id: "3",
              name: "Priya Patel",
              role: "CTO",
              company: "Digital Solutions Ltd",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320184384-whnns6as.jpg"
            },
            {
              id: "4",
              name: "Michael Chang",
              role: "Founder",
              company: "Growth Labs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg"
            },
            {
              id: "5",
              name: "Emma Wilson",
              role: "VP Product",
              company: "CloudNext",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320185368-un006460.jpg"
            },
            {
              id: "6",
              name: "James Cooper",
              role: "CEO",
              company: "Innovate Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320178642-9c2nk7ji.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your team's productivity? Start your free trial today and see the difference Apex makes."
          animationType="background-highlight"
          buttons={[
            { text: "Get Started", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "about" },
                { label: "Team", href: "team" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Apex. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}