import { createFileRoute } from "@tanstack/react-router";
import { Section } from "@/components/page-shell";
import { SubPageLayout } from "@/components/sub-page-layout";

export const Route = createFileRoute("/portable-misting-fans")({
  head: () => ({
    meta: [
      { title: "Portable Misting Fans — Promist" },
      { name: "description", content: "1000-psi high pressure portable misting fans for versatile cooling anywhere you need it." },
    ],
  }),
  component: ProductsPortableMistingFans,
});

function ProductsPortableMistingFans() {
  return (
    <SubPageLayout eyebrow="Products" title="Portable Misting Fans" lede="Our Portable Mist Fans can be used almost anywhere an air conditioner can be used and many places where it can't.">
      <Section>
        <div className="grid lg:grid-cols-2 gap-10 items-start">
          <div className="prose max-w-none text-muted-foreground space-y-4">
            <p>We offer a broad range of 1000-psi (70 bar) high pressure portable misting fans. They only need to connect to water and power supply. Perfect for indoor and outdoor use where flexible, movable cooling is required.</p>
            <p>Ideal for warehouses, workshops, outdoor events, construction sites, sports facilities, and any location where temporary or mobile cooling is needed.</p>
          </div>
          <img src="/wp-uploads/2017/04/portable.jpg" alt="Portable Misting Fans" className="w-full h-[300px] object-cover rounded-lg" />
        </div>
      </Section>
      <Section className="bg-muted/50">
        <h2 className="font-display text-3xl font-black mb-6">Applications</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Outdoor Events</h3>
            <p className="mt-2 text-muted-foreground">Keep guests comfortable at weddings, parties, and corporate events.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Construction Sites</h3>
            <p className="mt-2 text-muted-foreground">Provide cooling for workers in temporary outdoor work areas.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Sports Facilities</h3>
            <p className="mt-2 text-muted-foreground">Cool players and spectators at outdoor sports venues.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Warehouses</h3>
            <p className="mt-2 text-muted-foreground">Mobile cooling for large indoor spaces without permanent installation.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Workshops</h3>
            <p className="mt-2 text-muted-foreground">Flexible cooling for repair shops, garages, and workshops.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Emergency Cooling</h3>
            <p className="mt-2 text-muted-foreground">Rapid deployment cooling for emergency response situations.</p>
          </div>
        </div>
      </Section>
    </SubPageLayout>
  );
}
