'use client'

import { ExternalLink, Github } from 'lucide-react'
import { SectionHeader } from './section-header'

const PROJECTS = [
  {
    name: 'BuyMandu',
    description:
      'A full-featured eCommerce platform serving the Nepalese market. Built with a custom storefront, product management, and integrated payment gateway.',
    tech: ['Laravel', 'React', 'MySQL', 'Tailwind CSS'],
    live: 'https://www.buymandu.com',
    github: null,
  },
  {
    name: 'Keshab International',
    description:
      'Corporate web presence for an international business, featuring a CMS, multi-language support, and a professional services showcase.',
    tech: ['Laravel', 'PHP', 'MySQL', 'JavaScript'],
    live: 'https://keshabintl.com.np',
    github: null,
  },
  {
    name: 'ClouTravel',
    description:
      'A travel booking and itinerary platform with dynamic listing pages, search filters, and booking management for travel agencies.',
    tech: ['Laravel', 'Vue.js', 'MySQL', 'REST API'],
    live: 'https://cloutravel.com',
    github: null,
  },
  {
    name: 'Orrog',
    description:
      'A modern web platform built for a global client, featuring a clean UI, optimised performance, and seamless content management.',
    tech: ['React', 'Node.js', 'MongoDB', 'TypeScript'],
    live: 'https://orrog.com',
    github: null,
  },
  {
    name: 'Royal Big Master',
    description:
      'An enterprise-grade management platform with role-based access control, reporting dashboards, and third-party API integrations.',
    tech: ['Laravel', 'PHP', 'MySQL', 'Bootstrap'],
    live: 'https://royalbigmaster.com',
    github: null,
  },
  {
    name: 'Naijakobo Market',
    description:
      'A Nigerian marketplace connecting buyers and sellers across categories, with vendor management and escrow payment functionality.',
    tech: ['Laravel', 'PHP', 'MySQL', 'JavaScript'],
    live: 'https://www.naijakobomarket.com',
    github: null,
  },
]

export function Projects() {
  return (
    <section id="projects" className="py-24 px-6 max-w-5xl mx-auto">
      <SectionHeader label="Projects" />

      <div className="mt-4 mb-12">
        <h2 className="font-serif text-3xl font-semibold text-foreground text-balance">
          Selected work
        </h2>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {PROJECTS.map((project) => (
          <article
            key={project.name}
            className="group flex flex-col bg-card border border-border rounded-xl p-6 hover:border-primary/40 hover:shadow-sm transition-all duration-200"
          >
            <div className="flex items-start justify-between mb-4">
              <h3 className="font-serif font-semibold text-lg text-foreground group-hover:text-primary transition-colors">
                {project.name}
              </h3>
              <div className="flex items-center gap-2 shrink-0">
                {project.github && (
                  <a
                    href={project.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    aria-label={`${project.name} on GitHub`}
                  >
                    <Github size={16} />
                  </a>
                )}
                {project.live && (
                  <a
                    href={project.live}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    aria-label={`${project.name} live site`}
                  >
                    <ExternalLink size={16} />
                  </a>
                )}
              </div>
            </div>

            <p className="text-sm text-muted-foreground leading-relaxed flex-1 mb-5">
              {project.description}
            </p>

            <div className="flex flex-wrap gap-1.5 mt-auto">
              {project.tech.map((t) => (
                <span
                  key={t}
                  className="text-xs px-2 py-0.5 rounded-md bg-secondary text-secondary-foreground border border-border"
                >
                  {t}
                </span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </section>
  )
}
