"use client"

import { ShoppingCart, Heart, Droplet, Clock } from "lucide-react"

export function GetBabyBanner() {
  return (
    <section className="py-12 px-4">
      <div className="container mx-auto max-w-5xl">
        <div
          className="relative rounded-2xl overflow-hidden shadow-xl"
          style={{
            backgroundImage: "url(/fertility-wellness-capsules-herbal-course-discreet.jpg)",
            backgroundSize: "cover",
            backgroundPosition: "center right",
            minHeight: "320px",
          }}
        >
          {/* Dark overlay for text readability */}
          <div className="absolute inset-0 bg-black/40"></div>

          <div className="relative z-10 p-6 md:p-10 flex flex-col justify-between h-full">
            <div>
              {/* Urdu Title with RTL direction */}
              <div className="text-right mb-6" style={{ direction: "rtl" }}>
                <h2 className="text-4xl md:text-5xl font-bold text-white mb-2">Get Baby کورس</h2>
                <p className="text-xl font-semibold text-white/95">(اولاد کے لیے)</p>
              </div>

              {/* Compact benefit points with icons */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 max-w-3xl">
                <div className="flex items-start gap-3 text-white" style={{ direction: "rtl" }}>
                  <Heart className="w-5 h-5 flex-shrink-0 mt-1 text-white" />
                  <div className="text-right">
                    <p className="font-semibold text-sm">ہربل فارمولا</p>
                    <p className="text-xs opacity-90">قدرتی اجزاء سے بنا</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 text-white" style={{ direction: "rtl" }}>
                  <Clock className="w-5 h-5 flex-shrink-0 mt-1 text-white" />
                  <div className="text-right">
                    <p className="font-semibold text-sm">30 دن کا کورس</p>
                    <p className="text-xs opacity-90">بہتری کے لیے 2-3 کورس</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 text-white" style={{ direction: "rtl" }}>
                  <Droplet className="w-5 h-5 flex-shrink-0 mt-1 text-white" />
                  <div className="text-right">
                    <p className="font-semibold text-sm">روزانہ استعمال</p>
                    <p className="text-xs opacity-90">1 کیپسول دودھ کے ساتھ</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 text-white" style={{ direction: "rtl" }}>
                  <ShoppingCart className="w-5 h-5 flex-shrink-0 mt-1 text-white" />
                  <div className="text-right">
                    <p className="font-semibold text-sm">رازداری سے ڈیلیوری</p>
                    <p className="text-xs opacity-90">سارے پاکستان میں</p>
                  </div>
                </div>
              </div>
            </div>

            {/* CTA Button */}
            <button className="bg-green-500 hover:bg-green-600 text-white font-bold px-8 py-3 rounded-full flex items-center gap-2 transition-all hover:shadow-lg hover:scale-105 active:scale-95 w-fit">
              <ShoppingCart className="w-5 h-5" />
              <span>ابھی آرڈر کریں</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}
