"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';

export default function ArticlesPage() {
  const commonNavItems = [
    { name: "Home", id: "/" },
    { name: "About Us", id: "/about-us" },
    { name: "Founder Story", id: "/founder-story" },
    { name: "Mission & Vision", id: "/mission-vision" },
    { name: "Features", id: "/#features" },
    { name: "Explore Ecosystems", id: "/#explore" },
    { name: "AI Species Comparison", id: "/ai-species-comparison" },
    { name: "Dinosaur Universe", id: "/dinosaur-universe" },
    { name: "Metrics", id: "/#metrics" },
    { name: "Testimonials", id: "/#testimonials" },
    { name: "Partners", id: "/#partners" },
    { name: "FAQ", id: "/faq" },
    { name: "Contact Us", id: "/contact-us" },
    { name: "User Profiles", id: "/user-profiles" },
    { name: "Saved Species", id: "/saved-species" },
    { name: "Favorite Lists", id: "/favorite-lists" },
    { name: "Discussion Forums", id: "/forums" },
    { name: "Expert Articles", id: "/articles" },
    { name: "Blog", id: "/blog" }
  ];

  return (
    <>
      <NavbarStyleFullscreen
        navItems={commonNavItems}
        logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
        logoAlt="LifeAtlas X Logo"
        brandName="LifeAtlas X"
        bottomLeftText="Global Community"
        bottomRightText="explore@lifeatlasx.com"
        button={{
          text: "Begin Your Exploration",          href: "/"}}
      />
      <main className="container mx-auto px-4 py-16 min-h-[calc(100vh-100px)] flex flex-col items-center justify-center">
        <h1 className="text-5xl font-extrabold mb-8 text-center">Expert Articles</h1>
        <p className="text-lg text-center max-w-2xl">Dive deeper into the world of biodiversity with articles written by leading experts and researchers.</p>
      </main>
    </>
  );
}