"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, Zap, Award } from "lucide-react";

export default function ProjectsPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Why Us", id: "why-us" },
    { name: "Projects", id: "projects" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="HMG Construction"
          navItems={navItems}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Our Portfolio of Excellence"
          description="Explore the projects that define HMG Construction Management's commitment to luxury, precision, and transformative design. Every project showcases our dedication to excellence and client satisfaction."
          background={{ variant: "floatingGradient" }}
          tag="Premium Projects"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Start Your Project",
              href: "#contact",
            },
            {
              text: "Request Consultation",
              href: "/contact",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg"
          imageAlt="Modern luxury renovation project"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Showcase Projects"
          description="Comprehensive renovation case studies that demonstrate our expertise across residential and commercial properties"
          tag="What We Deliver"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Request Quote",
              href: "#contact",
            },
          ]}
          buttonAnimation="slide-up"
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Luxury Residential Renovations",
              description: "Complete home transformations that blend modern aesthetics with functional excellence. From kitchen remodels to full-home renovations, our projects consistently exceed expectations.",
              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/successful-business-man-signing-documents-modern-office_158595-5379.jpg",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/executives-talking-about-new-project_1098-4115.jpg",
              },
            },
            {
              id: 2,
              title: "Commercial Property Upgrades",
              description: "Strategic renovations for commercial spaces that enhance functionality and client experience. Our project management ensures minimal disruption and maximum results.",
              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/potted-plants-peat-pots-gardening-tools-straw-hat-napkin-concrete-backdrop_23-2148181147.jpg",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/woman-speaking-phone-sofa_23-2147778855.jpg",
              },
            },
            {
              id: 3,
              title: "Sustainable Green Renovations",
              description: "Eco-conscious projects featuring energy-efficient systems, sustainable materials, and modern technology. Combining luxury with environmental responsibility.",
              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-wallpaper-close-up_23-2148859931.jpg",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/two-cheerful-businessman-handshaking-helmet-new-building_496169-937.jpg",
              },
            },
          ]}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MetricCardTwo
          title="Our Project Impact"
          description="Proven metrics that showcase the scale and quality of HMG's renovation portfolio"
          tag="By The Numbers"
          tagIcon={Award}
          tagAnimation="slide-up"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",
              value: "500+",
              description: "Successful Projects",
            },
            {
              id: "2",
              value: "$50M+",
              description: "Total Investment Managed",
            },
            {
              id: "3",
              value: "250+",
              description: "Satisfied Clients",
            },
            {
              id: "4",
              value: "100%",
              description: "On-Time Delivery Rate",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="Real testimonials from homeowners and businesses transformed by HMG's expertise"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              title: "Complete Home Transformation",
              quote: "HMG took our outdated home and transformed it into a modern masterpiece. The level of organization and professionalism was remarkable. They delivered exactly what they promised, on time and within budget.",
              name: "Isaac Paz",
              role: "Homeowner",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-positive-fair-haired-business-woman_1262-2364.jpg",
            },
            {
              id: "2",
              title: "Commercial Space Excellence",
              quote: "Our office renovation was seamless. HMG coordinated every detail with precision, minimizing disruption to our business operations. The results exceeded our vision.",
              name: "Pamela Salinas",
              role: "Commercial Property Owner",
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-talking-partner_1262-1998.jpg",
            },
            {
              id: "3",
              title: "Transparent Project Management",
              quote: "From initial consultation to final walkthrough, HMG demonstrated unwavering commitment to quality and transparency. This is a company you can truly trust.",
              name: "Franco Quiñonez",
              role: "Residential Client",
              imageSrc: "http://img.b2bpic.net/free-photo/parents-welcoming-son-kitchen_23-2148414950.jpg",
            },
            {
              id: "4",
              title: "Energy Efficiency Champion",
              quote: "They upgraded our home with sustainable systems that not only reduced our energy costs but also enhanced comfort. Smart investments for the future.",
              name: "Kevin Gg",
              role: "Eco-Conscious Homeowner",
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-front-glass-building_23-2147704437.jpg",
            },
            {
              id: "5",
              title: "Luxury Renovation Expert",
              quote: "The attention to detail in our luxury renovation was exceptional. Every finish was pristine, every timeline respected. HMG is the gold standard.",
              name: "Gloryana Ortega",
              role: "Luxury Homeowner",
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-front-view-business-man_23-2148763836.jpg",
            },
            {
              id: "6",
              title: "Multi-Project Partnership",
              quote: "We've worked with HMG on multiple projects over the years. Their consistency, reliability, and quality have made them our preferred construction partner.",
              name: "Luis Mario Castañeda",
              role: "Repeat Client",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151065019.jpg",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="HMG Construction"
          leftLink={{
            text: "Privacy Policy",
            href: "#",
          }}
          rightLink={{
            text: "Contact",
            href: "/contact",
          }}
        />
      </div>
    </ThemeProvider>
  );
}