import { HeroImageScene } from "@/components/sections/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-tenext-dark"
        style={{
          minHeight: "min(858px, calc(100vw * 0.447))",
          padding: "14.3% 0 8.1% 0",
        }}
      >
        <HeroImageScene imageSrc="/images/tenext/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,
              }}
            >
              Engineering predictable outcomes from your digital investments
            </h1>

            {/* Subtitle */}
            <div
              className="hero-reveal max-w-[660px]"
              style={{ animationDelay: "760ms" }}
            >
              <p className="text-[16px] font-semibold leading-[1.9] text-white">
                Tenext helps enterprises transform with cloud, data, AI, and
                product engineering — built to lower total cost of ownership and
                accelerate time to value.
              </p>
            </div>

            {/* CTA Button */}
            <div
              className="hero-reveal mt-[42px]"
              style={{ animationDelay: "940ms" }}
            >
              <a
                href="/contacts"
                className="tenext-button tenext-button-solid inline-flex items-center gap-2 rounded-[25px] border border-tenext-red bg-tenext-red px-[30px] py-[14px] text-[16px] text-white transition-all hover:-translate-y-0.5 hover:border-tenext-red-hover hover:bg-tenext-red-hover hover:shadow-[0_15px_30px_rgba(239,100,100,0.28)]"
                style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
              >
                Talk to an expert
                <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>
  );
}