"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import {
  Heart,
  Zap,
  MessageCircle,
  Shield,
  Users,
  TrendingUp,
  MessageSquare,
  Star,
  UserX,
  Eye,
  FileText,
  Layers,
  Globe,
  Mail,
} from "lucide-react";

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

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Welcome to Bayat Al-Islam - Unity Through Faith"
          description="A thriving community of 100k+ Muslims and friends united in faith, dialogue, and support. Connect, share, and grow together on our advanced Discord interface platform."
          tag="Islamic Community Platform"
          tagIcon={Heart}
          tagAnimation="entrance-slide"
          background={{ variant: "radial-gradient" }}
          leftCarouselItems={[
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-family-enjoying-trips_23-2149176501.jpg?_wi=1",
              imageAlt: "Islamic community gathering",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/front-view-friends-with-smartphones_23-2149458427.jpg?_wi=1",
              imageAlt: "Discord communication",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-vector/futuristic-infographic-concept-with-evolution_23-2148452282.jpg?_wi=1",
              imageAlt: "3D digital interface",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=1",
              imageAlt: "Community collaboration",
            },
          ]}
          rightCarouselItems={[
            {
              imageSrc:
                "http://img.b2bpic.net/free-vector/futuristic-infographic-concept-with-evolution_23-2148452282.jpg?_wi=2",
              imageAlt: "Advanced technology",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/cheerful-people-posing-with-hands-stacked_23-2147663733.jpg?_wi=2",
              imageAlt: "Community teamwork",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-family-enjoying-trips_23-2149176501.jpg?_wi=2",
              imageAlt: "Diverse community",
            },
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/front-view-friends-with-smartphones_23-2149458427.jpg?_wi=2",
              imageAlt: "Seamless chat",
            },
          ]}
          carouselPosition="right"
          buttons={[
            { text: "Join Now", href: "/contact" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="entrance-slide"
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          title="Powerful Features for Your Community"
          description="Advanced tools designed for modern community management and engagement"
          tag="Community Tools"
          tagIcon={Zap}
          tagAnimation="entrance-slide"
          features={[
            {
              title: "Real-time Chat",
              description:
                "Instant messaging with support for text, voice, and video. Connect with thousands of community members in organized channels.",
              icon: MessageCircle,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/smiling-woman-using-smartphone-couch_53876-96944.jpg?_wi=1",
                  imageAlt: "Chat interface",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/e-mail-global-communications-connection-social-networking-concept_53876-134026.jpg?_wi=1",
                  imageAlt: "Notifications system",
                },
              ],
            },
            {
              title: "Admin Dashboard",
              description:
                "Comprehensive moderation panel. Manage users, moderate content, ban/kick members, and monitor community health in real-time.",
              icon: Shield,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=1",
                  imageAlt: "Admin dashboard",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/mobile-security-app_53876-98145.jpg?_wi=1",
                  imageAlt: "Moderation tools",
                },
              ],
            },
            {
              title: "Role Management",
              description:
                "Create custom roles with granular permissions. Assign moderators, admins, and community roles. Organize hierarchy efficiently.",
              icon: Users,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/flat-organizational-chart-infographic_23-2149016825.jpg?_wi=1",
                  imageAlt: "Role management",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/image-upload-concept-landing-page_23-2148309692.jpg?_wi=1",
                  imageAlt: "Media sharing",
                },
              ],
            },
            {
              title: "Analytics & Reporting",
              description:
                "Track community metrics, member engagement, and activity trends. Get detailed insights to improve community growth.",
              icon: TrendingUp,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=1",
                  imageAlt: "Analytics dashboard",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=2",
                  imageAlt: "Performance metrics",
                },
              ],
            },
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Explore All Features", href: "/admin" }]}
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Bayat Al-Islam: By the Numbers - A Thriving Global Community"
          metrics={[
            { icon: Users, label: "Active Members", value: "100k+" },
            { icon: MessageSquare, label: "Daily Messages", value: "50k+" },
            { icon: Globe, label: "Countries Represented", value: "45+" },
            { icon: Star, label: "Moderation Team", value: "150+" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Community Says"
          description="Real voices from our diverse member base"
          tag="Community Voice"
          tagIcon={Star}
          tagAnimation="entrance-slide"
          testimonials={[
            {
              id: "1",
              name: "Fatima Hassan, Community Leader",
              date: "Date: 15 January 2025",
              title: "A truly inclusive space for all",
              quote:
                "Bayat Al-Islam has created the most welcoming environment. Both Muslims and non-Muslims alike feel valued and respected. The moderation keeps things positive while the features make engagement seamless.",
              tag: "Community Leader",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=1",
              avatarAlt: "Fatima Hassan",
            },
            {
              id: "2",
              name: "Ahmed Al-Mansouri, Youth Member",
              date: "Date: 10 January 2025",
              title: "Best platform for faith discussions",
              quote:
                "I appreciate how the admin team handles discussions with wisdom. The chat features are smooth, and finding relevant topics is easy. I've learned so much from diverse perspectives here.",
              tag: "Active Member",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=1",
              avatarAlt: "Ahmed Al-Mansouri",
            },
            {
              id: "3",
              name: "Sarah Mitchell, Non-Muslim Ally",
              date: "Date: 5 January 2025",
              title: "Eye-opening interfaith experience",
              quote:
                "As a non-Muslim, I was warmly welcomed to learn and understand. The respectful tone and well-managed community make this exceptional. The platform itself is incredibly intuitive.",
              tag: "Ally Member",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=2",
              avatarAlt: "Sarah Mitchell",
            },
            {
              id: "4",
              name: "Omar El-Sayed, Admin Team",
              date: "Date: 1 January 2025",
              title: "Admin tools are incredible",
              quote:
                "Managing a community of 100k+ requires excellent tools. The dashboard is intuitive, moderation is efficient, and the analytics help us understand member needs better.",
              tag: "Administrator",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=2",
              avatarAlt: "Omar El-Sayed",
            },
            {
              id: "5",
              name: "Zainab Aziz, Content Creator",
              date: "Date: 28 December 2024",
              title: "Perfect for meaningful content",
              quote:
                "I love how the platform supports diverse content types. Sharing knowledge about Islam and interfaith dialogue has never been easier. The community engagement is phenomenal.",
              tag: "Content Creator",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=3",
              avatarAlt: "Zainab Aziz",
            },
            {
              id: "6",
              name: "Marcus Johnson, Newcomer",
              date: "Date: 20 December 2024",
              title: "Instantly felt at home",
              quote:
                "I joined curious about Islam and the community welcomed me openly. Everyone is helpful, the interface is user-friendly, and I'm learning every day. Highly recommend!",
              tag: "New Member",
              avatarSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg?_wi=3",
              avatarAlt: "Marcus Johnson",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Bayat Al-Islam"
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
          faqs={[
            {
              id: "1",
              title: "Is Bayat Al-Islam open to non-Muslims?",
              content:
                "Absolutely! We welcome people of all faiths and beliefs. Our community is built on the principles of respectful dialogue and mutual understanding. Non-Muslims are encouraged to learn, ask questions, and participate in our inclusive community.",
            },
            {
              id: "2",
              title: "How do I join the community?",
              content:
                "Simply click 'Join Community' and sign up with your email or Discord account. You'll immediately get access to our chat channels, resources, and be able to introduce yourself to our welcoming members.",
            },
            {
              id: "3",
              title: "What are the moderation standards?",
              content:
                "We maintain strict moderation to ensure a safe, respectful environment for all. Our standards prohibit hate speech, harassment, and disrespect. We have a transparent moderation team with detailed audit logs.",
            },
            {
              id: "4",
              title: "Can I create custom channels?",
              content:
                "Admin and moderators can create channels. If you have a specific interest or topic you'd like to discuss, you can request a channel through our admin team. We're always open to organizing new communities within our platform.",
            },
            {
              id: "5",
              title: "Is there support for new members?",
              content:
                "Yes! We have dedicated onboarding channels, member mentors, and comprehensive guides. Our community is designed to be welcoming to newcomers with plenty of resources to help you get started.",
            },
            {
              id: "6",
              title: "How does the admin dashboard work?",
              content:
                "The dashboard provides comprehensive analytics, user management tools, moderation controls, and audit logs. Admins can ban/kick users, manage roles, monitor activity, and maintain community standards efficiently.",
            },
          ]}
        />
      </div>

      {/* 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>

      {/* 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>
  );
}