import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowUpRight } from "lucide-react";
import { SubPageLayout } from "@/components/sub-page-layout";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Promist — Misting Systems Since 1979" },
      { name: "description", content: "Promist manufactures and sells high-quality misting systems and misting fans at factory-direct prices since 1979." },
      { property: "og:title", content: "About Promist" },
      { property: "og:description", content: "Misting systems and misting fans manufactured since 1979." },
    ],
  }),
  component: About,
});

const HERO_IMG = "/wp-uploads/2017/04/about-banner1.jpg";

function About() {
  return (
    <SubPageLayout
      eyebrow="About us"
      title="Manufacturers of high-pressure misting since 1979."
      lede="We design, build and install misting systems for cooling, humidification, dust suppression and sanitization — from residential patios to industrial factories."
    >
      <div className="grid lg:grid-cols-2 gap-14 items-start">
        <div>
          <img src={HERO_IMG} alt="About Promist" className="w-full h-auto" />
        </div>
        <div className="space-y-5 text-muted-foreground" style={{ textAlign: "justify" }}>
          <p>
            <strong>Promist Cool</strong> specialty lies in misting, fog and humidification systems that provide you
            with a technology that helps control or enhance environments. But telling the difference between our
            product and every other fog and misting system on the market is difficult if you aren't familiar
            with the possibilities. <strong>Promist Cool</strong> breaks down the intricacies of fog and misting
            systems, with an emphasis on the high-pressure pump. But how valuable is "quality" and the
            "absolutely critical features" found in a pump?
          </p>
          <p>
            Quality does not have a specific number. It's not a qualitative measurement. It's more of a
            general sense of something that's better.
          </p>
          <p>
            Do you need to attract people to your resort, restaurant or spa during the hottest time of the year? Do
            you need to create a safer industrial environment for your employees? Perhaps you need to regulate the
            temperatures to prevent heat stress in your cattle, your horses, our children or our rescue operatives?
            It is precisely because of the necessary results of outdoor cooling, humidification and fog effects that
            concepts such as "quality" and "absolutely critical features" matter. Quality
            protects your investment and ensures that you have a system that performs for years and years to come.
          </p>
          <p>
            <strong>Promist Cool</strong> brand of fog and misting systems not only adds a category to the general
            landscape of upgrades, but we also commit ourselves in engineering and designing the best systems
            you'll ever experience. And who knows what this could turn into.
          </p>
        </div>
      </div>

      <section className="bg-foreground text-background mt-20">
        <div className="py-16 grid md:grid-cols-2 gap-6 items-center">
          <div>
            <h3 className="font-display text-3xl md:text-4xl font-black">
              <span className="text-brand-blue">Questions?</span>{" "}
              <span>Call Now: +971 4 320 3552</span>
            </h3>
          </div>
          <div className="flex md:justify-end">
            <Link to="/enquiry" className="inline-flex items-center gap-2 bg-white text-foreground font-bold px-8 py-4 rounded-md text-sm uppercase tracking-wider hover:opacity-90">
              Book now <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>
    </SubPageLayout>
  );
}
