import { createFileRoute, Link } from "@tanstack/react-router";
import { PageHero, Section } from "@/components/page-shell";
import { ArrowUpRight } from "lucide-react";

export const Route = createFileRoute("/rental")({
  head: () => ({
    meta: [
      { title: "Rental — Misting Systems for Events & Short-Term Use" },
      { name: "description", content: "Rent Promist misting fans and systems for events, expos, weddings and short-term outdoor cooling needs." },
      { property: "og:title", content: "Promist Rental" },
      { property: "og:description", content: "Short-term misting rentals for events and outdoor spaces." },
    ],
  }),
  component: Rental,
});

function Rental() {
  return (
    <>
      <PageHero
        eyebrow="Rental"
        title="Cool on demand — for a day, a week or a season."
        lede="Rent complete Promist misting systems and fans for events, expos, weddings, film sets and temporary outdoor installations."
      />
      <Section>
        <div className="grid lg:grid-cols-2 gap-14">
          <div>
            <img src="https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg" alt="Rental misting" className="w-full h-[440px] object-cover" />
          </div>
          <div>
            <ul className="space-y-4">
              {[
                "Delivery, installation and pickup included",
                "Flexible terms — daily, weekly, monthly",
                "Portable fans and full pump-driven systems",
                "24/7 technical support during rental period",
                "Custom sizing based on your site plan",
              ].map((f) => (
                <li key={f} className="flex gap-4 border-b pb-4">
                  <span className="text-brand-red font-black">/</span><span>{f}</span>
                </li>
              ))}
            </ul>
            <Link to="/enquiry" className="mt-8 inline-flex items-center gap-2 bg-brand-red text-white px-6 py-3.5 rounded-md text-sm font-semibold">
              Request rental pricing <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </Section>
    </>
  );
}