"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';

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

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Beautiful Flowers"
          navItems={navItems.map(item => ({
            name: item.name,
            id: item.id
          }))}
          button={{
            text: "Order Now",
            href: "/shop"
          }}
        />
      </div>

      <div style={{ paddingTop: '8rem', paddingBottom: '4rem' }}>
        <div id="contact-main" data-section="contact-main">
          <ContactText
            text="We'd love to hear from you! Whether you're planning a special event, need a custom arrangement, or have questions about our services, our team of floral experts is here to help. Reach out to discuss your vision and let us create something beautiful together."
            animationType="entrance-slide"
            buttons={[
              { text: "Send Message", href: "mailto:hello@beautifulflowers.com" },
              { text: "Call Us", href: "tel:+1234567890" }
            ]}
            useInvertedBackground="noInvert"
          />
        </div>
      </div>

      <div style={{ paddingBottom: '4rem' }}>
        <div id="contact-secondary" data-section="contact-secondary">
          <ContactText
            text="Visit our showroom to see our arrangements in person, or schedule a consultation with our master florists. We're open Monday through Saturday and offer same-day delivery throughout the city."
            animationType="background-highlight"
            buttons={[
              { text: "Book Consultation", href: "mailto:appointments@beautifulflowers.com" },
              { text: "Get Directions", href: "#" }
            ]}
            useInvertedBackground="invertDefault"
          />
        </div>
      </div>

      <FooterSimple
        columns={[
          {
            title: "Shop",
            items: [
              { label: "All Flowers", href: "/shop" },
              { label: "Occasions", href: "/shop" },
              { label: "Seasonal", href: "/shop" },
              { label: "Custom Orders", href: "/shop" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Story", href: "/about" },
              { label: "Careers", href: "#" },
              { label: "Press", href: "#" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Delivery Info", href: "#" },
              { label: "Returns", href: "#" },
              { label: "FAQ", href: "#" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Shipping Policy", href: "#" },
              { label: "Sitemap", href: "#" }
            ]
          }
        ]}
        bottomLeftText="© 2025 Beautiful Flowers. All rights reserved."
        bottomRightText="Crafted with love for flower enthusiasts"
      />
    </ThemeProvider>
  );
}