import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';
import { ContactForm } from '@/components/contact-form';

export const metadata: Metadata = { title: 'Contact Us' };

export default function ContactPage() {
  return (
    <>
      <section className="bg-beige py-14">
        <div className="container-page text-center">
          <h1 className="text-3xl font-serif font-bold text-navy-800 sm:text-4xl">Contact Us</h1>
          <p className="mx-auto mt-4 max-w-2xl text-navy-600">Have a question about an order, a product, or becoming a vendor? Send us a message.</p>
        </div>
      </section>

      <section className="py-16">
        <div className="container-page grid gap-10 lg:grid-cols-[1fr_320px]">
          <div className="card p-6 sm:p-8">
            <ContactForm />
          </div>

          <aside className="space-y-5">
            <div className="card p-6">
              <h3 className="font-serif text-base font-semibold text-navy-800">Get in Touch</h3>
              <ul className="mt-4 space-y-3 text-sm text-navy-600">
                <li className="flex items-center gap-2"><span aria-hidden="true">&#9742;</span> +94 77 123 4567</li>
                <li className="flex items-center gap-2"><span aria-hidden="true">&#9993;</span> info@ceylonhandicrafts.lk</li>
                <li className="flex items-center gap-2"><span aria-hidden="true">&#128205;</span> Colombo, Sri Lanka</li>
              </ul>
            </div>
            <div className="card p-6">
              <h3 className="font-serif text-base font-semibold text-navy-800">Vendor Support</h3>
              <p className="mt-2 text-sm text-navy-600">Already applied to become a vendor? Our team will reach out within 1–2 business days.</p>
              <Link href={ROUTES.vendorShow} className="mt-3 inline-block text-sm font-semibold text-gold-600 hover:text-gold-700">View vendor plans &rarr;</Link>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}