import { GraduationCap, Sparkles } from 'lucide-react'

type Presentation = {
  id: string
  title: string
  description: string
  icon: 'growth' | 'education'
  href: string
}

const presentations: Presentation[] = [
  {
    id: 'p1',
    title: 'Presentation 1',
    description: 'Counseling skills demonstration and clinical case study.',
    icon: 'education',
    href: '/docs/presentation_1.pdf',
  },
  {
    id: 'p2',
    title: 'Presentation 2',
    description: 'Advanced therapeutic techniques and intervention strategies.',
    icon: 'growth',
    href: '/docs/presentation_2.pdf',
  },
]

function Icon({ kind }: { kind: Presentation['icon'] }) {
  if (kind === 'growth') {
    return <Sparkles className="h-6 w-6 text-emerald-700" aria-hidden="true" />
  }
  return <GraduationCap className="h-6 w-6 text-emerald-700" aria-hidden="true" />
}

export default function SkillsGallery() {
  return (
    <section id="skills" className="mx-auto max-w-6xl px-4 py-12 md:py-16">
      <div className="flex items-end justify-between gap-6">
        <div>
          <h2 className="font-serif text-2xl font-semibold text-slate-900 md:text-3xl">
            Demonstration of Counseling Skills
          </h2>
          <p className="mt-2 text-slate-700">
            Select presentations and proposals showcasing leadership, clinical growth, and nature-informed
            practice.
          </p>
        </div>
      </div>

      <div className="mt-8 grid gap-6 md:grid-cols-2">
        {presentations.map((p) => (
          <article
            key={p.id}
            className="group rounded-3xl border border-slate-200 bg-white/70 p-6 shadow-sm"
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <div className="flex items-center gap-3">
                  <Icon kind={p.icon} />
                  <h3 className="font-serif text-lg font-semibold text-slate-900">{p.title}</h3>
                </div>
                <p className="mt-3 text-sm leading-relaxed text-slate-700">{p.description}</p>
              </div>
            </div>

            <a
              href={p.href}
              target="_blank"
              rel="noreferrer"
              className="mt-5 inline-flex items-center rounded-xl bg-emerald-700 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500/60"
              aria-label={`View ${p.title}`}
            >
              View Presentation
            </a>
          </article>
        ))}
      </div>
    </section>
  )
}
