"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Zap, Users, TrendingUp, Award, Rocket, Star, Shield, Cpu, BookOpen, Mail } from 'lucide-react';

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

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Generate Projects Intelligently"
          description="Webild transforms how teams create and manage projects. Powered by AI-driven automation, our platform generates optimized project structures, timelines, and resource allocations in minutes, not days."
          tag="AI-Powered Innovation"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Generating", href: "contact" },
            { text: "View Demo" }
          ]}
          carouselItems={[
            {
              id: "carousel-1",              imageSrc: "https://img.b2bpic.net/free-photo/people-office-analyzing-checking-finance-graphs_23-2150377138.jpg",              imageAlt: "project management workflow automation dashboard"
            },
            {
              id: "carousel-2",              imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038853.jpg",              imageAlt: "team collaboration workspace project tools"
            },
            {
              id: "carousel-3",              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241237.jpg",              imageAlt: "ai automation technology innovation software"
            },
            {
              id: "carousel-4",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-company-employees-handling-financial-planning_482257-128572.jpg",              imageAlt: "planning organization schedule productivity management"
            },
            {
              id: "carousel-5",              imageSrc: "https://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",              imageAlt: "digital workspace modern office technology"
            },
            {
              id: "carousel-6",              imageSrc: "https://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg",              imageAlt: "business growth strategy development success"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Webild empowers organizations to streamline project creation through intelligent automation, reducing setup time by 80% and enabling teams to focus on what truly matters—execution and innovation."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Zap, label: "Project Generation Time", value: "80% Faster" },
            { icon: Users, label: "Teams Using Webild", value: "500+" },
            { icon: TrendingUp, label: "Efficiency Gain", value: "15 Hours/Week" },
            { icon: Award, label: "Client Satisfaction", value: "98%" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Powerful Features"
          description="Everything you need to generate, manage, and execute projects with confidence"
          tag="Capabilities"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "01",              title: "Intelligent Project Generation",              description: "Let AI analyze your requirements and instantly create comprehensive project plans with realistic timelines and resource allocations.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "analytics data insights dashboard reporting"
            },
            {
              id: "02",              title: "Smart Automation",              description: "Automate repetitive planning tasks and let our engine handle complex dependencies, task sequencing, and team assignments.",              imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg",              imageAlt: "automation ai intelligent smart technology"
            },
            {
              id: "03",              title: "Seamless Integration",              description: "Connect with your favorite tools and platforms. Webild integrates with Jira, Asana, Monday.com, and more for unified workflows.",              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",              imageAlt: "integration connect tools api workflow"
            },
            {
              id: "04",              title: "Real-Time Collaboration",              description: "Enable teams to collaborate effortlessly with live updates, shared workspaces, and transparent communication channels.",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-freelancer-working-from-home-using-financial-graphs_482257-119054.jpg",              imageAlt: "collaboration team communication working together"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Open Opportunities"
          description="Join innovative teams already transforming their project management with Webild"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",              title: "Senior Project Automation Engineer",              subtitle: "San Francisco, CA · Full-time · Remote",              category: "Engineering",              value: "$150K – $210K"
            },
            {
              id: "2",              title: "Product Manager, AI Integration",              subtitle: "New York, NY · Full-time",              category: "Product",              value: "$140K – $190K"
            },
            {
              id: "3",              title: "Solutions Architect",              subtitle: "Remote · Full-time",              category: "Solutions",              value: "$130K – $180K"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your team's needs. Scale as you grow."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              badge: "Starter",              price: "$49/mo",              subtitle: "Perfect for small teams",              badgeIcon: Rocket,
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Up to 10 projects",                "Basic AI generation",                "Team collaboration",                "Email support",                "Monthly backups"
              ]
            },
            {
              id: "professional",              badge: "Professional",              price: "$149/mo",              subtitle: "For growing teams",              badgeIcon: Star,
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Unlimited projects",                "Advanced AI features",                "Priority support",                "Custom integrations",                "Daily backups",                "Analytics dashboard"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              price: "Custom",              subtitle: "For large organizations",              badgeIcon: Shield,
              buttons: [
                { text: "Contact Sales", href: "contact" },
                { text: "Schedule Demo" }
              ],
              features: [
                "Everything in Professional",                "Dedicated account manager",                "Custom workflows",                "Advanced security",                "SSO & SAML",                "SLA guarantee"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Webild reduced our project planning time from three weeks to three days. The AI-generated project structures are incredibly accurate, and our team adopted it immediately. It's a game-changer."
          rating={5}
          author="Sarah Chen, CEO at TechVenture"
          useInvertedBackground="invertDefault"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "professional portrait person business headshot"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              alt: "professional portrait person business woman"
            },
            {
              src: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",              alt: "professional portrait person business man"
            },
            {
              src: "https://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",              alt: "professional portrait person business headshot"
            },
            {
              src: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",              alt: "professional portrait person business team"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg",              alt: "professional portrait person business expert"
            }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree
          title="Featured Insights"
          description="Learn how intelligent project generation is transforming the industry"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "AI & Technology",              categoryIcon: Cpu,
              title: "The Future of Project Management: How AI Changes Everything",              description: "Explore how artificial intelligence is revolutionizing how teams plan, execute, and deliver projects faster than ever before.",              imageSrc: "https://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924141.jpg",              imageAlt: "ai future technology innovation digital"
            },
            {
              id: "2",              category: "Best Practices",              categoryIcon: BookOpen,
              title: "5 Proven Strategies for Better Project Planning",              description: "Discover the methodologies that top-performing teams use to ensure project success and team alignment.",              imageSrc: "https://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101288.jpg",              imageAlt: "project management best practices methodology"
            },
            {
              id: "3",              category: "Productivity",              categoryIcon: Zap,
              title: "Automate to Elevate: Save 15 Hours Weekly",              description: "Learn how automation tools can free your team from administrative tasks and focus on strategic work.",              imageSrc: "https://img.b2bpic.net/free-photo/movie-poster-movie-terminator_188544-31114.jpg",              imageAlt: "automation workflow efficiency productivity business"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Projects?"
          description="Join hundreds of teams already generating better projects faster. Sign up for a free trial and see the difference intelligent automation makes."
          tagIcon={Mail}
          useInvertedBackground="invertDefault"
          inputPlaceholder="your@company.com"
          buttonText="Start Free Trial"
          termsText="We respect your privacy. Unsubscribe anytime. No credit card required."
        />
      </div>

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