import { createFileRoute, Link } from "@tanstack/react-router";
import { Section } from "@/components/page-shell";
import { SubPageLayout } from "@/components/sub-page-layout";
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() {
  const specs = [
    { label: "Item No.", value: "PM-90" },
    { label: "Air flow rate", value: "9000m³/h" },
    { label: "Voltage", value: "120-127V / 220-240V" },
    { label: "Frequency", value: "50-60Hz" },
    { label: "Power", value: "400w" },
    { label: "Water consumption", value: "6-8 L/H" },
    { label: "Water tank capacity", value: "70L" },
    { label: "Overall size", value: "860×530×1400mm" },
    { label: "Package size", value: "860×530×1400mm" },
    { label: "Blower type", value: "Axial-flow type" },
    { label: "Casing material", value: "Plastic" },
    { label: "Application area", value: "30-50 m²" },
    { label: "Motor", value: "Three speed, 1-phase" },
    { label: "Noise", value: "≤65dB" },
  ];

  return (
    <SubPageLayout
      eyebrow="Rental"
      title="Rental"
      lede="Cool on demand — for a day, a week or a season."
    >
      <Section>
        <div className="grid lg:grid-cols-2 gap-10 items-start">
          <div>
            <img src="/wp-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>
      <Section className="bg-muted/50">
        <div className="grid lg:grid-cols-2 gap-10 items-start">
          <img src="/wp-uploads/2017/05/pm-90.jpg" alt="PM-90 Evaporative Air Cooler" className="w-full h-[400px] object-cover rounded-lg" />
          <div>
            <h3 className="font-display text-2xl font-bold mb-6">PM-90 Evaporative Air Coolers</h3>
            <table className="w-full border-collapse">
              <tbody>
                {specs.map((spec) => (
                  <tr key={spec.label} className="border-b">
                    <td className="py-2 pr-4 font-semibold text-sm">{spec.label}</td>
                    <td className="py-2 text-muted-foreground">{spec.value}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Section>
    </SubPageLayout>
  );
}
