Ecommerce footer

import Link from 'next/link'
import { CreditCard, PackageCheck, RotateCcw, Truck } from 'lucide-react'
import { Container } from '@/components/ui/layout'
import { productCategories } from '@/content/demo'

/**
 * Ecommerce footer
 *
 * Reassurance strip first, then shop, help and company columns. The strip
 * carries the four questions that cause abandoned carts — delivery, returns,
 * payment and stock — where a hesitating visitor will actually see them.
 */
const reassurance = [
  { icon: Truck, title: 'Free delivery over $150', detail: 'Two to four working days' },
  { icon: RotateCcw, title: '60-day returns', detail: 'Unworn, with tags' },
  { icon: CreditCard, title: 'Secure checkout', detail: 'Demo only — no payment is taken' },
  { icon: PackageCheck, title: 'Stock is live', detail: 'Updated as orders are placed' },
]

const help = [
  { label: 'Delivery & returns', href: '/starters/ecommerce/preview/account' },
  { label: 'Size guide', href: '/starters/ecommerce/preview/shop' },
  { label: 'Track an order', href: '/starters/ecommerce/preview/orders' },
  { label: 'Contact us', href: '/forms/simple-contact' },
]

export default function EcommerceFooter() {
  return (
    <footer className="border-t border-line bg-canvas">
      <div className="border-b border-line bg-surface-sunken">
        <Container className="grid gap-6 py-8 sm:grid-cols-2 lg:grid-cols-4">
          {reassurance.map((item) => {
            const Icon = item.icon
            return (
              <div key={item.title} className="flex items-start gap-3">
                <Icon className="mt-0.5 size-4.5 shrink-0 text-accent" aria-hidden="true" />
                <div>
                  <p className="text-sm font-medium text-ink-strong">{item.title}</p>
                  <p className="mt-0.5 text-xs text-ink-muted">{item.detail}</p>
                </div>
              </div>
            )
          })}
        </Container>
      </div>

      <Container className="py-12">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
          <div className="max-w-xs">
            <p className="display-type text-lg font-semibold text-ink-strong">Quarry</p>
            <p className="mt-2 text-sm text-ink-muted">
              Clothing made to be worn until it wears out. A fictional shop built with Foundry.
            </p>
          </div>

          <nav aria-label="Shop">
            <h2 className="label-caps mb-3 text-ink-subtle">Shop</h2>
            <ul className="flex flex-col gap-2">
              {productCategories.map((category) => (
                <li key={category.slug}>
                  <Link
                    href={`/starters/ecommerce/preview/category/${category.slug}`}
                    className="text-sm text-ink-muted transition-colors hover:text-accent"
                  >
                    {category.name}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Help">
            <h2 className="label-caps mb-3 text-ink-subtle">Help</h2>
            <ul className="flex flex-col gap-2">
              {help.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-ink-muted transition-colors hover:text-accent"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Account">
            <h2 className="label-caps mb-3 text-ink-subtle">Account</h2>
            <ul className="flex flex-col gap-2">
              <li>
                <Link
                  href="/starters/ecommerce/preview/account"
                  className="text-sm text-ink-muted hover:text-accent"
                >
                  Your details
                </Link>
              </li>
              <li>
                <Link
                  href="/starters/ecommerce/preview/orders"
                  className="text-sm text-ink-muted hover:text-accent"
                >
                  Order history
                </Link>
              </li>
              <li>
                <Link
                  href="/starters/ecommerce/preview/cart"
                  className="text-sm text-ink-muted hover:text-accent"
                >
                  Your bag
                </Link>
              </li>
            </ul>
          </nav>
        </div>

        <p className="mt-10 border-t border-line pt-6 text-xs text-ink-subtle">
          Quarry is a fictional storefront. No orders can be placed and no payment is processed.
        </p>
      </Container>
    </footer>
  )
}