"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";
import { TrendingUp, Users, Award, Globe, Sparkles, Zap, Quote } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Services", id: "services" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
    { name: "Insights", id: "blog" },
    { name: "Contact", id: "contact" },
  ];

  const navButton = {
    text: "View Our Work",    href: "portfolio"};

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Web Design", href: "/services" },
        { label: "Development", href: "/services" },
        { label: "UX/UI Strategy", href: "/services" },
        { label: "Brand & Identity", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Portfolio", href: "/portfolio" },
        { label: "Team", href: "/about" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Dribbble", href: "https://dribbble.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Apex Digital"
          navItems={navItems}
          button={navButton}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Digital experiences that drive growth"
          description="We design and build transformative websites for ambitious brands. From concept to launch, we create digital solutions that convert."
          tag="Digital Agency"
          tagIcon={Sparkles}
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "View Our Work", href: "/portfolio" },
            { text: "Start Your Project", href: "/contact" },
          ]}
          mediaItems={[
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-stunning-modern-website-interface-for--1772694295523-13a7fbee.png",              imageAlt: "Web design project showcase"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-digital-transformation-case-study-show-1772694295177-48e2d1a9.png",              imageAlt: "Digital transformation case study"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-modern-interface-design-showcasing-a-s-1772694295867-5aff3a0b.png",              imageAlt: "Modern interface design"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/an-e-commerce-platform-redesign-showcasi-1772694300636-98d5e7f2.png",              imageAlt: "E-commerce platform redesign"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-brand-identity-and-web-experience-port-1772694300059-d267fa1b.png",              imageAlt: "Brand identity and web experience"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/an-interactive-website-design-featuring--1772694294830-dca1b3c7.png",              imageAlt: "Interactive website design"},
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="We partner with ambitious brands to create digital experiences that inspire, engage, and convert. Since 2015, we've helped over 50+ companies transform their digital presence."
          useInvertedBackground={true}
          metricsAnimation="none"
          metrics={[
            { icon: TrendingUp, label: "Projects Delivered", value: "150+" },
            { icon: Users, label: "Partner Brands", value: "50+" },
            { icon: Award, label: "Design Awards Won", value: "12" },
            { icon: Globe, label: "Global Reach", value: "5 Continents" },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="We measure success by the impact we deliver for our partners. Our data-driven approach ensures every project exceeds expectations."
          tag="Impact & Results"
          useInvertedBackground={true}
          metricsAnimation="none"
          metrics={[
            {
              id: "1",              value: "98%",              description:
                "Average client satisfaction rate across all projects and engagements"},
            {
              id: "2",              value: "285%",              description:
                "Average conversion increase for e-commerce clients year-over-year"},
            {
              id: "3",              value: "89%",              description:
                "Client retention rate with long-term partnerships spanning multiple years"},
            {
              id: "4",              value: "42ms",              description: "Average page load time for optimized websites we develop"},
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Hear directly from brands and businesses that have partnered with us"
          tag="Client Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          speed={40}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "CEO, Luxe Brands Co.",              testimonial:
                "Apex transformed our digital presence completely. The attention to detail and strategic thinking was exceptional. Our conversion rates doubled within 6 months.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-a--1772694294531-9eabc594.png",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              name: "Michael Chen",              handle: "Founder, TechFlow AI",              testimonial:
                "Working with Apex was a game-changer for our SaaS product. They understood our vision and delivered a platform that our users absolutely love.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-a--1772694295746-8b0540e2.png",              imageAlt: "Michael Chen"},
            {
              id: "3",              name: "Emily Rodriguez",              handle: "CMO, Global Retail Inc.",              testimonial:
                "The team at Apex doesn't just build websites—they create strategic digital ecosystems. Our brand engagement increased by 340% after launch.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-a--1772694293255-aa94023a.png",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              name: "David Kim",              handle: "VP Product, FinanceHub",              testimonial:
                "Best decision we made was partnering with Apex. Their design-first approach and technical expertise resulted in a platform our customers couldn't be happier with.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-an-1772694295848-d787a7d5.png",              imageAlt: "David Kim"},
            {
              id: "5",              name: "Jessica Martinez",              handle: "Founder, Wellness Collective",              testimonial:
                "Apex didn't just meet our expectations—they exceeded them. The website they built is beautiful, performant, and perfectly captures our brand essence.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-a--1772694292929-03056872.png",              imageAlt: "Jessica Martinez"},
            {
              id: "6",              name: "James Wilson",              handle: "CEO, Innovation Labs",              testimonial:
                "From initial strategy to final launch, Apex was professional, innovative, and results-oriented. I'd recommend them to any ambitious brand looking for true digital transformation.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-headshot-photograph-of-a--1772694294186-9a9c5ee9.png",              imageAlt: "James Wilson"},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to transform your digital presence?"
          description="Let's discuss your project goals and explore how Apex Digital Partners can help you achieve digital excellence."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-team-collaboration-scene--1772694293642-0b465240.png"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Your email address"
          buttonText="Schedule a Call"
          termsText="We respect your privacy. We'll get back to you within 24 hours."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Apex Digital"
          copyrightText="© 2025 Apex Digital Partners. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}