export default function PortfolioWebsite() {
  return (
    <div className="min-h-screen bg-gray-950 text-white font-sans">
      {/* Navbar */}
      <nav className="flex items-center justify-between px-6 py-4 border-b border-gray-800 sticky top-0 bg-gray-950/90 backdrop-blur z-50">
        <h1 className="text-2xl font-bold text-cyan-400">Jagriti Kumari</h1>

        <ul className="hidden md:flex gap-6 text-sm font-medium">
          <li><a href="#home" className="hover:text-cyan-400">Home</a></li>
          <li><a href="#about" className="hover:text-cyan-400">About</a></li>
          <li><a href="#skills" className="hover:text-cyan-400">Skills</a></li>
          <li><a href="#projects" className="hover:text-cyan-400">Projects</a></li>
          <li><a href="#contact" className="hover:text-cyan-400">Contact</a></li>
        </ul>
      </nav>

      {/* Hero Section */}
      <section
        id="home"
        className="flex flex-col items-center justify-center text-center px-6 py-24"
      >
        <div className="w-36 h-36 rounded-full bg-cyan-400/20 border-4 border-cyan-400 flex items-center justify-center text-5xl font-bold mb-6">
          J
        </div>

        <h2 className="text-4xl md:text-6xl font-extrabold leading-tight">
          Hi, I'm <span className="text-cyan-400">Jagriti Kumari</span>
        </h2>

        <p className="mt-6 text-lg text-gray-300 max-w-2xl leading-relaxed">
          Aspiring Web Developer learning WordPress, HTML, CSS, Cloud, and
          Frontend Development. I enjoy creating responsive and user-friendly
          websites.
        </p>

        <div className="flex gap-4 mt-8 flex-wrap justify-center">
          <a
            href="#projects"
            className="bg-cyan-400 text-black px-6 py-3 rounded-xl font-semibold hover:scale-105 transition"
          >
            View Projects
          </a>

          <a
            href="#contact"
            className="border border-cyan-400 px-6 py-3 rounded-xl font-semibold hover:bg-cyan-400 hover:text-black transition"
          >
            Contact Me
          </a>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="px-6 py-20 bg-gray-900">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h3 className="text-3xl font-bold mb-6 text-cyan-400">About Me</h3>

            <p className="text-gray-300 leading-8 text-lg">
              I am currently learning web development and building real-world
              projects using WordPress, Elementor, HTML, and CSS. I am also
              exploring cloud technologies and frontend development to improve
              my skills.
            </p>

            <p className="text-gray-300 leading-8 text-lg mt-4">
              My goal is to become a professional web developer and create
              modern, responsive, and creative websites.
            </p>
          </div>

          <div className="bg-gray-800 rounded-3xl p-8 shadow-2xl">
            <h4 className="text-2xl font-bold mb-6">Quick Info</h4>

            <div className="space-y-4 text-gray-300">
              <p>📍 Location: India</p>
              <p>💻 Role: Aspiring Web Developer</p>
              <p>🎯 Focus: WordPress & Frontend</p>
              <p>🚀 Learning: Cloud & Responsive Design</p>
            </div>
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="px-6 py-20">
        <div className="max-w-6xl mx-auto text-center">
          <h3 className="text-3xl font-bold text-cyan-400 mb-12">My Skills</h3>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              "HTML",
              "CSS",
              "WordPress",
              "Elementor",
              "Responsive Design",
              "Cloud Basics",
              "Frontend Development",
              "Portfolio Design",
            ].map((skill) => (
              <div
                key={skill}
                className="bg-gray-900 border border-gray-800 rounded-2xl p-6 hover:border-cyan-400 hover:-translate-y-2 transition"
              >
                <h4 className="text-lg font-semibold">{skill}</h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="px-6 py-20 bg-gray-900">
        <div className="max-w-6xl mx-auto">
          <h3 className="text-3xl font-bold text-center text-cyan-400 mb-12">
            My Projects
          </h3>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "Portfolio Website",
                desc: "A responsive personal portfolio website created using HTML, CSS, and modern UI design.",
              },
              {
                title: "WordPress Website",
                desc: "A website designed using WordPress and Elementor template kits.",
              },
              {
                title: "Landing Page Design",
                desc: "Creative landing page with responsive sections and clean layout.",
              },
            ].map((project, index) => (
              <div
                key={index}
                className="bg-gray-800 rounded-3xl p-6 shadow-xl hover:scale-105 transition"
              >
                <div className="h-40 rounded-2xl bg-gray-700 mb-6 flex items-center justify-center text-4xl">
                  💻
                </div>

                <h4 className="text-2xl font-bold mb-4">{project.title}</h4>

                <p className="text-gray-300 leading-7">{project.desc}</p>

                <button className="mt-6 bg-cyan-400 text-black px-5 py-2 rounded-xl font-semibold hover:opacity-90">
                  View Project
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="px-6 py-20">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl font-bold text-cyan-400 mb-6">
            Contact Me
          </h3>

          <p className="text-gray-300 text-lg mb-10">
            Feel free to contact me for collaboration, projects, or learning
            opportunities.
          </p>

          <div className="grid md:grid-cols-3 gap-6">
            <div className="bg-gray-900 rounded-2xl p-6 border border-gray-800">
              <h4 className="text-xl font-semibold mb-2">Email</h4>
              <p className="text-gray-300">yourmail@example.com</p>
            </div>

            <div className="bg-gray-900 rounded-2xl p-6 border border-gray-800">
              <h4 className="text-xl font-semibold mb-2">LinkedIn</h4>
              <p className="text-gray-300">linkedin.com/in/jagriti</p>
            </div>

            <div className="bg-gray-900 rounded-2xl p-6 border border-gray-800">
              <h4 className="text-xl font-semibold mb-2">GitHub</h4>
              <p className="text-gray-300">github.com/jagriti</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-gray-800 py-6 text-center text-gray-400 text-sm">
        © 2026 Jagriti Kumari. All rights reserved.
      </footer>
    </div>
  );
}