import type { Metadata } from "next";
import Link from "next/link";
import { siteConfig } from "@/lib/config";

export const metadata: Metadata = {
  title: "About us",
  description: `About ${siteConfig.name} — trusted second-hand electronics.`,
};

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-10">
      <h1 className="text-3xl font-bold text-slate-900">About {siteConfig.name}</h1>
      <p className="mt-4 text-slate-600">
        {siteConfig.name} is your trusted destination for quality second-hand
        electronics. We buy, refurbish, test, and resell laptops, desktops,
        monitors, RAM, storage, TVs, sound systems and accessories — so you get
        great technology at a fraction of the price, without the risk.
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-3">
        {[
          { icon: "🔬", title: "Every device tested", text: "We inspect and grade each item before it goes on sale." },
          { icon: "🛡", title: "Seller warranty", text: "Products come with our own warranty for peace of mind." },
          { icon: "♻️", title: "We buy back", text: "Sell us your old gear and give it a second life." },
        ].map((f) => (
          <div key={f.title} className="rounded-xl border border-slate-200 bg-white p-5">
            <div className="text-2xl">{f.icon}</div>
            <p className="mt-2 font-semibold text-slate-800">{f.title}</p>
            <p className="text-sm text-slate-500">{f.text}</p>
          </div>
        ))}
      </div>

      <h2 className="mt-10 text-xl font-bold text-slate-900">Why buy refurbished?</h2>
      <ul className="mt-3 space-y-2 text-slate-600">
        <li>💰 Save 40–70% versus buying new.</li>
        <li>🌍 Reduce e-waste and your carbon footprint.</li>
        <li>✅ Get tested, working devices with a warranty.</li>
        <li>💵 Pay conveniently with cash on delivery.</li>
      </ul>

      <div className="mt-10 rounded-xl border border-brand-200 bg-brand-50 p-6 text-center">
        <p className="font-semibold text-brand-900">Have questions?</p>
        <p className="mt-1 text-sm text-brand-800">
          We&apos;re happy to help you find the right device or evaluate yours.
        </p>
        <Link
          href="/contact"
          className="mt-4 inline-block rounded-lg bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700"
        >
          Contact us
        </Link>
      </div>
    </div>
  );
}