"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { CheckCircle, Clock, Code, Database, Globe, Shield, Sparkles, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Webild"
          navItems={[
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Webild Studio"
          description="Crafting premium digital experiences through elegant design and innovative solutions. We transform visions into exceptional products."
          buttons={[
            { text: "Explore Our Work", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "aurora" }}
          imageSrc="https://img.b2bpic.net/free-photo/composition-natural-argan-seeds_23-2149016622.jpg"
          imageAlt="Premium product showcase"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Building exceptional" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/group-business-executives-discussing-digital-tablet-t_1170-1982.jpg", alt: "Team collaboration" },
            { type: "text", content: "experiences together" }
          ]}
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Contact Us", href: "contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Collection"
          description="Discover our curated selection of premium products designed with meticulous attention to detail"
          tag="New Arrivals"
          products={[
            {
              id: "1",              name: "Premium Design Suite",              price: "$499",              imageSrc: "https://img.b2bpic.net/free-vector/big-sale-banner-template-promotion_157027-1656.jpg",              imageAlt: "Premium design suite"
            },
            {
              id: "2",              name: "Digital Experience Kit",              price: "$399",              imageSrc: "https://img.b2bpic.net/free-photo/sleek-smartwatch-with-blank-black-screen-white-background_9975-134370.jpg",              imageAlt: "Digital experience kit"
            },
            {
              id: "3",              name: "Creative Solutions Pack",              price: "$599",              imageSrc: "https://img.b2bpic.net/free-psd/sleek-brushed-copper-cylinder-serves-as-modern-minimalist-display-stand-against-simple-black-backdrop_84443-58582.jpg",              imageAlt: "Creative solutions pack"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful Features"
          description="Experience a comprehensive suite of tools designed to elevate your digital presence and drive meaningful results"
          tag="Why Choose Us"
          features={[
            {
              title: "Global Reach",              description: "Connect with audiences across the world with our worldwide infrastructure",              bentoComponent: "globe"
            },
            {
              title: "Advanced Analytics",              description: "Gain deep insights into performance metrics and user behavior",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Smart Integrations",              description: "Seamlessly connect with your favorite tools and services",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Shield, ring: 1 },
                { icon: Users, ring: 1 },
                { icon: Code, ring: 2 },
                { icon: Database, ring: 2 },
                { icon: Globe, ring: 3 }
              ]
            },
            {
              title: "Real-time Collaboration",              description: "Work together seamlessly with real-time updates",              bentoComponent: "icon-info-cards",              items: [
                { icon: Users, label: "Team Members", value: "Unlimited" },
                { icon: Clock, label: "Response Time", value: "Instant" },
                { icon: CheckCircle, label: "Uptime", value: "99.9%" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="This platform has completely transformed how we manage our digital presence. The intuitive design and powerful features have made our workflow significantly more efficient. Highly recommended for any organization looking to scale."
          rating={5}
          author="Sarah Johnson, CEO at TechCorp"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah Johnson" },
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Michael Chen" },
            { src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Emily Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "David Kim" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services and how we can help you succeed"
          tag="Support"
          faqs={[
            {
              id: "1",              title: "What makes your solution different?",              content: "Our platform combines cutting-edge technology with intuitive design. We focus on user experience while maintaining enterprise-grade security and reliability. Our team is dedicated to continuous innovation and customer success."
            },
            {
              id: "2",              title: "How quickly can we get started?",              content: "Most clients are up and running within 24 hours. Our onboarding process is streamlined and our support team is available to guide you through every step. We provide comprehensive documentation and training resources."
            },
            {
              id: "3",              title: "What kind of support do you offer?",              content: "We offer 24/7 customer support through multiple channels including email, chat, and phone. Our dedicated support team averages response times under 2 hours and has an excellent satisfaction rating."
            },
            {
              id: "4",              title: "Is my data secure with you?",              content: "Security is our top priority. We use enterprise-grade encryption, regular security audits, and comply with major data protection regulations including GDPR and CCPA. All data is backed up and protected."
            },
            {
              id: "5",              title: "Can we integrate with existing tools?",              content: "Yes, we support integrations with hundreds of popular tools and services. We also offer a comprehensive API for custom integrations. Our integration marketplace makes it easy to connect everything you use."
            },
            {
              id: "6",              title: "What are your pricing options?",              content: "We offer flexible pricing plans to suit businesses of all sizes. From startups to enterprises, we have a plan that fits your needs. Custom pricing is available for large organizations with specific requirements."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-957.jpg"
          imageAlt="Customer support team"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to transform your digital presence?"
          description="Join thousands of businesses that trust us to deliver exceptional results. Sign up today and discover the difference our platform can make."
          tagIcon={Sparkles}
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Start Free Trial"
          termsText="We respect your privacy. Unsubscribe anytime from our communications."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Webild"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Support", href: "faq" },
                { label: "Community", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Webild Studio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}