"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Phone, Mail, Calendar, ArrowRight, HelpCircle } from 'lucide-react';

export const metadata = {
  title: "Contact Paintasy - Book Your Event Today",  description: "Get in touch with Paintasy to book face painting and body art services for your event. Phone, email, and booking information available. Request a quote today!"};

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "/gallery" },
    { name: "About", id: "/about" },
    { name: "Packages", id: "packages" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Kids Party Face Painting", href: "/services" },
        { label: "Festival Face Art", href: "/services" },
        { label: "Corporate Events", href: "/services" },
        { label: "Body Painting", href: "/services" },
        { label: "Custom Designs", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "#packages-home" },
        { label: "FAQ", href: "#faq-section" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "TikTok", href: "https://tiktok.com" },
        { label: "Email", href: "mailto:paintasy@events.com" },
        { label: "Phone", href: "tel:+15551234567" },
      ],
    },
    {
      title: "Service Areas",      items: [
        { label: "Local Events", href: "/contact" },
        { label: "Regional Coverage", href: "/contact" },
        { label: "Book Now", href: "#booking-info" },
        { label: "Get Quote", href: "#contact-form" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Paintasy"
          navItems={navItems}
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 min-h-screen flex items-center">
        <ContactText
          text="Get in Touch with Paintasy"
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Call Now", href: "tel:+15551234567" },
            { text: "Email Us", href: "mailto:paintasy@events.com" },
          ]}
          ariaLabel="Contact page hero section"
          containerClassName="py-20"
          contentClassName="max-w-3xl mx-auto"
          textClassName="text-5xl lg:text-6xl font-extrabold text-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-12"
        />
      </div>

      <div id="booking-info" data-section="booking-info" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Phone Contact */}
            <div className="text-center p-8 border border-gray-200 rounded-lg hover:border-gray-400 transition-colors">
              <div className="flex justify-center mb-4">
                <Phone className="w-12 h-12 text-blue-600" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Call Us</h3>
              <p className="text-gray-600 mb-4">Available Monday-Friday, 9am-6pm</p>
              <a href="tel:+15551234567" className="text-lg font-semibold text-blue-600 hover:text-blue-700 transition-colors">
                +1 (555) 123-4567
              </a>
            </div>

            {/* Email Contact */}
            <div className="text-center p-8 border border-gray-200 rounded-lg hover:border-gray-400 transition-colors">
              <div className="flex justify-center mb-4">
                <Mail className="w-12 h-12 text-blue-600" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Email Us</h3>
              <p className="text-gray-600 mb-4">We respond within 24 hours</p>
              <a href="mailto:paintasy@events.com" className="text-lg font-semibold text-blue-600 hover:text-blue-700 transition-colors">
                paintasy@events.com
              </a>
            </div>

            {/* Booking Request */}
            <div className="text-center p-8 border border-gray-200 rounded-lg hover:border-gray-400 transition-colors">
              <div className="flex justify-center mb-4">
                <Calendar className="w-12 h-12 text-blue-600" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Book Now</h3>
              <p className="text-gray-600 mb-4">Submit a booking request form</p>
              <a href="#contact-form" className="text-lg font-semibold text-blue-600 hover:text-blue-700 transition-colors flex items-center justify-center gap-2">
                Get Started <ArrowRight className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </div>

      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-4xl font-extrabold mb-8 text-center">Why Choose Paintasy?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-3 flex items-center gap-3">
                <span className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">✓</span>
                Quick Response
              </h3>
              <p className="text-gray-700">We respond to all inquiries within 24 hours to confirm availability and discuss your event details.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-3 flex items-center gap-3">
                <span className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">✓</span>
                Transparent Pricing
              </h3>
              <p className="text-gray-700">No hidden fees. We provide clear quotes tailored to your event size, duration, and specific needs.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-3 flex items-center gap-3">
                <span className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">✓</span>
                Flexible Packages
              </h3>
              <p className="text-gray-700">From small intimate gatherings to large festivals, we offer customizable packages that fit your needs.</p>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-3 flex items-center gap-3">
                <span className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">✓</span>
                Professional Service
              </h3>
              <p className="text-gray-700">All our artists are trained professionals committed to safety, hygiene, and creating unforgettable experiences.</p>
            </div>
          </div>
        </div>
      </div>

      <div id="faq-section" data-section="faq-section" className="mx-auto px-4 md:px-6">
        <ContactFaq
          faqs={[
            {
              id: "faq-booking-1",              title: "How far in advance should I book?",              content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events or peak seasons (summer and holidays), 4-6 weeks advance booking is ideal. We also accept last-minute bookings depending on our schedule availability."
            },
            {
              id: "faq-booking-2",              title: "What's the booking process?",              content: "Simply call us, email, or submit an inquiry through this page. We'll discuss your event details, answer any questions, provide a customized quote, and confirm your booking. A deposit secures your date."
            },
            {
              id: "faq-booking-3",              title: "Can I customize my package?",              content: "Absolutely! We work with you to create a customized package that matches your event size, theme, budget, and vision. Whether you need adjustments to duration, artist count, or services, we're happy to accommodate."
            },
            {
              id: "faq-booking-4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, bank transfers, and digital payment platforms. A deposit of 50% secures your booking, with the balance due on the event day."
            },
            {
              id: "faq-booking-5",              title: "Do you offer refunds or rescheduling?",              content: "If you need to reschedule, we'll work with you to find an alternative date. Cancellations made more than 2 weeks in advance receive a full refund of the deposit. Cancellations within 2 weeks may forfeit the deposit."
            },
            {
              id: "faq-booking-6",              title: "Are there travel fees?",              content: "For events within our local service area, there are no additional travel fees. For events outside our standard area, a reasonable travel fee may apply. We'll discuss this when you contact us."
            },
          ]}
          ctaTitle="Ready to Book Your Event?"
          ctaDescription="Contact us today to check availability and get a personalized quote for your face painting and body art needs. Our professional team is ready to create magic for your special occasion."
          ctaButton={{ text: "Contact Us Now", href: "tel:+15551234567" }}
          ctaIcon={Phone}
          useInvertedBackground={true}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          ariaLabel="Contact form and FAQ section"
        />
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
          bottomRightText="Professional Event Entertainment | Creative Services"
          ariaLabel="Site footer with links"
          containerClassName="gap-12"
          columnsClassName="grid-cols-2 lg:grid-cols-4"
          columnTitleClassName="font-extrabold text-lg"
          columnItemClassName="hover:opacity-70 transition-opacity"
        />
      </div>
    </ThemeProvider>
  );
}