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

export const Route = createFileRoute("/commercial-outdoor-cooling")({
  head: () => ({
    meta: [
      { title: "Commercial Outdoor Cooling — Promist" },
      { name: "description", content: "High-pressure misting systems for commercial outdoor cooling at restaurants, hotels, resorts, and event spaces." },
    ],
  }),
  component: ApplicationsCommercialOutdoorCooling,
});

function ApplicationsCommercialOutdoorCooling() {
  return (
    <SubPageLayout
      eyebrow="Applications"
      title="Commercial Outdoor Cooling"
      lede="We provide high pressure cooling systems for commercial indoor and outdoor areas. The system uses the cooling effect created by evaporating water micro-droplets in the air."
    >
      <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>Our misting systems are the most efficient and effective solution for cooling commercial outdoor spaces. By forcing water through specially designed nozzles at high pressure, we create billions of ultra-fine micro-droplets that evaporate instantly, absorbing heat from the surrounding air and reducing ambient temperature by up to 15°C.</p>
            <p>Perfect for restaurants, cafes, hotels, resorts, theme parks, shopping centers, and event venues looking to enhance customer comfort and extend the usability of outdoor spaces during hot weather.</p>
          </div>
          <img src="/wp-uploads/2017/04/commercial-outdoor-cooling.jpg" alt="Commercial Outdoor Cooling" 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-8">Key Benefits</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Extend Outdoor Seasons</h3>
            <p className="mt-2 text-muted-foreground">Use your outdoor spaces comfortably even during the hottest months, increasing revenue potential.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Energy Efficient</h3>
            <p className="mt-2 text-muted-foreground">Our high-pressure systems consume minimal electricity compared to traditional air conditioning.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Customer Comfort</h3>
            <p className="mt-2 text-muted-foreground">Create a pleasant, cool environment that keeps customers comfortable and encourages longer visits.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border">
            <h3 className="font-bold text-lg">Low Maintenance</h3>
            <p className="mt-2 text-muted-foreground">Designed for durability with minimal maintenance requirements, our systems are built to last.</p>
          </div>
        </div>
      </Section>
    </SubPageLayout>
  );
}
