export default function ElaraConstellationSite() {
  return (
    <div className="min-h-screen bg-black text-white overflow-hidden">
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center px-6">
        <div className="absolute inset-0 bg-gradient-to-b from-indigo-950 via-black to-black" />

        {/* Stars */}
        <div className="absolute inset-0 opacity-70">
          {[...Array(120)].map((_, i) => (
            <div
              key={i}
              className="absolute bg-white rounded-full animate-pulse"
              style={{
                width: `${Math.random() * 3 + 1}px`,
                height: `${Math.random() * 3 + 1}px`,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDuration: `${Math.random() * 4 + 2}s`,
              }}
            />
          ))}
        </div>

        <div className="relative z-10 text-center max-w-4xl">
          <h1 className="text-6xl md:text-8xl font-extrabold tracking-[0.3em] uppercase mb-6">
            Elara
          </h1>
          <p className="text-xl md:text-2xl text-indigo-200 leading-relaxed max-w-2xl mx-auto">
            A mythical constellation woven through the northern skies,
            symbolizing mystery, navigation, and celestial wonder.
          </p>

          <button className="mt-10 px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 transition-all duration-300 text-lg font-semibold shadow-2xl shadow-indigo-700/30">
            Explore the Stars
          </button>
        </div>
      </section>

      {/* About Section */}
      <section className="py-24 px-6 bg-gradient-to-b from-black to-indigo-950/40">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-4xl font-bold mb-6">The Legend of Elara</h2>
            <p className="text-gray-300 leading-8 text-lg mb-6">
              According to ancient storytellers, Elara was a constellation
              used by travelers to navigate vast oceans and desert plains. Its
              brightest stars were believed to guide wanderers safely home.
            </p>
            <p className="text-gray-400 leading-8">
              Modern astronomers continue to admire the brilliance and symmetry
              of Elara’s celestial arrangement, often describing it as one of
              the most visually captivating star formations in the night sky.
            </p>
          </div>

          <div className="relative h-[420px] rounded-3xl border border-indigo-500/30 bg-black/50 backdrop-blur-md shadow-2xl overflow-hidden">
            {/* Constellation graphic */}
            <svg viewBox="0 0 500 500" className="w-full h-full">
              <defs>
                <radialGradient id="starGlow">
                  <stop offset="0%" stopColor="white" />
                  <stop offset="100%" stopColor="#818cf8" />
                </radialGradient>
              </defs>

              {/* Lines */}
              <line x1="100" y1="120" x2="220" y2="180" stroke="#818cf8" strokeWidth="2" />
              <line x1="220" y1="180" x2="320" y2="130" stroke="#818cf8" strokeWidth="2" />
              <line x1="320" y1="130" x2="390" y2="240" stroke="#818cf8" strokeWidth="2" />
              <line x1="390" y1="240" x2="260" y2="330" stroke="#818cf8" strokeWidth="2" />
              <line x1="260" y1="330" x2="140" y2="280" stroke="#818cf8" strokeWidth="2" />
              <line x1="140" y1="280" x2="100" y2="120" stroke="#818cf8" strokeWidth="2" />

              {/* Stars */}
              {[
                [100, 120],
                [220, 180],
                [320, 130],
                [390, 240],
                [260, 330],
                [140, 280],
              ].map(([x, y], index) => (
                <circle
                  key={index}
                  cx={x}
                  cy={y}
                  r="8"
                  fill="url(#starGlow)"
                />
              ))}
            </svg>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 px-6">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-14">Celestial Highlights</h2>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: 'Guiding Light',
                text: 'Elara was historically associated with navigation and exploration.',
              },
              {
                title: 'Radiant Stars',
                text: 'Its brightest stars are visible during clear winter nights.',
              },
              {
                title: 'Myth & Wonder',
                text: 'Legends describe Elara as a bridge between worlds and dreams.',
              },
            ].map((item, index) => (
              <div
                key={index}
                className="rounded-3xl p-8 bg-white/5 border border-white/10 backdrop-blur-sm hover:border-indigo-400/50 hover:-translate-y-2 transition-all duration-300 shadow-xl"
              >
                <h3 className="text-2xl font-semibold mb-4 text-indigo-300">
                  {item.title}
                </h3>
                <p className="text-gray-400 leading-7">{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 py-10 text-center text-gray-500 text-sm bg-black">
        <p>Elara Constellation • Exploring the mysteries of the cosmos</p>
      </footer>
    </div>
  )
}