"use client";

import { Mail, Users, BookOpen } from 'lucide-react';
import Link from 'next/link';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function ContactPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="medium"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navigation */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Remember"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Books", id: "/books" },
            { name: "Join Us", id: "#join" }
          ]}
          button={{
            text: "Join Now",            href: "#join"
          }}
          navItemClassName="text-sm font-medium"
          buttonClassName="px-6 py-2"
        />
      </div>

      {/* Main Contact CTA */}
      <div id="join" data-section="join">
        <ContactText
          text="Ready to embark on your literary journey with Remember? Join our community of passionate readers and discover the magic of shared stories. Let's remember together."
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Join Remember Today", href: "mailto:hello@remember-bookclub.com" },
            { text: "Attend a Meeting", href: "mailto:events@remember-bookclub.com" }
          ]}
          containerClassName="py-20"
          textClassName="text-3xl md:text-4xl font-bold"
        />
      </div>

      {/* How to Join */}
      <div id="how-to-join" data-section="how-to-join">
        <ContactText
          text="Joining Remember is simple and welcoming. Send us an email expressing your interest, and we'll invite you to our next meeting. New members receive a welcome packet with our current book selection and discussion guidelines."
          animationType="reveal-blur"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Send Welcome Email", href: "mailto:welcome@remember-bookclub.com" },
            { text: "View Meeting Schedule", href: "mailto:schedule@remember-bookclub.com" }
          ]}
          containerClassName="py-16"
          textClassName="text-xl md:text-2xl font-medium"
        />
      </div>

      {/* Get in Touch */}
      <div id="get-in-touch" data-section="get-in-touch">
        <ContactText
          text="Have questions about our book club? Want to suggest a title for our reading list? Need help with your membership? We're here to help and would love to hear from you."
          animationType="background-highlight"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "General Questions", href: "mailto:info@remember-bookclub.com" },
            { text: "Book Suggestions", href: "mailto:books@remember-bookclub.com" }
          ]}
          containerClassName="py-16"
          textClassName="text-xl md:text-2xl font-medium"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Remember"
          copyrightText="© 2025 Remember Book Club. All rights reserved."
          columns={[
            {
              title: "Community",              items: [
                { label: "About Us", href: "/about" },
                { label: "Home", href: "/" },
                { label: "Members", href: "/" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Book List", href: "/books" },
                { label: "Discussion Guides", href: "#" },
                { label: "FAQ", href: "/" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Join Now", href: "#join" },
                { label: "General Info", href: "mailto:info@remember-bookclub.com" },
                { label: "Events", href: "mailto:events@remember-bookclub.com" }
              ]
            }
          ]}
          containerClassName="w-full"
          logoTextClassName="text-xl font-bold"
        />
      </div>
    </ThemeProvider>
  );
}