"use client";

import React from "react";
import {
  Rocket,
  Satellite,
  Globe,
  Telescope,
  Cpu,
  ShieldCheck,
  ArrowUpRight
} from "lucide-react";

export default function DeepSpaceExploration() {
  return (
    <main className="bg-black text-white font-sans overflow-x-hidden">

      {/* ================= HERO ================= */}
      <section className="relative min-h-screen flex items-center">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_#222_0%,_#000_70%)]" />
        <div className="relative z-10 max-w-7xl mx-auto px-6 py-32">
          <span className="inline-block border border-white/20 px-4 py-1 text-xs tracking-widest uppercase mb-6">
            Deep Space Division
          </span>

          <h1 className="text-4xl md:text-6xl xl:text-7xl font-bold leading-tight max-w-4xl">
            Exploring Beyond <br /> Known Frontiers
          </h1>

          <p className="mt-8 text-white/70 text-lg max-w-2xl">
            Advancing humanity through next-generation space exploration,
            orbital intelligence, and interstellar research systems.
          </p>

          <div className="mt-10 flex gap-4">
            <button className="bg-white text-black px-6 py-3 text-sm font-semibold flex items-center gap-2 hover:bg-gray-200 transition">
              View Missions <ArrowUpRight size={16} />
            </button>
            <button className="border border-white/30 px-6 py-3 text-sm hover:bg-white/10 transition">
              Research Overview
            </button>
          </div>
        </div>
      </section>

      {/* ================= CAPABILITIES ================= */}
      <section className="py-28 border-t border-white/10">
        <div className="max-w-7xl mx-auto px-6">
          <h2 className="text-3xl md:text-4xl font-semibold mb-16">
            Core Capabilities
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            {[
              {
                icon: <Rocket />,
                title: "Interstellar Missions",
                desc: "Long-range autonomous missions beyond the solar system."
              },
              {
                icon: <Satellite />,
                title: "Orbital Intelligence",
                desc: "High-precision satellite networks and deep-orbit monitoring."
              },
              {
                icon: <Telescope />,
                title: "Cosmic Observation",
                desc: "Advanced telescopic research across multiple spectra."
              },
              {
                icon: <Cpu />,
                title: "AI-Driven Navigation",
                desc: "Self-learning navigation systems for unknown space terrain."
              },
              {
                icon: <Globe />,
                title: "Planetary Mapping",
                desc: "High-resolution mapping of exoplanets and asteroids."
              },
              {
                icon: <ShieldCheck />,
                title: "Mission Security",
                desc: "Fail-safe protocols and space-grade cybersecurity systems."
              }
            ].map((item, i) => (
              <div
                key={i}
                className="border border-white/10 p-8 hover:border-white/30 transition"
              >
                <div className="mb-6 text-white/80">{item.icon}</div>
                <h3 className="text-xl font-semibold mb-3">{item.title}</h3>
                <p className="text-white/60 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ================= TECHNOLOGY ================= */}
      <section className="py-28 bg-white text-black">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-semibold mb-6">
              Next-Generation Space Technology
            </h2>
            <p className="text-black/70 text-lg">
              Our deep space infrastructure integrates AI-powered analytics,
              quantum-ready communication systems, and autonomous propulsion
              technologies engineered for extreme environments.
            </p>

            <ul className="mt-8 space-y-4 text-sm">
              <li>— Autonomous spacecraft intelligence</li>
              <li>— Deep-space communication arrays</li>
              <li>— Radiation-resistant onboard systems</li>
              <li>— Modular mission architectures</li>
            </ul>
          </div>

          <div className="border border-black/10 p-10">
            <p className="uppercase text-xs tracking-widest mb-4">
              Research Standard
            </p>
            <h3 className="text-2xl font-semibold">
              Built for Interstellar Scale
            </h3>
            <p className="mt-4 text-black/70">
              Designed to operate beyond Earth’s orbit with zero-failure
              tolerance and maximum mission longevity.
            </p>
          </div>
        </div>
      </section>

      {/* ================= CTA ================= */}
      <section className="py-28 border-t border-white/10">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-semibold mb-6">
            Partner in the Future of Space
          </h2>
          <p className="text-white/70 max-w-2xl mx-auto mb-10">
            Collaborate with us on deep-space missions, advanced research, and
            next-era exploration initiatives.
          </p>

          <button className="bg-white text-black px-8 py-4 text-sm font-semibold hover:bg-gray-200 transition">
            Initiate Collaboration
          </button>
        </div>
      </section>

    </main>
  );
}