import type { Metadata } from "next";
import { siteConfig, whatsappLink } from "@/lib/siteConfig";

export const metadata: Metadata = {
  title: "About & Delivery Info",
  description: `Learn about ${siteConfig.name}, our Asaba store, delivery coverage, and how to pay.`,
  alternates: { canonical: "/about" },
};

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
      <h1 className="font-display text-2xl font-bold text-brand-ink sm:text-3xl">
        About {siteConfig.name}
      </h1>
      <p className="mt-3 text-base leading-relaxed text-black/65">
        {siteConfig.name} is an online gadget store based in Asaba, Delta State,
        selling phones, laptops, phone accessories and content creator gear.
        We deliver across {siteConfig.deliveryArea} and every order can be paid
        for securely online, no store visit required.
      </p>

      <div className="mt-10 grid gap-8 sm:grid-cols-2">
        <div>
          <h2 className="font-display text-lg font-semibold text-brand-ink">Visit us</h2>
          <p className="mt-2 text-sm leading-relaxed text-black/60">
            {siteConfig.address}
            <br />
            {siteConfig.city}, {siteConfig.state}
          </p>
        </div>

        <div>
          <h2 className="font-display text-lg font-semibold text-brand-ink">Delivery</h2>
          <p className="mt-2 text-sm leading-relaxed text-black/60">
            {siteConfig.deliveryNote}. Orders are typically dispatched within
            24 hours of payment confirmation.
          </p>
        </div>

        <div>
          <h2 className="font-display text-lg font-semibold text-brand-ink">Payment</h2>
          <p className="mt-2 text-sm leading-relaxed text-black/60">
            We accept card, bank transfer and USSD payments securely through
            Paystack at checkout. No account is needed to order.
          </p>
        </div>

        <div>
          <h2 className="font-display text-lg font-semibold text-brand-ink">Contact</h2>
          <p className="mt-2 text-sm leading-relaxed text-black/60">
            Call {siteConfig.contactPhoneDisplay} or{" "}
            <a href={whatsappLink()} target="_blank" rel="noopener noreferrer" className="text-brand-orange-dark hover:underline">
              message us on WhatsApp
            </a>
            .
            <br />
            {siteConfig.email}
          </p>
        </div>
      </div>
    </div>
  );
}