import React from "react";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { supportBannerData } from "@/data/siteData";

export const SupportBanner: React.FC = () => {
  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10">
      {/* Same max-w-[1800px] and px-6 sm:px-10 lg:px-12 */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        <div className="relative overflow-hidden rounded-2xl bg-[#EDF6FD] border border-sky-100 shadow-xs min-h-[320px] sm:min-h-[340px] lg:min-h-[380px] flex items-center">
          {/* Panoramic Background Image filling the entire card */}
          <div className="absolute inset-0 z-0">
            <Image
              src={supportBannerData.image}
              alt={supportBannerData.altText}
              fill
              priority
              sizes="100vw"
              className="object-cover object-[78%_center] sm:object-[75%_center] lg:object-right opacity-40 sm:opacity-75 lg:opacity-100"
            />
            {/* Subtle soft gradient overlay from left so text stays crisp and readable on mobile/tablet */}
            <div className="absolute inset-y-0 left-0 w-full sm:w-[70%] lg:w-[55%] bg-gradient-to-r from-[#EDF6FD] via-[#EDF6FD]/95 sm:via-[#EDF6FD]/90 to-transparent pointer-events-none" />
          </div>

          {/* Foreground Content */}
          <div className="relative z-10 w-full max-w-4xl p-5 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center">
            <h2 
              style={{ fontFamily: 'var(--font-roboto), "Roboto", sans-serif' }}
              className="text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[48px] font-medium tracking-tight text-slate-900 leading-tight md:whitespace-nowrap"
            >
              <span className="text-[#0077b6]">{supportBannerData.badge}</span>{" "}
              {supportBannerData.titleSuffix}
            </h2>

            <p 
              style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
              className="mt-2 text-xs sm:text-[15px] md:text-[16px] text-slate-600 leading-relaxed max-w-xl para-colour"
            >
              {supportBannerData.description}
            </p>

            {/* 3 Bullet Points */}
            <div className="mt-4 flex flex-wrap items-center gap-x-4 sm:gap-x-5 gap-y-2">
              {supportBannerData.bulletPoints.map((bullet, idx) => (
                <div key={idx} className="flex items-center gap-2 text-xs sm:text-[15px] md:text-[16px] font-semibold text-[#0077b6]">
                  <span className="w-2 h-2 rounded-full bg-[#0077b6] shrink-0" />
                  <span>{bullet}</span>
                </div>
              ))}
            </div>

            {/* Action Button */}
            <div className="mt-5 sm:mt-6 md:mt-7">
              <button
                type="button"
                style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
                className="inline-flex items-center justify-center gap-3 px-6 py-3.5 sm:px-8 sm:py-4 md:px-10 md:py-4.5 rounded-xl border-2 border-[#0077b6] text-[#0077b6] bg-transparent hover:bg-white/40 font-semibold text-[15px] sm:text-[17px] md:text-[18px] transition-colors leading-none cursor-pointer"
              >
                <span>{supportBannerData.ctaText}</span>
                <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 text-[#0077b6] stroke-[2.4]" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};