import React from 'react';

const PaymentSection: React.FC = () => {
  const paymentMethods = [
    { name: "JazzCash", image: "/jazzcashlogo 1.png" },
    { name: "EasyPaisa", image: "/easypaisa-pay-logo-png-11664945262opncoxsn7c 2.png" },
    { name: "PayPal", image: "https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" },
    { name: "VISA", image: "/image 124.png" },
    { name: "MasterCard", image: "https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" },
    { name: "Local Bank", icon: true }, // we'll use an inline SVG for Local Bank
  ];

  return (
    <section className="bg-[#F8F9FF] py-8 md:py-24 font-sans tracking-tight px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px] flex flex-col items-center text-center">

        <h2 className="section-heading mb-6 lg:mb-16">
          Accepted Payment Method's
        </h2>

        {/* Payment Methods Grid - One Row on Desktop */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:flex lg:flex-wrap xl:flex-nowrap justify-center gap-3 md:gap-6 lg:gap-8 mb-10 md:mb-20 w-full max-w-6xl">
          {paymentMethods.map((method, idx) => (
            <div
              key={idx}
              className="bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-50 flex items-center justify-center p-3 lg:p-6 w-full lg:w-[200px] h-[60px] md:h-[100px] hover:shadow-md transition-shadow"
            >
              {method.image ? (
                <img src={method.image} alt={method.name} className="h-5 md:h-8 lg:h-10 w-auto object-contain" />
              ) : (
                <div className="flex flex-col items-center gap-1">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 21H21M4 10H20M5 10V18M9 10V18M15 10V18M19 10V18M12 3L22 8H2L12 3Z" stroke="var(--brand-dark)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span className="font-black text-sm text-brand-dark">{method.name}</span>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Locations */}
        <h3 className="text-2xl md:text-3xl font-bold text-brand-dark mb-4 tracking-tight">
          Rawalpindi, Islamabad, Karachi, Lahore, Gujranwala
        </h3>
        <p className="text-sm md:text-base text-brand-dark/70 font-medium">
          We are working in Multiple locations in Pakistan, Like Rawalpindi, Islamabad, Karachi, Lahore, Gujranwala,
        </p>

      </div>
    </section>
  );
};

export default PaymentSection;