export function HeroSection() {
  return (
    <section className="relative px-5 pt-5">
      {/* Scroll Down button — vertical, left side */}
      <div
        className="absolute left-0 top-1/2 z-20 hidden xl:block"
        style={{
          transform: "rotate(-90deg) translateX(-50%) translateY(100%)",
          transformOrigin: "left bottom",
        }}
      >
        <span className="scroll-btn-decoration">
          <a
            href="#scroll-down"
            className="inline-flex items-center gap-2 rounded-b-[25px] bg-white px-[56px] py-[16px] text-[13px] font-semibold text-[#0b0e17] no-underline transition-colors hover:text-[#45d0bd]"
            style={{ fontFamily: "var(--font-sora)" }}
          >
            Scroll down
            <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>
          </a>
        </span>
      </div>

      {/* Hero container with background */}
      <div
        className="relative overflow-hidden rounded-[25px] bg-[#1f1f1f] bg-cover bg-center"
        style={{
          backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
          padding: "13.5% 0 8.333% 0",
        }}
      >

        {/* Hero content */}
        <div className="relative z-10 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
          <div className="flex flex-col items-start">
            {/* Heading */}
            <h1
              className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
              style={{
                fontFamily: "var(--font-manrope)",
                fontSize: "clamp(32px, 5.2vw, 80px)",
                fontWeight: 700,
                lineHeight: 1.1,
              }}
            >
              Revolutionizing businesses with cutting-edge AI solutions and
              groundbreaking innovation
            </h1>

            {/* Subtitle */}
            <div style={{ marginRight: "53%" }}>
              <p className="text-[16px] leading-[1.6] 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="mt-10">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
                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>
  );
}