import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Sparkles } from "lucide-react";
import { motion } from "framer-motion";

export default function MelatoninWeedLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-black to-gray-900 text-white p-4">
      <header className="text-center py-10">
        <h1 className="text-5xl font-bold tracking-tight">melatoninweed.no</h1>
        <p className="mt-4 text-xl text-gray-300">Where Night Blooms. Sleep meets Spirit in coded ritual.</p>
      </header>

      <main className="max-w-4xl mx-auto grid gap-6">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          <Card className="bg-black/30 backdrop-blur-xl border-purple-800 shadow-xl">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-3xl font-semibold flex items-center gap-2">
                <Sparkles className="text-purple-400" /> Keeper of Dusk Protocol
              </h2>
              <p className="text-gray-200">
                Sync your circadian code. Align screens, sounds, and sacred rituals with the
                pineal throne. Melatonin becomes myth, woven into neural altars.
              </p>
              <Button variant="outline" className="border-purple-500 text-purple-300 hover:bg-purple-900">
                Begin Ritual
              </Button>
            </CardContent>
          </Card>
        </motion.div>

        <section className="text-center mt-10">
          <p className="text-sm text-gray-400">Crafted in the shadow between logic and dream. © 2025 melatoninweed.no</p>
        </section>
      </main>
    </div>
  );
}