// Expanded Home Page for Council of Spheres Archive

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import GlitchText from '@/components/GlitchText';
import FeaturedItem from '@/components/FeaturedItem';

export default function Home() {
  const [glyphVisible, setGlyphVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setGlyphVisible(true), 10000); // Reveal hidden glyph after 10s
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="p-6 md:p-12 text-white bg-gradient-to-b from-black via-elyria-dark to-gray-900">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          Council of Spheres Public Archive
        </h1>
        <GlitchText text="Preserving the Harmony of Realities—One Memory at a Time." className="text-lg md:text-2xl mb-8 text-elyria-gold" />

        <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <FeaturedItem
            title="Fragment Log: Rift Pulse 73"
            imageUrl="/placeholder1.jpg"
            description="Latest anomaly: memory echo forming in uncharted biome. Analysis ongoing."
            link="/rift-log"
          />
          <FeaturedItem
            title="Recovered Scroll #017"
            imageUrl="/placeholder2.jpg"
            description="Stitch-glyphs referencing Elaris in a forgotten dialect. File corrupted."
            link="/artifacts"
          />
          <FeaturedItem
            title="Scholar of the Month: Redacted"
            imageUrl="/placeholder3.jpg"
            description="Information unavailable. Last seen near /riftling."
            link="/riftling"
          />
        </section>

        <div className="mt-10 text-center">
          <p className="text-gray-400 italic">Can you remember what was lost?</p>
          <Button className="mt-4 bg-elyria-gold hover:bg-elyria-gold/80">
            <Link to="/pantheon">Access the Pantheon Records</Link>
          </Button>
        </div>

        {glyphVisible && (
          <div className="mt-16 text-center">
            <Link to="/corrupted" className="text-sm text-red-500 hover:text-red-400">
              [Glyph Detected: Node Alpha Active]
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}