'use client';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ArrowRight, Shield, Zap, Star } from 'lucide-react';

export default function Page() {
  const navItems = [{ name: "Home", id: "/" }];
  return (
    <ThemeProvider 
      defaultButtonVariant="text-stagger" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded" 
      contentWidth="medium" 
      sizing="medium" 
      background="circleGradient" 
      cardStyle="glass-elevated" 
      primaryButtonStyle="gradient" 
      secondaryButtonStyle="glass" 
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={navItems}
          brandName="Webild"
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Innovative Solutions"
          description="Transforming the digital landscape with cutting-edge technology and design excellence."
          buttons={[{ text: "Learn More", href: "#services" }]}
          background={{ variant: "glowing-orb" }}
          mediaAnimation="none"
        />
      </div>
      <div id="trust" data-section="trust">
        <MetricCardEleven
          title="Trusted by Industry Leaders"
          description="We deliver measurable results that drive business growth."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "1", value: "500+", title: "Clients Served", description: "Global organizations trust us.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=800" },
            { id: "2", value: "99%", title: "Satisfaction", description: "Consistently high project success rate.", imageSrc: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&q=80&w=800" }
          ]}
        />
      </div>
      <div id="services" data-section="services">
        <FeatureHoverPattern
          title="Our Core Services"
          description="We provide tailored solutions for your unique business needs."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            { icon: Zap, title: "Web Development", description: "Building fast, scalable web applications." },
            { icon: Shield, title: "Cyber Security", description: "Robust protection for your data." },
            { icon: Star, title: "UI/UX Design", description: "User-centric design experiences." }
          ]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="Hear from the partners we have helped succeed."
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            { id: "1", title: "Great Results", quote: "They transformed our workflow entirely.", name: "Jane Doe", role: "CTO, TechCorp" },
            { id: "2", title: "Exceptional Work", quote: "Professional, timely, and innovative.", name: "John Smith", role: "Founder, StartupInc" }
          ]}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Contact Us"
          title="Ready to Start Your Journey?"
          description="Reach out to us to discuss your upcoming project."
          buttons={[{ text: "Send Message", href: "#" }]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={true}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterSimple
          bottomLeftText="© 2024 Webild"
          bottomRightText="All rights reserved"
          columns={[{ title: "Company", items: [{ label: "About" }, { label: "Careers" }] }]}
        />
      </div>
    </ThemeProvider>
  );
}