"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Award, Globe, Headphones, Layout, MessageCircle, Palette, Search, Server, Shield, ShieldCheck, Smartphone, Star, Target, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="medium"
        background="aurora"
        cardStyle="glass-depth"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Professional Presence"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "plain",
      }}
      title="Your Professional Presence Starts Here"
      description="Create lasting impressions with a modern, high-performing website. Connect with your audience and grow your business today."
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/empowered-business-people-discussing_23-2149333008.jpg"
      imageAlt="Professional business environment"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg",
          alt: "Portrait of cheerful teenage girl sitting in cafe",
        },
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg",
          alt: "Beautiful young businesswoman smiling at camera",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
          alt: "Business Lady Looking at Copyspace With Interest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          alt: "Close up portrait of young handsome successful man",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg",
          alt: "Portrait of brutal bearded macho male dressed in a suit over dark grey background.",
        },
      ]}
      avatarText="Trusted by 500+ professionals worldwide"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Responsive Design",
          icon: Smartphone,
        },
        {
          type: "text-icon",
          text: "SEO Optimized",
          icon: Search,
        },
        {
          type: "text-icon",
          text: "High Performance",
          icon: Zap,
        },
        {
          type: "text-icon",
          text: "Secure Hosting",
          icon: ShieldCheck,
        },
        {
          type: "text-icon",
          text: "24/7 Support",
          icon: Headphones,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Elevating Your Business Standards"
      metrics={[
        {
          icon: Users,
          label: "Clients Helped",
          value: "500+",
        },
        {
          icon: Award,
          label: "Years Experience",
          value: "10+",
        },
        {
          icon: TrendingUp,
          label: "Growth Rate",
          value: "150%",
        },
        {
          icon: Globe,
          label: "Global Reach",
          value: "20+",
        },
        {
          icon: Target,
          label: "Success Rate",
          value: "99%",
        },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Rapid Performance",
          description: "Blazing fast load times to keep users engaged and decrease bounce rates effectively.",
          items: [
            {
              icon: Zap,
              text: "Optimized Code",
            },
            {
              icon: Cpu,
              text: "Fast Rendering",
            },
          ],
          media: {
            imageSrc: "http://img.b2bpic.net/free-psd/novacore-studio-business-card-design-template-template_23-2152009505.jpg",
            imageAlt: "minimal corporate logo design black",
          },
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/empowered-business-people-discussing_23-2149333008.jpg",
          imageAlt: "minimal corporate logo design black",
        },
        {
          title: "Modern UI/UX",
          description: "Visually appealing interfaces tailored to your brand to ensure a premium user experience every time.",
          items: [
            {
              icon: Palette,
              text: "Custom Design",
            },
            {
              icon: Layout,
              text: "Responsive Layouts",
            },
          ],
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-notebook-with-drew-brand-logo-creative-design-ideas_53876-13985.jpg",
            imageAlt: "abstract company logo design minimal",
          },
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
          imageAlt: "minimal corporate logo design black",
        },
        {
          title: "Scalable Infrastructure",
          description: "Designed for growth, our infrastructure supports your evolving business needs without compromising performance.",
          items: [
            {
              icon: Server,
              text: "Cloud Ready",
            },
            {
              icon: Shield,
              text: "Secure Architecture",
            },
          ],
          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c5fxat",
            imageAlt: "modern letter mark logo minimalist",
          },
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg",
          imageAlt: "minimal corporate logo design black",
        },
      ]}
      title="Key Features for Success"
      description="Our solutions are designed to deliver tangible results, streamline workflows, and enhance your digital identity effortlessly."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Star,
          title: "Satisfaction",
          value: "99%",
        },
        {
          id: "m2",
          icon: MessageCircle,
          title: "Support",
          value: "24/7",
        },
        {
          id: "m3",
          icon: Target,
          title: "Retention",
          value: "95%",
        },
      ]}
      title="Data-Driven Success"
      description="Evidence that our strategies work for businesses of all sizes and industries."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          role: "CEO",
          testimonial: "Excellent service and results. Highly recommended!",
          imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
          imageAlt: "business portrait professional woman",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "CTO",
          testimonial: "Professional and efficient team. A great partnership.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg",
          imageAlt: "professional man headshot studio background",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Marketing Director",
          testimonial: "Transformed our digital presence completely. Thank you!",
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-sitting-couch-smiling_23-2148095698.jpg",
          imageAlt: "successful woman leader portrait business",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Product Manager",
          testimonial: "Exceeded all expectations with their design process.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-standing-with-crossed-arms-near-desktop-office-with-loft-interior_613910-18715.jpg",
          imageAlt: "mature business professional male headshot",
        },
        {
          id: "5",
          name: "Anna Smith",
          role: "Founder",
          testimonial: "Reliable support and top-tier design quality.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1626.jpg",
          imageAlt: "young woman professional smiling studio",
        },
      ]}
      title="Client Success Stories"
      description="Hear what our partners have to say about their journey with us."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "How do I start?",
          content: "Reach out through our contact form and we'll discuss your needs.",
        },
        {
          id: "f2",
          title: "What is the timeline?",
          content: "Most projects take 4-6 weeks depending on complexity.",
        },
        {
          id: "f3",
          title: "Do you provide support?",
          content: "Yes, we offer ongoing maintenance and support after launch.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Get clear answers to your most common questions about our services and process."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={false}
      names={[
        "TechCorp",
        "InnovateLab",
        "GrowthCo",
        "StartupXYZ",
        "GlobalNet",
        "CreativeAgency",
        "DataStream",
      ]}
      title="Trusted By Professionals"
      description="We are proud to work with leading businesses worldwide."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Ready to Start?"
      title="Connect With Us Today"
      description="Fill out the details below to schedule your consultation and take your professional presence to the next level."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/businesswoman-front-modern-building_23-2147707188.jpg"
      logoText="Professional Presence"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Consulting",
              href: "#",
            },
            {
              label: "Design",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Help Center",
              href: "#",
            },
            {
              label: "Privacy",
              href: "#",
            },
          ],
        },
      ]}
      imageAlt="modern office building cityscape sunset"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
