"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 { Sparkles, Lightbulb, Zap, TrendingUp, Star, Layers, CheckCircle, Award, Calendar, Palette, Code, Smartphone, Brush, BookOpen, Search, BarChart3, ShoppingCart, CreditCard, Package, Shield, Settings, Wrench, RefreshCw, Eye, 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="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Process", id: "process" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Creative Design Solutions That Drive Results"
          description="We transform your vision into stunning digital experiences that captivate audiences and boost your business growth."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "150+", label: "Projects Completed" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "10x", label: "Average ROI Growth" }
          ]}
          enableKpiAnimation={true}
          tag="Award-Winning Agency"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "View Our Work", href: "#testimonials" },
            { text: "Start Your Project", href: "#contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-architecture-office-business-building-with-glass-window-shape_74190-9954.jpg?id=6899689"
          imageAlt="Web design showcase"
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Us"
          tagIcon={Lightbulb}
          tagAnimation="blur-reveal"
          title="We craft digital experiences that inspire, engage, and convert. With a team of talented designers and developers, we combine strategic thinking with creative excellence to deliver websites that exceed expectations."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More", href: "#process" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardNineteen
          title="Our Design Process"
          description="We follow a proven methodology to ensure every project delivers measurable results and exceeds your expectations."
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          features={[
            {
              id: 1,
              tag: "Discovery",              title: "Strategy & Research",              subtitle: "Understanding your vision and market",              description: "We dive deep into your business goals, target audience, and competitive landscape. Through comprehensive research and discovery workshops, we build the strategic foundation for your project.",              imageSrc: "https://img.b2bpic.net/free-photo/thoughtful-man-looking-through-glass-background-business-vision_53876-110816.jpg",              imageAlt: "Strategy and research phase"
            },
            {
              id: 2,
              tag: "Design",              title: "Creative Excellence",              subtitle: "Bringing ideas to visual reality",              description: "Our designers create stunning mockups and prototypes that not only look beautiful but also align with your strategic goals. We iterate based on your feedback to ensure perfection.",              imageSrc: "https://img.b2bpic.net/free-photo/analytics-comparison-information-networking-concept_53876-15846.jpg",              imageAlt: "Design creation phase"
            },
            {
              id: 3,
              tag: "Development",              title: "Technical Implementation",              subtitle: "Building robust and scalable solutions",              description: "Our developers transform designs into fully functional websites with clean code, optimal performance, and seamless user experiences across all devices.",              imageSrc: "https://img.b2bpic.net/free-photo/business-people-meeting_53876-20926.jpg",              imageAlt: "Development phase"
            },
            {
              id: 4,
              tag: "Launch",              title: "Optimization & Growth",              subtitle: "Ensuring success and continuous improvement",              description: "We launch your project with precision, monitor performance, and implement optimization strategies to maximize your return on investment and support your continued growth.",              imageSrc: "https://img.b2bpic.net/free-photo/male-female-colleagues-standing-by-glass-wall-with-business-charts-diagrams_1098-20211.jpg",              imageAlt: "Launch and optimization phase"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact by the Numbers"
          description="Real results that demonstrate our commitment to excellence and client success."
          tag="Results"
          tagIcon={TrendingUp}
          tagAnimation="blur-reveal"
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects",              description: "Successfully delivered across diverse industries",              icon: CheckCircle
            },
            {
              id: "2",              value: "98%",              title: "Satisfaction",              description: "Client satisfaction rate and retention",              icon: Award
            },
            {
              id: "3",              value: "12",              title: "Years",              description: "Of excellence in digital design",              icon: Calendar
            },
            {
              id: "4",              value: "10x",              title: "Average ROI",              description: "Return on investment for our clients",              icon: TrendingUp
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Hear from the brands and businesses we've partnered with to transform their digital presence."
          tag="Client Testimonials"
          tagIcon={Star}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, CEO of TechFlow",              date: "Date: 15 November 2024",              title: "Exceeded all our expectations!",              quote: "Webild transformed our online presence completely. The team understood our vision and delivered a website that not only looks stunning but has increased our conversion rates by 240%. Their attention to detail and client-focused approach is unmatched.",              tag: "Enterprise",              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/people-meeting-seminar-office-concept_53876-94.jpg",              imageAlt: "TechFlow team collaboration"
            },
            {
              id: "2",              name: "Marcus Rodriguez, Founder of GrowthCo",              date: "Date: 12 November 2024",              title: "Best investment we made for our brand",              quote: "Working with Webild was a game-changer for our startup. They didn't just build us a website; they built us a growth engine. The design is beautiful, the performance is exceptional, and our new customers consistently mention how impressed they are by our digital presence.",              tag: "Startup",              avatarSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",              avatarAlt: "Marcus Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/employees-discussing-project-strategies_482257-120275.jpg",              imageAlt: "GrowthCo success celebration"
            },
            {
              id: "3",              name: "Emily Chang, Marketing Director at BrandEssence",              date: "Date: 8 November 2024",              title: "Creative excellence and technical prowess",              quote: "Webild's team combines world-class design with technical expertise that's rare to find. They handled our complex requirements with ease and delivered on time. Our website now perfectly represents our premium brand positioning.",              tag: "Agency Partner",              avatarSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              avatarAlt: "Emily Chang",              imageSrc: "https://img.b2bpic.net/free-photo/relaxed-coworkers-office-having-fun-chatting-while-reviewing-documents_482257-126482.jpg",              imageAlt: "BrandEssence client presentation"
            },
            {
              id: "4",              name: "David Kim, CMO of RetailMax",              date: "Date: 2 November 2024",              title: "Measurable results and continued support",              quote: "What impressed us most was Webild's commitment to results. They didn't stop at launch; they provided ongoing optimization that improved our site performance by 300%. The team is responsive, professional, and genuinely invested in our success.",              tag: "E-commerce",              avatarSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              avatarAlt: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/group-business-workers-smiling-happy-confident-working-together-with-smile-face-young-beautiful-woman-standing-explaining-documents-office_839833-7615.jpg",              imageAlt: "RetailMax digital marketing analytics"
            },
            {
              id: "5",              name: "Jessica Thompson, Product Lead at FinanceHub",              date: "Date: 28 October 2024",              title: "Transformed our digital strategy",              quote: "Webild helped us completely reimagine our digital presence. The new website is not only visually stunning but provides an exceptional user experience. Their strategic approach ensured we achieved our business goals.",              tag: "FinTech",              avatarSrc: "https://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg",              avatarAlt: "Jessica Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/multiracial-group-people-discussing-business-office_1268-21455.jpg",              imageAlt: "FinanceHub website showcase"
            },
            {
              id: "6",              name: "Alexander Grant, Creative Director at StudioX",              date: "Date: 22 October 2024",              title: "Partners we truly trust",              quote: "As fellow creative professionals, we deeply respect Webild's work. They understand design, user experience, and business impact. Our collaboration produced something we're incredibly proud of.",              tag: "Creative Studio",              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: "Alexander Grant",              imageSrc: "https://img.b2bpic.net/free-photo/designers-showing-project-presentation-leader_74855-9780.jpg",              imageAlt: "StudioX brand development"
            }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTen
          title="Our Design Services"
          description="Comprehensive digital solutions tailored to your unique business needs and growth objectives."
          tag="Services"
          tagIcon={Layers}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "1",              title: "Web Design & Development",              description: "Custom-built websites that combine stunning aesthetics with powerful functionality. We create responsive, fast-loading sites that convert visitors into customers.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/analytics-comparison-information-networking-concept_53876-15846.jpg"
              },
              items: [
                { icon: Palette, text: "Creative UI/UX design" },
                { icon: Code, text: "Full-stack development" },
                { icon: Smartphone, text: "Mobile optimization" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Brand Identity & Strategy",              description: "We develop comprehensive branding strategies and visual identities that resonate with your target audience and differentiate you from competitors.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/thoughtful-man-looking-through-glass-background-business-vision_53876-110816.jpg"
              },
              items: [
                { icon: Lightbulb, text: "Brand strategy & positioning" },
                { icon: Brush, text: "Visual identity design" },
                { icon: BookOpen, text: "Brand guidelines" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Digital Marketing & SEO",              description: "Drive traffic and visibility with our comprehensive digital marketing strategies, including SEO optimization, content marketing, and performance analytics.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/business-people-meeting_53876-20926.jpg"
              },
              items: [
                { icon: Search, text: "SEO optimization" },
                { icon: BarChart3, text: "Performance analytics" },
                { icon: Zap, text: "Conversion optimization" }
              ],
              reverse: false
            },
            {
              id: "4",              title: "E-Commerce Solutions",              description: "Build powerful online stores that drive sales and customer loyalty. From platform selection to payment integration, we handle every detail.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/male-female-colleagues-standing-by-glass-wall-with-business-charts-diagrams_1098-20211.jpg"
              },
              items: [
                { icon: ShoppingCart, text: "Platform setup & design" },
                { icon: CreditCard, text: "Payment integration" },
                { icon: Package, text: "Inventory management" }
              ],
              reverse: true
            },
            {
              id: "5",              title: "Web App Development",              description: "Create sophisticated web applications with intuitive interfaces and robust backend systems that scale with your business.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/analytics-comparison-information-networking-concept_53876-15846.jpg"
              },
              items: [
                { icon: Zap, text: "Fast & scalable architecture" },
                { icon: Shield, text: "Security & data protection" },
                { icon: Settings, text: "Custom integrations" }
              ],
              reverse: false
            },
            {
              id: "6",              title: "Ongoing Support & Maintenance",              description: "Keep your digital assets running smoothly with our comprehensive support, updates, and optimization services.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/thoughtful-man-looking-through-glass-background-business-vision_53876-110816.jpg"
              },
              items: [
                { icon: Wrench, text: "Technical maintenance" },
                { icon: RefreshCw, text: "Regular updates" },
                { icon: Eye, text: "Performance monitoring" }
              ],
              reverse: true
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your digital presence? Let's create something amazing together. Our team is excited to discuss your project and bring your vision to life."
          animationType="entrance-slide"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Schedule a Consultation", href: "mailto:hello@webild.io" },
            { text: "View Our Portfolio", href: "#services" }
          ]}
        />
      </div>

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