"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, Briefcase, DollarSign, Github, Heart, Instagram, Lightbulb, Linkedin, MessageCircle, Sparkles, TrendingUp, Twitter } 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
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Work", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="CreativeFlow"
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Elevate Your Brand with Creative Excellence"
          description="We craft digital experiences that captivate, convert, and create lasting impact for forward-thinking brands."
          background={{ variant: "aurora" }}
          kpis={[
            { value: "150+", label: "Projects Delivered" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "8x", label: "Average ROI Growth" }
          ]}
          enableKpiAnimation={true}
          tag="Award-Winning Agency"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg"
          imageAlt="Creative agency workspace with diverse team collaborating"
          imagePosition="right"
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "View Our Work", href: "testimonials" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Our Agency"
          tagIcon={Lightbulb}
          title="We transform ideas into digital masterpieces that drive growth and inspire action"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNineteen
          title="Our Creative Process"
          description="A proven methodology that combines strategic thinking with innovative design to deliver exceptional results."
          tag="How We Work"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              tag: "Discovery",              title: "Strategy & Research",              subtitle: "Understanding your vision",              description: "We dive deep into your business goals, market landscape, and audience insights. Through comprehensive research and discovery workshops, we uncover the strategic foundation for your success.",              imageSrc: "https://img.b2bpic.net/free-photo/worker-providing-live-chat-support-typing-keyboard-handling-clients-complaints-call-center-agent_482257-136069.jpg",              buttons: [{ text: "Explore Strategy", href: "#" }]
            },
            {
              id: 2,
              tag: "Creative",              title: "Design & Innovation",              subtitle: "Bringing concepts to life",              description: "Our creative team transforms insights into stunning visual designs. We craft user experiences that are beautiful, intuitive, and aligned with your brand identity.",              imageSrc: "https://img.b2bpic.net/free-vector/creative-process-design_1025-874.jpg",              buttons: [{ text: "See Our Designs", href: "#" }]
            },
            {
              id: 3,
              tag: "Development",              title: "Build & Optimize",              subtitle: "Engineering excellence",              description: "Our developers build scalable, performant solutions that bring designs to life. We focus on clean code, user experience optimization, and future-proof architecture.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg",              buttons: [{ text: "Tech Stack", href: "#" }]
            },
            {
              id: 4,
              tag: "Launch",              title: "Launch & Grow",              subtitle: "Momentum and success",              description: "We don't stop at launch. Our team ensures smooth deployment, monitors performance, and continuously optimizes for growth, analytics, and user engagement.",              imageSrc: "https://img.b2bpic.net/free-photo/that-s-how-success-looks-like-photo-young-team-classical-clothes-celebrating-success-while-holding-drinks-modern-good-lighted-office_146671-13657.jpg",              buttons: [{ text: "Success Stories", href: "testimonials" }]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact by Numbers"
          description="Measurable results that demonstrate our commitment to delivering value for every client."
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects",              description: "Delivered with excellence across diverse industries and markets",              icon: Briefcase
            },
            {
              id: "2",              value: "$50M+",              title: "Revenue Impact",              description: "Generated for our clients through digital transformation",              icon: DollarSign
            },
            {
              id: "3",              value: "12",              title: "Years",              description: "Of industry experience and continuous innovation",              icon: Award
            },
            {
              id: "4",              value: "98%",              title: "Satisfaction",              description: "Client retention and satisfaction rate year-over-year",              icon: Heart
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real stories from brands we've transformed through strategic design and digital innovation."
          tag="Client Success"
          tagIcon={MessageCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen, CEO of TechVenture",              date: "Date: 15 November 2024",              title: "Transformed our entire digital presence",              quote: "CreativeFlow took our vision and turned it into reality. The team's strategic approach combined with their creative excellence resulted in a 300% increase in our online engagement. They truly understand what it takes to build brands that matter.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Chen",              imageSrc: "https://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg",              imageAlt: "TechVenture website redesign showcase"
            },
            {
              id: "2",              name: "Marcus Rodriguez, Founder of DesignHub",              date: "Date: 08 November 2024",              title: "Exceeded every expectation",              quote: "Working with CreativeFlow was a game-changer. Their attention to detail, collaborative process, and innovative thinking elevated our brand beyond what we imagined. The results speak for themselves – our conversion rate improved by 250%.",              tag: "Startup",              avatarSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              avatarAlt: "Marcus Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/factory-experts-design-assembly-facility-production-lines-tablet-cad-program_482257-126119.jpg",              imageAlt: "DesignHub mobile app interface design"
            },
            {
              id: "3",              name: "Amelia Johnson, Marketing Director at BrandCo",              date: "Date: 01 November 2024",              title: "Partners, not just vendors",              quote: "CreativeFlow became an extension of our team. They brought fresh perspectives, challenged our assumptions in the best way, and delivered a brand identity that perfectly captures our essence. Highly recommended!",              tag: "Growth Stage",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              avatarAlt: "Amelia Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/group-people-working-website-template_53876-25068.jpg",              imageAlt: "BrandCo brand identity project"
            },
            {
              id: "4",              name: "David Liu, VP Product at InnovateLabs",              date: "Date: 25 October 2024",              title: "Creative excellence meets technical expertise",              quote: "We needed a partner who could bridge the gap between design and technology, and CreativeFlow delivered. Their cross-functional expertise ensured our product launch was flawless. The user experience improvements have been remarkable.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              avatarAlt: "David Liu",              imageSrc: "https://img.b2bpic.net/free-photo/tech-startup-founder-programming-ai-software-database_482257-90860.jpg",              imageAlt: "InnovateLabs product campaign design"
            }
          ]}
        />
      </div>

      <div id="advanced-features" data-section="advanced-features">
        <FeatureCardTen
          title="Comprehensive Services Built for Growth"
          description="From strategy to execution, we offer end-to-end digital solutions that drive measurable business results."
          tag="Our Expertise"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Brand Strategy & Positioning",              description: "We develop compelling brand narratives and positioning strategies that resonate with your target audience and differentiate you from competitors.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/worker-providing-live-chat-support-typing-keyboard-handling-clients-complaints-call-center-agent_482257-136069.jpg"
              },
              items: [
                { icon: TrendingUp, text: "Market research and competitive analysis" },
                { icon: Lightbulb, text: "Brand storytelling and messaging" },
                { icon: Sparkles, text: "Positioning frameworks and strategy" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Digital Design & UX/UI",              description: "Our design team creates beautiful, intuitive digital experiences that engage users and drive conversions. Every pixel serves a purpose.",              media: {
                imageSrc: "https://img.b2bpic.net/free-vector/creative-process-design_1025-874.jpg"
              },
              items: [
                { icon: Award, text: "Visual design systems and guidelines" },
                { icon: Heart, text: "User experience optimization" },
                { icon: Briefcase, text: "Responsive and accessible design" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Web & App Development",              description: "We build scalable, high-performance web and mobile applications using cutting-edge technologies and best practices in software engineering.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg"
              },
              items: [
                { icon: DollarSign, text: "Full-stack web development" },
                { icon: TrendingUp, text: "Security-first architecture" },
                { icon: Sparkles, text: "Performance optimization" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your brand and drive meaningful growth? Let's collaborate on something extraordinary."
          animationType="entrance-slide"
          background={{ variant: "aurora" }}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Schedule a Call", href: "#contact-form" },
            { text: "View Case Studies", href: "testimonials" }
          ]}
        />
      </div>

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