"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Envelope, Clock, MapPin, Phone } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Flowers Life"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Gallery", id: "/gallery" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Book Consultation", href: "/contact" }}
        />
      </div>

      <div id="contact-hero" data-section="contact-hero">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Envelope}
          title="Ready to bring your vision to life?"
          description="Contact us today to discuss your floral needs and let us help you create something truly beautiful for your special occasion."
          inputPlaceholder="Enter your email address"
          buttonText="Get Started"
          termsText="We'll respond within 24 hours to discuss your floral design needs."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <AboutMetric
          title="We're here to help make your floral dreams come true with personalized service and expert craftsmanship"
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Clock, label: "Response Time", value: "24hrs" },
            { icon: MapPin, label: "Service Areas", value: "5 Cities" },
            { icon: Phone, label: "Consultations", value: "Free" },
            { icon: Envelope, label: "Ways to Connect", value: "Multiple" }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Stay Connected"
          tagIcon={Envelope}
          title="Join our floral community"
          description="Subscribe to receive seasonal inspiration, special offers, and expert tips for caring for your beautiful arrangements."
          inputPlaceholder="Your email for updates"
          buttonText="Subscribe"
          termsText="We respect your privacy and will never share your email. Unsubscribe anytime."
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal logoText="Flowers Life" />
    </ThemeProvider>
  );
}