"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, CheckCircle, Code, Eye, Github, Heart, Instagram, Linkedin, Lock, Palette, Sparkles, Star, Target, TrendingUp, Twitter, Users, 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="Webild Studio"
          navItems={[
            { name: "Work", id: "features" },
            { name: "Process", id: "feature" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Where Creative Vision Meets Strategic Excellence"
          description="We transform bold ideas into stunning digital experiences. Crafting websites, apps, and digital strategies that captivate, convert, and drive measurable growth for forward-thinking brands."
          background={{ variant: "aurora" }}
          kpis={[
            { value: "500+", label: "Projects Delivered" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "12y", label: "Industry Experience" }
          ]}
          enableKpiAnimation={true}
          tag="Creative Excellence"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Our Work", href: "#features" },
            { text: "Start Your Project", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359773.jpg"
          imageAlt="Creative agency portfolio dashboard"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Webild Studio"
          tagIcon={Users}
          tagAnimation="slide-up"
          title="We're a team of designers, strategists, and developers passionate about creating digital experiences that matter"
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More About Us", href: "#feature" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardNineteen
          title="Our Proven Process"
          description="From concept to launch, we follow a systematic approach that ensures exceptional results at every stage"
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Phase One",              title: "Strategy & Discovery",              subtitle: "Foundation for success",              description: "We dive deep into understanding your brand, target audience, and business goals. Through research, workshops, and competitive analysis, we craft a strategic roadmap that guides every decision.",              imageSrc: "http://img.b2bpic.net/free-photo/young-coworkers-sharing-concepts-together_329181-19755.jpg",              imageAlt: "Strategic planning session"
            },
            {
              id: 2,
              tag: "Phase Two",              title: "Design & Ideation",              subtitle: "Creative solutions",              description: "Our design team creates stunning visual concepts and interactive prototypes. We iterate based on your feedback, ensuring the final design perfectly aligns with your vision and user needs.",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg",              imageAlt: "Design execution in progress"
            },
            {
              id: 3,
              tag: "Phase Three",              title: "Development & Build",              subtitle: "Technical excellence",              description: "Our developers bring designs to life with clean, scalable code. We focus on performance, security, and user experience to create digital products that truly work.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-celebrating-his-success-after-presenting-project-proposal-his-multiethnic-partners_181624-33367.jpg",              imageAlt: "Product launch celebration"
            },
            {
              id: 4,
              tag: "Phase Four",              title: "Launch & Optimize",              subtitle: "Continuous improvement",              description: "We handle deployment, testing, and optimization. Post-launch, we monitor performance and refine based on analytics, ensuring your digital product stays ahead of the curve.",              imageSrc: "http://img.b2bpic.net/free-photo/shareholders-planning-factory-upgrades-using-cad-software-devices_482257-119594.jpg",              imageAlt: "Optimization and refinement work"
            }
          ]}
          buttons={[
            { text: "Start Your Journey", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Impact By The Numbers"
          description="Our proven track record speaks volumes about the value we deliver"
          tag="Our Achievements"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "500",              title: "Projects",              description: "Successfully delivered across diverse industries",              icon: CheckCircle
            },
            {
              id: "2",              value: "98",              title: "Satisfaction %",              description: "Client retention and satisfaction rate",              icon: Star
            },
            {
              id: "3",              value: "50M",              title: "Users Reached",              description: "Across all digital products we've created",              icon: Users
            },
            {
              id: "4",              value: "12",              title: "Years Experience",              description: "Industry leadership and expertise",              icon: Award
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View Case Studies", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Hear from brands and businesses we've had the privilege to work with"
          tag="Client Love"
          tagIcon={Heart}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, CEO of TechFlow",              date: "Date: March 15, 2024",              title: "Transformed Our Digital Presence",              quote: "Webild Studio completely reimagined our digital strategy. From concept to launch, they delivered a website that exceeded all our expectations and resulted in a 250% increase in qualified leads.",              tag: "SaaS Leader",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen, Founder of EcoHub",              date: "Date: February 28, 2024",              title: "Exceptional Strategic Thinking",              quote: "What impressed us most was their deep understanding of our market. They didn't just build what we asked for—they advised us on what would actually work. Truly a partnership approach.",              tag: "StartUp",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez, Marketing Director at Luxe Co",              date: "Date: February 10, 2024",              title: "Design That Drives Results",              quote: "Our new e-commerce platform is beautifully designed and performs incredibly well. Conversion rates have doubled, and user feedback has been overwhelmingly positive.",              tag: "E-commerce",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "James Wilson, VP Product at InnovateCorp",              date: "Date: January 22, 2024",              title: "True Digital Partners",              quote: "Working with Webild Studio was refreshingly different. They brought creative ideas to every meeting and delivered a product that our users absolutely love.",              tag: "Enterprise",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "James Wilson"
            },
            {
              id: "5",              name: "Lisa Anderson, Founder of GrowthMinds",              date: "Date: January 8, 2024",              title: "Outstanding Execution",              quote: "From the initial strategy sessions through to final deployment, their team maintained exceptional communication and delivered on every promise. Highly recommended.",              tag: "EdTech",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "David Kim, Director of Marketing at BrandHub",              date: "Date: December 28, 2023",              title: "Game-Changing Collaboration",              quote: "Webild Studio understood our brand voice and translated it into an incredible digital experience. Our team and customers love the results.",              tag: "B2B Services",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              avatarAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Why Partner With Webild Studio"
          description="We combine strategic thinking, creative excellence, and technical mastery to deliver digital solutions that drive real business results"
          tag="Our Strengths"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "1",              title: "Strategic Expertise",              description: "We don't just build—we strategize. Our approach is grounded in research, market analysis, and a deep understanding of your business goals and target audience.",              media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg?_wi=1" },
              items: [
                { icon: Target, text: "Goal-oriented strategy" },
                { icon: TrendingUp, text: "Data-driven decisions" },
                { icon: Eye, text: "Market insights" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Creative Excellence",              description: "Our designers create visually stunning, functionally perfect interfaces that engage users and reflect your brand's unique personality and values.",              media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg?_wi=2" },
              items: [
                { icon: Palette, text: "Stunning design" },
                { icon: Zap, text: "User-centric UX" },
                { icon: Sparkles, text: "Brand alignment" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Technical Mastery",              description: "Our developers build scalable, secure, and high-performance digital products using cutting-edge technologies and best practices.",              media: { imageSrc: "http://img.b2bpic.net/free-psd/flat-design-car-sharing-landing-page_23-2150431825.jpg?_wi=3" },
              items: [
                { icon: Code, text: "Clean code" },
                { icon: Zap, text: "High performance" },
                { icon: Lock, text: "Secure & scalable" }
              ],
              reverse: false
            }
          ]}
          buttons={[
            { text: "Let's Collaborate", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your digital vision into reality? Let's create something extraordinary together. Reach out today to start your next project."
          animationType="entrance-slide"
          background={{ variant: "aurora" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Get In Touch", href: "mailto:hello@webild.studio" },
            { text: "Schedule a Call", href: "#contact" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Webild Studio"
          copyrightText="© 2024 Webild Studio. 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>
  );
}
