'use client'

import Image from 'next/image'
import { SectionHeader } from './section-header'

const EXPERIENCE = [
  {
    role: 'Senior Programmer',
    company: 'Neputer Tech Pvt. Ltd.',
    period: 'Jan 2024 — Present',
    description:
      'Lead developer for several client-facing projects using Laravel, React, and Flutter. Spearheaded development of custom CMS and eCommerce platforms with payment integration.',
  },
  {
    role: 'Trainer — MERN Stack & PHP/Laravel',
    company: 'Broadway Infosys Nepal',
    period: 'Jan 2017 — Present',
    description:
      'Designed and delivered full-stack web development courses. Mentored 500+ students and professionals, conducting workshops at Nepal Army\'s Communication & Technical School and more.',
  },
  {
    role: 'Senior Programmer',
    company: 'Ktmfreelancer Pvt. Ltd.',
    period: 'Mar 2014 — Jun 2017',
    description:
      'Developed and maintained multiple web projects using PHP, MySQL, Laravel, and JavaScript. Managed client communications, requirement gathering, and deployment workflows.',
  },
  {
    role: 'Freelance Developer',
    company: 'Self-employed',
    period: '2015 — Present',
    description:
      'Delivered custom websites, eCommerce solutions, and mobile apps for international clients. Focused on performance, SEO, and user experience.',
  },
]

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

      <div className="grid md:grid-cols-2 gap-16 mt-12">
        {/* Bio column */}
        <div>
          {/* Mobile photo */}
          <div className="md:hidden mb-8 flex justify-center">
            <div className="relative w-48 h-60 rounded-xl overflow-hidden border-2 border-border shadow-md">
              <Image
                src="/images/nitish-profile.jpg"
                alt="Nitish Raj Uprety"
                fill
                className="object-cover object-top"
              />
            </div>
          </div>
          
          <h3 className="font-serif text-2xl font-semibold text-foreground mb-6 text-balance">
            Building for the web — and teaching others to do the same.
          </h3>
          <div className="space-y-4 text-muted-foreground leading-relaxed text-base">
            <p>
              I am a full-stack web and mobile developer based in Bhaktapur, Nepal, with over a decade
              of hands-on experience shipping scalable applications for clients across the globe.
            </p>
            <p>
              Beyond client work, I have spent years training the next generation of developers at
              Broadway Infosys Nepal — helping 500+ students and professionals build real careers in
              tech.
            </p>
            <p>
              I am fluent in English and Nepali, and I am open to remote, freelance, and onsite
              opportunities where I can bring both technical depth and a mentorship mindset.
            </p>
          </div>

          {/* Quick stats */}
          <div className="grid grid-cols-3 gap-6 mt-10 pt-10 border-t border-border">
            {[
              { value: '10+', label: 'Years experience' },
              { value: '500+', label: 'Students mentored' },
              { value: '15+', label: 'Live projects' },
            ].map((stat) => (
              <div key={stat.label}>
                <p className="font-serif text-3xl font-bold text-primary">{stat.value}</p>
                <p className="text-xs text-muted-foreground mt-1 leading-snug">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Experience timeline */}
        <div>
          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-8">
            Experience
          </h3>
          <ol className="relative border-l border-border space-y-8" aria-label="Work experience">
            {EXPERIENCE.map((exp) => (
              <li key={exp.role + exp.company} className="pl-6 relative">
                {/* Timeline dot */}
                <span className="absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full border-2 border-primary bg-background" />
                <div>
                  <p className="text-xs text-muted-foreground mb-1">{exp.period}</p>
                  <p className="font-medium text-foreground text-sm">{exp.role}</p>
                  <p className="text-xs text-primary mb-2">{exp.company}</p>
                  <p className="text-sm text-muted-foreground leading-relaxed">{exp.description}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  )
}
