"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Zap, Compass, Rocket } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="K&G Digital 360"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why K&G", id: "why-kg" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="K&G Digital 360"
          description="Creative Strategy. Digital Execution. 360° Growth."
          tag="Elite Digital Agency"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "downward-rays-animated" }}
          kpis={[
            { value: "500+", label: "Projects Delivered" },
            { value: "10x", label: "Average ROI Growth" },
            { value: "150+", label: "Happy Clients" }
          ]}
          enableKpiAnimation={true}
          buttons={[
            { text: "Book a Strategy Call", href: "#contact" },
            { text: "View Our Work", href: "#" }
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="Full-Spectrum Digital Domination"
          description="We deliver comprehensive creative and digital solutions that drive measurable results. From brand strategy to paid performance marketing, we handle every touchpoint with precision and creativity."
          tag="Our Services"
          tagIcon={Zap}
          tagAnimation="slide-up"
          accordionItems={[
            {
              id: "1",              title: "Branding & Creative Direction",              content: "We craft bold, distinctive brand identities that resonate with your audience and set you apart from competitors. From logo design to complete brand systems, we create cohesive visual narratives."
            },
            {
              id: "2",              title: "Social Media Strategy & Content",              content: "Our content strategies drive engagement and build loyal communities. We develop authentic narratives and create scroll-stopping content that converts followers into customers."
            },
            {
              id: "3",              title: "Paid Ads & Performance Marketing",              content: "Data-driven advertising that delivers ROI. We optimize every campaign across platforms to maximize conversions and scale your revenue with precision targeting and creative excellence."
            },
            {
              id: "4",              title: "Website Design & Funnel Optimization",              content: "High-converting websites built for results. We combine stunning design with conversion psychology to create digital experiences that turn visitors into paying customers."
            }
          ]}
          mediaAnimation="slide-up"
          useInvertedBackground={true}
          mediaPosition="left"
          imageSrc="http://img.b2bpic.net/free-photo/colors-noise-grainy-background-copy-space_272375-3054.jpg"
          imageAlt="Creative agency workspace"
        />
      </div>

      <div id="why-kg" data-section="why-kg">
        <TextSplitAbout
          title="Why Brands Choose K&G"
          description={[
            "Results-Driven Strategy: Every decision backed by data and market research. We don't do vanity metrics—we focus on what drives revenue and growth.",            "Creative That Converts: Bold, memorable design paired with conversion psychology. Your brand stands out, and your audience acts.",            "Data-Backed Decisions: Real-time analytics, A/B testing, and continuous optimization. We prove the impact of every dollar spent.",            "Easy, Transparent Communication: No jargon, no surprise invoices. You always know what you're paying for and why it matters."
          ]}
          buttons={[
            { text: "Start Your Project", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Clients Say"
          description="Hear from the brands we've helped achieve extraordinary growth."
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              title: "Transformed Our Brand Presence",              quote: "Working with K&G was a game-changer. They didn't just design a logo—they built our entire brand identity from the ground up. Within six months, our client acquisition cost dropped by 40% and our engagement rates tripled.",              name: "Sarah Mitchell",              role: "CEO",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg",              imageAlt: "Sarah Mitchell headshot"
            },
            {
              id: "2",              title: "ROI Beyond Expectations",              quote: "Their paid ads strategy was surgical. Every dollar we spent generated 8x return. They took our confused approach and turned it into a predictable, scalable revenue machine. Highly recommend.",              name: "Michael Chen",              role: "Founder",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Chen headshot"
            },
            {
              id: "3",              title: "Creative Excellence and Professionalism",              quote: "Happy client! Great service, easy to work with, end product was exactly what we wanted! Would recommend working with this company for your creative needs!",              name: "Meg Eskelson",              role: "Marketing Director",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-curly-businesswoman-standing-with-folded-hands-portrait-successful-confident-young-pretty-female-office-employer-suit-posing-work-business-company-management-concept_74855-6735.jpg",              imageAlt: "Meg Eskelson headshot"
            },
            {
              id: "4",              title: "A True Partner in Growth",              quote: "K&G didn't just take our brief—they challenged us to think bigger. Their strategic input was as valuable as their creative output. They're not vendors; they're partners.",              name: "David Kim",              role: "VP Product",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-businessman-wearing-suit-headshot-vertical-portrait-with-team_1163-3924.jpg",              imageAlt: "David Kim headshot"
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardTwo
          title="Our 360° Process"
          description="A structured approach to strategic excellence and creative execution."
          tag="Methodology"
          tagIcon={Compass}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "01",              description: "Discover: Deep dive into your market, audience, and competitive landscape to uncover opportunities."
            },
            {
              id: "2",              value: "02",              description: "Strategize: Craft a comprehensive roadmap aligned with your goals, defining messaging and positioning."
            },
            {
              id: "3",              value: "03",              description: "Create: Build stunning assets, campaigns, and experiences that capture attention and drive action."
            },
            {
              id: "4",              value: "04",              description: "Launch & Scale: Go live with momentum. Monitor, optimize, and scale what works with precision."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Elevate Your Brand?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Let's Build Something Powerful"
          description="Your brand deserves a partner who understands strategy, creativity, and results. Book a strategy call with our team and let's explore how we can drive your next growth phase."
          buttons={[
            { text: "Start Your Project", href: "#" },
            { text: "Schedule a Call", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="K&G Digital 360"
          copyrightText="© 2025 K&G Digital 360. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Branding", href: "#services" },
                { label: "Social Media", href: "#services" },
                { label: "Paid Ads", href: "#services" },
                { label: "Web Design", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#why-kg" },
                { label: "Process", href: "#process" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@kgdigital360.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}