"use client";

import Image from "next/image";
import Link from "next/link";
import { useRef } from "react";
import { HeroDotCanvas } from "./HeroDotCanvas";

export function HeroSection() {
  const sectionRef = useRef<HTMLElement>(null);

  return (
    <section
      ref={sectionRef}
      id="hero-section"
      className="relative w-full h-[796px] flex flex-col items-center pointer-events-none"
    >
      {/* Background Graphic & Curve (back_4178_60221: x: 32, y: 230, w: 1856, h: 566) */}
      <div className="absolute top-[230px] left-1/2 -translate-x-1/2 w-[1856px] max-w-[calc(100vw-64px)] h-[566px] rounded-b-[32px] overflow-hidden z-0">
        <Image
          src="/assets/images/hero_back.svg"
          alt=""
          fill
          priority
          unoptimized
          className="object-cover object-top select-none pointer-events-none"
        />
        {/* Interactive Canvas Dots */}
        <HeroDotCanvas sectionRef={sectionRef} />
      </div>

      {/* Particle Starfield Lights (Light_4178_61305 & Light_4178_61255) */}
      <div className="absolute top-[85px] left-1/2 -translate-x-[calc(50%+470px)] w-[1137px] h-[269px] opacity-80 pointer-events-none z-10">
        <Image
          src="/assets/images/hero_light_left.svg"
          alt=""
          width={1137}
          height={269}
          unoptimized
          className="w-full h-full object-contain"
        />
      </div>
      <div className="absolute top-[105px] left-1/2 -translate-x-[calc(50%-470px)] w-[1137px] h-[269px] opacity-80 pointer-events-none z-10">
        <Image
          src="/assets/images/hero_light_right.svg"
          alt=""
          width={1137}
          height={269}
          unoptimized
          className="w-full h-full object-contain"
        />
      </div>

      {/* Left Floating 3D Shape (Object_4178_61355: x: 479, y: 436, w: 56, h: 56) */}
      <div className="absolute top-[436px] left-1/2 -translate-x-[calc(50%+481px)] w-[56px] h-[56px] pointer-events-none z-20">
        <Image
          src="/assets/images/object_left.png"
          alt=""
          width={56}
          height={56}
          unoptimized
          className="w-full h-full object-contain drop-shadow-[0_0_15px_rgba(72,126,255,0.4)]"
        />
      </div>

      {/* Right Floating 3D Shape (Object_4178_61358: x: 1397, y: 458, w: 48, h: 48) */}
      <div className="absolute top-[458px] left-1/2 -translate-x-[calc(50%-437px)] w-[48px] h-[48px] pointer-events-none z-20">
        <Image
          src="/assets/images/object_right.png"
          alt=""
          width={48}
          height={48}
          unoptimized
          className="w-full h-full object-contain drop-shadow-[0_0_15px_rgba(72,126,255,0.4)]"
        />
      </div>

      {/* Central Hero Content Container (Container_4178_61361: x: 609, y: 176, w: 703, h: 349) */}
      <div className="relative top-[96px] w-full max-w-[703px] px-4 flex flex-col items-center z-20 pointer-events-auto">
        {/* Top Pill Badge (Frame_2095586179_4178_61362: w: 95, h: 43, layoutMode: NONE) */}
        <div id="hero-badge" className="relative w-[95px] h-[43px] mb-[32px]">
          {/* Ellipse 1071 Glow Aura (Ellipse_1071_4178_61367: x: 29, y: -5, w: 31.25, h: 30.24) */}
          <div className="absolute left-[5px] top-[-29px] w-[80px] h-[79px] pointer-events-none z-0">
            <Image
              src="/assets/images/badge_glow.svg"
              alt=""
              width={80}
              height={79}
              unoptimized
              className="w-full h-full object-contain"
            />
          </div>

          {/* Star Sphere Icon (3_4178_61363: x: 33.5, y: 0, w: 28, h: 28) */}
          <div className="absolute left-[-16.5px] top-[-50px] w-[128px] h-[128px] pointer-events-none z-10">
            <Image
              src="/assets/images/badge_star.svg"
              alt=""
              width={128}
              height={128}
              unoptimized
              className="w-full h-full object-contain"
            />
          </div>

          {/* Badge Glass Pill (Header_4178_61368: x: 0, y: 20, w: 95, h: 24, radius: 24) */}
          <div className="absolute left-0 top-[20px] w-[95px] h-[24px] rounded-[24px] bg-[#080f1a]/10 border border-white/20 backdrop-blur-[14px] flex items-center justify-center px-[12px] py-[4px] z-20">
            <span className="text-[#f7faff] text-[12px] leading-[16px] font-medium text-center whitespace-nowrap">
              Team By . Ai
            </span>
          </div>
        </div>

        {/* Typography Heading & Subtitle (text_4178_61370: w: 703, h: 194) */}
        <div className="w-full flex flex-col items-center text-center gap-[16px] mb-[32px]">
          {/* Vector Typography Heading */}
          <h1 className="sr-only">AI-Powered Management for Team Leads.</h1>
          <div
            className="relative w-full max-w-[703px] h-[130px] flex items-center justify-center"
            aria-hidden="true"
          >
            <Image
              src="/assets/images/hero_heading.svg"
              alt="AI-Powered Management for Team Leads."
              width={703}
              height={130}
              priority
              unoptimized
              className="w-full h-full object-contain select-none pointer-events-none"
            />
          </div>

          {/* Subtitle (Subtitle_4178_61381: 16px / 24px line height, #b8cae5) */}
          <p
            id="hero-subtitle"
            className="text-[#b8cae5] text-[16px] leading-[24px] font-normal text-center max-w-[703px]"
          >
            TeamBy unifies your work and uses AI to optimize workflows,
            meetings, and costs—so you can manage smarter without chasing
            updates.
          </p>
        </div>

        {/* Hero CTA Button (Button_4178_61382: w: 173, h: 48, radius: 12) */}
        <Link
          href="#action"
          id="hero-cta-button"
          className="btn-primary-gradient w-[173px] h-[48px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center gap-[8px] text-[16px] leading-[20px] font-medium text-white hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)]"
        >
          <div className="relative w-[21px] h-[20px] flex items-center justify-center">
            <Image
              src="/assets/images/hero_btn_icon.svg"
              alt=""
              width={21}
              height={20}
              unoptimized
              className="w-[21px] h-[20px] object-contain"
            />
          </div>
          <span>See In Action</span>
        </Link>
      </div>
    </section>
  );
}