"use client";

import Link from "next/link";
import { Heart, Star, Gem, Sparkles, type LucideIcon } from "lucide-react";
import { AnimatedSection } from "@/components/animated-section";
import { HomeHeroTrustBar } from "@/components/home-hero-trust-bar";
import type { HomeEnergyIcon, HomeEnergySettings } from "@/lib/home-energy";

const ICON_MAP: Record<HomeEnergyIcon, LucideIcon> = {
  heart: Heart,
  star: Star,
  gem: Gem,
};

function EnergyBar({
  label,
  value,
  icon,
}: {
  label: string;
  value: number;
  icon: HomeEnergyIcon;
}) {
  const Icon = ICON_MAP[icon] ?? Heart;
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between gap-2 text-sm text-white/90">
        <span className="flex items-center gap-1.5 font-medium">
          <Icon className="size-4 text-amber-300/90" aria-hidden />
          {label}
        </span>
        <span className="tabular-nums text-amber-200/90">{value}٪</span>
      </div>
      <div className="h-2.5 overflow-hidden rounded-full bg-white/10">
        <div
          className="h-full rounded-full bg-gradient-to-l from-fuchsia-500 via-purple-500 to-violet-400 shadow-[0_0_12px_rgba(168,85,247,0.55)] transition-all duration-700"
          style={{ width: `${value}%` }}
          role="progressbar"
          aria-valuenow={value}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label={label}
        />
      </div>
    </div>
  );
}

export function HomeHero({ energy }: { energy: HomeEnergySettings }) {
  return (
    <div className="relative z-10 flex min-h-screen flex-col pt-28 md:pt-32">
      <div className="container mx-auto flex flex-1 flex-col px-4 pb-8">
        <AnimatedSection className="flex flex-1 flex-col justify-center">
          <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
            <div className="order-2 space-y-6 text-center lg:order-1">
              <h1 className="mx-auto flex max-w-3xl flex-col gap-4 text-center text-3xl font-bold tracking-tight text-amber-50 drop-shadow-[0_2px_12px_rgba(0,0,0,0.45)] sm:gap-5 sm:text-4xl md:gap-6 md:text-5xl lg:text-[2.65rem]">
                <span>
                  پاسخ سوالات عشق، رابطه، مالی و مسیر زندگی را با تاروت{" "}
                  <span className="text-amber-300">دریافت کن</span>
                </span>
              </h1>
              <p className="mx-auto max-w-xl text-base leading-relaxed text-white/90 md:text-lg">
                کارتت را انتخاب کن و ببین انرژی امروز چه پیامی برای تو دارد.
              </p>
              <div className="flex flex-col items-center gap-5">
                <Link
                  href="/reading"
                  className="inline-flex items-center justify-center gap-2 rounded-full px-8 py-4 text-base font-semibold text-white gradient-primary shadow-[0_0_28px_rgba(139,92,246,0.45)] transition-all duration-300 hover:scale-[1.02] hover:shadow-[0_0_36px_rgba(168,85,247,0.6)] active:scale-[0.98] md:text-lg"
                >
                  <Sparkles className="size-4 shrink-0 opacity-90" aria-hidden />
                  شروع فال آنلاین
                  <Sparkles className="size-4 shrink-0 opacity-90" aria-hidden />
                </Link>
              </div>
            </div>
            <div className="order-1 hidden min-h-[280px] lg:order-2 lg:block" aria-hidden />
          </div>
        </AnimatedSection>

        <AnimatedSection delay={0.08} className="mt-8 md:mt-10">
          <HomeHeroTrustBar />
        </AnimatedSection>

        <AnimatedSection delay={0.12} className="mt-8 pt-2 md:mt-10 md:pt-4">
          <div className="relative mx-auto max-w-4xl rounded-2xl border border-amber-400/45 bg-black/35 px-5 py-6 shadow-[0_8px_40px_rgba(0,0,0,0.35)] backdrop-blur-md md:px-8 md:py-8">
            <p className="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#1a0f2e]/90 px-4 py-0.5 text-sm font-medium text-amber-200/95">
              {energy.sectionTitle}
            </p>
            <div className="grid gap-6 pt-2 sm:grid-cols-3 sm:gap-8">
              {energy.stats.map((stat, index) => (
                <EnergyBar
                  key={`${stat.label}-${index}`}
                  label={stat.label}
                  value={stat.value}
                  icon={stat.icon}
                />
              ))}
            </div>
          </div>
        </AnimatedSection>

        <AnimatedSection delay={0.2}>
          <p className="pb-6 pt-8 text-center text-base font-bold text-white/90 md:pb-8 md:text-lg lg:text-xl">
            ✨ جهان همیشه آرام حرف می‌زند، باید یاد بگیری بشنوی... 🍃
          </p>
        </AnimatedSection>
      </div>
    </div>
  );
}