import React from 'react'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { FileCode, Paintbrush, Mail, Phone, Github } from 'lucide-react'

const Portfolio = () => {
  const services = [
    {
      icon: <FileCode className="w-6 h-6"></FileCode>,
      title: "Web Development and Design",
      description: "Website design, HTML, CSS, JavaScript"
    },
    {
      icon: <Paintbrush className="w-6 h-6"></Paintbrush>,
      title: "Graphic Design",
      description: "Logo design, Canva"
    }
  ]

  const projects = [
    {
      title: "Basic Editor",
      description: "A basic text editor in which you can add the text and edit them easily.",
      tech: ["React", "JavaScript", "CSS"]
    }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-100 to-pink-100">
      {/* Hero Section */}
      <header className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-4">Ishan Kumar</h1>
          <p className="text-xl md:text-2xl opacity-90">
            College Student & Pursuing BSc.IT from Cimage College
          </p>
        </div>
      </header>

      {/* Services Section */}
      <section className="max-w-4xl mx-auto px-4 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">Services</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {services.map((service, index) => (
            <Card key={index} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-center gap-3">
                  {service.icon}
                  <CardTitle>{service.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">{service.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Projects Section */}
      <section className="bg-white py-16 px-4">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">Projects</h2>
          <div className="grid gap-6">
            {projects.map((project, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <CardTitle>{project.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">{project.description}</p>
                  <div className="flex gap-2">
                    {project.tech.map((tech, i) => (
                      <span
                        key={i}
                        className="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="max-w-4xl mx-auto px-4 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">Contact Me</h2>
        <Card className="max-w-md mx-auto">
          <CardContent className="pt-6">
            <div className="space-y-4">
              <Button variant="outline" className="w-full justify-start gap-2">
                <Phone className="w-4 h-4"></Phone>
                +91 9973426654
              </Button>
              <Button variant="outline" className="w-full justify-start gap-2">
                <Mail className="w-4 h-4"></Mail>
                ishankumar954@gmail.com
              </Button>
              <Button variant="outline" className="w-full justify-start gap-2">
                <Github className="w-4 h-4"></Github>
                GitHub Profile
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-6 px-4 text-center">
        <p>&copy; {new Date().getFullYear()} Ishan Kumar</p>
      </footer>
    </div>
  )
}

export default Portfolio