"use client";

import { FiPhoneCall } from "react-icons/fi";
import { getSiteInfo } from "@/app/lib/api";
import Link from "next/link";

const data = await getSiteInfo();

export default function FeaturesSect() {
  return (
    <section className="bg-[#f4f6f9] py-20">
      <div className="container grid lg:grid-cols-2 gap-12 items-center">

        {/* LEFT CONTENT */}
        <div>

          {/* small heading */}
          <div className="flex items-center gap-3 mb-4">
            <span className="text-blue-400 text-sm font-medium">
              Our Company
            </span>
            <span className="w-10 h-[2px] bg-blue-400"></span>
          </div>

          {/* main heading */}
          <p className="text-2xl md:text-4xl font-semibold text-[#0b1b3f] leading-tight">
            Advanced Water Treatment <br /> Solutions For Modern Industries
          </p>

          {/* description */}
          <p className="mt-5 text-gray-600 leading-relaxed text-sm max-w-xl">
            We deliver reliable and efficient water treatment systems designed to meet
            industrial, commercial, and municipal needs. With a focus on sustainability
            and performance, our solutions ensure safe water, reduced waste, and
            optimized operational efficiency.
          </p>

          {/* FEATURES */}
          <div className="grid grid-cols-2 gap-y-3 mt-6 text-sm text-gray-700">

            {[
              "Certified Water Treatment Experts",
              "End-to-End Plant Solutions",
              "Advanced Filtration Technologies",
              "Cost-Effective & Scalable Systems",
              "Custom Plant Design & Installation",
              "Low Maintenance & High Efficiency",
              "Compliance with Industry Standards",
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-2">
                <span className="w-2 h-2 mt-2 rounded-full bg-blue-400"></span>
                <span>{item}</span>
              </div>
            ))}
          </div>

          {/* divider */}
          <div className="border-t mt-8 pt-6 flex flex-col md:flex-row items-center gap-6">

            {/* button */}
            <button className="bg-blue-400 text-white px-6 py-3 rounded-full text-sm font-medium hover:bg-blue-500 transition">
              MORE ABOUT US
            </button>

            {/* phone */}
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 flex items-center justify-center rounded-full bg-blue-100 text-blue-500">
                <FiPhoneCall />
              </div>

              <div>
                <p className="text-xs text-gray-500">
                  Call Any Time
                </p>
                <Link href={`tel:${data?.primaryPhone}`} className="text-[#0b1b3f] font-semibold">
                  {data?.primaryPhone}
                </Link>
              </div>
            </div>

          </div>

        </div>

        {/* RIGHT IMAGES */}
        <div className="relative flex justify-center lg:justify-start md:pb-0 pb-10">

          {/* MAIN IMAGE */}
          <img
            src="/img/why-bg.jpg"
            className="w-[500px] max-w-full rounded-2xl"
          />

          {/* TOP RIGHT IMAGE */}
          <img
            src="/img/feat-1.webp"
            className="absolute jump right-0 top-20 w-[180px] h-[140px] object-cover rounded-xl border-4 border-white shadow-lg"
          />

          {/* BOTTOM IMAGE */}
          <img
            src="/img/water-plant.jpg"
            className="jump-reverse absolute left-20 md:bottom-[-80px] bottom-[-50px] md:h-[180px] h-[100px] max-w-full  rounded-xl border-4 border-white shadow-lg"
          />

        </div>

      </div>
    </section>
  );
}