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

export const Route = createFileRoute("/misting-systems-design")({
  head: () => ({
    meta: [
      { title: "Misting Systems Design — Promist" },
      { name: "description", content: "Custom misting system design services for cooling, humidification, dust suppression and more." },
    ],
  }),
  component: SolutionsMistingSystemsDesign,
});

function SolutionsMistingSystemsDesign() {
  return (
    <SubPageLayout eyebrow="Solutions" title="Misting Systems Design" lede="Whether your space is large or small, we can design custom misting systems that maximize performance and minimize cost.">
      <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>Let us help you design the right misting system for your application — cooling, humidification, dust suppression, and many other uses.</p>
            <p>Send us a description, drawings, or pictures of the area to be cooled and we'll design a system that's right for you. Our team works with you to understand your specific requirements and creates a tailored solution that delivers optimal results.</p>
            <p>From small residential patios to large industrial facilities, we have the expertise to design and deliver the perfect misting solution.</p>
          </div>
          <img src="/wp-uploads/2017/04/layout1.jpg" alt="System Design Layout" className="w-full h-auto object-contain rounded-lg border" />
        </div>
      </Section>
      <Section className="bg-muted/50">
        <h2 className="font-display text-3xl font-black mb-6">Our Design Process</h2>
        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-white p-6 rounded-lg border text-center">
            <div className="w-12 h-12 bg-brand-red text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto">1</div>
            <h3 className="mt-4 font-bold text-lg">Consultation</h3>
            <p className="mt-2 text-muted-foreground">We discuss your needs, space, and requirements to understand the project scope.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border text-center">
            <div className="w-12 h-12 bg-brand-red text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto">2</div>
            <h3 className="mt-4 font-bold text-lg">Design</h3>
            <p className="mt-2 text-muted-foreground">Our engineers create a custom system layout maximizing performance and efficiency.</p>
          </div>
          <div className="bg-white p-6 rounded-lg border text-center">
            <div className="w-12 h-12 bg-brand-red text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto">3</div>
            <h3 className="mt-4 font-bold text-lg">Installation</h3>
            <p className="mt-2 text-muted-foreground">Professional installation by our experienced team ensures reliable, long-lasting operation.</p>
          </div>
        </div>
      </Section>
    </SubPageLayout>
  );
}
