'use client';

import React, { useState } from 'react';
import Image from 'next/image';

const Footer: React.FC = () => {
  const [openSection, setOpenSection] = useState<number | null>(null);

  const commonLinks = [
    "Web Hosting",
    "Business Web Hosting",
    "WordPress Hosting",
    "Reseller Hosting",
    "VPS Hosting",
    "Dedicated Server",
    "Business E-mail Hosting",
    "Domain Registration",
    "Promo Packages"
  ];

  const supportLinks = [
    "Client Area",
    "Submit A Ticket",
    "Contact Us",
    "About",
    "Acceptable Use Policy",
    "Privacy Policy",
    "Terms & Conditions"
  ];

  const footerSections = [
    { title: "Hosting", links: commonLinks },
    { title: "Domain", links: commonLinks },
    { title: "Tools", links: commonLinks },
    { title: "Information", links: commonLinks },
    { title: "Company", links: commonLinks },
    { title: "Support", links: supportLinks }
  ];

  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 },
  ];

  return (
    <footer className="relative bg-[#7F00FF] pt-10 md:pt-14 pb-8 font-sans overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      
      {/* Background Image */}
      <div className="absolute inset-0 w-full h-full pointer-events-none">
        <Image 
          src="/Footer bg image.png" 
          alt="Footer Background" 
          fill 
          className="object-cover object-center"
          priority
        />
      </div>

      <div className="container mx-auto max-w-[1440px] relative z-10">
        
        {/* Main Links Grid */}
        <div className="flex flex-col lg:grid lg:grid-cols-6 gap-0 lg:gap-6 mb-8 md:mb-12">
          {footerSections.map((section, idx) => (
            <div key={idx} className="flex flex-col border-b border-white/10 lg:border-0">
              {/* Mobile: clickable accordion header / Desktop: static heading */}
              <button
                onClick={() => setOpenSection(openSection === idx ? null : idx)}
                className="flex items-center justify-between py-2.5 lg:py-0 lg:mb-4 lg:pointer-events-none"
              >
                <h4 className="text-white font-bold text-base lg:text-xl tracking-tight">{section.title}</h4>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className={`text-white/60 lg:hidden transition-transform duration-300 ${openSection === idx ? 'rotate-180' : ''}`}
                >
                  <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>

              {/* Mobile: collapsible / Desktop: always visible */}
              <div className={`overflow-hidden transition-all duration-300 lg:!max-h-none lg:!opacity-100 ${openSection === idx ? 'max-h-[500px] opacity-100 pb-3' : 'max-h-0 opacity-0'}`}>
                <ul className="flex flex-col gap-1.5 lg:gap-2">
                  {section.links.map((link, linkIdx) => (
                    <li key={linkIdx}>
                      <a href="#" className="text-white/80 hover:text-white transition-colors text-sm lg:text-[15px] font-medium">
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Divider */}
        <div className="w-full h-px bg-white/20 mb-8" />

        {/* Bottom Bar */}
        <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
          
          {/* Payment Methods */}
          <div className="flex flex-nowrap gap-1.5 md:gap-3 overflow-x-auto scrollbar-hide">
            {paymentMethods.map((method, idx) => (
              <div 
                key={idx} 
                className="bg-white rounded-lg px-2 py-1.5 md:px-3 md:py-2 flex items-center justify-center w-[50px] h-[30px] md:w-[80px] md:h-[45px] flex-shrink-0"
              >
                {method.image ? (
                  <img src={method.image} alt={method.name} className="max-h-full max-w-full object-contain" />
                ) : (
                  <div className="flex flex-col items-center">
                    <svg width="16" height="16" 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="#475569" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span className="font-black text-[8px] md:text-[10px] text-[#475569] leading-none uppercase mt-0.5 whitespace-nowrap">{method.name}</span>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Policy Links */}
          <div className="flex flex-wrap justify-center gap-4 md:gap-6 text-white text-xs md:text-sm font-bold">
            <a href="#" className="hover:text-white/80 transition-colors">Request Policy</a>
            <a href="#" className="hover:text-white/80 transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-white/80 transition-colors">Refund Policy</a>
            <a href="#" className="hover:text-white/80 transition-colors">Terms of Service</a>
          </div>

          {/* Social Icons */}
          <div className="flex items-center gap-4 text-white">
            <a href="#" className="hover:text-white/80 transition-colors">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07z"/></svg>
            </a>
            <a href="#" className="hover:text-white/80 transition-colors">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85s.01-3.58.07-4.85C2.38 3.86 3.9 2.31 7.15 2.16c1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 2.7 .27.27 2.7.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.35 2.63 6.78 6.98 6.98 1.28.06 1.69.07 4.95.07s3.67-.01 4.95-.07c4.35-.2 6.78-2.63 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.63-6.78-6.98-6.98C15.67.01 15.26 0 12 0zM12 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-11.23a1.44 1.44 0 1 0-2.88 0 1.44 1.44 0 0 0 2.88 0z"/></svg>
            </a>
            <a href="#" className="hover:text-white/80 transition-colors">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.56c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.13 1.44-2.13 2.93v5.66H9.36V9H12.8v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43c-1.15 0-2.07-.92-2.07-2.07 0-1.15.92-2.07 2.07-2.07 1.15 0 2.07.92 2.07 2.07 0 1.15-.92 2.07-2.07 2.07zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
            </a>
            <a href="#" className="hover:text-white/80 transition-colors">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 4.56c-.88.39-1.83.65-2.83.77a4.93 4.93 0 0 0 2.16-2.72c-.95.56-2 .97-3.12 1.19a4.92 4.92 0 0 0-8.38 4.48A13.94 13.94 0 0 1 1.67 3.15a4.92 4.92 0 0 0 1.52 6.57 4.9 4.9 0 0 1-2.23-.62v.06a4.93 4.93 0 0 0 3.95 4.83 4.92 4.92 0 0 1-2.22.08 4.93 4.93 0 0 0 4.6 3.42A9.87 9.87 0 0 1 0 19.54a13.9 13.9 0 0 0 7.55 2.21c9.06 0 14.01-7.51 14.01-14.01 0-.21 0-.42-.01-.63A10.02 10.02 0 0 0 24 4.56z"/></svg>
            </a>
          </div>

        </div>

      </div>
    </footer>
  );
};

export default Footer;