import React from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, ShieldCheck, Zap } from 'lucide-react';
import wireguardLogo from '../assets/images/wireguard-zana-mark.svg';
import heroImage from '../assets/images/zaccshop-wireguard-hero.jpg';

interface HeroSectionProps {
  onShopClick: () => void;
  onWireguardClick: () => void;
}

export const HeroSection: React.FC<HeroSectionProps> = ({ onShopClick, onWireguardClick }) => {
  return (
    <section className="relative overflow-hidden pt-4 pb-6 sm:pt-6 sm:pb-10">
      <div className="absolute -top-32 right-1/3 w-96 h-96 bg-purple-600/15 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute top-44 left-0 w-80 h-80 bg-fuchsia-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-[1500px] mx-auto px-3 sm:px-5 lg:px-7">
        <div className="relative overflow-hidden rounded-[24px] sm:rounded-[30px] border border-purple-400/20 bg-black shadow-[0_25px_90px_rgba(0,0,0,.55)] aspect-[16/9] min-h-[250px] sm:min-h-[320px] lg:min-h-[420px]">
          <img
            src={heroImage}
            alt="ZaccShop WireGuard - کاهش پینگ و اتصال پایدار"
            className="absolute inset-0 w-full h-full object-contain object-center"
          />

          {/* Cinematic overlays keep the reference artwork while making the live UI readable. */}
          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/10 to-black/10" />
          <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/20" />

          <div className="relative z-10 min-h-[250px] sm:min-h-[320px] lg:min-h-[420px] flex flex-col justify-end p-4 sm:p-7 lg:p-10">
            <motion.div
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.55 }}
              className="w-full flex flex-col items-center text-center"
            >
              <div className="mb-4 flex items-center gap-2 rounded-full border border-white/15 bg-black/55 backdrop-blur-xl px-3.5 py-2 text-xs sm:text-sm text-white shadow-lg">
                <img src={wireguardLogo} alt="WireGuard" className="h-6 w-6 object-contain" />
                <span className="font-bold">ZaccShop • سرویس WireGuard</span>
              </div>

              <div className="flex flex-wrap justify-center gap-2 mb-5">
                <span className="rounded-full border border-red-400/25 bg-red-950/55 px-3 py-1.5 text-[11px] sm:text-xs font-bold text-red-100 backdrop-blur-md">⚡ کاهش پینگ</span>
                <span className="rounded-full border border-purple-400/25 bg-purple-950/55 px-3 py-1.5 text-[11px] sm:text-xs font-bold text-purple-100 backdrop-blur-md">🚀 دانلود سریع</span>
                <span className="rounded-full border border-emerald-400/25 bg-emerald-950/55 px-3 py-1.5 text-[11px] sm:text-xs font-bold text-emerald-100 backdrop-blur-md">🛡️ اتصال پایدار</span>
                <span className="rounded-full border border-sky-400/25 bg-sky-950/55 px-3 py-1.5 text-[11px] sm:text-xs font-bold text-sky-100 backdrop-blur-md">👤 یک کاربر</span>
              </div>

              <div className="flex flex-col sm:flex-row gap-3 justify-center">
                <button
                  onClick={onWireguardClick}
                  className="px-7 py-3.5 rounded-xl bg-red-600 hover:bg-red-500 text-white font-black text-sm shadow-xl shadow-red-950/40 transition-all active:scale-95 flex items-center justify-center gap-2"
                >
                  <Zap className="w-4 h-4" />
                  مشاهده پلن‌های WireGuard
                </button>
                <button
                  onClick={onShopClick}
                  className="px-7 py-3.5 rounded-xl bg-black/65 hover:bg-black/80 border border-white/15 text-white font-bold text-sm backdrop-blur-xl transition-all flex items-center justify-center gap-2"
                >
                  فروشگاه
                  <ArrowLeft className="w-4 h-4" />
                </button>
              </div>

              <div className="mt-4 flex items-center gap-2 text-[11px] sm:text-xs text-white/80 bg-black/45 rounded-full px-3 py-1.5 backdrop-blur-md border border-white/10">
                <ShieldCheck className="w-4 h-4 text-emerald-400" />
                تحویل کانفیگ پس از تأیید سفارش • پشتیبانی @zana_lm
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};
