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

export const Route = createFileRoute("/residential-outdoor-cooling")({
  head: () => ({
    meta: [
      { title: "Residential Outdoor Cooling — Promist" },
      {
        name: "description",
        content:
          "Misting systems for residential patios, gardens, poolsides, and outdoor living spaces.",
      },
    ],
  }),
  component: ApplicationsResidentialOutdoorCooling,
});

function ApplicationsResidentialOutdoorCooling() {
  return (
    <SubPageLayout
      eyebrow="Applications"
      title="Residential Outdoor Cooling"
      lede="Transform your outdoor living spaces with our premium residential misting systems. Perfect for patios, gardens, pool areas, and terraces."
    >
      <Section>
        <div className="grid lg:grid-cols-2 gap-10 items-start">
          <div className="prose max-w-none space-y-4">
            <img
              src="/wp-uploads/2017/04/residential1.jpg"
              alt="Residential Outdoor Cooling"
              className="w-full h-auto rounded-lg"
            />
          </div>
          <div className="prose max-w-none text-muted-foreground space-y-4">
            <p style={{ color: "#003161" }}>
              Many people are unable to enjoy their patio or yard areas during the heat of
              the summer. Pets and plants suffer due to intense heat. Customers say their
              lifestyles have been changed completely by outdoor cooling (misting system).
              They are no longer "trapped" inside their homes. Pets and plants are healthier.
              Now you can enjoy the outdoors year round.
            </p>
            <p style={{ color: "#003161" }}>
              Our Misting Systems are a simple, inexpensive and appealing way to{" "}
              <strong>lower temperature by 10-12 °C</strong> outdoors and indoors without
              wetting.
            </p>
          </div>
        </div>
      </Section>
      <Section className="bg-muted/50">
        <div className="prose max-w-none space-y-4">
          <h4 style={{ color: "#de1f26", fontSize: "16px" }}>COOLING PRINCIPLE</h4>
          <p style={{ color: "#003161" }}>
            Evaporative cooling is responsible for the chill you feel when a breeze strikes
            your skin. The air evaporates the water on your skin, with your body heat
            providing the energy.
          </p>
          <p style={{ color: "#003161" }}>
            By forcing water, by means of a high pressure pump, through our specially
            designed misting nozzles, we create a fog made by ultra fine water droplets
            with an average size of less than 10 microns. These tiny water droplets quickly
            absorb the energy (heat) present in the environment and evaporate, becoming
            water vapor (gas). The energy (heat) used to change the water to gas is
            eliminated from the environment, hence the air is cooled.
          </p>
          <h4 style={{ color: "#de1f26", fontSize: "16px" }}>BENEFITS</h4>
          <ul style={{ color: "#003161" }}>
            <li>Lowers temperature</li>
            <li>Reduces flying insects</li>
            <li>Fully expandable</li>
            <li>Absorbs dust and pollen</li>
            <li>Special effects</li>
          </ul>
        </div>
      </Section>
    </SubPageLayout>
  );
}
