"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MediaAbout from "@/components/sections/about/MediaAbout";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { Phone, MapPin } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Services", id: "services" },
    { name: "Why Us", id: "whyus" },
    { name: "Reviews", id: "testimonials" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ELECTRIC SOUL"
          navItems={navItems}
        />
      </div>

      <div id="serviceareas" data-section="serviceareas">
        <MediaAbout
          title="Serving All of Buenos Aires"
          description="Located in C1414 (Centro), we serve Palermo, San Telmo, La Boca, Recoleta, and all surrounding neighborhoods. Fast response times throughout Ciudad Autónoma de Buenos Aires."
          tag="Service Areas"
          tagIcon={MapPin}
          buttons={[
            { text: "Request Service", href: "#contact" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/finding-their-desitination-map_53876-24771.jpg"
          imageAlt="Service area map for Buenos Aires"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Contact Us Now"
          title="Emergency Electrical Service"
          description="Available 24/7 for all your electrical needs. Call us immediately for emergency repairs, or use the form to request service and we'll respond within 30 minutes during business hours."
          tagIcon={Phone}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg"
          mediaPosition="right"
          mediaAnimation="slide-up"
          inputPlaceholder="Your email"
          buttonText="Request Service"
          termsText="We'll respond to your emergency request within 30 minutes. Available 24/7. Call 011 4188-2761 for immediate assistance."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/mechanic-working-workshop_1170-2528.jpg"
          imageAlt="Professional electrical work"
          logoText="ELECTRIC SOUL"
          copyrightText="© 2025 ELECTRIC SOUL - 24/7 Emergency Electrician Buenos Aires"
          columns={[
            {
              title: "Services",
              items: [
                { label: "Emergency Repairs", href: "/services" },
                { label: "Installations", href: "/services" },
                { label: "Panel Upgrades", href: "/services" },
                { label: "Lighting", href: "/services" },
              ],
            },
            {
              title: "Contact",
              items: [
                { label: "Call: 011 4188-2761", href: "tel:+541141882761" },
                { label: "WhatsApp", href: "https://wa.me/5491141882761" },
                { label: "Emergency Service", href: "#contact" },
                { label: "C1414, Buenos Aires", href: "#" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Reviews", href: "/" },
                { label: "Service Areas", href: "#serviceareas" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}