import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function SanctuaryPage() {
  return (
    <ThemedLayout theme="mystic" title="The Sanctuary">
      <div className="text-center space-y-8">
        <h2 className="text-4xl font-serif italic mb-8">A Place for Quiet Reflection</h2>
        <img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?q=80&w=2070&auto=format&fit=crop" className="w-full h-96 object-cover rounded-full border-4 border-[#d4af37]/20 mx-auto" />
        
        <div className="max-w-2xl mx-auto leading-loose text-lg">
          <p>
            In the chaos of the digital void, we offer a moment of stillness. 
            No tracking. No noise. Just the hum of the server and the weight of your thoughts.
          </p>
        </div>

        <div className="grid grid-cols-3 gap-4 mt-12">
          <div className="p-6 border border-[#d4af37]/10 hover:bg-[#d4af37]/5 transition-colors">
            <div className="text-2xl mb-2">🕯️</div>
            <div className="text-xs uppercase tracking-widest">Light a Candle</div>
          </div>
          <div className="p-6 border border-[#d4af37]/10 hover:bg-[#d4af37]/5 transition-colors">
            <div className="text-2xl mb-2">📜</div>
            <div className="text-xs uppercase tracking-widest">Read the Scrolls</div>
          </div>
          <div className="p-6 border border-[#d4af37]/10 hover:bg-[#d4af37]/5 transition-colors">
            <div className="text-2xl mb-2">🌑</div>
            <div className="text-xs uppercase tracking-widest">Enter the Void</div>
          </div>
        </div>
      </div>
    </ThemedLayout>
  );
}