import { useState } from 'react'
import { Briefcase, Calendar, Building2, GraduationCap } from 'lucide-react'

type ExperienceItem = {
  date: string
  role: string
  org: string
  details: string[]
  icon?: 'work' | 'education'
}

const experienceData: ExperienceItem[] = [
  {
    date: '2016 – Present',
    role: 'Licensed Professional Counselor (LCPC)',
    org: 'Private Practice & Clinical Settings',
    icon: 'work',
    details: [
      '10+ years clinical experience in integrated treatment for co-occurring mental health and substance use disorders',
      'Specializes in trauma-informed care, narrative therapy, and nature-based interventions',
      'Certified Nature-Informed Therapist utilizing nature as co-therapist in clinical practice',
      'Developed innovative presentations on nature-informed therapy for substance use recovery',
    ],
  },
  {
    date: '2024 – Present',
    role: 'PhD Candidate',
    org: 'Waynesburg University',
    icon: 'education',
    details: [
      'Counselor Education and Supervision program',
      'Focus on advancing nature-informed therapeutic approaches',
      'Research in trauma-responsive, multicultural counseling frameworks',
    ],
  },
]

function Icon({ kind }: { kind?: 'work' | 'education' }) {
  if (kind === 'education') {
    return <GraduationCap className="h-5 w-5" />
  }
  return <Briefcase className="h-5 w-5" />
}

export default function Experience() {
  const [items] = useState<ExperienceItem[]>(experienceData)

  return (
    <section id="experience" className="mx-auto max-w-6xl px-4 py-12 md:py-16">
      <div className="mb-8">
        <h2 className="font-serif text-2xl font-semibold text-slate-900 md:text-3xl">
          Counseling Experience
        </h2>
        <p className="mt-2 max-w-3xl text-slate-700">
          Professional timeline showcasing over a decade of clinical experience in mental health 
          and substance use disorder treatment.
        </p>
      </div>

      <div className="mt-8 w-full space-y-6">
        {items.map((item, idx) => (
          <article
            key={`${item.date}-${idx}`}
            className="group relative rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-all hover:shadow-md hover:border-emerald-200/60"
          >
            <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
              <div className="flex-1">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100/60 text-emerald-700">
                    <Icon kind={item.icon} />
                  </div>
                  <div>
                    <h3 className="font-serif text-lg font-semibold text-slate-900">
                      {item.role}
                    </h3>
                    {item.org && (
                      <div className="mt-1 flex items-center gap-1.5 text-sm text-slate-600">
                        <Building2 className="h-3.5 w-3.5" />
                        <span>{item.org}</span>
                      </div>
                    )}
                  </div>
                </div>

                {item.details?.length ? (
                  <ul className="mt-4 space-y-2">
                    {item.details.map((d, i) => (
                      <li 
                        key={i} 
                        className="flex items-start gap-2 text-sm text-slate-700"
                      >
                        <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500/60" />
                        <span className="leading-relaxed">{d}</span>
                      </li>
                    ))}
                  </ul>
                ) : null}
              </div>

              <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-800/90 md:flex-col md:items-end md:text-right">
                <Calendar className="h-4 w-4 md:hidden" />
                <time className="whitespace-nowrap">{item.date}</time>
              </div>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-6 flex items-center justify-between text-xs text-slate-500">
        <p>Professional summary</p>
        <a 
          href="/docs/resume.pdf" 
          className="text-emerald-700 hover:text-emerald-800 hover:underline"
          target="_blank"
          rel="noreferrer"
        >
          Download full resume →
        </a>
      </div>
    </section>
  )
}