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

export default function AbsurdMemeWebsite() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-yellow-300 via-pink-400 to-red-500 flex flex-col items-center p-6">
      <motion.h1
        initial={{ scale: 0.8, rotate: -5 }}
        animate={{ scale: 1, rotate: 0 }}
        transition={{ duration: 0.6 }}
        className="text-5xl md:text-7xl font-extrabold text-center text-black drop-shadow-xl mb-6"
      >
        ⚠️ DO NOT COMBINE THESE SUBSTANCES ⚠️
      </motion.h1>

      <motion.div
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl w-full"
      >
        <Card className="rounded-2xl shadow-2xl bg-white/90 backdrop-blur">
          <CardContent className="p-6 flex flex-col items-center">
            <img
              src="/mnt/data/A_meme-style_digital_collage_image_consists_of_fou.png"
              alt="Absurd Meme"
              className="rounded-2xl shadow-lg mb-4"
            />
            <p className="text-xl font-bold text-center">
              Mountain Dew + Cheese = ???
            </p>
          </CardContent>
        </Card>

        <Card className="rounded-2xl shadow-2xl bg-black text-white">
          <CardContent className="p-6 flex flex-col justify-between h-full">
            <div className="space-y-4">
              <div className="flex items-center gap-2 text-2xl font-bold">
                <AlertTriangle /> CHAOS LEVEL: MAXIMUM
              </div>
              <div className="flex items-center gap-2 text-lg">
                <Flame /> Burgers detected in orbit
              </div>
              <div className="flex items-center gap-2 text-lg">
                <Rocket /> Capybara launching...
              </div>
            </div>

            <motion.div
              whileHover={{ scale: 1.1, rotate: 3 }}
              className="mt-6"
            >
              <Button className="w-full text-2xl py-6 rounded-2xl">
                I AM GOING TO BRAZIL
              </Button>
            </motion.div>
          </CardContent>
        </Card>
      </motion.div>

      <motion.footer
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1 }}
        className="mt-12 text-center text-black font-bold text-lg"
      >
        This website makes absolutely no sense. And that is the point.
      </motion.footer>
    </div>
  );
}