"use client"
import { Globe, TrendingUp, Truck, Users } from "lucide-react"
import Image from "next/image"
import { useState } from "react";
import ContactModal from "src/components/ContactUs"

export default function AboutUs() {
    const [open, setOpen] = useState(false);
    const openModal = () => {
      setOpen(true);
    };
    const closeModal = () => {
      setOpen(false);
    }
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-primary-100 to-white py-20 flex flex-col text-base">
      {/* Background Elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10 pointer-events-none">
        <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-blue-400 blur-3xl"></div>
        <div className="absolute top-1/2 -right-24 w-80 h-80 rounded-full bg-indigo-500 blur-3xl"></div>
        <div className="absolute -bottom-24 left-1/3 w-72 h-72 rounded-full bg-purple-400 blur-3xl"></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Header */}
        <div className="flex flex-col items-center text-center mb-16">
          <div className="inline-block p-3 bg-white bg-opacity-80 rounded-xl shadow-lg mb-6">
            <Image
              src="/images/1.png"
              alt="AHS Logo"
              width={100}
              height={80}
              className="rounded"
            />
          </div>
          <h2 className="text-3xl md:text-5xl font-bold text-gray-800 mb-4 tracking-tight">
            Advanced Horizon Services
          </h2>
          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full mb-6"></div>
          <p className="text-lg text-gray-600 max-w-xl">
            Revolutionizing wholesale supply chain solutions with excellence and reliability
          </p>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left Side - Description */}
          <div className="bg-white bg-opacity-90 rounded-2xl p-8 md:p-10 shadow-xl transform transition-all duration-500 hover:shadow-2xl">
            <h3 className="text-2xl font-bold text-gray-800 mb-6 border-l-4 border-blue-500 pl-4">Who We Are</h3>
            <p className="text-gray-700 leading-relaxed mb-8 text-justify">
              Advanced Horizon Services is a leading trade company specializing in wholesale supply chain solutions for
              a diverse range of products, including high-quality detergents and food items. With years of experience
              and extensive relations in the industry, we pride ourselves on our commitment to excellence, reliability,
              and customer satisfaction.
            </p>
            <h3 className="text-2xl font-bold text-gray-800 mb-6 border-l-4 border-indigo-500 pl-4">Our Approach</h3>
            <p className="text-gray-700 leading-relaxed text-justify">
              At AHS, we understand the complexities of the supply chain and strive to simplify the process for our
              partners. Our extensive network of suppliers and manufacturers allows us to source top-notch products at
              competitive prices, ensuring that you receive the best value for your investment.
            </p>
          </div>

          {/* Right Side - Features */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Feature 1 */}
            <div className="bg-white bg-opacity-80 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                <Globe className="w-6 h-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold text-gray-800 mb-2">Global Network</h4>
              <p className="text-gray-600">Extensive connections with suppliers and manufacturers worldwide.</p>
            </div>

            {/* Feature 2 */}
            <div className="bg-white bg-opacity-80 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                <TrendingUp className="w-6 h-6 text-indigo-600" />
              </div>
              <h4 className="text-xl font-semibold text-gray-800 mb-2">Competitive Pricing</h4>
              <p className="text-gray-600">Best value products sourced at optimal market rates.</p>
            </div>

            {/* Feature 3 */}
            <div className="bg-white bg-opacity-80 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <Truck className="w-6 h-6 text-purple-600" />
              </div>
              <h4 className="text-xl font-semibold text-gray-800 mb-2">Supply Chain Experts</h4>
              <p className="text-gray-600">Simplifying complex logistics for seamless operations.</p>
            </div>

            {/* Feature 4 */}
            <div className="bg-white bg-opacity-80 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
              <div className="w-12 h-12 bg-rose-100 rounded-lg flex items-center justify-center mb-4">
                <Users className="w-6 h-6 text-rose-600" />
              </div>
              <h4 className="text-xl font-semibold text-gray-800 mb-2">Customer Focused</h4>
              <p className="text-gray-600">Dedicated to excellence and partner satisfaction.</p>
            </div>
          </div>
        </div>

        {/* Call to Action */}
        <div className="mt-20 text-center">
          <button onClick={()=>setOpen(true)} className="px-8 py-4  bg-gradient-to-r from-primary-600 to-primary-300 text-white font-medium rounded-lg shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
            Partner With Us
          </button>
        </div>
      </div>
      <ContactModal close={closeModal} open={open} />
    </section>
  )
}

