import { banner } from "@/interfaces/types";
import LocalePath from "@/shared/LocalePath";
import MediaWithFallback from "@/shared/MediaWithFallback";
import { getTranslations } from "next-intl/server";

export default async function HeroSection({ banner }: { banner: banner }) {
  const t = await getTranslations();
  return (
    <section className="relative bg-gradient-to-br from-primary-light to-white overflow-hidden">
      <div className="container py-12 md:py-16 lg:py-20">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
          <div>
            <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full mb-6 shadow-sm">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-sparkles text-primary"
              >
                <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
                <path d="M20 3v4"></path>
                <path d="M22 5h-4"></path>
                <path d="M4 17v2"></path>
                <path d="M5 18H3"></path>
              </svg>
              <span className="text-sm">{t("Text.new_arrivals")} </span>
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl mb-6 text-text-primary">
              {banner?.name}
            </h1>
            <p className="text-lg md:text-xl text-text-secondary mb-8 leading-relaxed">
              {banner?.description}
            </p>
            <div className="flex flex-wrap gap-4">
              <LocalePath
                href="/products?category_id=1"
                className="bg-primary hover:opacity-80 text-white px-8 py-3.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex items-center gap-2 group"
              >
                {t("Text.discover_products")}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-arrow-right group-hover:translate-x-1 transition-transform"
                >
                  <path d="M5 12h14"></path>
                  <path d="m12 5 7 7-7 7"></path>
                </svg>
              </LocalePath>
              <LocalePath
                href="/subscriptions"
                className="bg-transparent border border-gray-200 text-text-primary text-base px-8 py-3.5 rounded-lg font-medium shadow-sm transition-all duration-300 flex items-center gap-2 group"
              >
                {t("NAV.subscriptions")}
              </LocalePath>
            </div>
          </div>
          <div className="relative">
            <div className="relative rounded-3xl overflow-hidden shadow-2xl">
              <MediaWithFallback
                src={banner?.image}
                alt="Flowers"
                className="w-full h-[400px] md:h-[500px] object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
            <div className="absolute -bottom-6 md:-left-6 -left-3 bg-white p-6 rounded-2xl shadow-xl">
              <p className="text-3xl mb-1">🌹</p>
              <p className="text-sm text-[#666]">{t("Text.more_than")}</p>
              <p className="text-2xl text-primary">
                {banner?.counts?.user_count}+
              </p>
              <p className="text-xs text-[#666]">{t("Text.happy_customers")}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}