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

export const Route = createFileRoute("/sanitization-booth")({
  head: () => ({
    meta: [
      { title: "Sanitization Booth — Promist" },
      { name: "description", content: "Automatic disinfection tunnel for human body using atomized sanitizer. Approved by Dubai Municipality." },
    ],
  }),
  component: ProductsSanitizationBooth,
});

function ProductsSanitizationBooth() {
  return (
    <SubPageLayout eyebrow="Products" title="Sanitization Booth" lede="Disinfection tunnel for human body — automatically atomizes approved disinfectant around the person as they walk through.">
      <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 automatic sanitization tunnel uses specially designed atomizers to cover the human body with a fine layer of approved disinfectant as the person walks through. This superficial layer will neutralize any SARS-CoV-2 virus stuck to the body.</p>
            <p>The system is designed to operate independently, controlled by an IP65 rated sensor. As the person walks through the tunnel, the atomizers activate to cover the body without wetting the person.</p>
            <p className="font-semibold text-brand-red">One of the very few systems approved by Dubai Municipality Health & Safety Division.</p>
          </div>
          <img src="/wp-uploads/2020/04/banner-sanitz.jpg" alt="Sanitization Booth" 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">Key Features</h2>
        <ul className="space-y-3 max-w-3xl">
          {[
            "Specially manufactured and approved disinfectant atomized around the human body",
            "Atomizers placed carefully to superficially cover the person with disinfectant",
            "Neutralizes SARS-CoV-2 virus stuck to the body",
            "Can be used as a preventive measure to eliminate contamination",
            "Operates independently, controlled by IP65 rated sensor",
            "Atomizers activate automatically as person walks through",
            "Fine layer of disinfectant without wetting the person",
            "Atomizers designed not to change chemical composition of disinfectant"
          ].map((item, i) => (
            <li key={i} className="flex items-start gap-3 bg-white p-4 rounded-lg border">
              <span className="text-brand-red font-bold mt-0.5">✓</span>
              <span className="text-muted-foreground">{item}</span>
            </li>
          ))}
        </ul>
      </Section>
      <Section>
        <h2 className="font-display text-3xl font-black mb-6">Specifications</h2>
        <div className="prose max-w-none text-muted-foreground">
          <table className="w-full border-collapse">
            <tbody>
              <tr className="border-b"><td className="py-2 font-semibold">Tunnel shape</td><td className="py-2">Rectangular</td></tr>
              <tr className="border-b"><td className="py-2 font-semibold">Enclosure</td><td className="py-2">Transparent plastic cover with aluminium structure</td></tr>
              <tr className="border-b"><td className="py-2 font-semibold">Control system</td><td className="py-2">IP65 Rated sensor, automatic operation</td></tr>
              <tr className="border-b"><td className="py-2 font-semibold">Approval</td><td className="py-2">Dubai Municipality Health & Safety Division</td></tr>
            </tbody>
          </table>
        </div>
      </Section>
    </SubPageLayout>
  );
}
