import Image from "next/image"
import LocalizedClientLink from "@modules/common/components/localized-client-link"

type HeroPhoto = {
  id: string
  image_url: string
  label: string
  rotate: string
  sort_order: number
}

type CategoryCard = {
  id: string
  label: string
  sub: string
  image_url: string
  handle: string
  badge: string
  bg_color: string
  sort_order: number
}

export type HeroProps = {
  headline: string
  subtitle: string
  badge_1_text: string
  badge_2_text: string
  cta_1_label: string
  cta_1_link: string
  cta_2_label: string
  cta_2_link: string
  rent_banner_title: string
  rent_banner_text: string
  rent_banner_cta: string
  hero_photos: HeroPhoto[]
  category_cards: CategoryCard[]
}

const Hero = ({
  headline,
  subtitle,
  badge_1_text,
  badge_2_text,
  cta_1_label,
  cta_1_link,
  cta_2_label,
  cta_2_link,
  rent_banner_title,
  rent_banner_text,
  rent_banner_cta,
  hero_photos,
  category_cards,
}: HeroProps) => {
  const headlineLines = headline.split("\n")

  return (
    <div>
      {/* ── HERO ── */}
      <div className="bg-yellow-400 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 pt-8 pb-0 md:py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 items-center">

            {/* Left: text content */}
            <div className="flex flex-col gap-4 md:gap-6">
              <div className="flex flex-wrap gap-2">
                <span className="bg-black text-yellow-400 text-xs font-black uppercase tracking-widest px-3 py-1.5 rounded-full">
                  {badge_1_text}
                </span>
                <span className="bg-white/40 text-black text-xs font-bold px-3 py-1.5 rounded-full">
                  {badge_2_text}
                </span>
              </div>

              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-black leading-[1.05] tracking-tight">
                {headlineLines.map((line, i) => (
                  <span key={i}>
                    {i === headlineLines.length - 1 ? (
                      <span className="text-white drop-shadow-[0_2px_0px_rgba(0,0,0,0.3)]">{line}</span>
                    ) : (
                      <>{line}<br /></>
                    )}
                  </span>
                ))}
              </h1>

              {/* Hide description on mobile to stay compact */}
              <p className="hidden sm:block text-black/70 text-base md:text-lg font-semibold max-w-sm">
                {subtitle}
              </p>

              <div className="flex flex-wrap gap-3">
                <LocalizedClientLink
                  href={cta_1_link}
                  className="bg-black text-yellow-400 font-black text-sm px-6 py-3 md:py-3.5 rounded-full hover:bg-gray-900 transition-colors shadow-[4px_4px_0px_rgba(0,0,0,0.3)]"
                >
                  {cta_1_label} →
                </LocalizedClientLink>
                <LocalizedClientLink
                  href={cta_2_link}
                  className="bg-white text-black font-bold text-sm px-6 py-3 md:py-3.5 rounded-full hover:bg-gray-50 transition-colors shadow-[4px_4px_0px_rgba(0,0,0,0.15)]"
                >
                  {cta_2_label}
                </LocalizedClientLink>
              </div>
            </div>

            {/* Right: Tilted photo grid — desktop only */}
            <div className="hidden md:grid grid-cols-2 gap-3">
              {hero_photos.map((p, i) => (
                <div
                  key={p.id}
                  className={`relative aspect-square rounded-2xl overflow-hidden bg-white shadow-[6px_6px_0px_rgba(0,0,0,0.2)] ${p.rotate} hover:rotate-0 transition-transform duration-300`}
                >
                  <Image
                    src={p.image_url}
                    alt={p.label}
                    fill
                    className="object-cover"
                    sizes="20vw"
                    priority={i < 2}
                  />
                  <div className="absolute top-2 left-2 bg-black/60 backdrop-blur-sm text-white text-[10px] font-bold px-2 py-0.5 rounded-full">
                    {p.label}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Mobile: horizontal scrollable photo strip */}
          <div className="md:hidden mt-5 -mx-4 overflow-x-auto no-scrollbar pb-4">
            <div className="flex gap-3 px-4">
              {hero_photos.map((p, i) => (
                <div
                  key={p.id}
                  className="relative flex-shrink-0 w-[42vw] aspect-square rounded-2xl overflow-hidden shadow-[4px_4px_0px_rgba(0,0,0,0.2)]"
                >
                  <Image
                    src={p.image_url}
                    alt={p.label}
                    fill
                    className="object-cover"
                    sizes="42vw"
                    priority={i < 2}
                  />
                  <div className="absolute top-2 left-2 bg-black/60 backdrop-blur-sm text-white text-[10px] font-bold px-2 py-0.5 rounded-full">
                    {p.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* ── CATEGORY CARDS — desktop only ── */}
      <div className="hidden md:block bg-[#111] py-4 md:py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3">
            {category_cards.map((cat) => (
              <LocalizedClientLink
                key={cat.id}
                href={cat.handle}
                className={`group relative overflow-hidden rounded-xl md:rounded-2xl aspect-square md:aspect-[4/5] ${cat.bg_color} hover:scale-[1.02] transition-transform duration-200 shadow-[3px_3px_0px_rgba(0,0,0,0.4)] md:shadow-[4px_4px_0px_rgba(0,0,0,0.4)]`}
              >
                <Image
                  src={cat.image_url}
                  alt={cat.label}
                  fill
                  className="object-cover opacity-85 group-hover:opacity-90 transition-opacity duration-200"
                  sizes="(max-width: 640px) 50vw, 25vw"
                />
                <div className="absolute inset-0 flex flex-col justify-end p-2.5 md:p-4">
                  <span className="text-lg md:text-2xl mb-0.5 md:mb-1">{cat.badge}</span>
                  <p className="text-white font-black text-xs md:text-sm leading-tight drop-shadow-md">{cat.label}</p>
                  <p className="text-white/80 text-[10px] md:text-xs font-semibold mt-0.5">{cat.sub} →</p>
                </div>
              </LocalizedClientLink>
            ))}
          </div>

          {/* Rent banner */}
          <div className="mt-2 md:mt-3 rounded-xl md:rounded-2xl bg-violet-500 px-4 md:px-6 py-3 md:py-4 flex items-center justify-between shadow-[3px_3px_0px_rgba(0,0,0,0.4)]">
            <div>
              <p className="text-white font-black text-sm md:text-base">{rent_banner_title}</p>
              <p className="text-white/80 text-xs md:text-sm font-semibold mt-0.5 hidden sm:block">{rent_banner_text}</p>
            </div>
            <LocalizedClientLink
              href={cta_2_link}
              className="shrink-0 bg-white text-violet-700 font-black text-xs md:text-sm px-4 md:px-5 py-2 md:py-2.5 rounded-full hover:bg-yellow-400 hover:text-black transition-colors"
            >
              {rent_banner_cta}
            </LocalizedClientLink>
          </div>
        </div>
      </div>

    </div>
  )
}

export default Hero