import type { Metadata } from "next";
import Link from "next/link";
import { Icon } from "@/components/icons";
import { programmes } from "@/data/site";

export const metadata: Metadata = {
  title: "Programmes",
  description:
    "Explore Vision Aid Foundation programmes across eye health, livelihoods, protection, education and humanitarian assistance.",
};

export default function ProgrammesPage() {
  return (
    <>
      <section className="page-hero">
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">Our programmes</span>
            <h1>Eight pathways. One mission for dignity.</h1>
          </div>
          <p>
            Practical programmes designed around the realities of underserved
            communities in Bangladesh.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="programme-grid page-programme-grid">
            {programmes.map((programme) => (
              <Link
                className={`programme-card ${programme.tone}`}
                href={`/programmes/${programme.slug}`}
                key={programme.slug}
              >
                <div className="card-top">
                  <span className="programme-icon">
                    <Icon name={programme.icon} />
                  </span>
                  <span className="programme-number">{programme.number}</span>
                </div>
                <h3>{programme.title}</h3>
                <p>{programme.summary}</p>
                <span className="card-link">
                  View programme <Icon name="arrow" />
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}