"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  ArrowRight,
  Shield,
  Zap,
  TrendingUp,
  Plug,
  Headphones,
  Users,
  Building,
  Globe,
  Sparkles,
  Star,
  Crown,
  MessageSquare,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Features", id: "/services" },
    { name: "Pricing", id: "/pricing" },
    { name: "About", id: "/about" },
    { name: "Resources", id: "/resources" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CloudSync"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "/pricing"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CloudSync"
          description="Seamlessly sync your data across all platforms. Enterprise-grade security with zero complexity. Join thousands of teams automating their workflows."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Start Free Trial", href: "/pricing" },
            { text: "Watch Demo", href: "#" },
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/a-modern-clean-saas-dashboard-interface--1772484361913-079ecbca.png"
          imageAlt="CloudSync dashboard interface"
          mediaAnimation="slide-up"
          frameStyle="browser"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="Powerful Features Built for Your Team"
          description="Everything you need to streamline collaboration and automate workflows"
          tag="Core Features"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Real-Time Synchronization",              description: "Instant data sync across all your tools and platforms",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-data-synchronization-acr-1772484361833-8ba061d5.png?_wi=1",              imageAlt: "Real-time sync feature",              buttonIcon: ArrowRight,
              buttonHref: "#"},
            {
              title: "Advanced Security",              description: "Enterprise-grade encryption and compliance standards",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/abstract-illustration-of-security-and-en-1772484363252-dbad034c.png?_wi=1",              imageAlt: "Security features",              buttonIcon: Shield,
              buttonHref: "#"},
            {
              title: "Custom Workflows",              description: "Build automation tailored to your unique processes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-workflow-automation-and--1772484362726-ba10f98d.png?_wi=1",              imageAlt: "Workflow customization",              buttonIcon: Zap,
              buttonHref: "#"},
            {
              title: "Analytics Dashboard",              description: "Deep insights into your data and team performance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/dashboard-analytics-visualization-with-m-1772484362759-1bcf8cea.png?_wi=1",              imageAlt: "Analytics dashboard",              buttonIcon: TrendingUp,
              buttonHref: "#"},
            {
              title: "API Integration",              description: "Connect with 500+ applications seamlessly",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-api-integration-and-conn-1772484361758-d7ab5707.png?_wi=1",              imageAlt: "API integrations",              buttonIcon: Plug,
              buttonHref: "#"},
            {
              title: "24/7 Support",              description: "Dedicated support team ready to help anytime",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-customer-support-and-ass-1772484362219-cbe7a847.png?_wi=1",              imageAlt: "Customer support",              buttonIcon: Headphones,
              buttonHref: "#"},
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Industry Leaders"
          description="Our platform powers teams and companies worldwide"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Active Users",              value: "50,000+"},
            {
              id: "2",              icon: Building,
              title: "Enterprise Clients",              value: "1,200+"},
            {
              id: "3",              icon: Globe,
              title: "Countries",              value: "85+"},
            {
              id: "4",              icon: Zap,
              title: "Daily Automations",              value: "10M+"},
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. No hidden fees."
          tag="Flexible Plans"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Great to Start",              badgeIcon: Sparkles,
              price: "$29/mo",              subtitle: "Perfect for small teams",              features: [
                "Up to 10 team members",                "Basic automations",                "1 GB data storage",                "Email support",                "Standard integrations"],
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
              price: "$99/mo",              subtitle: "For growing teams",              features: [
                "Up to 100 team members",                "Advanced automations",                "100 GB data storage",                "Priority support",                "500+ integrations",                "Custom workflows"],
            },
            {
              id: "enterprise",              badge: "Custom Solutions",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Enterprise-scale needs",              features: [
                "Unlimited team members",                "White-label options",                "Unlimited storage",                "Dedicated account manager",                "Custom integrations",                "SLA guaranteed"],
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Loved by Teams Worldwide"
          description="See what our customers say about CloudSync"
          tag="Customer Stories"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Operations Director",              company: "TechFlow Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-a-confident-wom-1772484361224-191e8bae.png?_wi=1"},
            {
              id: "2",              name: "Michael Chen",              role: "CTO",              company: "InnovateLab",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-an-asian-man-in-1772484361289-886f28b6.png?_wi=1"},
            {
              id: "3",              name: "Emily Rodriguez",              role: "CEO",              company: "GrowthCo",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-a-latina-woman--1772484360873-51cfd050.png?_wi=1"},
            {
              id: "4",              name: "David Kim",              role: "Product Manager",              company: "CloudWorks",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-an-asian-man-in-1772484361243-e20eca29.png?_wi=1"},
          ]}
          kpiItems={[
            { value: "98%", label: "Customer Satisfaction" },
            { value: "4.9/5", label: "Average Rating" },
            { value: "180+", label: "Success Stories" },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about CloudSync"
          textPosition="left"
          useInvertedBackground={true}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What makes CloudSync different?",              content:
                "CloudSync combines enterprise-grade security with user-friendly simplicity. Our platform is built for teams of any size and integrates with 500+ applications out of the box."},
            {
              id: "2",              title: "Is my data secure?",              content:
                "Yes. We use military-grade AES-256 encryption, comply with SOC 2 and GDPR standards, and conduct regular security audits. Your data is always encrypted in transit and at rest."},
            {
              id: "3",              title: "How long does setup take?",              content:
                "Most teams get started in under 15 minutes. Our intuitive dashboard guides you through initial configuration, and our onboarding team is available to help if needed."},
            {
              id: "4",              title: "Can I export my data?",              content:
                "Absolutely. You have full access to your data at any time and can export it in multiple formats. We believe in data portability and transparency."},
            {
              id: "5",              title: "What if I need custom integrations?",              content:
                "Our API is fully documented and powerful. Enterprise plans include dedicated support for custom integrations and API development."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CloudSync"
          copyrightText="© 2025 CloudSync. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/cloudsync",              ariaLabel: "Twitter"},
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/cloudsync",              ariaLabel: "LinkedIn"},
            {
              icon: Github,
              href: "https://github.com/cloudsync",              ariaLabel: "GitHub"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}