"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Check, Zap, Scale, Shield } from 'lucide-react';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';

export default function GalleryPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "Gallery", id: "/gallery" },
              { name: "Contact", id: "/contact" }
            ]}
            brandName="Al Madain Consulting"
          />
        </div>
        <div id="gallery" data-section="gallery">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={false}
            title="Our Engineering Projects"
            description="Explore our portfolio of completed projects across Qatar."
            products={[
              { id: "p1", name: "Commercial Tower", price: "Doha", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-axis-towers-tbilisi-georgia-blue-sky_181624-61144.jpg" },
              { id: "p2", name: "Residential Complex", price: "Doha", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-999.jpg" },
              { id: "p3", name: "Urban Planning", price: "Doha", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-708.jpg" }
            ]}
          />
        </div>
        <div id="feature" data-section="feature">
          <FeatureCardTwentySix
            textboxLayout="default"
            useInvertedBackground={false}
            title="Our Standards"
            description="How we guarantee quality in every build."
            features={[
              { title: "Compliance", description: "Global safety adherence.", buttonIcon: Check, imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-modern-architecture-facade_1359-831.jpg", imageAlt: "modern architecture exterior building" },
              { title: "Innovation", description: "Modern technical workflows.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-manager-working-with-solar-engineering-team-doing-brainstorming-improving_482257-135271.jpg", imageAlt: "modern architecture exterior building" },
              { title: "Precision", description: "Accuracy in all blueprints.", buttonIcon: Scale, imageSrc: "http://img.b2bpic.net/free-photo/shareholders-team-ensure-factory-follows-safety-procedures-before-investing_482257-119563.jpg", imageAlt: "modern architecture exterior building" },
              { title: "Durability", description: "Built for longevity.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg", imageAlt: "modern architecture exterior building" }
            ]}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/empty-architectural-office-with-building-model-blueprints-plans-table-nobody-space-used-real-estate-design-development-with-architecture-construction-structure_482257-27835.jpg"
            logoText="Al Madain Engineering"
            columns={[
              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
              { title: "Contact", items: [{ label: "Doha Office", href: "/contact" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}