import type { Metadata } from 'next';
import { BulkOrderForm } from '@/components/bulk-order-form';
import { getBulkProducts } from '@/lib/catalog';
import { getSiteSettings } from '@/lib/site-settings';

export const metadata: Metadata = { title: 'Bulk Orders' };

export default async function BulkOrdersPage({ searchParams }: { searchParams: { product?: string } }) {
  const [products, settings] = await Promise.all([getBulkProducts(), getSiteSettings()]);
  // /bulk-orders?product=<slug> (the "Request a bulk quote" link on a
  // product page) opens the form with that product already selected.
  const preselected = products.find((p) => p.slug === searchParams.product)?.id;

  return (
    <>
      <section className="bg-beige py-14">
        <div className="container-page text-center">
          <span className="mb-3 inline-block rounded-full bg-red-600 px-3 py-1 text-xs font-bold text-white">HOT</span>
          <h1 className="text-3xl font-serif font-bold text-navy-800 sm:text-4xl">Bulk &amp; Corporate Orders</h1>
          <p className="mx-auto mt-4 max-w-2xl text-navy-600">
            Sourcing handicrafts for a hotel, corporate gifting, event, or retail order? We work
            with artisans across categories to fulfil bulk and custom orders.
          </p>
        </div>
      </section>

      <section className="py-16">
        <div className="container-page grid gap-10 lg:grid-cols-2">
          <div>
            <h2 className="text-2xl font-serif font-bold text-navy-800">Why Order in Bulk With Us?</h2>
            <ul className="mt-5 space-y-4 text-sm text-navy-600">
              <li className="flex gap-3"><span className="text-gold-600" aria-hidden="true">&#10003;</span> Direct access to vetted artisans across every craft category</li>
              <li className="flex gap-3"><span className="text-gold-600" aria-hidden="true">&#10003;</span> Custom branding and packaging options for corporate gifting</li>
              <li className="flex gap-3"><span className="text-gold-600" aria-hidden="true">&#10003;</span> Dedicated account support for large or recurring orders</li>
              <li className="flex gap-3"><span className="text-gold-600" aria-hidden="true">&#10003;</span> Islandwide delivery, with export options on request</li>
            </ul>
          </div>

          <div className="card p-6 sm:p-8">
            <h3 className="font-serif text-lg font-semibold text-navy-800">Request a Bulk Order Quote</h3>
            <p className="mt-1 text-xs text-navy-500">Our team will review your request and follow up by email.</p>
            <div className="mt-5">
              <BulkOrderForm products={products} currency={settings.currency} preselectedProductId={preselected} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}