"use client";

import Link from "next/link";
import { Mail, Instagram, Facebook, Linkedin } from "lucide-react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="medium"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Milano Atelier"
          navItems={[
            { name: "Collections", id: "/collections" },
            { name: "About", id: "/about" },
            { name: "Craft", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Shop Now", href: "/collections" }}
        />
      </div>

      <div id="contact" data-section="contact" className="py-20">
        <ContactCTA 
          tag="Get in Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Visit Milano Atelier"
          description="Experience our atelier in the heart of Milan's fashion district. Schedule a private consultation with our master tailors, or simply visit to explore our latest collections. We look forward to welcoming you to the Milano Atelier family."
          buttons={[
            { text: "Schedule Consultation", href: "mailto:info@milanog-atelier.com" },
            { text: "Call Us", href: "tel:+390212345678" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="location" data-section="location" className="py-20">
        <MediaAbout 
          title="Find Us in Milan"
          description="Located in the prestigious Quadrilatero della Moda, our flagship atelier welcomes clients by appointment. Our showroom features our complete collections, and our private consultation rooms provide the perfect environment to discuss your bespoke requirements with our master tailors."
          tag="Location"
          tagAnimation="slide-up"
          imageSrc="https://img.b2bpic.net/free-photo/suitmaker-tailor-cutting-fabric_482257-78193.jpg?_wi=3"
          imageAlt="Milano Atelier location in Milan fashion district"
          buttons={[{ text: "Get Directions", href: "https://maps.google.com" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="consultation" data-section="consultation" className="py-20">
        <ContactCTA 
          tag="Private Consultation"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Book Your Personal Styling Session"
          description="Our master stylists offer personalized consultations to help you create the perfect wardrobe. Whether you're looking for a single statement piece or building a complete collection, we'll guide you through every step of the process."
          buttons={[
            { text: "Book Consultation", href: "mailto:appointments@milanog-atelier.com" },
            { text: "WhatsApp Us", href: "https://wa.me/390212345678" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <FooterCard 
        logoText="Milano Atelier"
        copyrightText="© 2025 Milano Atelier | Crafted with Excellence in Milan"
        socialLinks={[
          { icon: Instagram, href: "https://instagram.com/milanog-atelier", ariaLabel: "Instagram" },
          { icon: Facebook, href: "https://facebook.com/milanog-atelier", ariaLabel: "Facebook" },
          { icon: Linkedin, href: "https://linkedin.com/company/milano-atelier", ariaLabel: "LinkedIn" }
        ]}
      />
    </ThemeProvider>
  );
}