"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Mail, Phone, MapPin } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Shop", id: "shop" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Sadek Music" />
      </div>

      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 py-16 md:py-24">
        <div className="mx-auto max-w-2xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Get in Touch</h1>
          <p className="text-lg text-foreground/80 mb-8">
            We'd love to hear from you. Whether you have questions about our instruments, need repair services, or want to explore our products, our team is here to help.
          </p>
        </div>
      </div>

      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-12">
        <div className="mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-card rounded-2xl p-6 text-center border border-foreground/10">
            <Phone className="w-12 h-12 mx-auto mb-4 text-accent" />
            <h3 className="text-xl font-bold mb-2">Phone</h3>
            <p className="text-foreground/70">
              <a href="tel:+971-4-XXXXXXX" className="hover:text-accent transition">
                +971-4-XXXXXXX
              </a>
            </p>
            <p className="text-sm text-foreground/60 mt-2">Available: 10am - 8pm (Mon-Sat)</p>
          </div>

          <div className="bg-card rounded-2xl p-6 text-center border border-foreground/10">
            <Mail className="w-12 h-12 mx-auto mb-4 text-accent" />
            <h3 className="text-xl font-bold mb-2">WhatsApp</h3>
            <p className="text-foreground/70">
              <a href="https://wa.me/971XXXXXXXXX" target="_blank" rel="noopener noreferrer" className="hover:text-accent transition">
                Message us on WhatsApp
              </a>
            </p>
            <p className="text-sm text-foreground/60 mt-2">Quick responses guaranteed</p>
          </div>

          <div className="bg-card rounded-2xl p-6 text-center border border-foreground/10">
            <MapPin className="w-12 h-12 mx-auto mb-4 text-accent" />
            <h3 className="text-xl font-bold mb-2">Visit Us</h3>
            <p className="text-foreground/70">
              Downtown Dubai<br />
              UAE
            </p>
            <p className="text-sm text-foreground/60 mt-2">View our store location</p>
          </div>
        </div>
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Ready to find your perfect instrument? Our expert staff is ready to help you with any questions about our products or services. Get in touch today!"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            {
              text: "📞 Call Now",
              href: "tel:+971-4-XXXXXXX",
            },
            {
              text: "💬 WhatsApp Us",
              href: "https://wa.me/971XXXXXXXXX",
            },
            {
              text: "🛒 Browse Shop",
              href: "/",
            },
          ]}
        />
      </div>

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