"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 TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles } from "lucide-react";

export default function ContactPage() {
  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="Let's Build Your Vision Together"
          description="Ready to start your next project? Contact HMG Construction Management to discuss your vision, timeline, and budget. Our team is here to answer your questions and provide a detailed quote tailored to your needs."
          background={{ variant: "floatingGradient" }}
          tag="Get In Touch"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Get Your Free Quote",
              href: "mailto:contact@hmgconstruction.com",
            },
            {
              text: "Call Us Today",
              href: "tel:+1234567890",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg"
          imageAlt="Contact our professional team"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Choose HMG for Your Project"
          description={[
            "When you partner with HMG Construction Management, you're choosing a team dedicated to turning your vision into reality. We understand that every project is unique, and we tailor our approach to meet your specific needs and expectations.",
            "Our consultative process begins with a comprehensive understanding of your goals, budget, and timeline. We'll walk you through every step of the renovation process, explaining our recommendations and providing transparent cost estimates.",
            "With HMG, you're not just hiring a construction company—you're gaining a trusted advisor committed to delivering exceptional results, transparent communication, and complete peace of mind throughout your project journey.",
          ]}
          buttons={[
            {
              text: "Schedule Consultation",
              href: "tel:+1234567890",
            },
          ]}
          buttonAnimation="slide-up"
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Transform Your Space? Let's Discuss Your Vision."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Get Your Free Quote",
              href: "mailto:contact@hmgconstruction.com",
            },
            {
              text: "Call Us Today",
              href: "tel:+1234567890",
            },
          ]}
          background={{ variant: "floatingGradient" }}
          useInvertedBackground={false}
        />
      </div>

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