"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award, BarChart3, Briefcase, Check, Code, Gauge, Github, Heart, Instagram, Lightbulb, Linkedin, Lock, MessageSquare, Palette, Smartphone, Sparkles, Star, Target, TrendingUp, Trophy, Twitter, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Creative Co"
          navItems={[
            { name: "Work", id: "features" },
            { name: "About", id: "about" },
            { name: "Process", id: "feature" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Start Project", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="We Create Digital Experiences That Transform Businesses"
          description="Award-winning creative agency specializing in web design, development, and digital strategy for forward-thinking brands."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "500+", label: "Projects Delivered" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "12 Years", label: "Industry Excellence" },
          ]}
          enableKpiAnimation={true}
          tag="Creative Excellence"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Our Work", href: "#features" },
            { text: "Get In Touch", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
          imageAlt="Creative workspace and design studio"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Creative Co"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          title="We believe in the power of creative design to solve complex business challenges and inspire meaningful connections with audiences."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Story", href: "#" },
            { text: "Meet The Team", href: "#" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardNineteen
          features={[
            {
              id: 1,
              tag: "Discovery Phase",              title: "Strategy & Planning",              subtitle: "Understanding your vision",              description: "We dive deep into your business goals, target audience, and market landscape. Through workshops and research, we develop a comprehensive strategy that guides every creative decision.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-13583.jpg",              imageAlt: "Strategy and planning session"},
            {
              id: 2,
              tag: "Design Phase",              title: "Creative Design",              subtitle: "Bringing ideas to life",              description: "Our designers craft stunning visual concepts that capture your brand essence. From wireframes to high-fidelity mockups, every pixel is purposeful and strategic.",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements_23-2149061049.jpg?_wi=1",              imageAlt: "Digital design interface"},
            {
              id: 3,
              tag: "Development Phase",              title: "Web Development",              subtitle: "Building with precision",              description: "Our developers transform designs into fast, scalable, and secure digital products. Using cutting-edge technologies, we ensure your website performs flawlessly.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-display-software-developer-typing-database-functions-script-it-startup-agency-display-concept-programer-writing-source-code-scrolling-text-programming-language_482257-33542.jpg?_wi=1",              imageAlt: "Web development and coding"},
            {
              id: 4,
              tag: "Launch Phase",              title: "Launch & Optimize",              subtitle: "Growing your success",              description: "After launch, we monitor performance, gather insights, and continuously optimize. Your success is our ongoing commitment through analytics and strategic improvements.",              imageSrc: "http://img.b2bpic.net/free-vector/landing-page-concept-start-up_23-2148268941.jpg?_wi=1",              imageAlt: "Project launch and growth analytics"},
          ]}
          title="Our Creative Process"
          description="From initial concept to final launch, we follow a proven methodology that ensures exceptional results at every stage."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "500",              title: "Projects",              description: "Successfully completed and launched",              icon: Trophy,
            },
            {
              id: "2",              value: "98",              title: "Satisfaction",              description: "Client satisfaction rate",              icon: Heart,
            },
            {
              id: "3",              value: "42",              title: "Awards",              description: "Industry recognition and accolades",              icon: Star,
            },
            {
              id: "4",              value: "12",              title: "Years",              description: "Of creative excellence",              icon: Award,
            },
          ]}
          title="Our Impact By The Numbers"
          description="Proven results that showcase our commitment to excellence and innovation"
          gridVariant="bento-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Success"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, CEO of TechVenture",              date: "Date: 15 November 2024",              title: "Transformed our entire digital presence",              quote: "Creative Co completely reimagined our brand and website. The team's strategic approach and creative excellence delivered results beyond our expectations. Our conversion rates increased by 150% within the first quarter.",              tag: "Enterprise",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=1",              imageAlt: "TechVenture website redesign"},
            {
              id: "2",              name: "Marcus Chen, Founder of EcommercePro",              date: "Date: 08 October 2024",              title: "Exceptional design paired with flawless execution",              quote: "Working with Creative Co was a game-changer for our business. From concept to launch, they maintained perfect communication and delivered a platform that exceeded all our specifications. Highly recommended!",              tag: "E-Commerce",              avatarSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg",              avatarAlt: "Marcus Chen",              imageSrc: "http://img.b2bpic.net/free-vector/app-development-concept-with-flat-design_23-2147850229.jpg?_wi=1",              imageAlt: "EcommercePro mobile app interface"},
            {
              id: "3",              name: "Elena Rodriguez, Marketing Director at BrandLabs",              date: "Date: 22 September 2024",              title: "Creative expertise that drives real business value",              quote: "The Creative Co team brought fresh perspectives to our brand strategy. Their design-thinking approach combined with technical excellence created a digital ecosystem that truly resonates with our audience.",              tag: "Branding",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Elena Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg",              imageAlt: "BrandLabs brand identity project"},
            {
              id: "4",              name: "James Wilson, COO of FinanceFlow",              date: "Date: 30 August 2024",              title: "Professional, creative, and results-driven",              quote: "Creative Co demonstrated exceptional understanding of our financial services industry. They delivered a sophisticated, user-friendly platform that increased client engagement significantly. Their support post-launch has been outstanding.",              tag: "Financial Services",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-african-businessman-wearing-suit-headshot-vertical-portrait-with-team_1163-3924.jpg",              avatarAlt: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-vector/landing-page-template-second-hand-fashion-store_52683-109215.jpg",              imageAlt: "FinanceFlow web platform"},
            {
              id: "5",              name: "Amelia Park, CMO of GrowthHQ",              date: "Date: 15 July 2024",              title: "Strategic thinking meets creative brilliance",              quote: "Creative Co's holistic approach to web design and strategy helped us achieve our most successful product launch ever. The team's collaboration, creativity, and attention to detail are unmatched in the industry.",              tag: "SaaS",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Amelia Park",              imageSrc: "http://img.b2bpic.net/free-vector/app-development-concept-with-flat-design_23-2147850229.jpg?_wi=2",              imageAlt: "GrowthHQ SaaS product showcase"},
            {
              id: "6",              name: "David Thompson, CEO of CreativeStudio",              date: "Date: 02 June 2024",              title: "Partners in innovation and growth",              quote: "Partnering with Creative Co elevated our agency's capabilities significantly. Their innovative approach to web design and development helped us deliver premium solutions to our clients while strengthening our own brand.",              tag: "Agency",              avatarSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg",              avatarAlt: "David Thompson",              imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=2",              imageAlt: "CreativeStudio portfolio showcase"},
          ]}
          title="What Our Clients Say"
          description="Hear from leaders and innovators who've experienced our creative process firsthand"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Client Stories"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
        />
      </div>

      <div id="feature-detailed" data-section="feature-detailed">
        <FeatureCardTen
          features={[
            {
              id: "1",              title: "Strategic Web Design",              description: "We craft bespoke digital experiences that align with your brand values and business objectives. Every design decision is backed by research and strategic thinking.",              media: {
                imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements_23-2149061049.jpg?_wi=2",                imageAlt: "Strategic web design process"},
              items: [
                { icon: Palette, text: "Custom brand design systems" },
                { icon: Smartphone, text: "Responsive mobile-first design" },
                { icon: Zap, text: "High-performance optimization" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Full-Stack Development",              description: "From frontend to backend, we build scalable, secure, and maintainable web applications using the latest technologies and best practices.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-display-software-developer-typing-database-functions-script-it-startup-agency-display-concept-programer-writing-source-code-scrolling-text-programming-language_482257-33542.jpg?_wi=2",                imageAlt: "Full-stack development services"},
              items: [
                { icon: Code, text: "Modern framework expertise" },
                { icon: Lock, text: "Enterprise-grade security" },
                { icon: Gauge, text: "Blazing fast performance" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Growth & Analytics",              description: "We don't just build websites—we build revenue-generating machines. Continuous optimization and data-driven insights fuel sustainable growth.",              media: {
                imageSrc: "http://img.b2bpic.net/free-vector/landing-page-concept-start-up_23-2148268941.jpg?_wi=2",                imageAlt: "Analytics and growth optimization"},
              items: [
                { icon: TrendingUp, text: "Conversion rate optimization" },
                { icon: BarChart3, text: "Advanced analytics setup" },
                { icon: Target, text: "Continuous improvement cycles" },
              ],
              reverse: false,
            },
          ]}
          title="Services That Deliver Results"
          description="Comprehensive digital solutions designed to elevate your brand and accelerate business growth"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tag="Our Services"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your digital presence? Let's collaborate to create something extraordinary that drives real results for your business."
          animationType="entrance-slide"
          buttons={[
            { text: "Start Your Project", href: "#" },
            { text: "Schedule Consultation", href: "#" },
          ]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Creative Co"
          copyrightText="© 2025 Creative Co. All rights reserved. Crafting digital excellence since 2013."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
            { icon: Github, href: "https://github.com", ariaLabel: "View our GitHub" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
