"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Satellite } from "lucide-react";

export default function DataPage() {
  const navItems = [
    { name: "COSMOS", id: "home" },
    { name: "SINGULARITY", id: "about" },
    { name: "CLASSIFICATION", id: "types" },
    { name: "OBSERVATORY", id: "gallery" },
    { name: "DATA", id: "data" },
  ];

  const footerColumns = [
    {
      title: "EXPLORE",
      items: [
        { label: "Home", href: "/" },
        { label: "About Black Holes", href: "/about" },
        { label: "Classifications", href: "/types" },
        { label: "Gallery", href: "/gallery" },
      ],
    },
    {
      title: "SCIENCE",
      items: [
        { label: "Cosmic Data", href: "/data" },
        { label: "Event Horizon Telescope", href: "https://eventhorizontelescope.org" },
        { label: "NASA Astrophysics", href: "https://science.nasa.gov/astrophysics/" },
        { label: "LIGO Detections", href: "https://ligo.caltech.edu" },
      ],
    },
    {
      title: "CONNECT",
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "Research Papers", href: "https://arxiv.org" },
        { label: "Contact", href: "#contact" },
        { label: "Privacy Policy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="⬤ EVENT HORIZON"
          bottomLeftText="BEYOND THE SINGULARITY"
          bottomRightText="LIVE • COSMIC EXPLORATION"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          features={[
            {
              id: "singularity",
              label: "SINGULARITY",
              title: "The Infinitely Dense Core",
              items: [
                "Infinite density at center",
                "Zero volume mathematically",
                "Quantum gravity rules here",
                "Where physics breaks down",
                "Hidden behind event horizon",
              ],
            },
            {
              id: "event-horizon",
              label: "EVENT HORIZON",
              title: "The Point of No Return",
              items: [
                "Schwarzschild radius boundary",
                "Light cannot escape beyond",
                "Spacetime is infinitely warped",
                "Information paradox zone",
                "Observable event boundary",
              ],
            },
            {
              id: "accretion",
              label: "ACCRETION DISK",
              title: "The Cosmic Furnace",
              items: [
                "Matter spirals at light speed",
                "Extreme friction creates heat",
                "Releases X-rays and gamma rays",
                "Most luminous objects known",
                "Temperature: billions of Kelvin",
              ],
            },
          ]}
          animationType="slide-up"
          title="COSMIC DATA DASHBOARD"
          description="Real-time astrophysical measurements and black hole classifications from observatories worldwide"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          products={[
            {
              id: "stellar",
              brand: "STELLAR CLASS",
              name: "Stellar Mass Black Hole",
              price: "5-100 M☉",
              rating: 5,
              reviewCount: "420 Observations",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/a-stellar-mass-black-hole-card-design-sh-1773076034103-d2a6ba43.png?_wi=3",
              imageAlt: "Stellar mass black hole illustration",
            },
            {
              id: "supermassive",
              brand: "GALACTIC CORE",
              name: "Supermassive Black Hole",
              price: "Millions M☉",
              rating: 5,
              reviewCount: "1.2K Observations",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/a-supermassive-black-hole-card-showing-a-1773076034253-592bf3f6.png?_wi=3",
              imageAlt: "Supermassive black hole with accretion disk",
            },
            {
              id: "primordial",
              brand: "THEORETICAL",
              name: "Primordial Black Hole",
              price: "<1 M☉",
              rating: 5,
              reviewCount: "87 Predictions",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/a-primordial-black-hole-card-design-show-1773076035431-97733b16.png?_wi=3",
              imageAlt: "Hypothetical primordial black hole",
            },
          ]}
          title="OBSERVED CLASSIFICATIONS"
          description="Three distinct types discovered and theorized across the cosmos"
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          testimonials={[
            {
              id: "1",
              name: "Dr. Katie Bouman",
              role: "MIT Researcher",
              testimonial: "The first direct image of a black hole was a triumph of human collaboration and ingenuity. Seeing M87* confirmed Einstein's predictions and opened new windows to understanding the universe's most extreme physics.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/professional-portrait-of-a-female-mit-re-1773076034567-d48738a5.png?_wi=4",
              imageAlt: "Dr. Katie Bouman",
            },
            {
              id: "2",
              name: "Dr. Roger Penrose",
              role: "Nobel Laureate",
              testimonial: "Black holes are not merely mathematical curiosities—they are real astrophysical objects with profound implications for our understanding of gravity and spacetime. Their existence validates decades of theoretical work.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/professional-portrait-of-an-elderly-dist-1773076034215-106b1a98.png?_wi=3",
              imageAlt: "Dr. Roger Penrose",
            },
            {
              id: "3",
              name: "Dr. Reinhard Genzel",
              role: "Nobel Laureate",
              testimonial: "Observing stars orbiting Sagittarius A* proved the existence of a supermassive black hole at our galactic center. Every new observation brings us closer to understanding these cosmic engines.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/professional-portrait-of-a-mature-male-a-1773076035269-187911f2.png?_wi=3",
              imageAlt: "Dr. Reinhard Genzel",
            },
          ]}
          title="EXPERT INSIGHTS"
          description="Leading astrophysicists and Nobel laureates share their discoveries on black holes"
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiW3pvkNv1W78n6qRHAXv03KsC/a-stunning-cosmic-nebula-background-with-1773076033624-8fa481ed.png?_wi=5"
          imageAlt="Cosmic nebula background"
          columns={footerColumns}
          logoText="EVENT HORIZON"
          copyrightText="© 2025 EVENT HORIZON EXPERIENCE | Inspired by real cosmic science and the boundless wonder of the universe"
        />
      </div>
    </ThemeProvider>
  );
}