type CredentialCard = {
  title: string
  description: string
  fileHref?: string
  fileLabel?: string
}

const certifications: CredentialCard[] = [
  {
    title: 'Active PA LCPC',
    description: 'Pennsylvania License PC014692',
    fileHref: '/docs/pa_license.pdf',
    fileLabel: 'Download PDF',
  },
  {
    title: 'Active MD LCPC',
    description: 'Maryland License Certificate',
    fileHref: '/docs/md_license.pdf',
    fileLabel: 'Download PDF',
  },
  {
    title: 'ACA Membership',
    description: 'American Counseling Association member.',
    fileHref: '/docs/aca_membership.pdf',
    fileLabel: 'Download PDF',
  },
  {
    title: 'Certified Nature-Informed Therapist',
    description: 'Certification in nature-informed therapeutic approaches.',
    fileHref: '/docs/cnit_certification.pdf',
    fileLabel: 'Download PDF',
  },
]

const presentations: CredentialCard[] = [
  {
    title: 'Presentations & Proposals',
    description: 'NIT for SUD',
    fileHref: '/docs/nit_for_sud.pdf',
    fileLabel: 'Download / Open',
  },
  {
    title: '2026 ACA Preview-Call for Proposals',
    description: 'Conference proposal preview.',
    fileHref: '/docs/aca_2026_proposal.pdf',
    fileLabel: 'Download / Open',
  },
]

const phd: CredentialCard[] = [
  {
    title: 'PhD Candidacy',
    description: 'Counselor Education and Supervision at Waynesburg University.',
  },
]

export default function Credentials() {
  const all = [
    { heading: 'Certifications', cards: certifications },
    { heading: 'Presentations & Proposals', cards: presentations },
    { heading: 'PhD Candidacy', cards: phd },
  ]

  return (
    <section id="documents" className="mx-auto max-w-6xl px-4 py-12 md:py-16">
      <h2 className="font-serif text-2xl font-semibold text-slate-900 md:text-3xl">
        Credentials & Publications
      </h2>
      <p className="mt-2 text-slate-700">
        Downloadable documents linked from the site's docs folder.
      </p>

      <div className="mt-10 space-y-10">
        {all.map((group) => (
          <div key={group.heading}>
            <h3 className="text-base font-semibold text-slate-900">{group.heading}</h3>
            <div className="mt-4 grid gap-6 md:grid-cols-2">
              {group.cards.map((c) => (
                <article key={c.title} className="rounded-3xl border border-slate-200 bg-white/70 p-6">
                  <h4 className="font-serif text-lg font-semibold text-slate-900">{c.title}</h4>
                  <p className="mt-2 text-sm leading-relaxed text-slate-700">{c.description}</p>

                  {c.fileHref ? (
                    <a
                      href={c.fileHref}
                      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={c.fileLabel ? `${c.fileLabel}: ${c.title}` : `Open ${c.title}`}
                    >
                      {c.fileLabel ?? 'Open'}
                    </a>
                  ) : (
                    <div className="mt-5 rounded-xl bg-slate-50 px-4 py-2 text-xs font-semibold text-slate-700">
                      Credential info
                    </div>
                  )}
                </article>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
