"use client";

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

export default function ChatPage() {
  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>

      {/* Chat Hub Section */}
      <div id="chat" data-section="chat">
        <MetricCardSeven
          title="Chat & Communication Hub"
          description="The heart of our community - seamless conversations at scale"
          tag="Communication"
          metrics={[
            {
              id: "1",              value: "24/7",              title: "Always Available Community Support",              items: [
                "Real-time instant messaging",                "24-hour member support",                "Multi-language support"],
            },
            {
              id: "2",              value: "100k+",              title: "Active Members Connected",              items: [
                "Daily active users",                "Organized channel discussions",                "Global accessibility"],
            },
            {
              id: "3",              value: "50+",              title: "Dedicated Channels",              items: [
                "Topic-specific channels",                "Learning & development",                "Support & assistance"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Start Chatting", href: "/chat" }]}
        />
      </div>

      {/* Chat Features */}
      <div id="chat-features" data-section="chat-features">
        <FeatureCardTwentyFive
          title="Seamless Communication Features"
          description="Powerful chat capabilities designed for community connection"
          tag="Features"
          features={[
            {
              title: "Multi-Channel Organization",              description:
                "Organize conversations by topic, allowing members to find and join discussions relevant to their interests. Create dedicated spaces for announcements, learning, support, and socializing.",              icon: MessageCircle,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/smiling-woman-using-smartphone-couch_53876-96944.jpg",                  imageAlt: "Channel organization"},
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/front-view-friends-with-smartphones_23-2149458427.jpg",                  imageAlt: "Mobile messaging"},
              ],
            },
            {
              title: "Rich Media Sharing",              description:
                "Share images, videos, documents, and links. Support for various file formats enables rich conversations with images, presentations, and multimedia content.",              icon: MessageCircle,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/image-upload-concept-landing-page_23-2148309692.jpg",                  imageAlt: "Media sharing"},
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/e-mail-global-communications-connection-social-networking-concept_53876-134026.jpg",                  imageAlt: "File management"},
              ],
            },
            {
              title: "Threaded Conversations",              description:
                "Keep discussions organized with threaded replies. Prevent chat overflow and maintain context by responding within conversation threads.",              icon: MessageCircle,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/young-family-enjoying-trips_23-2149176501.jpg",                  imageAlt: "Conversation threads"},
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg",                  imageAlt: "Group discussions"},
              ],
            },
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Chat CTA */}
      <div id="chat-cta" data-section="chat-cta">
        <ContactCenter
          tag="Join the Conversation"
          tagIcon={Heart}
          title="Start Connecting Today"
          description="Experience real-time communication with thousands of community members. Share your thoughts, ask questions, and learn from diverse perspectives in a welcoming environment."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Join Now"
          termsText="By joining, you agree to our Community Guidelines. All members are expected to respect our values of inclusivity and respectful dialogue."
        />
      </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>
  );
}