"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 ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { Sparkles, Target, Zap, TrendingUp, MessageCircle, Briefcase, Star, Users, Twitter, Linkedin, Github, Instagram } from 'lucide-react';

export default function HomePage() {
  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="Webild"
          navItems={[
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Work", id: "/testimonials" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Build Interactive Digital Experiences That Convert"
          description="We craft stunning websites, powerful software, and strategic marketing solutions that help your business stand out in the digital landscape."
          background={{ variant: "animated-grid" }}
          tag="Creative Web Agency"
          tagIcon={Sparkles}
          kpis={[
            { value: "150+", label: "Projects Delivered" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "12+", label: "Years Experience" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/young-happy-colleagues-sitting-office-coworking_171337-17717.jpg"
          imageAlt="Web agency team designing interactive experiences"
          imagePosition="right"
          buttons={[
            { text: "Start Your Project", href: "/contact" },
            { text: "View Our Work", href: "/testimonials" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Who We Are"
          tagIcon={Target}
          title="We believe great digital experiences drive real business results. Through innovative design, cutting-edge development, and strategic marketing, we transform ideas into powerful digital solutions."
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn Our Story", href: "/about" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardNineteen
          title="Our Process"
          description="We follow a proven methodology to deliver excellence at every stage of your project."
          tag="Strategic Approach"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Discovery",
              title: "Strategy & Planning",
              subtitle: "Understanding Your Vision",
              description: "We dive deep into your business goals, audience, and competitive landscape. Through collaborative workshops and research, we develop a comprehensive strategy that guides every decision.",
              imageSrc: "https://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg",
              imageAlt: "Strategic planning and analysis"
            },
            {
              id: 2,
              tag: "Design",
              title: "Creative Design",
              subtitle: "Visual Excellence",
              description: "Our design team creates stunning, user-centric designs that captivate your audience. We blend aesthetics with functionality, ensuring every pixel serves a purpose.",
              imageSrc: "https://img.b2bpic.net/free-vector/flat-ui-design-concept-with-different-screens-web-buttons-elements-mobile-application_1284-45197.jpg",
              imageAlt: "UI/UX design process"
            },
            {
              id: 3,
              tag: "Development",
              title: "Custom Development",
              subtitle: "Technical Precision",
              description: "We build scalable, high-performance solutions using the latest technologies. Our developers write clean, maintainable code that powers your digital success.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-colleagues-office-coworking_171337-17719.jpg",
              imageAlt: "Software development and coding"
            },
            {
              id: 4,
              tag: "Launch",
              title: "Testing & Launch",
              subtitle: "Quality Assurance",
              description: "Rigorous testing and optimization ensure your solution launches flawlessly. We handle deployment, monitoring, and ongoing support for seamless performance.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-creative-people-with-laptop-sketches-discussing-new-project-together-group-guys-gals-working-modern-cozy-office_574295-5904.jpg",
              imageAlt: "Product launch and deployment"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact & Growth"
          description="Measurable results that speak to our commitment to excellence."
          tag="Success Stories"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "150+",
              title: "Projects",
              description: "Successfully delivered across diverse industries",
              icon: Briefcase
            },
            {
              id: "2",
              value: "98%",
              title: "Satisfaction",
              description: "Client retention and recommendation rate",
              icon: Star
            },
            {
              id: "3",
              value: "$5M+",
              title: "Revenue Impact",
              description: "Generated for our clients through digital solutions",
              icon: TrendingUp
            },
            {
              id: "4",
              value: "50+",
              title: "Team Members",
              description: "Diverse talent across design, dev, and marketing",
              icon: Users
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real feedback from businesses we've partnered with to drive their success."
          tag="Client Testimonials"
          tagIcon={MessageCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen, CEO of TechVenture",
              date: "Date: 15 November 2024",
              title: "Transformed Our Digital Presence",
              quote: "Webild completely redesigned our web platform and the results were incredible. Our conversion rate increased by 45% within three months. The team's expertise in both design and development is unmatched.",
              tag: "SaaS Startup",
              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/group-business-executives-interacting-with-each-other_1170-760.jpg",
              imageAlt: "TechVenture office collaboration"
            },
            {
              id: "2",
              name: "Michael Rodriguez, Founder of CreativeFlow",
              date: "Date: 22 October 2024",
              title: "Partnership That Delivers Results",
              quote: "Working with Webild was a game-changer for our agency. They brought fresh perspectives to our brand and created a stunning interactive website that impresses every client. Highly recommended!",
              tag: "Design Agency",
              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: "Michael Rodriguez",
              imageSrc: "https://img.b2bpic.net/free-photo/tired-asian-it-specialist-drinking-coffee-watching-female-colleague-working-with-laptop-indoor-portrait-young-business-people-sitting-table-together-conference-hall_197531-3708.jpg",
              imageAlt: "CreativeFlow startup workspace"
            },
            {
              id: "3",
              name: "Emily Watson, Marketing Director at RetailMax",
              date: "Date: 8 September 2024",
              title: "Strategic Marketing Excellence",
              quote: "The combined approach of design, development, and marketing strategy from Webild elevated our e-commerce platform significantly. Our sales grew by 60% in the first six months post-launch.",
              tag: "E-commerce",
              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
              avatarAlt: "Emily Watson",
              imageSrc: "https://img.b2bpic.net/free-photo/worker-providing-live-chat-support-typing-keyboard-handling-clients-complaints-call-center-agent_482257-136069.jpg",
              imageAlt: "RetailMax meeting and planning"
            },
            {
              id: "4",
              name: "David Park, CTO of InnovateLab",
              date: "Date: 31 August 2024",
              title: "Technical Excellence & Innovation",
              quote: "The developers at Webild built a complex software solution that exceeded all our technical requirements. Their attention to detail and commitment to scalability is impressive. A true technology partner.",
              tag: "Tech Company",
              avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
              avatarAlt: "David Park",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-colleagues-office-coworking_171337-17719.jpg",
              imageAlt: "InnovateLab team collaboration"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your digital vision into reality? Let's collaborate and create something extraordinary together. Reach out today and discover how we can drive your business forward."
          animationType="entrance-slide"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Schedule a Call", href: "/contact" },
            { text: "Send a Message", href: "/contact" }
          ]}
        />
      </div>

      <FooterCard
        logoText="Webild"
        copyrightText="© 2025 Webild. All rights reserved. | Interactive Web Agency"
        socialLinks={[
          { icon: Twitter, href: "https://twitter.com/webild", ariaLabel: "Twitter" },
          { icon: Linkedin, href: "https://linkedin.com/company/webild", ariaLabel: "LinkedIn" },
          { icon: Github, href: "https://github.com/webild", ariaLabel: "GitHub" },
          { icon: Instagram, href: "https://instagram.com/webild", ariaLabel: "Instagram" }
        ]}
      />
    </ThemeProvider>
  );
}