'use client';

import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useAppDispatch, useAppSelector } from '@/state/hooks';
import { openModal } from '@/state/auth';
import routes from '@/app/routes';

const SellerConditionsHero = () => {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { user } = useAppSelector((state) => state.auth);

  const handleListAssets = () => {
    if (user) {
      router.push(routes.postAd);
    } else {
      dispatch(openModal('login'));
    }
  };

  const handleSellerConditions = () => {
    const el = document.getElementById('selling-rules');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <section className="relative w-full h-[500px] md:h-[600px] -mt-16 md:-mt-[80px] pt-16 md:pt-[80px] overflow-hidden">
      {/* Background Image */}
      <Image
        src="/assets/rules/herobg.png"
        alt="Seller Conditions Background"
        fill
        priority
        className="object-cover"
      />

      {/* Dark Overlay */}
      <div className="absolute inset-0 bg-black/70" />

      {/* Content */}
      <div className="relative z-10 flex h-full items-center justify-center">
        <div className="mx-auto flex max-w-5xl flex-col items-center px-6 text-center">
          {/* Badge */}
          <span className="font-inter mb-4 bg-[#1657D90F]/60 px-6 py-2 text-[14px] font-semibold uppercase leading-[20px] tracking-[1px] text-[#1657D9]">
            Secure Escrow Guarantee
          </span>

          {/* Heading */}
          <h1 className="font-inter max-w-4xl text-center text-2xl font-medium leading-[44px] tracking-normal text-white md:text-[36px]">
            Sell Your Professional AV &amp; Broadcast Equipment
          </h1>

          {/* Subtitle */}
          <p className="font-inter mt-3 max-w-3xl text-center text-[20px] font-medium leading-[160%] tracking-normal text-white md:max-w-none md:whitespace-nowrap">
            Reach thousands of verified buyers. Zero upfront costs.
            Commission only when you sell.
          </p>

          {/* Buttons */}
          <div className="mt-6 flex flex-col gap-4 sm:flex-row">
            <button
              type="button"
              onClick={handleListAssets}
              className="flex h-[60px] w-[256px] items-center justify-center rounded-full bg-[#1657D9] text-sm font-light text-white transition hover:bg-[#1C5AA5] cursor-pointer"
            >
              List Your Assets Now
            </button>

            <button
              type="button"
              onClick={handleSellerConditions}
              className="flex h-[60px] w-[256px] items-center justify-center rounded-full border border-[#2468B8]/40 bg-[#081322]/70 text-sm font-light text-white transition hover:border-[#2468B8] cursor-pointer"
            >
              Seller Conditions
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SellerConditionsHero;