"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Rocket } from "lucide-react";

export default function MarsOrbitalPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="MARS ORBITAL"
          navItems={[
            { name: "The Vision", id: "vision" },
            { name: "The Hotel", id: "hotel" },
            { name: "Journey", id: "journey" },
            { name: "Engineering", id: "engineering" },
            { name: "Experience", id: "experience" }
          ]}
          button={{
            text: "Reserve Your Place",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="The First Hotel Beyond Earth."
          description="Arriving on Mars. Redefining hospitality."
          tag="Private Space Mission"
          imageSrc="https://img.b2bpic.net/free-photo/astral-concept-wallpaper_23-2150038872.jpg"
          imageAlt="Mars orbital horizon with faint station structures"
          buttons={[
            {
              text: "Reserve Your Place in History",              href: "contact"
            },
            {
              text: "Explore the Mission",              href: "vision"
            }
          ]}
        />
      </div>

      <div id="vision" data-section="vision">
        <TestimonialAboutCard
          tag="OUR VISION"
          tagIcon={Zap}
          title="Making Mars habitable, not just reachable."
          description="Long-term human presence. Scientific discovery. Quiet luxury."
          subdescription="Engineered for permanence, designed for wonder."
          icon={Rocket}
          imageSrc="https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg"
          imageAlt="Panoramic view of Martian terrain from orbital altitude"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="hotel" data-section="hotel">
        <ProductCardThree
          title="The Hotel"
          description="Ultra-modern suites with views that redefine luxury."
          tag="Exclusive Accommodations"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          products={[
            {
              id: "suite-gravity-zero",              name: "Zero-Gravity Suite",              price: "∞",              imageSrc: "https://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248327.jpg?id=138548454",              imageAlt: "Ultra-modern suite with panoramic Martian viewport"
            },
            {
              id: "suite-vista",              name: "Orbital Vista Chamber",              price: "∞",              imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg",              imageAlt: "Premium chamber overlooking the Red Planet horizon"
            },
            {
              id: "suite-research",              name: "Research & Retreat Pod",              price: "∞",              imageSrc: "https://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248327.jpg?id=138548454",              imageAlt: "Minimalist pod combining science and restful solitude"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
        />
      </div>

      <div id="journey" data-section="journey">
        <FeatureCardSixteen
          title="Safety & Comfort Throughout Your Journey"
          description="From Earth launch to Mars arrival. Every phase engineered for safety, comfort, and wonder."
          tag="What Sets Our Travel Experience Apart"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          negativeCard={{
            items: [
              "Cramped orbital transits",              "Unpredictable conditions",              "Isolation anxiety"
            ]
          }}
          positiveCard={{
            items: [
              "Pressurized comfort pods",              "Monitored life support",              "Curated scientific briefings",              "Zero-G dining experience",              "Direct Martian contact"
            ]
          }}
        />
      </div>

      <div id="engineering" data-section="engineering">
        <MetricCardSeven
          title="Sustainability & Engineering"
          description="Advanced systems ensuring long-term Martian operations and guest safety."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "life-support",              value: "360°",              title: "Closed-loop life support systems",              items: [
                "99.8% oxygen recapture",                "Water recycled infinitely",                "Atmospheric pressure stabilized"
              ]
            },
            {
              id: "energy",              value: "100%",              title: "Renewable energy infrastructure",              items: [
                "Solar panel arrays",                "Thermal regulation",                "Backup nuclear module"
              ]
            },
            {
              id: "construction",              value: "∞",              title: "Built from Martian regolith",              items: [
                "In-situ resource utilization",                "Structural integrity verified",                "Low Earth transport costs"
              ]
            },
            {
              id: "redundancy",              value: "6x",              title: "Fail-safe redundancy across all systems",              items: [
                "Independent backup networks",                "Real-time health monitoring",                "Emergency protocols"
              ]
            }
          ]}
        />
      </div>

      <div id="experience" data-section="experience">
        <TestimonialCardTen
          title="The Experience"
          description="What awaits you on the Red Planet."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "dawn",              title: "Waking to a red horizon.",              quote: "Your first morning on Mars: soft rust light fills the chamber as you float weightless above your pod. No Earth, no sky—just the horizon. Silence. Presence.",              name: "The Arrival",              role: "First light experience",              imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-rugged-mountain-landscape-beauty-undefined-generated-by-ai_188544-22148.jpg",              imageAlt: "Zero-gravity living space overlooking Martian landscape"
            },
            {
              id: "movement",              title: "Movement redefined.",              quote: "Low gravity changes everything. Your body moves differently. Climbing feels like floating. Walking becomes a dance. The physical world invites you to move with intention.",              name: "The Adaptation",              role: "Physical exploration",              imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-rugged-mountain-landscape-beauty-undefined-generated-by-ai_188544-22148.jpg",              imageAlt: "Guest experiencing low-gravity movement in hotel atrium"
            },
            {
              id: "dining",              title: "Curated meals under alien stars.",              quote: "Chef-prepared courses float on magnetic trays. Each meal pairs Martian-grown ingredients with culinary precision. You eat slowly. You taste everything. The view does the rest.",              name: "The Nourishment",              role: "Dining experience",              imageSrc: "https://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797638.jpg",              imageAlt: "Minimalist dining area with panoramic Martian viewport"
            },
            {
              id: "exploration",              title: "Guided scientific immersion.",              quote: "Pressurized excursions reveal Mars' geology in real-time. You walk on actual Martian surface, study rock formations with research teams, understand the planet's story firsthand.",              name: "The Discovery",              role: "Geological expedition",              imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg",              imageAlt: "Extended view of Martian terrain from research platform"
            },
            {
              id: "solitude",              title: "Profound solitude and reflection.",              quote: "Private observation decks offer unfiltered contact with Mars. Hours alone. No noise. The planet's presence becomes your companion. You understand scale, isolation, and privilege.",              name: "The Stillness",              role: "Personal retreat",              imageSrc: "https://img.b2bpic.net/free-photo/journey-planet-mars-concept_23-2150063208.jpg",              imageAlt: "Observation deck with unobstructed view of Martian horizon"
            },
            {
              id: "return",              title: "The privilege of return.",              quote: "You'll leave Mars changed. The view of Earth from Martian orbit. The memory of silence. The knowledge that you've existed in two worlds. That weight never leaves.",              name: "The Ascent",              role: "Departure reflection",              imageSrc: "https://img.b2bpic.net/free-photo/astral-concept-wallpaper_23-2150038872.jpg",              imageAlt: "View of Earth from Mars orbital station"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Join the Mission"
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Reserve Your Place",              href: "#contact-form"
            },
            {
              text: "Request Information",              href: "#contact-form"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="MARS ORBITAL HOTEL"
          columns={[
            {
              title: "Mission",              items: [
                { label: "The Vision", href: "#vision" },
                { label: "The Hotel", href: "#hotel" },
                { label: "Engineering", href: "#engineering" }
              ]
            },
            {
              title: "Experience",              items: [
                { label: "The Journey", href: "#journey" },
                { label: "Accommodations", href: "#hotel" },
                { label: "Activities", href: "#experience" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#vision" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Mars Orbital Hotel. Space travel involves experimental risk. See terms."
        />
      </div>
    </ThemeProvider>
  );
}