"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Shield, Star, CheckCircle } from 'lucide-react';

export default function Page() {
  const navItems = [{ name: "Home", id: "/" }];
  return (
    <ThemeProvider defaultButtonVariant="hover-magnetic" 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" }} />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel 
          title="Welcome to Webild"
          description="High-performance digital solutions for your business."
          background={{ variant: 'radial-gradient' }}
          carouselItems={[
            { id: "1", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" },
            { id: "2", imageSrc: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05" },
            { id: "3", imageSrc: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e" },
            { id: "4", imageSrc: "https://images.unsplash.com/photo-1501785888041-af3ef285b470" },
            { id: "5", imageSrc: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e" },
            { id: "6", imageSrc: "https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5" }
          ]}
        />
      </div>
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout heading={[{ type: 'text', content: "About Our Mission" }]} useInvertedBackground={false} />
      </div>
      <div id="products" data-section="products">
        <ProductCardThree 
          title="Featured Products"
          description="Top tier quality products"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "p1", name: "Product A", price: "$99", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e" },
            { id: "p2", name: "Product B", price: "$149", imageSrc: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f" },
            { id: "p3", name: "Product C", price: "$199", imageSrc: "https://images.unsplash.com/photo-1542291026-7eec264c27ff" }
          ]}
        />
      </div>
      <div id="metrics" data-section="metrics">
        <MetricCardThree 
          title="Our Impact"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          description="Key performance indicators for our growth."
          metrics={[
            { id: "m1", icon: Zap, title: "Growth", value: "500%" },
            { id: "m2", icon: Shield, title: "Security", value: "99.9%" }
          ]}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardSeven 
          title="Core Features"
          description="Innovating for the future"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { title: "Scale", description: "High scalability for any size", imageSrc: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" },
            { title: "Speed", description: "Lightning fast performance", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
          ]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo 
          title="Client Voices"
          description="What our partners say about us."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            { id: "t1", name: "Alice", role: "CEO", testimonial: "Amazing experience!", icon: Star },
            { id: "t2", name: "Bob", role: "CTO", testimonial: "Best service ever.", icon: CheckCircle }
          ]}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA tag="Get in touch" title="Contact Us" description="We are here to help." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c" logoText="Webild" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
      </div>
    </ThemeProvider>
  );
}