'use client';

import React from "react";
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 AboutHero = () => {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { user } = useAppSelector((state) => state.auth);

  return (
    <section className="">
      <div className="relative mx-auto h-[620px] overflow-hidden">
        {/* Background Image */}
        <Image
          src="/assets/homebg.jpg" // Your blue hero background image
          alt="BroadcastAV Background"
          fill
          priority
          className="object-cover object-right md:object-center md:scale-x-[-1]"
        />

        {/* Content */}
        <div className="relative z-10 h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 flex items-center">
          <div className="max-w-xl">
            <span className="inline-flex items-center rounded-full bg-white px-4 py-1 text-[11px] font-medium uppercase text-[#2B6DE8]">
              B2B BROADCAST TECH
            </span>

            <h1 className="mt-6 text-3xl font-medium text-white">
              About Broadcast
              <span className="text-[#2563EB]">AV</span>
            </h1>

            <p className="mt-6 text-[14px] text-white/90">
              Southeast Asia&apos;s professional AV & broadcast equipment supplier
              since 1999. Delivering mission-critical infrastructure to
              world-class studios.
            </p>

            <div className="mt-10 flex flex-col sm:flex-row gap-4">
              <button
                type="button"
                onClick={() => {
                  if (user) {
                    router.push(routes.postAd);
                  } else {
                    dispatch(openModal('login'));
                  }
                }}
                className="px-7 py-4 rounded-full bg-white text-[#2563EB] font-medium hover:bg-gray-100 transition cursor-pointer"
              >
                List Your Assets Now
              </button>

              <button
                type="button"
                onClick={() => router.push(routes.rules)}
                className="px-7 py-4 rounded-full border border-white/30 bg-white/10 backdrop-blur-sm text-white font-medium hover:bg-white/20 transition cursor-pointer"
              >
                Seller Conditions
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutHero;