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

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Contact Vision Aid Foundation in Mohammadpur, Dhaka, Bangladesh.",
};

export default function ContactPage() {
  return (
    <>
      <section className="page-hero contact-hero">
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">Contact us</span>
            <h1>Start a conversation that can change lives.</h1>
          </div>
          <p>
            Connect with Vision Aid Foundation about programme partnerships,
            sponsorship and community support.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell contact-grid">
          <div className="contact-intro">
            <span className="eyebrow">Vision Aid Foundation</span>
            <h2>We&apos;re based in Dhaka and serve communities across Bangladesh.</h2>
            <p>
              For programme, donor or partnership enquiries, contact our team
              directly using the verified details below.
            </p>
          </div>
          <div className="contact-cards">
            <a className="contact-card" href={`tel:${contact.hotlineHref}`}>
              <span className="contact-icon">
                <Icon name="phone" />
              </span>
              <span>
                <small>Hotline</small>
                <strong>{contact.hotline}</strong>
              </span>
              <Icon className="contact-arrow" name="arrow" />
            </a>
            <a className="contact-card" href={`mailto:${contact.email}`}>
              <span className="contact-icon">
                <Icon name="mail" />
              </span>
              <span>
                <small>Email</small>
                <strong>{contact.email}</strong>
              </span>
              <Icon className="contact-arrow" name="arrow" />
            </a>
            <a
              className="contact-card"
              href={contact.facebook}
              target="_blank"
              rel="noreferrer"
            >
              <span className="contact-icon">
                <Icon name="facebook" />
              </span>
              <span>
                <small>Social</small>
                <strong>Vision Aid Foundation on Facebook</strong>
              </span>
              <Icon className="contact-arrow" name="arrow" />
            </a>
            <div className="contact-card">
              <span className="contact-icon">
                <Icon name="pin" />
              </span>
              <span>
                <small>Foundation office</small>
                <strong>{contact.address}</strong>
              </span>
            </div>
            <div className="contact-card">
              <span className="contact-initials">TM</span>
              <span>
                <small>Chairman</small>
                <strong>{contact.chairman}</strong>
              </span>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}