/*
 * Page that shows information about the pet store and what it offers.
 *
 * Author: Shiv
 * Date: April 2026
 */

//About page
//Three info cards covering what the store does, its focus, and how to visit
export default function AboutPage() {
  return (
    <main className="bg-gradient-to-b from-[#f9f9f9] to-white">
      <section className="text-center px-8 pt-10 pb-6">
        <h1 className="text-[1.6rem] font-bold text-[#333] mb-2 uppercase tracking-[0.08em]">About Leon&apos;s Pet Store</h1>
        <p className="text-base text-[#888] mb-4 max-w-[520px] mx-auto leading-relaxed">Pet care, adoption support, grooming, and everyday essentials in one place.</p>
        <div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
      </section>

      <section className="max-w-[1200px] mx-auto px-8 pb-6 grid grid-cols-3 gap-6 max-[768px]:grid-cols-1">
        <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
          <h2 className="mt-0 mb-4 text-[#222]">What We Do</h2>
          <p>
            Leon&apos;s Pet Store connects families with adoptable pets, helpful services, and quality products for day-to-day pet care.
          </p>
        </div>

        <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
          <h2 className="mt-0 mb-4 text-[#222]">Our Focus</h2>
          <ul className="m-0 pl-5 grid gap-2 list-disc">
            <li>Support responsible pet adoption</li>
            <li>Provide grooming and care services</li>
            <li>Offer reliable pet supplies and essentials</li>
            <li>Create a friendly experience for customers and staff</li>
          </ul>
        </div>

        <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
          <h2 className="mt-0 mb-4 text-[#222]">Visit the Store</h2>
          <p>
            Browse adoptable pets, schedule appointments, shop products, or contact the team for help finding the right fit for a pet and household.
          </p>
        </div>
      </section>
    </main>
  );
}