"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Award, BookOpen, Calendar, Eye, Shield, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="small"
        sizing="mediumSizeLargeTitles"
        background="blurBottom"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="PAPB TAPAK TIARA"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Unified Platform for PAPB TAPAK TIARA"
      description="Central hub connecting members, partners, and stakeholders. Access programs, resources, and organizational updates in one place."
      buttons={[
        {
          text: "Explore Our Work",
          href: "#about",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/silhouettes-executives-interacting_1098-1787.jpg?_wi=1"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/consult-advice-information-serveice-sharing-concept_53876-125587.jpg",
          alt: "Consult Advice Information Serveice Sharing Concept",
        },
        {
          src: "http://img.b2bpic.net/free-photo/copy-space-badge-label-stamp-banner-concept_53876-15820.jpg",
          alt: "Copy Space Badge Label Stamp Banner Concept",
        },
        {
          src: "http://img.b2bpic.net/free-photo/still-life-red-thread-connection_23-2149870869.jpg",
          alt: "Still life of red thread connection",
        },
        {
          src: "http://img.b2bpic.net/free-photo/silhouettes-executives-workplace_1098-689.jpg",
          alt: "Silhouettes of executives on workplace",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-women-discussing-business_23-2148868420.jpg",
          alt: "Close-up women discussing business",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "Transparency",
        },
        {
          type: "text",
          text: "Efficiency",
        },
        {
          type: "text",
          text: "Collaboration",
        },
        {
          type: "text",
          text: "Innovation",
        },
        {
          type: "text",
          text: "Growth",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Our Secretariat Mission"
      description={[
        "Sekretariat PAPB TAPAK TIARA serves as the central administrative body, dedicated to ensuring transparency, organizational excellence, and effective communication across our institutional network.",
        "We bridge the gap between internal member initiatives and external stakeholder expectations, fostering long-term collaboration through reliable data access and shared programming.",
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "Active Members",
          value: "1,200+",
        },
        {
          id: "m2",
          icon: Award,
          title: "Completed Projects",
          value: "85",
        },
        {
          id: "m3",
          icon: Shield,
          title: "Transparency Rating",
          value: "99%",
        },
      ]}
      title="Institutional Impact"
      description="Evidence-based metrics showcasing our commitment to organizational governance and member progress."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Member Resource Hub",
          description: "Unified access to internal guidelines, schedules, and official templates.",
          icon: BookOpen,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/calculator-management-banking-success-technology-income_1418-530.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/laptop-wooden-cubes-arrangement-high-angle_23-2149386332.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/silhouettes-executives-interacting_1098-1787.jpg?_wi=2",
          imageAlt: "digital resource management icon",
        },
        {
          title: "Event Coordination",
          description: "Centralized calendar for official meetings and organizational updates.",
          icon: Calendar,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/calendar-date-organizer-planner-concept_53876-121090.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/time-management-icons-set_98292-6719.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/designers-discussing-project-with-team-leader_74855-9779.jpg?_wi=1",
          imageAlt: "digital resource management icon",
        },
        {
          title: "Stakeholder Transparency",
          description: "Open reporting on impact metrics and developmental progress for partners.",
          icon: Eye,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/women-with-books-looking-camera_23-2147771906.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/investor-addresses-factory-management-investment-pitch-meeting_482257-126957.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-psd/conference-template-design_23-2151539776.jpg?_wi=1",
          imageAlt: "digital resource management icon",
        },
      ]}
      title="Core Institutional Services"
      description="Providing essential tools to support our stakeholders in driving meaningful change."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={true}
      names={[
        "Government Ministry",
        "Regional Agency",
        "Education Foundation",
        "Corporate Council",
        "International NGO",
        "Local Authority",
        "Research Institute",
      ]}
      title="Institutional Partners"
      description="Collaborating with leading institutions to foster broader initiatives."
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardOne
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      title="Recent Announcements"
      description="Stay updated with the latest news, policy changes, and project milestones."
      blogs={[
        {
          id: "b1",
          category: "Governance",
          title: "2025 Institutional Guidelines",
          excerpt: "Important updates on internal administrative procedures for members.",
          imageSrc: "http://img.b2bpic.net/free-psd/conference-template-design_23-2151539776.jpg?_wi=2",
          authorName: "Admin Secretariat",
          authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3iswrp",
          date: "Jan 12, 2025",
        },
        {
          id: "b2",
          category: "Policy",
          title: "Growth Strategy Reveal",
          excerpt: "Overview of the new partnership alignment initiatives.",
          imageSrc: "http://img.b2bpic.net/free-photo/team-business-concept-with-wooden-blocks-like-pyramid-with-wooden-human-figures_176474-10463.jpg",
          authorName: "Admin Secretariat",
          authorAvatar: "http://img.b2bpic.net/free-photo/3d-cinema-glasses-isolated-white-background_23-2148188109.jpg",
          date: "Jan 10, 2025",
        },
        {
          id: "b3",
          category: "Report",
          title: "Q4 Impact Report",
          excerpt: "Annual review of our organizational progress and achievements.",
          imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",
          authorName: "Admin Secretariat",
          authorAvatar: "http://img.b2bpic.net/free-photo/busy-paralysed-handicapped-team-leader-answering-phone-talking-with-partner-typing-computer-explaning-project-ideea-checking-financial-data-diverse-colleagues-working-start-up-office_482257-28180.jpg",
          date: "Jan 05, 2025",
        },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "How can partners engage with TAPAK TIARA?",
          content: "Partnerships can be initiated through our formal contact pathway, where we review alignment with current initiatives.",
        },
        {
          id: "q2",
          title: "Where are membership guidelines located?",
          content: "Internal guidelines are available in the member portal accessible via credentials provided upon sign-up.",
        },
        {
          id: "q3",
          title: "How is transparency maintained?",
          content: "We publish periodic progress reports and financial governance metrics through our stakeholder hub.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/designers-discussing-project-with-team-leader_74855-9779.jpg?_wi=2"
      mediaAnimation="slide-up"
      title="Common Inquiries"
      description="Clear answers to help you navigate institutional protocols and resources."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-animated-grid",
      }}
      text="Need further information or collaboration opportunities? Contact our administrative team for assistance."
      buttons={[
        {
          text: "Contact Secretariat",
          href: "mailto:info@tapaktiara.org",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="PAPB TAPAK TIARA"
      columns={[
        {
          title: "Resources",
          items: [
            {
              label: "Guidelines",
              href: "#",
            },
            {
              label: "Schedules",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      copyrightText="© 2025 Sekretariat PAPB TAPAK TIARA"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
