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

export default function Portfolio() {
  return (
    <div className="min-h-screen bg-slate-950 text-white px-6 py-12">
      <motion.div
        initial={{ opacity: 0, y: -40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="text-center mb-12"
      >
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          Hi, I'm <span className="text-cyan-400">Akshanth</span> 👋
        </h1>
        <p className="text-lg text-slate-300">
          CSE (IoT) Student • C++ & Python Developer
        </p>
      </motion.div>

      <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
        {["About Me", "Skills", "Projects"].map((title, i) => (
          <motion.div
            key={title}
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.2 }}
          >
            <Card className="bg-slate-900 border-slate-800 shadow-xl rounded-2xl">
              <CardContent className="p-6">
                <h2 className="text-xl font-semibold mb-3 text-cyan-400">
                  {title}
                </h2>
                {title === "About Me" && (
                  <p className="text-slate-300">
                    Passionate about building IoT and AI solutions that solve
                    real-world problems using modern technologies.
                  </p>
                )}
                {title === "Skills" && (
                  <p className="text-slate-300">
                    C++ • Python • IoT • Problem Solving • GitHub
                  </p>
                )}
                {title === "Projects" && (
                  <Button
                    className="bg-cyan-500 hover:bg-cyan-600 text-black"
                    onClick={() =>
                      window.open("https://github.com/YOUR_USERNAME")
                    }
                  >
                    View GitHub Projects
                  </Button>
                )}
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.8 }}
        className="text-center mt-16 text-slate-500"
      >
        © {new Date().getFullYear()} Akshanth • Built with React & Vercel
      </motion.div>
    </div>
  );
}