import Image from 'next/image';
import { site } from '@/content/site';
import { CtaButton } from '../CtaButton';
import sack from '../../../public/photos/sack.jpg';

export function Delivery() {
  const { delivery } = site;
  const { pickup } = delivery;
  return (
    <section id="delivery" aria-labelledby="delivery-title" className="on-dark bg-roast text-cream">
      <div className="grid lg:grid-cols-12">
        <div className="relative aspect-[390/230] lg:col-span-5 lg:aspect-auto lg:min-h-[640px]">
          <Image
            src={sack}
            alt={site.images.sack.alt}
            fill
            sizes="(min-width: 1024px) 42vw, 100vw"
            className="object-cover object-[center_45%]"
            placeholder="blur"
          />
        </div>
        <div className="page-x section-y lg:col-span-7 lg:pr-12 lg:pl-16">
          <div className="max-w-[720px]">
            <h2 id="delivery-title" className="text-headline font-extrabold">
              {delivery.title}
            </h2>
            <div className="mt-10 grid gap-10 md:grid-cols-2 md:gap-8 lg:mt-14">
              <div>
                <h3 className="text-title font-extrabold">{delivery.delivery.title}</h3>
                <ul className="mt-5">
                  {delivery.delivery.lines.map((line) => (
                    <li key={line} className="border-t border-muted-on-dark py-3 first:border-t-0 first:pt-0">
                      {line}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-title font-extrabold">{pickup.title}</h3>
                <p className="mt-5">{pickup.address}</p>
                <dl className="mt-3">
                  {pickup.hours.map((row) => (
                    <div key={row.days} className="flex items-baseline justify-between gap-4 border-t border-muted-on-dark py-3">
                      <dt className="tag text-muted-on-dark">{row.days}</dt>
                      <dd className="mono text-ui font-medium">{row.time}</dd>
                    </div>
                  ))}
                </dl>
                <a
                  href={pickup.map.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-2 inline-flex min-h-11 items-center gap-2 text-ui font-semibold underline"
                >
                  {pickup.map.label}
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true" focusable="false">
                    <path d="M5 3h8v8M13 3 3 13" />
                  </svg>
                </a>
              </div>
            </div>
            <CtaButton interest={delivery.cta.interest} className="btn btn-on-dark mt-12 w-full sm:w-auto">
              {delivery.cta.label}
            </CtaButton>
          </div>
        </div>
      </div>
    </section>
  );
}