'use client';

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ContactSection from '@/components/ContactSection';
import BreadcrumbSection from '@/components/Breadcrumb';
import ProductsSection from '../components/ProductsSection'; 
import FaqSection from '@/components/FaqSection';

const C = {
  dark: "#12241A",
  green: "#347b36",
  lime: "#9dc92e",
};

export default function ProductPage({
  productName = "Water Treatment Plant",
  category = "Water Treatment Plant"
}) {
  return (
    <div className="min-h-screen flex flex-col bg-white font-sans text-slate-900">

      <BreadcrumbSection
        title={productName}
        category={category}
      />

      {/* ================= PRODUCT CONTENT SECTION ================= */}
      {/* ================= PRODUCT CONTENT SECTION ================= */}
      <section
        className="relative box-border w-full max-w-[100vw] overflow-x-clip py-16 lg:py-24"
        style={{
          backgroundColor: "#FCFCFC",
          backgroundImage: `/products/wtp/wtp-1.jpg`,
          backgroundSize: "16px 100%",
        }}
      >
        {/* Background Soft Atmospheric Glow */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] rounded-full blur-[140px] bg-[#479530]/15 pointer-events-none" />

        {/* Large Angular Shape */}
        <div
          className="absolute -right-24 -bottom-32 w-[520px] h-[520px] pointer-events-none z-0"
          style={{
            background: `linear-gradient(135deg, ${C.dark}09, transparent 65%)`,
            clipPath: "polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%)",
          }}
        />

        {/* Left Vertical Accent */}
        <div
          className="absolute top-0 left-0 w-1.5 h-full z-0"
          style={{
            background: `linear-gradient(180deg, ${C.green}, ${C.lime})`,
          }}
        />

        <div className="relative z-10 mx-auto box-border w-full max-w-[1400px] px-4 sm:px-6 md:px-10 lg:px-12">
          <div className="relative clearfix w-full">

            {/* ================= LEFT PRODUCT IMAGE ================= */}
            <div className="float-none lg:float-left w-full lg:w-[42%] mb-10 lg:mb-0 lg:mr-14 lg:pr-4 relative">

              <div className="relative w-full h-[420px] md:h-[560px]">

                {/* Main Image */}
                <div className="absolute inset-0 overflow-hidden shadow-[0_25px_60px_-15px_rgba(18,36,26,0.4)] border border-[#12241A]/10 bg-slate-100 z-10">

                  <img
                    src="/products/wtp/wtp-1.jpeg"
                    alt={productName}
                    className="w-full h-full object-cover"
                  />

                  {/* Top Left Corner Accent */}
                  <div
                    className="absolute top-0 left-0 w-10 h-10 z-20"
                    style={{
                      borderTop: `4px solid ${C.lime}`,
                      borderLeft: `4px solid ${C.lime}`,
                    }}
                  />

                  {/* Bottom Right Corner Accent */}
                  <div
                    className="absolute bottom-0 right-0 w-10 h-10 z-20"
                    style={{
                      borderBottom: `4px solid ${C.lime}`,
                      borderRight: `4px solid ${C.lime}`,
                    }}
                  />

                </div>

                {/* Geometric Background Accent */}
                <div
                  className="absolute -bottom-6 -left-6 w-full h-full -z-10 pointer-events-none"
                  style={{
                    background: `linear-gradient(135deg, ${C.dark}0D, transparent 70%)`,
                    clipPath:
                      "polygon(0 8%, 100% 0, 100% 92%, 0% 100%)",
                  }}
                />

              </div>
            </div>

            {/* ================= TEXT CONTENT ================= */}
            <div className="text-content-area font-sans min-w-0">

              {/* Home Label */}
              <div className="flex items-center gap-2 mb-5">

                <span
                  className="w-3 h-3 flex items-center justify-center"
                  style={{ backgroundColor: C.green }}
                >
                  <span className="w-1.5 h-1.5 bg-white" />
                </span>

                <span
                  className="text-[11px] font-bold uppercase tracking-[0.25em]"
                  style={{ color: C.green }}
                >
                  PRODUCT OVERVIEW
                </span>

              </div>

              {/* ================= SECTION 1 ================= */}
              <div className="mb-10">

                <div
                  className="font-extrabold tracking-tight mb-4 text-[26px] sm:text-[34px] leading-[1.15]"
                  style={{
                    color: C.dark,
                    letterSpacing: "-0.01em",
                  }}
                >
                  Water Treatment Plant in Ghaziabad
                </div>

                <p
                  className="text-[15.5px] sm:text-[17px] leading-[1.8] font-normal"
                  style={{ color: "#5B6B61" }}
                >
                  The{" "}
                  <strong className="font-semibold" style={{ color: C.dark }}>
                    Water Treatment Plant at Ghaziabad
                  </strong>{" "}
                  is the perfect answer to the needs of those companies
                  requiring pure water in their operations. The Water
                  Treatment Plant facilitates the removal of various
                  impurities, suspended solids, and other particles to purify
                  water. Our water treatment solutions are provided according
                  to the needs of various applications to help achieve better
                  water quality and enable smooth functioning of businesses at
                  Ghaziabad, Uttar Pradesh, and other locations in India.
                </p>

                <div
                  className="font-bold tracking-tight mt-8 mb-3 text-[20px] sm:text-[25px] leading-snug"
                  style={{ color: C.dark }}
                >
                  Water Treatment Plant Manufacturers in Ghaziabad
                </div>

                <p
                  className="text-[15.5px] sm:text-[17px] leading-[1.8]"
                  style={{ color: "#5B6B61" }}
                >
                  We are reliable{" "}
                  <strong className="font-semibold" style={{ color: C.dark }}>
                    Water Treatment Plant Manufacturers in Ghaziabad, Uttar
                    Pradesh,
                  </strong>{" "}
                  providing water treatment systems for various industrial and
                  commercial applications. Each application may require water
                  treatment based on different water qualities and thus the
                  plant must be chosen based on the particular requirement.
                  Our Water Treatment Plants have been designed to offer you
                  effective water treatment and reliable performance. We
                  provide water treatment plants that meet the requirements of
                  your business's daily water management needs.
                </p>

              </div>

              {/* ================= SECTION 2 ================= */}
              <div
                className="mb-10 pl-5 border-l-2"
                style={{ borderColor: C.lime }}
              >

                <div
                  className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug"
                  style={{ color: C.dark }}
                >
                  Water Treatment Plant Service Providers in India
                </div>

                <p
                  className="text-[15.5px] sm:text-[17px] leading-[1.8]"
                  style={{ color: "#5B6B61" }}
                >
                  We are the most reliable{" "}
                  <strong className="font-semibold" style={{ color: C.dark }}>
                    Water Treatment Plant Service Providers in India
                  </strong>{" "}
                  who assist organizations in improving the efficiency of
                  their water treatment plant systems. The process of
                  inspection, maintenance, and servicing is essential to
                  ensure that the plants function efficiently and achieve the
                  desired outcome of the process. Our services cater to our
                  customers by providing assistance in terms of practical
                  solutions for their water treatment needs.
                </p>

              </div>

              {/* ================= SECTION 3 ================= */}
              <div
                className="mb-10 pl-5 border-l-2"
                style={{ borderColor: C.lime }}
              >

                <div
                  className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug"
                  style={{ color: C.dark }}
                >
                  Water Treatment Plant Exporters in India
                </div>

                <p
                  className="text-[15.5px] sm:text-[17px] leading-[1.8]"
                  style={{ color: "#5B6B61" }}
                >
                  We are also dependable{" "}
                  <strong className="font-semibold" style={{ color: C.dark }}>
                    Water Treatment Plant Exporters in India,
                  </strong>{" "}
                  offering water treatment systems to our clients based in
                  various places. The plants have been manufactured keeping in
                  view all application-related aspects. We know that
                  different industrial sectors need different methods for
                  water treatment, therefore our plants are made keeping in
                  mind the specific application. Through our
                  quality-manufactured products and services, we strive to
                  offer reliable water treatment plants in India and abroad.
                </p>

              </div>

              {/* ================= ACTION BUTTON ================= */}
              <div
                className="clear-both pt-7 border-t flex items-center gap-4"
                style={{
                  borderColor: "#12241A1A",
                }}
              >

                <button
                  className="px-8 py-3.5 font-bold uppercase tracking-[0.15em] text-[12px] text-white shadow-md transition-all hover:opacity-90 flex items-center gap-2"
                  style={{
                    backgroundColor: C.green,
                  }}
                >
                  Enquire Now

                  <FontAwesomeIcon icon={faArrowRight} className="w-4 h-4" />

                </button>

              </div>

            </div>
          </div>
        </div>
      </section>

      <ProductsSection/>
      <FaqSection/>
      <ContactSection />
    </div>
  );
}