"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Rocket, Zap, CreditCard, TrendingUp, Heart, Sparkles, Crown } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="CloudSync"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "How It Works", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Modern SaaS Platform"
          bottomRightText="hello@cloudsync.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Cloud Collaboration Made Effortless"
          description="Streamline your team's workflow with intelligent automation, real-time collaboration, and enterprise-grade security. Built for modern development teams."
          tag="Launch Week"
          tagIcon={Rocket}
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "Watch Demo" }
          ]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "CloudSync Dashboard Interface" },
            { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148358960.jpg", imageAlt: "Workflow Automation" },
            { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359901.jpg", imageAlt: "Cloud Storage" },
            { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148375533.jpg", imageAlt: "Security Features" },
            { imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-31485.jpg", imageAlt: "API Integration" },
            { imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148375535.jpg", imageAlt: "Analytics Dashboard" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFour
          title="Powerful Features"
          description="Everything you need to collaborate, automate, and grow your business with intelligent tools."
          tag="Product Suite"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              id: "1",              title: "Smart Workflow Automation",              author: "Engineering Team",              description: "Reduce manual tasks by up to 80% with AI-powered automation. Set up complex workflows in minutes without code.",              tags: ["AI-Powered", "No-Code"],
              imageSrc: "https://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148358960.jpg",              imageAlt: "Workflow Automation Interface"
            },
            {
              id: "2",              title: "Enterprise Security Layer",              author: "Security Team",              description: "Bank-grade encryption, role-based access control, and compliance with GDPR, SOC2, and HIPAA standards.",              tags: ["Enterprise", "Secure"],
              imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148375533.jpg",              imageAlt: "Security Dashboard"
            },
            {
              id: "3",              title: "Real-Time Collaboration",              author: "Product Team",              description: "Work together seamlessly with instant updates, live editing, and built-in communication tools for distributed teams.",              tags: ["Real-Time", "Team Tools"],
              imageSrc: "https://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359901.jpg",              imageAlt: "Collaboration Features"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. No hidden fees, cancel anytime."
          tag="Flexible Plans"
          tagIcon={CreditCard}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Starter",              badgeIcon: Sparkles,
              price: "$29/mo",              subtitle: "Perfect for small teams",              buttons: [
                { text: "Start Free", href: "#contact" },
                { text: "Learn More" }
              ],
              features: [
                "Up to 5 team members",                "5GB storage",                "Basic automation",                "Email support",                "Core integrations"
              ]
            },
            {
              id: "professional",              badge: "Professional",              badgeIcon: Zap,
              price: "$99/mo",              subtitle: "For growing teams",              buttons: [
                { text: "Start Free", href: "#contact" },
                { text: "Learn More" }
              ],
              features: [
                "Up to 25 team members",                "500GB storage",                "Advanced automation",                "Priority support",                "100+ integrations"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For large organizations",              buttons: [
                { text: "Contact Sales", href: "#contact" },
                { text: "Schedule Demo" }
              ],
              features: [
                "Unlimited team members",                "Unlimited storage",                "Custom automation",                "24/7 dedicated support",                "Private infrastructure"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Trusted by Industry Leaders"
          description="CloudSync powers teams at innovative companies worldwide."
          tag="By the Numbers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "10K+",              title: "Active teams using CloudSync",              items: [
                "50+ countries represented",                "500M+ tasks automated",                "99.99% uptime guaranteed"
              ]
            },
            {
              id: "2",              value: "45%",              title: "Average time saved per team",              items: [
                "Reduces manual work significantly",                "Improves team velocity",                "Increases productivity"
              ]
            },
            {
              id: "3",              value: "4.9/5",              title: "Customer satisfaction rating",              items: [
                "Rated #1 in category",                "Award-winning support",                "Industry-leading UX"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Loved by Teams Everywhere"
          description="See what our customers are saying about their CloudSync experience."
          tag="Customer Stories"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Engineering Lead",              company: "TechFlow Labs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Product Manager",              company: "InnovateTech",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "CTO",              company: "DigitalVenture",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Park",              role: "Operations Director",              company: "GlobalScale Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/expressive-woman-posing-outdoor_344912-2955.jpg",              imageAlt: "David Park"
            }
          ]}
          kpiItems={[
            { value: "180+", label: "Integrations Available" },
            { value: "99.99%", label: "Uptime SLA" },
            { value: "24/7", label: "Priority Support" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="CloudSync"
          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
          rightLink={{ text: "Terms of Service", href: "/terms" }}
        />
      </div>
    </ThemeProvider>
  );
}