import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Icon } from "@/components/icons";

export const metadata: Metadata = {
  title: "About Us",
  description:
    "Learn about Vision Aid Foundation, its mission, governance and approach to accountable community service in Bangladesh.",
};

export default function AboutPage() {
  return (
    <>
      <section className="page-hero page-hero-photo">
        <Image
          className="page-hero-image"
          src="/hero/women-patients.jpg"
          alt="Women supported through Vision Aid Foundation eye care"
          fill
          priority
          sizes="100vw"
        />
        <div className="page-hero-shade" />
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">About Vision Aid Foundation</span>
            <h1>Dignity is at the centre of everything we do.</h1>
          </div>
          <p>
            A government-registered, nonpolitical and nonprofit humanitarian
            organisation serving Bangladesh&apos;s poorest and most
            marginalised communities.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell story-grid story-with-photos">
          <div className="story-photos">
            <Image
              src="/about/community-programme.jpg"
              alt="Community skill development programme with Vision Aid Foundation"
              width={720}
              height={540}
            />
            <Image
              src="/about/clinic-outreach.jpg"
              alt="Medical outreach and patient care in the community"
              width={720}
              height={540}
            />
          </div>
          <div className="story-copy">
            <span className="eyebrow">Our work</span>
            <h2>Restoring opportunity, one community at a time.</h2>
            <p className="lead">
              Eye health is our founding mission. Today, our work spans eight
              connected areas—from sight-restoring care to women&apos;s
              livelihoods, worker protection, education and crisis response.
            </p>
            <p>
              Our flagship medical partnership with Dristi Eye Hospital
              connects mobile community screening with diagnosis, specialist
              treatment and post-operative follow-up. That same practical,
              community-centred approach guides every programme we run.
            </p>
            <blockquote className="inline-quote">
              “Mission for Vision — Restoring Sight, Restoring Dignity.”
            </blockquote>
          </div>
        </div>
      </section>

      <section className="principles section">
        <div className="shell">
          <div className="section-heading">
            <div>
              <span className="eyebrow">How we work</span>
              <h2>Built for trust and practical impact.</h2>
            </div>
          </div>
          <div className="principle-grid">
            <article>
              <span>01</span>
              <h3>Accessible</h3>
              <p>
                We bring services closer to people through community outreach,
                referrals and support that reduces barriers to care.
              </p>
            </article>
            <article>
              <span>02</span>
              <h3>Accountable</h3>
              <p>
                Digitised beneficiary records, annual audits and monthly donor
                reporting support transparent delivery.
              </p>
            </article>
            <article>
              <span>03</span>
              <h3>Nonpolitical</h3>
              <p>
                Our work is humanitarian and independent, guided by a strict
                anti-corruption and zero-political-affiliation policy.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section className="credentials">
        <div className="shell credentials-grid">
          <div>
            <span>Legal accreditation</span>
            <h2>Registered to serve.</h2>
          </div>
          <dl>
            <div>
              <dt>NGO Affairs Bureau</dt>
              <dd>Registration No. 3511/2025</dd>
            </div>
            <div>
              <dt>Department of Social Welfare</dt>
              <dd>Registration No. S-12434/2016</dd>
            </div>
            <div>
              <dt>Hospital partner</dt>
              <dd>Government eye hospital Licence No. 4911</dd>
            </div>
          </dl>
        </div>
      </section>

      <section className="simple-cta section">
        <div className="shell simple-cta-inner">
          <div>
            <span className="eyebrow">Work with us</span>
            <h2>Let&apos;s build stronger, healthier communities.</h2>
          </div>
          <Link className="button button-dark" href="/contact">
            Get in touch <Icon name="arrow" />
          </Link>
        </div>
      </section>
    </>
  );
}