"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { HelpCircle } from 'lucide-react';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';

export default function FaqPage() {
  const navItems = [
    {
      name: "Home",      id: "/"
    },
    {
      name: "About Us",      id: "/about"
    },
    {
      name: "Products",      id: "/products"
    },
    {
      name: "Services",      id: "/services"
    },
    {
      name: "Blog",      id: "/blog"
    },
    {
      name: "Testimonials",      id: "/testimonials"
    },
    {
      name: "FAQ",      id: "/faq"
    },
    {
      name: "Contact",      id: "/contact"
    }
  ];

  const footerColumns = [
    {
      title: "Products",      items: [
        {
          label: "Risk Assessment",          href: "/products"
        },
        {
          label: "HSE Procedures",          href: "/products"
        },
        {
          label: "ISO Documentation",          href: "/products"
        },
        {
          label: "Digital Platforms",          href: "/products"
        }
      ]
    },
    {
      title: "Company",      items: [
        {
          label: "About Us",          href: "/about"
        },
        {
          label: "Services",          href: "/services"
        },
        {
          label: "Blog",          href: "/blog"
        },
        {
          label: "Contact Us",          href: "/contact"
        }
      ]
    },
    {
      title: "Support",      items: [
        {
          label: "FAQ",          href: "/faq"
        },
        {
          label: "WhatsApp",          href: "https://wa.me/212638673530"
        },
        {
          label: "Email",          href: "mailto:nimadigital99@gmail.com"
        }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="grid"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={navItems}
            brandName="Smart QHSE System"
            button={{
              text: "Get a Quote",              href: "/contact"
            }}
          />
        </div>

        <div id="faq-section" data-section="faq-section">
          <FaqSplitMedia
            textboxLayout="default"
            useInvertedBackground={false}
            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-holding-smartphone_23-2148902606.jpg"
            imageAlt="interactive safety checklist factory inspection"
            faqs={[
              {
                id: "faq1",                title: "What are Smart QHSE Systems?",                content: "Integrated platforms for Quality, Health, Safety, and Environment management."
              },
              {
                id: "faq2",                title: "Benefits of Digital QHSE?",                content: "Enhanced compliance, reduced risks, improved efficiency, and real-time insights."
              },
              {
                id: "faq3",                title: "How often are products updated?",                content: "Our products are regularly updated to ensure compliance with the latest regulations and best practices."
              },
              {
                id: "faq4",                title: "Do you offer custom solutions?",                content: "Yes, we provide tailored QHSE solutions to meet the unique needs of your organization."
              }
            ]}
            title="Frequently Asked Questions"
            description="Find answers to common questions about our Smart QHSE Systems and services."
            faqsAnimation="slide-up"
            tag="FAQ"
            tagIcon={HelpCircle}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Smart QHSE System"
            columns={footerColumns}
            copyrightText="Smart QHSE System © 2026 - All Rights Reserved"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
