import { HeroImageScene } from "@/components/aiero/HeroImageScene";
import { ScrollDown } from "@/components/shared/ScrollDown";

export function HeroSection() {
  return (
    <section className="relative px-5 py-5">
      {/* Scroll Down button — vertical, left side */}
      <div className="scroll-widget absolute left-0 top-[40%] z-20 hidden xl:block">
          <ScrollDown />
      </div>

      {/* Hero container with background */}
      <div
        className="relative overflow-hidden rounded-[25px] bg-aiero-dark"
        style={{
          minHeight: "min(858px, calc(100vw * 0.447))",
          padding: "14.3% 0 8.1% 0",
        }}
      >
        <HeroImageScene imageSrc="/images/aiero/home-9-top-bg-min.jpg" />

        {/* Hero content */}
        <div className="relative z-10 w-full px-[12.7vw]">
          <div className="flex flex-col items-start">
            {/* Heading */}
            <h1
              className="hero-reveal mb-[24px] max-w-[1280px] text-left tracking-[-0.03em] text-white"
              style={{
                fontFamily: "var(--font-manrope)",
                fontSize: "clamp(42px, 4.43vw, 85px)",
                fontWeight: 400,
                lineHeight: 1.06,
              }}
            >
              Revolutionizing businesses with cutting-edge AI solutions and
              groundbreaking innovation
            </h1>

            {/* Subtitle */}
            <div className="hero-reveal max-w-[660px]" style={{ animationDelay: "760ms" }}>
              <p className="text-[16px] font-semibold leading-[1.9] text-white">
                Mummichog paradise fish! Triggerfish bango guppy opah sunfish
                bluntnose knifefish upside-down catfish cobia spookfish convict
                cichlid.
              </p>
            </div>

            {/* CTA Button */}
            <div className="hero-reveal mt-[42px]" style={{ animationDelay: "940ms" }}>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-aiero-red bg-aiero-red px-[30px] py-[14px] text-[16px] text-white transition-all hover:-translate-y-0.5 hover:border-aiero-red-hover hover:bg-aiero-red-hover hover:shadow-[0_15px_30px_rgba(239,100,100,0.28)]"
                style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
              >
                Discover
                <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
                  <path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span className="button-inner" />
              </a>
            </div>
          </div>
        </div>

        {/* Scroll anchor */}
        <div id="scroll-down" className="absolute bottom-0" />
      </div>
    </section>
  );
}