"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
  Heart,
  MessageCircle,
  Globe,
  Mail,
} from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Bayat Al-Islam"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Dashboard", id: "/admin" },
            { name: "Chat", id: "/chat" },
          ]}
          button={{ text: "Join Community", href: "/contact" }}
          animateOnLoad={true}
          className="shadow-lg backdrop-blur-sm"
        />
      </div>

      {/* Main Contact Section */}
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Ready to Join?"
          tagIcon={Heart}
          title="Join 100k+ Members in Our Community"
          description="Be part of something meaningful. Connect with Muslims and allies worldwide in a space dedicated to faith, learning, and interfaith dialogue."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to our Community Guidelines and Privacy Policy. We respect your faith and maintain a safe, inclusive space."
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Questions?"
          sideDescription="Find answers to common questions about joining and participating in our community"
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
          faqs={[
            {
              id: "1",
              title: "How quickly will I be approved?",
              content:
                "Most signups are approved within 24 hours. Once approved, you'll receive a welcome email with instructions to access the Discord server and get started.",
            },
            {
              id: "2",
              title: "What happens after I sign up?",
              content:
                "After signing up and being approved, you'll get access to our full community. Start by introducing yourself in the introductions channel, then explore our 50+ channels organized by topic and interest.",
            },
            {
              id: "3",
              title: "Is there a membership fee?",
              content:
                "No! Bayat Al-Islam is completely free to join and participate. All our features and community access are available at no cost.",
            },
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Bayat Al-Islam"
          copyrightText="© 2025 Bayat Al-Islam Community. All rights reserved. Built with faith and inclusivity."
          socialLinks={[
            {
              icon: MessageCircle,
              href: "https://discord.gg/bayatalislamm",
              ariaLabel: "Discord Community",
            },
            {
              icon: Globe,
              href: "https://bayatalislamm.com",
              ariaLabel: "Official Website",
            },
            {
              icon: Mail,
              href: "mailto:info@bayatalislamm.com",
              ariaLabel: "Email Contact",
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}