"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 FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
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 {
  Sparkles,
  Award,
  Zap,
  TrendingUp,
  MessageCircle,
  CheckCircle,
  Target,
  Lightbulb,
  Palette,
  Eye,
  Code,
  Shield,
  Briefcase,
  Star,
  Users,
  Twitter,
  Linkedin,
  Instagram,
  Github,
} from "lucide-react";

export default function LandingPage() {
  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: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Work", id: "metrics" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Get Started",            href: "#contact"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Transform Your Vision Into Stunning Digital Reality"
          description="We craft compelling digital experiences that captivate audiences and drive results. From strategy to launch, we bring creative excellence to every project."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "500+", label: "Projects Delivered" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "12yrs", label: "Industry Experience" },
          ]}
          enableKpiAnimation={true}
          tag="Creative Excellence"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "View Our Work", href: "#metrics" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/overhead-view-colorful-craft-supplies-potted-plant-wooden-table_23-2148050650.jpg"
          imageAlt="Creative agency dashboard interface"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Webild"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="We are a creative powerhouse dedicated to transforming innovative ideas into award-winning digital solutions that inspire and engage audiences worldwide"
          useInvertedBackground={false}
          buttons={[{ text: "Learn Our Story", href: "#services" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNineteen
          title="Our Creative Process"
          description="We follow a proven methodology that transforms your vision into exceptional digital experiences, ensuring every step delivers measurable results."
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              tag: "Discovery",              title: "Strategy & Discovery",              subtitle: "Understanding Your Vision",              description: "We dive deep into understanding your brand, audience, and business goals. Through collaborative workshops and research, we craft a strategic foundation that guides the entire project.",              imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-asking-question-meeting_482257-115048.jpg?_wi=1",              imageAlt: "Strategic planning session"},
            {
              id: 2,
              tag: "Design",              title: "Creative Design",              subtitle: "Crafting Visual Excellence",              description: "Our designers create stunning visual narratives that captivate and inspire. Every pixel is intentional, every interaction purposeful, delivering designs that stand out in a crowded digital landscape.",              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1671.jpg?_wi=1",              imageAlt: "Design mockup studio"},
            {
              id: 3,
              tag: "Development",              title: "Expert Development",              subtitle: "Building for Performance",              description: "Our engineers transform designs into high-performance digital products. With cutting-edge technology and best practices, we ensure seamless functionality, speed, and user experience across all devices.",              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-scrum-method_23-2148513832.jpg?_wi=1",              imageAlt: "Development coding environment"},
            {
              id: 4,
              tag: "Launch",              title: "Launch & Optimize",              subtitle: "Going Live with Impact",              description: "We meticulously prepare and launch your project with precision. Post-launch, we monitor performance, optimize results, and provide ongoing support to ensure continued success.",              imageSrc: "http://img.b2bpic.net/free-vector/startup-landing-page_23-2148103527.jpg",              imageAlt: "Project launch celebration"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "See Our Approach", href: "#metrics" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact By The Numbers"
          description="Proven results that showcase our commitment to excellence and client success"
          tag="Success Stories"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "500",              title: "Projects",              description: "Successfully delivered across diverse industries and markets",              icon: Briefcase,
            },
            {
              id: "2",              value: "98",              title: "% Satisfaction",              description: "Consistently high client satisfaction and project success rates",              icon: Star,
            },
            {
              id: "3",              value: "25",              title: "Awards Won",              description: "Industry recognition for creativity and innovation",              icon: Award,
            },
            {
              id: "4",              value: "150",              title: "Team Members",              description: "Talented professionals dedicated to your success",              icon: Users,
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Explore Case Studies", href: "#testimonials" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real feedback from organizations we've partnered with to achieve remarkable results"
          tag="Client Testimonials"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, CEO of TechVenture",              date: "Date: November 15, 2024",              title: "Exceeded Our Expectations Completely",              quote: "Working with Webild was transformative. Their team understood our vision instantly and delivered a website that not only looks stunning but has increased our conversions by 45%. Truly exceptional work.",              tag: "Tech Startup",              avatarSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",              avatarAlt: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg"},
            {
              id: "2",              name: "Michael Chen, Founder of DesignHub",              date: "Date: October 28, 2024",              title: "Best Creative Partnership We've Had",              quote: "The level of creativity and attention to detail was outstanding. Webild didn't just design a website; they crafted an experience. Our clients have loved it, and we've seen immediate results.",              tag: "Creative Agency",              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",              avatarAlt: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg"},
            {
              id: "3",              name: "Emily Rodriguez, Marketing Director of GrowthCo",              date: "Date: October 10, 2024",              title: "Professional and Incredibly Responsive",              quote: "From concept to launch, Webild demonstrated professionalism and creativity at every step. They listened to our needs, delivered on time, and the final product exceeded all our expectations. Highly recommended.",              tag: "E-Commerce",              avatarSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg",              avatarAlt: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg"},
            {
              id: "4",              name: "David Park, VP Product at InnovateLab",              date: "Date: September 20, 2024",              title: "Transformed Our Digital Presence",              quote: "We were struggling with our online presence until we partnered with Webild. Their strategic approach and innovative design completely transformed how we engage with customers. Thank you for the incredible work!",              tag: "SaaS Company",              avatarSrc: "http://img.b2bpic.net/free-photo/woman-with-crossed-arms_23-2147574179.jpg",              avatarAlt: "David Park",              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-crossed-arms_23-2147574179.jpg"},
            {
              id: "5",              name: "Jessica Liu, Founder of StyleLux Collective",              date: "Date: September 5, 2024",              title: "Creative Visionaries Who Deliver",              quote: "Webild's team brought our luxury brand vision to life beautifully. The attention to detail, understanding of our aesthetic, and technical excellence made this project a true success. We couldn't be happier.",              tag: "Luxury Brand",              avatarSrc: "http://img.b2bpic.net/free-photo/super-hero-businessman-red-cape-glasses-looking-front-smiling-broadly-happy-positive-standing-orange-wall_141793-53770.jpg",              avatarAlt: "Jessica Liu",              imageSrc: "http://img.b2bpic.net/free-photo/super-hero-businessman-red-cape-glasses-looking-front-smiling-broadly-happy-positive-standing-orange-wall_141793-53770.jpg"},
            {
              id: "6",              name: "Robert Thompson, CEO of CloudFirst Systems",              date: "Date: August 15, 2024",              title: "Exceptional Results and Support",              quote: "The team at Webild is exceptional. They delivered a sophisticated platform that perfectly represents our B2B services. Their post-launch support and optimization recommendations have been invaluable to our continued growth.",              tag: "B2B SaaS",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg",              avatarAlt: "Robert Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-equity-analyst-working-proprietary-firm-reading-annual-company-reports-evaluate_482257-132953.jpg"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Start Your Journey", href: "#contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTen
          title="Why Choose Webild"
          description="We combine strategic thinking, creative excellence, and technical expertise to deliver digital solutions that make a real difference."
          tag="Our Advantages"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",              title: "Strategic Innovation",              description: "We don't just follow trends—we set them. Our strategic approach ensures your digital presence is ahead of the curve and aligned with your business objectives.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-asking-question-meeting_482257-115048.jpg?_wi=2",                imageAlt: "Strategic planning session"},
              items: [
                { icon: Target, text: "Data-driven strategy" },
                { icon: Lightbulb, text: "Innovative thinking" },
                { icon: Zap, text: "Market-leading solutions" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Creative Excellence",              description: "Our award-winning creative team crafts stunning visual experiences that captivate audiences and communicate your brand's unique story with impact.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1671.jpg?_wi=2",                imageAlt: "Design mockup studio"},
              items: [
                { icon: Palette, text: "Award-winning design" },
                { icon: Eye, text: "User-centric approach" },
                { icon: Sparkles, text: "Visual storytelling" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Technical Mastery",              description: "We build scalable, secure, high-performance digital products using cutting-edge technology and industry best practices to ensure your success.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/colleagues-working-scrum-method_23-2148513832.jpg?_wi=2",                imageAlt: "Development coding environment"},
              items: [
                { icon: Code, text: "Modern tech stack" },
                { icon: Shield, text: "Security first" },
                { icon: Zap, text: "Lightning fast" },
              ],
              reverse: false,
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[{ text: "Discover Our Services", href: "#contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your vision into reality? Let's collaborate and create something extraordinary together. Get in touch with our team today."
          animationType="entrance-slide"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Schedule Consultation", href: "mailto:hello@webild.io" },
            { text: "View Case Studies", href: "#metrics" },
          ]}
        />
      </div>

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