import ImageWithFallback from "@/shared/ImageWithFallback";
import { Banner3SectionProps } from "./types";

function titleLines(title: string) {
  return title
    .replace(/<br\s*\/?>/gi, "\n")
    .split(/\n|\\n/)
    .map((line) => line.replace(/<[^>]+>/g, "").trim())
    .filter(Boolean);
}

export default function Banner3Section({ data }: Banner3SectionProps) {
  const lines = data.title ? titleLines(data.title) : [];

  return (
    <section className="relative h-64 sm:h-80 lg:h-[480px] overflow-hidden">
      <ImageWithFallback
        src={data?.backgroundImage ?? ""}
        alt=""
        fill
        className="object-cover object-left"
        sizes="100vw"
      />

      <div
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(to right, transparent 0%, transparent 18%, rgba(28,45,55,0.55) 42%, #1C2D37 62%, #1C2D37 100%)",
        }}
      />

      <div className="absolute inset-0 flex items-start justify-start pt-8 sm:pt-10 lg:pt-14 ps-6 sm:ps-10 lg:ps-16 pe-4">
        <div
          data-aos="fade-left"
          className="text-start max-w-[260px]"
        >
          {lines.length > 0 && (
            <div className="space-y-0.5">
              {lines.map((line, i) => (
                <p
                  key={i}
                  className={`text-white font-bold leading-snug ${
                    i === 0
                      ? "text-2xl sm:text-3xl lg:text-4xl"
                      : "text-xl sm:text-2xl lg:text-3xl"
                  }`}
                >
                  {line}
                </p>
              ))}
            </div>
          )}

          {data.description && (
            <div
              className="
                text-white/80 text-sm sm:text-base lg:text-lg mt-4 lg:mt-5 leading-relaxed
                [&_p]:mb-2
                [&_ul]:mt-3 [&_ul]:space-y-2.5 [&_ul]:list-none
                [&_li]:flex [&_li]:items-center [&_li]:gap-2.5 [&_li]:before:content-['✦'] [&_li]:before:text-[#C41E3A] [&_li]:before:text-sm [&_li]:before:shrink-0
              "
              dangerouslySetInnerHTML={{ __html: data.description }}
            />
          )}
        </div>
      </div>
    </section>
  );
}