"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';
import { HelpCircle } from 'lucide-react';

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "gallery" },
    { name: "Packages", id: "packages" },
    { name: "About", id: "about" },
    { 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" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/packages" },
        { 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" },
      ],
    },
    {
      title: "Get Started",
      items: [
        { label: "View Packages", href: "/packages" },
        { label: "Book Now", href: "/packages" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  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-page-hero" data-section="contact-page-hero">
        <HeroBillboardGallery
          title="Contact & Booking"
          description="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. We'd love to discuss your event and create an unforgettable experience for your guests."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Request a Quote", href: "/contact" },
            { text: "Call Us", href: "tel:+15551234567" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/mother-daughter-making-masks-home_1303-11291.jpg?_wi=4",
              imageAlt: "Contact Paintasy for your event",
            },
          ]}
          mediaAnimation="opacity"
          ariaLabel="Contact page hero section"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Ready to book Paintasy for your event? Fill out our contact form, give us a call, or send an email. We typically respond within 24 hours. Let's create something magical together!"
          animationType="background-highlight"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Send Email", href: "mailto:paintasy@events.com" },
            { text: "Call Now", href: "tel:+15551234567" },
          ]}
          ariaLabel="Contact call-to-action section"
          containerClassName="py-16"
          contentClassName="max-w-3xl mx-auto"
          textClassName="text-3xl font-extrabold text-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about booking Paintasy for your event."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="smooth"
          faqsAnimation="slide-up"
          useInvertedBackground={true}
          showCard={true}
          faqs={[
            {
              id: "faq-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, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule.",
            },
            {
              id: "faq-2",
              title: "Are your face paints safe for children?",
              content: "Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin. We also practice strict hygiene protocols, using clean brushes and sanitized application tools for each client.",
            },
            {
              id: "faq-3",
              title: "How long does face painting take per person?",
              content: "Simple designs typically take 3-5 minutes, while more detailed or custom designs take 8-12 minutes. At festivals, we optimize for speed without sacrificing quality. For parties, we allow a bit more time for custom designs and interactions with children.",
            },
            {
              id: "faq-4",
              title: "What if someone has a skin allergy?",
              content: "We have hypoallergenic options available. Please inform us of any allergies when booking. We're always happy to discuss alternative products or test patches before proceeding with full face painting.",
            },
            {
              id: "faq-5",
              title: "Can you do custom designs?",
              content: "Yes! We specialize in custom designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs.",
            },
            {
              id: "faq-6",
              title: "What's included in your packages?",
              content: "All packages include professional face painting service, setup and teardown, and our artist's materials. Some packages include additional services like temporary tattoos or body painting. Check specific package details for what's included.",
            },
          ]}
          buttons={[
            { text: "View All Packages", href: "/packages" },
          ]}
          buttonAnimation="blur-reveal"
          ariaLabel="FAQ section with common questions"
          containerClassName="gap-12"
          titleClassName="text-4xl font-extrabold"
          descriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="footer" data-section="footer">
        <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>
  );
}