"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  ArrowRight,
  BookOpen,
  Video,
  FileText,
  Code,
  Users,
  Award,
  Zap,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function ResourcesPage() {
  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="resources" data-section="resources">
        <FeatureCardTwentySix
          title="Learning Resources"
          description="Master CloudSync with comprehensive guides, tutorials, and best practices"
          tag="Knowledge Base"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Getting Started Guide",              description: "Learn the basics of CloudSync in 10 minutes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-data-synchronization-acr-1772484361833-8ba061d5.png?_wi=2",              imageAlt: "Getting started guide",              buttonIcon: BookOpen,
              buttonHref: "#"},
            {
              title: "Video Tutorials",              description: "Step-by-step video guides for all features",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-workflow-automation-and--1772484362726-ba10f98d.png?_wi=2",              imageAlt: "Video tutorials",              buttonIcon: Video,
              buttonHref: "#"},
            {
              title: "API Documentation",              description: "Complete API reference for developers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-api-integration-and-conn-1772484361758-d7ab5707.png?_wi=2",              imageAlt: "API documentation",              buttonIcon: Code,
              buttonHref: "#"},
            {
              title: "Best Practices",              description: "Expert tips for maximizing your workflow",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/dashboard-analytics-visualization-with-m-1772484362759-1bcf8cea.png?_wi=2",              imageAlt: "Best practices",              buttonIcon: ArrowRight,
              buttonHref: "#"},
            {
              title: "Case Studies",              description: "Real-world examples of CloudSync in action",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-customer-support-and-ass-1772484362219-cbe7a847.png?_wi=2",              imageAlt: "Case studies",              buttonIcon: FileText,
              buttonHref: "#"},
            {
              title: "Community Forum",              description: "Connect with other CloudSync users",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/abstract-illustration-of-security-and-en-1772484363252-dbad034c.png?_wi=2",              imageAlt: "Community forum",              buttonIcon: Users,
              buttonHref: "#"},
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Resource Highlights"
          description="Comprehensive learning materials to accelerate your success"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Video,
              title: "Video Tutorials",              value: "150+"},
            {
              id: "2",              icon: FileText,
              title: "Articles",              value: "300+"},
            {
              id: "3",              icon: Award,
              title: "Certifications",              value: "5+"},
            {
              id: "4",              icon: Users,
              title: "Community Members",              value: "10K+"},
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Resources FAQ"
          sideDescription="Find answers to common questions about our learning resources"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "Are resources free?",              content:
                "Yes. All documentation, tutorials, and guides are available free to CloudSync users. Premium certification programs have a one-time fee."},
            {
              id: "2",              title: "How often are resources updated?",              content:
                "We update our knowledge base weekly with new tutorials, best practices, and case studies based on user feedback and platform updates."},
            {
              id: "3",              title: "Can I request training for my team?",              content:
                "Absolutely. Enterprise customers can schedule custom training sessions with our expert team. Contact our sales team to learn more."},
          ]}
        />
      </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>
  );
}