"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function HomePage() {
  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="hero" data-section="hero">
          <HeroBillboardRotatedCarousel
            background={{ variant: "rotated-rays-animated-grid" }}
            title="Professional Digital QHSE Solutions"
            description="More than 100 premium digital QHSE products and smart solutions designed for HSE professionals, companies, consultants, and training centers worldwide."
            buttons={[
              { text: "Explore Products", href: "/products" },
              { text: "Contact Us", href: "/contact" }
            ]}
            buttonAnimation="slide-up"
            carouselItems={[
              { id: "hc-1", imageSrc: "http://img.b2bpic.net/free-photo/industry-40-engineer-upgrading-robotic-automation-systems_482257-126783.jpg", imageAlt: "Futuristic industrial plant" },
              { id: "hc-2", imageSrc: "http://img.b2bpic.net/free-photo/important-information-three-men-protective-helmet-looking-laptop-with-interest-while-standing-construction-site-day_259150-57630.jpg", imageAlt: "Engineers reviewing blueprints at construction site" },
              { id: "hc-3", imageSrc: "http://img.b2bpic.net/free-photo/industry-4-0-engineer-programs-automated-assembly-line-robot-arm-using-cad-software-tablet_482257-135813.jpg", imageAlt: "Modern warehouse facility with automated systems" },
              { id: "hc-4", imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589601.jpg", imageAlt: "Oil and gas facility at sunset" },
              { id: "hc-5", imageSrc: "http://img.b2bpic.net/free-photo/team-leader-tells-workers-how-optimize-energy-supply-photovoltaics-factory_482257-119720.jpg", imageAlt: "HSE meeting in corporate office" },
              { id: "hc-6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-woman-working-office_23-2149161655.jpg", imageAlt: "High-tech QHSE training session" }
            ]}
            autoPlay={true}
            autoPlayInterval={5000}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardEleven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "100+", title: "Digital Products", imageSrc: "http://img.b2bpic.net/free-vector/flat-minimal-technology-label-collection_23-2149055600.jpg", imageAlt: "Digital Products Icon" },
              { id: "m2", value: "Worldwide", title: "International Solutions", imageSrc: "http://img.b2bpic.net/free-photo/pointer-pin-location-earth-global-world-with-cardboard-boxes-transportation-logistics-concept-pink-background-icon-symbol-3d-rendering_56104-1283.jpg", imageAlt: "International Solutions Icon" },
              { id: "m3", value: "Certified", title: "Professional Documentation", imageSrc: "http://img.b2bpic.net/free-photo/close-up-still-life-hard-exams_23-2149314050.jpg", imageAlt: "Professional Documentation Icon" },
              { id: "m4", value: "Smart", title: "QHSE Systems", imageSrc: "http://img.b2bpic.net/free-photo/smart-factory-experts-optimizing-assembly-line-conveyor-belts_482257-126221.jpg", imageAlt: "Smart QHSE Systems Icon" }
            ]}
            title="Our Impact & Expertise"
            description="Driving excellence in Quality, Health, Safety, and Environment globally with proven results."
          />
        </div>

        <div id="social-proof" data-section="social-proof">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={false}
            names={["Global Energy Co.", "Apex Constructors", "CertifyPro Group", "LogiChain Solutions", "EcoGuard Alliance", "IndusTech Innovations", "SafeTrain Institute"]}
            title="Trusted by Leading Industries Worldwide"
            description="Partnering with global leaders to elevate QHSE standards."
            showCard={true}
          />
        </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>
  );
}
