"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Image, Phone } from 'lucide-react';

export default function GalleryPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
            { name: "Gallery", id: "/gallery" }
          ]}
          brandName="Northstar Roofing"
          bottomLeftText="North Dakota Roofing"
          bottomRightText="(701) 555-0100"
        />
      </div>

      <div id="main-gallery" data-section="main-gallery">
        <BlogCardOne 
          title="Our Roofing Project Gallery"
          description="Browse our extensive portfolio of completed residential and commercial roofing projects across North Dakota"
          tag="Portfolio"
          tagIcon={Image}
          blogs={[
            {
              id: "1",
              category: "Residential",
              title: "Complete Roof Replacement - Bismarck",
              excerpt: "Full architectural shingle replacement on 2,400 sq ft home with premium materials and lifetime warranty",
              imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_74190-4300.jpg?_wi=3",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "March 2024"
            },
            {
              id: "2",
              category: "Storm Restoration",
              title: "Hail Damage Recovery - Minot",
              excerpt: "Restored severe hail damage with complete insurance coordination and customer satisfaction",
              imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "February 2024"
            },
            {
              id: "3",
              category: "Commercial",
              title: "Commercial Flat Roof - Fargo",
              excerpt: "Industrial-grade TPO roofing system for 5,000 sq ft warehouse with 20-year warranty",
              imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg?_wi=3",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "January 2024"
            },
            {
              id: "4",
              category: "Residential",
              title: "Metal Roof Installation - Grand Forks",
              excerpt: "Premium standing-seam metal roof for modern farmhouse with energy-efficient design",
              imageSrc: "http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "December 2023"
            },
            {
              id: "5",
              category: "Emergency Repair",
              title: "Emergency Leak Repair - Williston",
              excerpt: "24-hour emergency response to severe wind damage with immediate tarping and permanent repair",
              imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-with-face-mask-feeling-ill-holding-his-head-pain-production-facility_637285-12061.jpg?_wi=2",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "November 2023"
            },
            {
              id: "6",
              category: "Commercial",
              title: "Multi-Building Project - Dickinson",
              excerpt: "Complete roofing system replacement for industrial complex with coordinated scheduling",
              imageSrc: "http://img.b2bpic.net/free-photo/chernobyl-alienation-zone-view-chernobyl-atomic-plant-background-river_627829-11757.jpg?_wi=2",
              authorName: "Northstar Team",
              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",
              date: "October 2023"
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Request Quote for Similar Project", href: "/contact" }]}
        />
      </div>

      <div id="project-stats" data-section="project-stats">
        <MetricCardTwo 
          title="Project Portfolio Statistics"
          description="Numbers that showcase our experience and expertise"
          tag="Portfolio Stats"
          metrics={[
            { id: "1", value: "500+", description: "Completed Projects This Year" },
            { id: "2", value: "99%", description: "Customer Satisfaction Rate" },
            { id: "3", value: "15M+", description: "Square Feet of Roofing Installed" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="gallery-cta" data-section="gallery-cta">
        <ContactCenter 
          tag="Your Project Next"
          tagIcon={Phone}
          title="Ready to Start Your Roofing Project?"
          description="See your property featured in our next gallery showcase. Contact us today for a free estimate and consultation."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Get My Free Quote"
          termsText="Join hundreds of satisfied customers across North Dakota. Your information is secure."
        />
      </div>

      <FooterBaseReveal 
        columns={[
          {
            title: "Services",
            items: [
              { label: "Roof Replacement", href: "/services" },
              { label: "Roof Repair", href: "/services" },
              { label: "Storm Damage", href: "/services" },
              { label: "Commercial", href: "/services" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Gallery", href: "/gallery" },
              { label: "Reviews", href: "/reviews" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Contact",
            items: [
              { label: "Phone: (701) 555-0100", href: "tel:+17015550100" },
              { label: "Emergency: 24/7 Available", href: "tel:+17015550100" },
              { label: "Licensed & Insured", href: "#" },
              { label: "BBB Accredited", href: "#" }
            ]
          }
        ]}
        copyrightText="© 2025 Northstar Roofing LLC. North Dakota Roofing Specialists. All rights reserved."
      />
    </ThemeProvider>
  );
}