"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, Shield, Zap, Cloud, Lock, Share2, Award, Users, BarChart3, Code, Globe, Star, Crown, Rocket, DollarSign, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Build Modern Web Experiences"
          description="Create stunning, responsive websites with our comprehensive component library and cutting-edge design system."
          background={{ variant: "downward-rays-static" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "professional portrait headshot user" },
            { src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "professional portrait headshot user" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", alt: "professional portrait headshot user" }
          ]}
          avatarText="Trusted by 1000+ creators"
          buttons={[
            { text: "Start Building", href: "#features" },
            { text: "View Pricing", href: "#pricing" }
          ]}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful Features at Your Fingertips"
          description="Explore interactive visualizations that showcase the core capabilities of our platform."
          tag="Capabilities"
          tagIcon={Sparkles}
          features={[
            {
              title: "Global Analytics",              description: "Real-time insights with a rotating 3D globe visualization",              bentoComponent: "globe"
            },
            {
              title: "Performance Metrics",              description: "Track your success with animated bar chart displays",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Integration Hub",              description: "Connect seamlessly with orbiting integration icons",              bentoComponent: "orbiting-icons",              centerIcon: Shield,
              items: [
                { icon: Zap, ring: 1 },
                { icon: Cloud, ring: 2 },
                { icon: Lock, ring: 2 },
                { icon: Share2, ring: 3 }
              ]
            },
            {
              title: "Workflow Timeline",              description: "Visual timeline of your project milestones and achievements",              bentoComponent: "timeline",              heading: "Your Journey",              subheading: "Track progress",              items: [
                { label: "Foundation", detail: "Build your base with core features" },
                { label: "Growth", detail: "Scale and expand your capabilities" },
                { label: "Mastery", detail: "Optimize and perfect your workflow" }
              ],
              completedLabel: "Completed"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features-grid" data-section="features-grid">
        <FeatureBorderGlow
          title="Premium Features with Elegant Design"
          description="Hover over each card to reveal the glowing border effect that emphasizes our premium quality."
          tag="Excellence"
          tagIcon={Award}
          features={[
            {
              icon: Zap,
              title: "Lightning Fast",              description: "Optimized for performance with minimal overhead and blazing fast load times"
            },
            {
              icon: Shield,
              title: "Enterprise Security",              description: "Built with security best practices and enterprise-grade protection"
            },
            {
              icon: Users,
              title: "Team Collaboration",              description: "Real-time collaboration tools that keep your team connected and productive"
            },
            {
              icon: BarChart3,
              title: "Advanced Analytics",              description: "Deep insights into performance with customizable dashboards"
            },
            {
              icon: Code,
              title: "Developer Friendly",              description: "Clean APIs and comprehensive documentation for seamless integration"
            },
            {
              icon: Globe,
              title: "Global Scale",              description: "Deploy worldwide with our distributed infrastructure"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="This platform has completely transformed how we build web applications. The component library is incredibly comprehensive, and the design system makes everything feel cohesive and professional. We've cut our development time in half."
          rating={5}
          author="Sarah Johnson, CEO at TechVenture"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "professional portrait business user" },
            { src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "professional portrait business user" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "professional portrait business user" },
            { src: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg", alt: "professional portrait business user" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Perfect Plan"
          description="Select the plan that best fits your needs and start building today"
          tag="Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              badge: "Great for Beginners",              badgeIcon: Rocket,
              price: "$29",              subtitle: "Perfect for getting started",              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "Up to 5 projects",                "Basic components library",                "Community support",                "1 GB storage",                "Monthly updates"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$79",              subtitle: "Ideal for growing teams",              buttons: [{ text: "Start Free Trial", href: "#contact" }],
              features: [
                "Unlimited projects",                "Advanced components",                "Priority email support",                "100 GB storage",                "Weekly updates",                "Custom themes",                "Team collaboration"
              ]
            },
            {
              id: "enterprise",              badge: "For Scale",              badgeIcon: Crown,
              price: "$249",              subtitle: "Enterprise-grade solution",              buttons: [{ text: "Contact Sales", href: "#contact" }],
              features: [
                "Everything in Professional",                "Dedicated account manager",                "24/7 phone support",                "1 TB storage",                "Daily updates",                "API access",                "White-label options",                "SLA guarantee"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with Our Latest Features"
          description="Subscribe to our newsletter and get exclusive updates on new features, tips, and best practices delivered to your inbox."
          tagIcon={Mail}
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to receive updates from us. We respect your privacy and will never share your information."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#features" },
                { label: "Roadmap", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#features" },
                { label: "Careers", href: "#features" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#features" },
                { label: "API Reference", href: "#features" },
                { label: "Community", href: "#features" },
                { label: "Support", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Webild. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}