import Image from "next/image";

export function DashboardSection() {
  return (
    <section
      id="dashboard-section"
      className="relative -mt-[175px] w-full flex flex-col items-center z-20 px-4"
    >
      {/* Dashboard Glass Card (Dashboard_4178_61403: w: 1216, h: 785, radius: 32) */}
      <div
        id="dashboard-preview-card"
        className="relative w-full max-w-[1216px] rounded-[32px] p-[8px] bg-white/[0.04] backdrop-blur-[24px] border border-white/[0.12] shadow-[0_20px_80px_rgba(0,0,0,0.8)] overflow-hidden"
      >
        {/* Dashboard Screenshot Image (Dashboard_image_4178_61404: w: 1200, h: 769, radius: 24) */}
        <div className="relative w-full aspect-[1200/769] rounded-[24px] overflow-hidden bg-[#0a0f19]">
          <Image
            src="/assets/images/dashboard_image.svg"
            alt="TeamBy Time Tracking Dashboard UI"
            fill
            priority
            unoptimized
            className="object-cover object-top select-none"
            sizes="(max-width: 1280px) 100vw, 1200px"
          />
        </div>
      </div>

      {/* Bottom Glow Aura (Background_4178_61405: w: 1216, h: 302, y: 1137) */}
      <div className="absolute bottom-[-50px] w-full max-w-[1216px] h-[302px] pointer-events-none -z-10 opacity-70">
        <Image
          src="/assets/images/dashboard_bottom_glow.svg"
          alt=""
          fill
          unoptimized
          className="object-contain object-bottom"
        />
      </div>

      {/* Feature Switcher Tab Bar (Navigation_4178_61406: w: 1010, h: 66, radius: 48) */}
      <div
        id="dashboard-navigation-bar"
        className="mt-[33px] mb-[60px] w-full max-w-[1010px] h-[66px] rounded-[48px] p-[10px] pr-[32px] pl-[10px] bg-[#080f1a]/40 backdrop-blur-[20px] border border-white/[0.12] shadow-[0_10px_40px_rgba(0,0,0,0.5)] flex items-center justify-between overflow-x-auto overflow-y-hidden no-scrollbar"
      >
        {/* Active Tab: Time Tracking (Header_4178_61407: w: 190, h: 46, radius: 24) */}
        <button
          type="button"
          id="tab-time-tracking"
          className="tab-active-gradient h-[46px] rounded-[24px] px-[20px] py-[12px] flex items-center gap-[6px] cursor-pointer hover:brightness-110 transition-all flex-shrink-0"
        >
          <div className="relative w-[22px] h-[22px] flex items-center justify-center">
            <Image
              src="/assets/images/tab_icon_star.svg"
              alt=""
              width={22}
              height={22}
              unoptimized
              className="w-[22px] h-[22px] object-contain"
            />
          </div>
          <span className="tab-active-text text-[18px] font-medium tracking-tight whitespace-nowrap">
            Time Tracking
          </span>
        </button>

        {/* Line 6 Divider */}
        <div className="w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
          <Image
            src="/assets/images/line_divider.svg"
            alt=""
            width={1}
            height={40}
            unoptimized
            className="h-[40px] w-[1px]"
          />
        </div>

        {/* Tab: Meeting (Value_4178_61415) */}
        <button
          type="button"
          id="tab-meeting"
          className="h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
        >
          Meeting
        </button>

        {/* Line 5 Divider */}
        <div className="w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
          <Image
            src="/assets/images/line_divider.svg"
            alt=""
            width={1}
            height={40}
            unoptimized
            className="h-[40px] w-[1px]"
          />
        </div>

        {/* Tab: Chat App (Button_title_4178_61417) */}
        <button
          type="button"
          id="tab-chat-app"
          className="h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
        >
          Chat App
        </button>

        {/* Line 3 Divider */}
        <div className="w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
          <Image
            src="/assets/images/line_divider.svg"
            alt=""
            width={1}
            height={40}
            unoptimized
            className="h-[40px] w-[1px]"
          />
        </div>

        {/* Tab: Project Management (Button_title_4178_61419) */}
        <button
          type="button"
          id="tab-project-management"
          className="h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
        >
          Project Management
        </button>

        {/* Line 4 Divider */}
        <div className="w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
          <Image
            src="/assets/images/line_divider.svg"
            alt=""
            width={1}
            height={40}
            unoptimized
            className="h-[40px] w-[1px]"
          />
        </div>

        {/* Tab: File Manager (Button_title_4178_61421) */}
        <button
          type="button"
          id="tab-file-manager"
          className="h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
        >
          File Manager
        </button>

        {/* Line 2 Divider */}
        <div className="w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
          <Image
            src="/assets/images/line_divider.svg"
            alt=""
            width={1}
            height={40}
            unoptimized
            className="h-[40px] w-[1px]"
          />
        </div>

        {/* Tab: Finance (Button_title_4178_61423: exact string "Finance ") */}
        <button
          type="button"
          id="tab-finance"
          className="h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
        >
          Finance{" "}
        </button>
      </div>
    </section>
  );
}