"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link";
import { BookOpen, Feather, Sparkles, Crown, Zap, Compass, BookMarked, Award, Users, Calendar } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "Eras", id: "/eras" },
  { name: "Poets", id: "/poets" },
  { name: "Poems", id: "/poems" },
  { name: "Resources", id: "/contact" },
];

const eraFeatures = [
  {
    title: "Pre-Islamic Era (Jahiliyyah)",    description: "The age of tribal poets and oral tradition, celebrating courage, honor, and desert life.",    bentoComponent: "reveal-icon" as const,
    icon: Feather,
  },
  {
    title: "Quranic and Early Islamic",    description: "Poetry transformed by Islamic values, emphasizing spiritual themes and divine guidance.",    bentoComponent: "reveal-icon" as const,
    icon: Sparkles,
  },
  {
    title: "Umayyad Period (661-750 CE)",    description: "Court poetry flourished with sophisticated rhetoric and refined love themes.",    bentoComponent: "reveal-icon" as const,
    icon: Crown,
  },
  {
    title: "Abbasid Golden Age (750-1258 CE)",    description: "The peak of Arabic poetry with unprecedented innovation, intellectual freedom, and cultural synthesis.",    bentoComponent: "reveal-icon" as const,
    icon: Zap,
  },
  {
    title: "Andalusian Period (711-1492 CE)",    description: "Islamic Spain's unique poetic tradition blending Arabic, Berber, and European influences.",    bentoComponent: "reveal-icon" as const,
    icon: Compass,
  },
  {
    title: "Mamluk and Ottoman Eras",    description: "Poetry during the Mamluk Sultanate and Ottoman Empire, maintaining classical traditions with new forms.",    bentoComponent: "reveal-icon" as const,
    icon: BookMarked,
  },
];

const metrics = [
  {
    id: "1",    value: "500",    title: "Years",    description: "Pre-Islamic Poetry Tradition",    icon: Feather,
  },
  {
    id: "2",    value: "1400",    title: "Years",    description: "Islamic Era Poetry Development",    icon: BookOpen,
  },
  {
    id: "3",    value: "7",    title: "Masterpieces",    description: "Mu'allaqat Hanging Poems",    icon: Award,
  },
  {
    id: "4",    value: "400",    title: "Poets",    description: "Documented in Classical Records",    icon: Users,
  },
];

const footerColumns = [
  {
    title: "Explore",    items: [
      { label: "Home", href: "/" },
      { label: "Historical Eras", href: "/eras" },
      { label: "Greatest Poets", href: "/poets" },
      { label: "Masterpiece Poems", href: "/poems" },
    ],
  },
  {
    title: "Resources",    items: [
      { label: "Poetry Insights", href: "/contact" },
      { label: "FAQ", href: "/" },
      { label: "Scholarly Articles", href: "#" },
      { label: "Research Tools", href: "#" },
    ],
  },
  {
    title: "Connect",    items: [
      { label: "About Us", href: "/about" },
      { label: "Contact", href: "/contact" },
      { label: "Subscribe", href: "#" },
      { label: "Privacy Policy", href: "#" },
    ],
  },
];

export default function ErasPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="noise"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Arabic Poetry"
          navItems={navItems.map(item => ({
            name: item.name,
            id: item.id.startsWith('/') ? item.id : `#${item.id}`,
          }))}
        />
      </div>

      <div id="eras" data-section="eras">
        <FeatureBento
          title="Five Golden Eras of Arabic Poetry"
          description="Explore the distinct characteristics, themes, and innovations that defined each period of Arabic poetic tradition."
          tag="Historical Periods"
          tagIcon={Calendar}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={eraFeatures}
        />
      </div>

      <div id="timeline" data-section="timeline">
        <MetricCardOne
          title="Poetry Through The Millennia"
          description="Key milestones and achievements in Arabic poetic history spanning nearly two thousand years of literary excellence."
          tag="Historical Timeline"
          tagIcon={Calendar}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          gridVariant="uniform-all-items-equal"
          metrics={metrics}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Arabic Poetry"
          copyrightText="© 2025 Arabic Poetry Heritage. Preserving literary traditions since antiquity."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}
