import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { PRODUCTS } from "@/constants/data";
import { Helmet } from "react-helmet-async";

const SteamBoilers = () => {
  const steamProducts = PRODUCTS.filter(
    (product) => product.category === "Steam Boilers"
  );

  return (
    <div className="min-h-screen bg-white">
      <Helmet>
        <html lang="az" />

        <title>THERMOD | Sənaye Buxar Qazanları</title>

        <meta
          name="description"
          content="THERMOD sənaye müəssisələri üçün yüksək səmərəlilik və etibarlılıq təmin edən sənaye buxar qazanları istehsal edir. Wet Back və Fire Tube buxar qazanları."
        />

        <meta
          name="keywords"
          content="sənaye buxar qazanları, buxar qazanı, buxar qazanları, sənaye buxar qazanı, steam boiler, industrial steam boiler, Wet Back boiler, Fire Tube boiler, THERMOD"
        />

        <link
          rel="canonical"
          href="https://www.thermod.az/steam-boilers"
        />

        <meta property="og:type" content="website" />

        <meta
          property="og:title"
          content="THERMOD | Sənaye Buxar Qazanları"
        />

        <meta
          property="og:description"
          content="THERMOD sənaye üçün yüksək səmərəli və etibarlı buxar qazanları istehsal edir."
        />

        <meta
          property="og:url"
          content="https://www.thermod.az/steam-boilers"
        />

        <meta property="og:site_name" content="THERMOD" />

        <meta property="og:locale" content="az_AZ" />

        <meta
          name="twitter:card"
          content="summary_large_image"
        />

        <meta
          name="twitter:title"
          content="THERMOD | Sənaye Buxar Qazanları"
        />

        <meta
          name="twitter:description"
          content="THERMOD sənaye müəssisələri üçün sənaye buxar qazanları və istilik həlləri təqdim edir."
        />
      </Helmet>

      <Header />

      <main>
        {/* SEO Hero */}
        <section className="pt-32 pb-20 px-6">
          <div className="max-w-[1200px] mx-auto">
            <p className="text-[hsl(var(--orange))] font-bold tracking-widest text-sm mb-4">
              THERMOD · INDUSTRIAL STEAM BOILERS
            </p>

            <h1
              className="text-5xl md:text-7xl font-black uppercase leading-none tracking-tight mb-6"
              style={{ fontFamily: "'Barlow Condensed', sans-serif" }}
            >
              Sənaye Buxar Qazanları
            </h1>

            <p className="max-w-3xl text-gray-600 text-lg leading-relaxed">
              THERMOD sənaye müəssisələri üçün yüksək səmərəlilik,
              etibarlılıq və uzunmüddətli istismar üçün hazırlanmış
              sənaye buxar qazanları istehsal edir.
            </p>
          </div>
        </section>

        {/* Products */}
        <section className="px-6 pb-24">
          <div className="max-w-[1200px] mx-auto grid md:grid-cols-2 gap-10">
            {steamProducts.map((product) => (
              <article key={product.id} className="border border-gray-100">
                <div className="aspect-[4/3] bg-white overflow-hidden">
                  <img
                    src={product.image}
                    alt={`${product.name} - THERMOD sənaye buxar qazanı`}
                    className="w-full h-full object-contain"
                  />
                </div>

                <div className="p-8">
                  <p className="text-[hsl(var(--orange))] text-sm font-bold tracking-wider mb-3">
                    {product.category}
                  </p>

                  <h2
                    className="text-3xl font-black uppercase mb-4"
                    style={{ fontFamily: "'Barlow Condensed', sans-serif" }}
                  >
                    {product.name}
                  </h2>

                  <p className="text-gray-600 leading-relaxed mb-6">
                    {product.description}
                  </p>

                  <div className="grid grid-cols-2 gap-x-6 gap-y-4">
                    {product.specs.map((spec) => (
                      <div
                        key={spec.label}
                        className="border-b border-gray-100 pb-2"
                      >
                        <p className="text-xs text-gray-400 uppercase">
                          {spec.label}
                        </p>

                        <p className="font-semibold text-sm mt-1">
                          {spec.value}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </section>

        {/* Applications */}
        <section className="bg-gray-50 py-20 px-6">
          <div className="max-w-[1200px] mx-auto">
            <h2
              className="text-4xl md:text-5xl font-black uppercase mb-6"
              style={{ fontFamily: "'Barlow Condensed', sans-serif" }}
            >
              Sənaye Tətbiqləri
            </h2>

            <p className="max-w-3xl text-gray-600 leading-relaxed">
              THERMOD buxar qazanları qida və içki, tekstil, kimya,
              əczaçılıq, süd məhsulları, kağız və qablaşdırma və digər
              sənaye proseslərində istifadə oluna bilər.
            </p>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 px-6">
          <div className="max-w-[1200px] mx-auto">
            <h2
              className="text-4xl md:text-5xl font-black uppercase mb-6"
              style={{ fontFamily: "'Barlow Condensed', sans-serif" }}
            >
              Buxar Qazanı üçün Sorğu Göndərin
            </h2>

            <a
              href="/#contact"
              className="inline-flex bg-[hsl(var(--orange))] text-white font-bold px-7 py-4 uppercase tracking-wider text-sm"
            >
              Əlaqə saxlayın
            </a>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
};

export default SteamBoilers;
