"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import { Zap } from "lucide-react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function MetalRoofingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Martinez Roofing"
          navItems={[
            { name: "Metal Roofing", id: "/metal-roofing" },
            { name: "Construction", id: "/construction" },
            { name: "Projects", id: "/projects" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="metal-roofing-services" data-section="metal-roofing-services">
        <ProductCardTwo
          title="Expert Metal Roofing Solutions"
          description="From standing seam installations to repairs and maintenance, we provide comprehensive metal roofing services with unmatched craftsmanship and attention to detail."
          products={[
            {
              id: "1",
              brand: "Martinez",
              name: "Standing Seam Installation",
              price: "Premium Quality",
              rating: 5,
              reviewCount: "50+",
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg?_wi=3",
              imageAlt: "Standing seam metal roofing installation"
            },
            {
              id: "2",
              brand: "Martinez",
              name: "Metal Roof Repairs",
              price: "Fast Service",
              rating: 5,
              reviewCount: "45+",
              imageSrc: "https://img.b2bpic.net/free-photo/worker-cuts-steel-profiles-drywall-close-up-selective-focus-preparing-installation-ceiling-profile-system-frame-renovation-repair_166373-1903.jpg?_wi=3"
            },
            {
              id: "3",
              brand: "Martinez",
              name: "Panel Replacement",
              price: "Quality Parts",
              rating: 5,
              reviewCount: "40+",
              imageSrc: "https://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg?_wi=1"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Get Metal Roofing Quote", href: "/contact" }
          ]}
        />
      </div>

      <div id="metal-roofing-process" data-section="metal-roofing-process">
        <FeatureCardMedia
          title="Our Metal Roofing Installation Process"
          description="From initial assessment to final inspection, we ensure every standing seam installation meets the highest standards of quality and durability."
          tag="Our Process"
          features={[
            {
              id: "assessment",
              title: "Professional Assessment",
              description: "Thorough inspection of your roof structure, measurements, and material recommendations tailored to your home.",
              tag: "Step 1",
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-hands-business-meeting_93675-132442.jpg?_wi=1"
            },
            {
              id: "installation",
              title: "Expert Installation",
              description: "Precise standing seam installation using premium materials and proven techniques for long-lasting performance.",
              tag: "Step 2",
              imageSrc: "https://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg?_wi=1"
            },
            {
              id: "inspection",
              title: "Quality Inspection",
              description: "Complete final walkthrough and inspection to ensure everything meets our high standards and your satisfaction.",
              tag: "Step 3",
              imageSrc: "https://img.b2bpic.net/free-photo/company-manager-holding-project-plans-while-talking-african-american-manual-worker-who-is-pointing-something-factory_637285-4115.jpg?_wi=1"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metal-roofing-testimonials" data-section="metal-roofing-testimonials">
        <TestimonialCardThirteen
          title="What Customers Say About Our Metal Roofing"
          description="Real feedback from homeowners who chose Martinez for their metal roofing projects."
          testimonials={[
            {
              id: "1",
              name: "Robert Martinez",
              handle: "@homeowner_6",
              testimonial: "Best roofing contractor I've worked with. The standing seam roof looks incredible.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
            },
            {
              id: "2",
              name: "Jennifer Davis",
              handle: "@homeowner_5",
              testimonial: "Exceeded expectations on every level. Professional installation and clean work site.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=3"
            },
            {
              id: "3",
              name: "David Kim",
              handle: "@homeowner_4",
              testimonial: "No trace left behind—top notch metal roofing work from start to finish.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",
              items: [
                { label: "Home", href: "/" },
                { label: "Metal Roofing", href: "/metal-roofing" },
                { label: "Construction", href: "/construction" },
                { label: "Projects", href: "/projects" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Standing Seam Install", href: "/metal-roofing" },
                { label: "Repairs & Replacement", href: "/metal-roofing" },
                { label: "Custom Projects", href: "/construction" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Martinez Metal Roofing & Construction. All rights reserved."
          bottomRightText="Built for quality and precision."
        />
      </div>
    </ThemeProvider>
  );
}