"use client";

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

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

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Nottingham Premier Roofing"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id === "/" ? "/" : item.id,
          }))}
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <div className="mx-auto px-4 md:px-6 py-16 md:py-24">
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-12">
              <h1 className="text-4xl md:text-5xl font-bold text-[#1f2027] mb-4">Get Your Free Quote</h1>
              <p className="text-lg text-[#1f2027]/70">Contact our team today for a no-obligation roofing assessment and competitive quote.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white rounded-2xl p-8 shadow-sm border border-[#e3deea]">
                <div className="flex items-center gap-3 mb-3">
                  <Phone className="w-6 h-6 text-[#627dc6]" />
                  <h3 className="font-semibold text-[#1f2027]">Call Us</h3>
                </div>
                <p className="text-[#1f2027]/70 mb-2">Available 24/7 for emergencies</p>
                <a href="tel:+441159123456" className="text-[#627dc6] font-semibold hover:underline">
                  0115 912 3456
                </a>
              </div>

              <div className="bg-white rounded-2xl p-8 shadow-sm border border-[#e3deea]">
                <div className="flex items-center gap-3 mb-3">
                  <Mail className="w-6 h-6 text-[#627dc6]" />
                  <h3 className="font-semibold text-[#1f2027]">Email Us</h3>
                </div>
                <p className="text-[#1f2027]/70 mb-2">Response within 24 hours</p>
                <a href="mailto:info@nottinghamroofing.co.uk" className="text-[#627dc6] font-semibold hover:underline">
                  info@nottinghamroofing.co.uk
                </a>
              </div>
            </div>

            <div className="mt-12 bg-gradient-to-br from-[#e3deea] to-[#f0ebf5] rounded-2xl p-8 border border-[#627dc6]/20">
              <div className="flex items-start gap-3 mb-4">
                <MapPin className="w-6 h-6 text-[#627dc6] flex-shrink-0 mt-0.5" />
                <div>
                  <h3 className="font-semibold text-[#1f2027] mb-2">Nottingham Area Coverage</h3>
                  <p className="text-[#1f2027]/70">Serving Nottingham and the East Midlands. We cover residential and commercial properties throughout the region.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Ready to Proceed?"
          tagIcon={Mail}
          title="Schedule Your Free Assessment"
          description="Our friendly team is standing by to answer your questions and provide a tailored quote for your roofing project."
          buttons={[
            { text: "Request Free Quote", href: "#" },
            { text: "Call Now: 0115 912 3456", href: "tel:+441159123456" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Nottingham Premier Roofing"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms & Conditions", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}