"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, Palette, Code, Layout, Smartphone, TrendingUp, Lightbulb, Users, HelpCircle } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild Studio"
          navItems={[
            { name: "Work", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Premium Web Experiences"
          description="We craft exceptional digital solutions that captivate audiences and drive results. Combining design excellence with cutting-edge technology to transform your brand vision into reality."
          tag="Creative Agency"
          tagIcon={Sparkles}
          background={{ variant: "canvas-reveal" }}
          imageSrc="https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg"
          imageAlt="Premium web design dashboard showcase"
          buttons={[
            { text: "Explore Our Work", href: "/portfolio" },
            { text: "Schedule Consultation", href: "/contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Us"
          tagIcon={Zap}
          title="Elevating Brands Through Strategic Design"
          description="Since 2018, Webild Studio has partnered with forward-thinking brands to create digital experiences that inspire and convert. Our multidisciplinary team of designers, developers, and strategists obsess over details, innovate relentlessly, and deliver work that exceeds expectations."
          metrics={[
            { value: "250+", title: "Projects Delivered" },
            { value: "95%", title: "Client Satisfaction Rate" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
          imageAlt="Webild Studio creative team collaborating"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureHoverPattern
          title="Our Services"
          description="Comprehensive digital solutions designed to elevate your brand and achieve your business objectives"
          tag="What We Do"
          tagIcon={Zap}
          features={[
            {
              icon: Palette,
              title: "Brand Identity",
              description: "Complete brand strategies and visual identities that tell your story and resonate with your audience"
            },
            {
              icon: Code,
              title: "Web Development",
              description: "High-performance, responsive websites built with modern frameworks and best practices"
            },
            {
              icon: Layout,
              title: "UI/UX Design",
              description: "Intuitive interfaces and delightful user experiences that drive engagement and conversions"
            },
            {
              icon: Smartphone,
              title: "Mobile Apps",
              description: "Native and cross-platform applications that deliver exceptional performance and user satisfaction"
            },
            {
              icon: TrendingUp,
              title: "Digital Marketing",
              description: "Strategic campaigns that amplify your reach and connect you with your target audience"
            },
            {
              icon: Lightbulb,
              title: "Strategy & Consulting",
              description: "Expert guidance to transform your vision into actionable strategies and results"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Meet Our Team"
          description="Talented creatives and strategists passionate about crafting exceptional digital experiences"
          tag="The Squad"
          tagIcon={Users}
          team={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Creative Director",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg",
              imageAlt: "Sarah Mitchell, Creative Director"
            },
            {
              id: "2",
              name: "David Chen",
              role: "Lead Developer",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",
              imageAlt: "David Chen, Lead Developer"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Strategy Lead",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
              imageAlt: "Emma Rodriguez, Strategy Lead"
            },
            {
              id: "4",
              name: "James Turner",
              role: "Design Director",
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg",
              imageAlt: "James Turner, Design Director"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Webild Studio transformed our digital presence completely. Their strategic approach combined with exceptional design execution delivered results that exceeded our expectations. The team's professionalism and creativity throughout the process was outstanding."
          rating={5}
          author="Michael Torres, CEO at TechVision"
          avatars={[
            { src: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg", alt: "Client 1" },
            { src: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg", alt: "Client 2" },
            { src: "https://img.b2bpic.net/free-photo/portrait-man-laughing_23-2148859448.jpg", alt: "Client 3" },
            { src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Client 4" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg", alt: "Client 5" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg", alt: "Client 6" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about our services, process, and engagement models"
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "What is your typical project timeline?",
              content: "Project timelines vary based on scope and complexity. Small projects typically run 4-8 weeks, while larger initiatives range from 12-24 weeks. We provide detailed timelines during the discovery phase after understanding your specific requirements."
            },
            {
              id: "2",
              title: "Do you offer ongoing support and maintenance?",
              content: "Yes, we provide comprehensive post-launch support and maintenance services. This includes bug fixes, performance optimization, content updates, and feature enhancements to keep your digital products running smoothly."
            },
            {
              id: "3",
              title: "What's included in your discovery process?",
              content: "Our discovery process includes stakeholder interviews, market research, competitor analysis, user research, technical assessment, and strategy development. This ensures we have a complete understanding of your goals and challenges before we begin design and development."
            },
            {
              id: "4",
              title: "Can you work with our existing technology stack?",
              content: "Absolutely. We're experienced with a wide range of technologies and frameworks. Our team can integrate seamlessly with your existing infrastructure and team, or recommend solutions that best fit your long-term goals."
            },
            {
              id: "5",
              title: "How do you approach design iterations and feedback?",
              content: "We believe in collaborative design. We present initial concepts, gather feedback, iterate based on your input, and refine until we achieve perfection. Regular check-ins ensure alignment throughout the process."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="FAQ support illustration"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Creative footer background"
          logoText="Webild Studio"
          copyrightText="© 2025 Webild Studio. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Brand Design", href: "/services" },
                { label: "Web Development", href: "/services" },
                { label: "Mobile Apps", href: "/services" },
                { label: "Digital Marketing", href: "/services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Careers", href: "/contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact", href: "/contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}