"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Zap, Palette, CheckCircle, BarChart3 } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Create", href: "contact" }}
          brandName="aecreatives"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Creative Direction That Transforms Brands"
          description="We craft compelling brand narratives, stunning visual identities, and strategic content that captivates audiences and drives meaningful results. Minimal aesthetic, maximum impact."
          background={{ variant: "plain" }}
          tag="Creative Digital Marketing"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          kpis={[
            { value: "150+", label: "Brands Elevated" },
            { value: "6 Services", label: "Creative Solutions" },
            { value: "∞", label: "Creative Possibilities" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/a-striking-modern-creative-workspace-wit-1772561153352-43df6751.png"
          imageAlt="Creative workspace with artistic direction"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "View Our Work", href: "#metrics" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About aecreatives"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="We Don't Just Create—We Strategize, Design, and Execute with Artistic Excellence"
          description="aecreatives is a boutique digital marketing agency specializing in comprehensive creative solutions."
          subdescription="Founded on the principle that exceptional branding and content require both artistic vision and strategic thinking."
          icon={Palette}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/a-refined-portrait-or-lifestyle-image-of-1772561158073-5e068a36.png"
          imageAlt="Creative professional workspace"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          title="Our Creative Services"
          description="Each service is crafted to elevate your brand's presence and impact in the digital landscape. From content strategy to visual identity, we deliver excellence across all creative disciplines."
          tag="What We Do"
          tagIcon={Palette}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Content Marketing",              description: "Strategic storytelling through compelling blog posts, whitepapers, case studies, and multimedia content that builds authority and drives engagement.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/abstract-representation-of-content-creat-1772561153220-6a41a35f.png",              imageAlt: "Content marketing visualization",              buttons: [
                { text: "Learn More" }
              ]
            },
            {
              id: 2,
              title: "Brand Design",              description: "Complete brand identity systems including logo design, color palettes, typography guidelines, and comprehensive brand books that define your visual language.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/artistic-brand-identity-showcase-logo-co-1772561153521-3677d545.png",              imageAlt: "Brand design concept",              buttons: [
                { text: "Learn More" }
              ]
            },
            {
              id: 3,
              title: "Creatives & Visual Production",              description: "Eye-catching graphics, illustrations, animations, and video content designed to captivate audiences across all digital platforms.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/dynamic-creative-production-workspace-wi-1772561154132-728f707f.png",              imageAlt: "Creative production workspace",              buttons: [
                { text: "Learn More" }
              ]
            },
            {
              id: 4,
              title: "Personal Branding",              description: "Positioning executives, entrepreneurs, and thought leaders as influential voices through professional branding, LinkedIn optimization, and personal PR strategy.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-personal-branding-concept-p-1772561153916-d3118c38.png",              imageAlt: "Personal branding concept",              buttons: [
                { text: "Learn More" }
              ]
            },
            {
              id: 5,
              title: "Content Writing & Copywriting",              description: "Persuasive, SEO-optimized copy that tells your story, engages audiences, and converts readers into customers across all channels.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/sophisticated-writing-and-copywriting-sc-1772561154349-e877386e.png",              imageAlt: "Professional content writing",              buttons: [
                { text: "Learn More" }
              ]
            },
            {
              id: 6,
              title: "Content Management",              description: "Strategic planning, organization, and distribution of content across multiple platforms, ensuring consistent messaging and maximum reach.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/digital-content-management-system-visual-1772561154291-b4a13db6.png",              imageAlt: "Content management system",              buttons: [
                { text: "Learn More" }
              ]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Brands"
          description="Our creative solutions have transformed businesses across diverse industries, from startups to established enterprises."
          tag="Partner Brands"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-tech-sta-1772561152727-7141e3e2.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-an-e-comme-1772561154061-bf5cc971.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-digital--1772561154312-320346d7.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-creative-1772561153660-f018564c.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-consulti-1772561153672-7eb7ea3f.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-digital--1772561154247-3eabc570.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARgyQNjNMQG0binByPBNMu6Ku4/professional-company-logo-for-a-marketin-1772561153688-3bcfb581.png"
          ]}
          speed={40}
          showCard={true}
          names={[
            "TechFlow",            "Innovate Inc",            "CloudSync",            "Digital Labs",            "Creative Hub",            "Future Systems",            "Brand Dynamics"
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact by the Numbers"
          description="Measurable results that demonstrate the power of strategic creative direction."
          tag="Proven Results"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", value: "300%", description: "Average Engagement Increase" },
            { id: "2", value: "95%", description: "Client Satisfaction Rate" },
            { id: "3", value: "6+ Years", description: "Industry Excellence" },
            { id: "4", value: "∞", description: "Creative Solutions" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your brand with strategic creativity? Let's collaborate and create something extraordinary together."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Let's Talk", href: "#contact-form" },
            { text: "View Portfolio", href: "#metrics" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="aecreatives"
          columns={[
            {
              title: "Services",              items: [
                { label: "Content Marketing", href: "#services" },
                { label: "Brand Design", href: "#services" },
                { label: "Creatives & Production", href: "#services" },
                { label: "Personal Branding", href: "#services" }
              ]
            },
            {
              title: "Solutions",              items: [
                { label: "Content Writing", href: "#services" },
                { label: "Content Management", href: "#services" },
                { label: "Brand Strategy", href: "#about" },
                { label: "Digital Marketing", href: "#about" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Work", href: "#metrics" },
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@aecreatives.com" }
              ]
            }
          ]}
          copyrightText="© 2025 aecreatives. Crafted with artistic vision."
        />
      </div>
    </ThemeProvider>
  );
}