import Image from 'next/image';
import type { Metadata } from 'next';

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

export default function AboutPage() {
  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">About CeylonHandicrafts.lk</h1>
          <p className="mx-auto mt-4 max-w-2xl text-navy-600">
            We connect Sri Lanka&apos;s most talented artisans with customers who value authentic,
            handmade craftsmanship — from wood carvings and brass work to batik and traditional masks.
          </p>
        </div>
      </section>

      <section className="py-16">
        <div className="container-page grid items-center gap-10 lg:grid-cols-2">
          <Image
            src="/images/about-us.jpg"
            alt="Artisans at work"
            width={640}
            height={420}
            className="w-full rounded-xl shadow-sm"
          />
          <div>
            <h2 className="text-2xl font-serif font-bold text-navy-800">Our Story</h2>
            <p className="mt-4 text-sm leading-relaxed text-navy-600">
              CeylonHandicrafts.lk was founded to give Sri Lanka&apos;s artisan communities a wider stage.
              Many skilled makers — wood carvers in Galle, brass workers in Kandy, mask makers in
              Ambalangoda, batik artists in Colombo — sell only within their local area. We built a
              marketplace where they can reach customers islandwide and beyond, while keeping full
              control over their craft and their story.
            </p>
            <p className="mt-4 text-sm leading-relaxed text-navy-600">
              This MVP is the first step: a storefront where customers can browse and artisans can
              apply to sell, with the full ordering and payments experience being built out next.
            </p>
          </div>
        </div>
      </section>

      <section className="bg-beige py-16">
        <div className="container-page grid grid-cols-1 gap-8 text-center sm:grid-cols-3">
          <div>
            <p className="text-3xl font-bold text-gold-600">200+</p>
            <p className="mt-1 text-sm text-navy-600">Artisans &amp; Makers</p>
          </div>
          <div>
            <p className="text-3xl font-bold text-gold-600">1,500+</p>
            <p className="mt-1 text-sm text-navy-600">Handcrafted Products</p>
          </div>
          <div>
            <p className="text-3xl font-bold text-gold-600">25</p>
            <p className="mt-1 text-sm text-navy-600">Districts Represented</p>
          </div>
        </div>
      </section>
    </>
  );
}