import Image from "next/image";

export function TaskAnalysisSection() {
  return (
    <section
      id="task-analysis-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mb-[120px]"
    >
      {/* Root Node: 01 (Type: FRAME, id: 4193:9606, width: 1216, height: 919, layoutMode: VERTICAL, itemSpacing: 80) */}
      <div className="relative w-full max-w-[1216px] flex flex-col items-center gap-[80px]">
        {/* Frame 2147225107 (Type: FRAME, id: 4193:9607, width: 802, height: 219, layoutMode: VERTICAL, itemSpacing: 48) */}
        <div className="relative w-full max-w-[802px] flex flex-col items-center gap-[48px]">
          {/* Frame 2147225110 (Type: FRAME, id: 4193:9608, width: 101, height: 48, layoutMode: VERTICAL, itemSpacing: -8) */}
          <div className="relative flex flex-col items-center">
            {/* Frame 2147225109 (id: 4193:9609, width: 32, height: 32) Star Orb */}
            <div className="relative w-[32px] h-[32px] flex items-center justify-center select-none pointer-events-none z-10">
              <Image
                src="/assets/images/kanban_badge_star.png"
                alt=""
                width={32}
                height={32}
                unoptimized
                className="w-[32px] h-[32px] object-contain"
              />
            </div>

            {/* Header (id: 4193:9615, width: 101, height: 24, fill: #0f1a47 opacity 0.7, cornerRadius: 24) */}
            <div className="relative -mt-[8px] h-[24px] px-[12px] py-[4px] rounded-[24px] bg-[#0f1a47]/70 border border-white/20 backdrop-blur-sm flex items-center justify-center z-0">
              {/* Title (id: 4193:9616, text: "Task analysis", 12px, Inter Medium, #dae5ff) */}
              <span className="text-[#dae5ff] text-[12px] leading-[16px] font-medium font-[family-name:var(--font-inter)] select-none">
                Task analysis
              </span>
            </div>
          </div>

          {/* Frame 2147225111 (Type: FRAME, id: 4193:9617, width: 802, height: 123, layoutMode: VERTICAL, itemSpacing: 16) */}
          <div className="w-full flex flex-col items-center gap-[16px] text-center">
            {/* Title (id: 4193:9618, text: "Speed means nothing if you have to build it twice.", 24px, Inter Medium) */}
            <h2 className="text-[#6f829e] text-[24px] leading-[29px] font-medium tracking-tight">
              Speed means nothing if you have to build it twice.
            </h2>

            {/* Frame 2147225106 (id: 4193:9619, width: 802, height: 78, itemSpacing: 12) */}
            <div className="w-full max-w-[802px] flex flex-col items-center">
              {/* Subtitle (id: 4193:9620 & 4193:9621, 32px, Inter Medium, #e4ecf7 / #cbdaef) */}
              <h3 className="text-[#e4ecf7] text-[32px] leading-[39px] font-medium tracking-tight">
                Your team is shipping fast, but 30% of their work is{" "}
                <span className="text-[#cbdaef]">bouncing back.</span>
              </h3>
            </div>
          </div>
        </div>

        {/* Frame 2147225112 (Type: FRAME, id: 4193:9622, width: 1216, height: 620, cornerRadius: 40) */}
        <div className="relative w-full max-w-[1216px] h-[620px] rounded-[40px] bg-gradient-to-b from-[#000718] to-[#03070d]/0 border border-[#272f3a] overflow-hidden">
          {/* Ellipse 43609 (id: 4193:9623, width: 169, height: 169, x: -43, y: 268, fill: #6d85ff, blur: 500px) */}
          <div className="absolute -left-[43px] top-[268px] w-[169px] h-[169px] rounded-full bg-[#6d85ff] blur-[250px] opacity-40 pointer-events-none" />

          {/* Frame 2147225119: Top Navigation Bar (id: 4193:9707, width: 1136, height: 42, x: 40, y: 40) */}
          <div className="absolute left-[40px] top-[40px] w-[calc(100%-80px)] max-w-[1136px] flex items-center justify-between">
            {/* Left Controls: Frame 2147225113 (id: 4193:9708, width: 377, height: 40, itemSpacing: 24) */}
            <div className="flex items-center gap-[24px]">
              {/* Frame 1000005816 -> Frame 1000005818: Logo & Text (id: 4193:9710) */}
              <div className="flex items-center gap-[6px]">
                {/* Kanban Icon (id: 4193:9712, width: 20, height: 20) */}
                <Image
                  src="/assets/images/kanban_board_icon.svg"
                  alt=""
                  width={20}
                  height={20}
                  unoptimized
                  className="w-[20px] h-[20px]"
                />
                {/* Kanban Board Title (id: 4193:9715, 20px, Inter Bold, #ffffff) */}
                <span className="text-white text-[20px] leading-[24px] font-bold tracking-tight select-none">
                  Kanban Board
                </span>
              </div>

              {/* Frame 1000005817: Dropdown & Setting (id: 4193:9716, width: 186, height: 40, itemSpacing: 12) */}
              <div className="flex items-center gap-[12px]">
                {/* Frame 1000005769: Main Board Dropdown (id: 4193:9717, width: 134, height: 40, cornerRadius: 12) */}
                <button
                  type="button"
                  className="h-[40px] px-[15px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center justify-between gap-[19px] hover:bg-[#d9d9d9]/[0.12] transition-colors"
                >
                  {/* Main Board Text (id: 4193:9719, 13px, Inter Medium, #ffffff) */}
                  <span className="text-white text-[13px] leading-[16px] font-medium select-none">
                    Main Board
                  </span>
                  {/* Down Arrow (id: 4193:9720, width: 21, height: 21) */}
                  <Image
                    src="/assets/images/kanban_down_arrow.svg"
                    alt=""
                    width={21}
                    height={21}
                    unoptimized
                    className="w-[21px] h-[21px]"
                  />
                </button>

                {/* uil:setting: Setting Button (id: 4193:9724, width: 40, height: 39, cornerRadius: 12, fill: #1b84ff opacity 0.2) */}
                <button
                  type="button"
                  aria-label="Settings"
                  className="w-[40px] h-[40px] rounded-[12px] bg-[#1b84ff]/20 flex items-center justify-center hover:bg-[#1b84ff]/30 transition-colors"
                >
                  {/* Setting Icon (id: 4193:9725, width: 18, height: 18) */}
                  <Image
                    src="/assets/images/kanban_setting_icon.svg"
                    alt=""
                    width={18}
                    height={18}
                    unoptimized
                    className="w-[18px] h-[18px]"
                  />
                </button>
              </div>
            </div>

            {/* Right Controls: Frame 2147225114 (id: 4193:9726, width: 579, height: 42, itemSpacing: 12) */}
            <div className="flex items-center gap-[12px]">
              {/* Frame 1000005772: Search Bar (id: 4193:9727, width: 340, height: 40, cornerRadius: 12) */}
              <div className="w-[340px] h-[40px] px-[10px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center gap-[8px]">
                {/* Search Icon (id: 4193:9729, width: 21, height: 21) */}
                <Image
                  src="/assets/images/kanban_search_icon.svg"
                  alt=""
                  width={21}
                  height={21}
                  unoptimized
                  className="w-[21px] h-[21px] flex-shrink-0"
                />
                {/* Input Placeholder Text (id: 4193:9731, 13px, Inter Medium, #5c6577) */}
                <input
                  type="text"
                  placeholder="Search tasks by title or description..."
                  className="w-full bg-transparent text-[13px] leading-[16px] text-white placeholder-[#5c6577] outline-none font-medium"
                />
              </div>

              {/* Frame 1000005770: Filter Button (id: 4193:9732, width: 86, height: 40, cornerRadius: 12) */}
              <button
                type="button"
                className="h-[40px] pl-[10px] pr-[15px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center gap-[8px] hover:bg-[#d9d9d9]/[0.12] transition-colors"
              >
                {/* Filter Icon (id: 4193:9734, width: 21, height: 21) */}
                <Image
                  src="/assets/images/kanban_filter_icon.svg"
                  alt=""
                  width={21}
                  height={21}
                  unoptimized
                  className="w-[21px] h-[21px]"
                />
                {/* Filter Text (id: 4193:9736, 13px, Inter Medium, #ffffff) */}
                <span className="text-white text-[13px] leading-[16px] font-medium select-none">
                  Filter
                </span>
              </button>

              {/* Button: Get Started (id: 4193:9737, width: 129, height: 42, cornerRadius: 12) */}
              <button
                type="button"
                className="h-[42px] px-[20px] py-[11px] rounded-[12px] bg-gradient-to-r from-[#0029b2] via-[#487eff] to-[#adbfff] border border-white/30 shadow-[0_0_20px_rgba(75,128,255,0.4)] flex items-center justify-center hover:opacity-95 transition-opacity"
              >
                {/* Button Title (id: 4193:9738, 16px, Inter Regular, #ffffff, lineHeight: 20px) */}
                <span className="text-white text-[16px] leading-[20px] font-normal select-none">
                  Get Started
                </span>
              </button>
            </div>
          </div>

          {/* Frame 2147225123: Columns Area (id: 4193:9624, width: 596, height: 217, x: 40, y: 120, itemSpacing: 24) */}
          <div className="absolute left-[40px] top-[120px] flex items-start gap-[24px]">
            {/* 1. "To Do" Column: Frame 2147225102 (id: 4193:9625, width: 286, height: 217, fills: #080f1a opacity 0.5, stroke: #0f161f, cornerRadius: 24) */}
            <div className="relative w-[286px] h-[217px] rounded-[24px] bg-[#080f1a]/50 border border-[#0f161f] p-[24px] flex flex-col gap-[24px] flex-shrink-0">
              {/* Ellipse 1071: Glow Effect (id: 4193:9665, w: 83.5, h: 78.3, fill: #0035b3 blur 200) */}
              <div className="absolute -left-[17px] top-[0px] w-[84px] h-[78px] rounded-full bg-[#0035b3] blur-[80px] opacity-40 pointer-events-none" />

              {/* Column Header: Frame 1000005788 (id: 4193:9626, width: 238, height: 24) */}
              <div className="w-full flex items-center justify-between z-10">
                {/* Title & Count: Frame 1000005783 (id: 4193:9627, itemSpacing: 8) */}
                <div className="flex items-center gap-[8px]">
                  {/* To Do Text (id: 4193:9628, 14px, Inter Bold, #ffffff) */}
                  <span className="text-white text-[14px] leading-[17px] font-bold">
                    To Do
                  </span>
                  {/* Count Pill: Frame 1000005773 (id: 4193:9629, width: 24, height: 24, cornerRadius: 12) */}
                  <span className="w-[24px] h-[24px] rounded-[12px] bg-white/10 flex items-center justify-center text-white text-[11px] font-normal leading-[13px]">
                    1
                  </span>
                </div>

                {/* Status Pill: Frame 1000005784 (id: 4193:9631, width: 58, height: 24, fill: #16b05e opacity 0.2, cornerRadius: 12) */}
                <div className="h-[24px] px-[10px] rounded-[12px] bg-[#16b05e]/20 flex items-center gap-[4px]">
                  {/* Dot (id: 4193:9632, width: 6, height: 6, fill: #16b05e) */}
                  <span className="w-[6px] h-[6px] rounded-full bg-[#16b05e]" />
                  {/* Done Text (id: 4193:9633, 11px, Inter Regular, #16b05e) */}
                  <span className="text-[#16b05e] text-[11px] leading-[13px] font-normal">
                    Done
                  </span>
                </div>
              </div>

              {/* Task Card: Frame 1000005809 (id: 4193:9634, width: 238, height: 121, cornerRadius: 15) */}
              <div className="w-full h-[121px] rounded-[15px] bg-gradient-to-b from-[#313e52]/40 to-[#252f3f]/40 border border-[#0f161f] p-[14px] shadow-[1px_5px_20px_rgba(0,0,0,0.2)] flex flex-col justify-between z-10">
                {/* Card Top: Tag + Flag + Title (Frame 1000005800) */}
                <div className="flex flex-col gap-[10px]">
                  {/* Tag + Flag Row (Frame 1000005797) */}
                  <div className="flex items-center justify-between">
                    {/* Game Tag (Frame 1000005791, cornerRadius: 7) */}
                    <div className="h-[22px] px-[6px] py-[4px] rounded-[7px] bg-gradient-to-r from-[#4374f3]/20 to-[#27448d]/20 flex items-center">
                      <span className="text-[#5786ff] text-[10px] leading-[12px] font-medium">
                        Hadi &amp; Hoda Game
                      </span>
                    </div>
                    {/* Flag Icon (tabler:flag, id: 4193:9640) */}
                    <Image
                      src="/assets/images/kanban_flag_icon.svg"
                      alt=""
                      width={22}
                      height={22}
                      unoptimized
                      className="w-[22px] h-[22px]"
                    />
                  </div>

                  {/* Title (id: 4193:9643, 14px, Inter Bold, #ffffff) */}
                  <span className="text-white text-[14px] leading-[17px] font-bold">
                    Landing page design
                  </span>
                </div>

                {/* Card Bottom Meta Row (Frame 1000005796) */}
                <div className="flex items-center justify-between">
                  {/* Avatars: Frame 1000004608 (id: 4193:9645, width: 42, height: 24) */}
                  <div className="relative w-[42px] h-[24px] flex-shrink-0">
                    <Image
                      src="/assets/images/kanban_avatars.png"
                      alt=""
                      width={42}
                      height={24}
                      unoptimized
                      className="w-[42px] h-[24px] object-contain"
                    />
                  </div>

                  {/* Meta Badges: Frame 1000005795 (id: 4193:9655, itemSpacing: 6) */}
                  <div className="flex items-center gap-[6px]">
                    {/* Today Badge: Frame 1000005792 (id: 4193:9656, cornerRadius: 7) */}
                    <div className="h-[24px] px-[8px] rounded-[7px] bg-[#16b05e]/[0.08] border border-[#16b05e]/[0.05] flex items-center gap-[3px]">
                      <Image
                        src="/assets/images/kanban_calendar_icon.svg"
                        alt=""
                        width={13}
                        height={13}
                        unoptimized
                        className="w-[13px] h-[13px]"
                      />
                      <span className="text-[#16b05e] text-[12px] leading-[15px] font-medium">
                        Today
                      </span>
                    </div>

                    {/* Comments Badge: Frame 1000005793 (id: 4193:9659, cornerRadius: 7) */}
                    <div className="h-[24px] px-[5px] rounded-[7px] bg-white/[0.04] border border-white/[0.02] flex items-center gap-[3px]">
                      <Image
                        src="/assets/images/kanban_message_icon.svg"
                        alt=""
                        width={12}
                        height={12}
                        unoptimized
                        className="w-[12px] h-[12px]"
                      />
                      <span className="text-[#d2d4d7] text-[12px] leading-[15px] font-medium">
                        8
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* 2. "Done" Column: Frame 2147225103 (id: 4193:9666, width: 286, height: 217, fills: #080f1a opacity 0.5, stroke: #0f161f, cornerRadius: 24) */}
            <div className="relative w-[286px] h-[217px] rounded-[24px] bg-[#080f1a]/50 border border-[#0f161f] p-[24px] flex flex-col gap-[24px] flex-shrink-0">
              {/* Ellipse 1071: Glow Effect (id: 4193:9706, w: 83.5, h: 78.3, fill: #0035b3 blur 200) */}
              <div className="absolute left-[0px] top-[0px] w-[84px] h-[78px] rounded-full bg-[#0035b3] blur-[80px] opacity-40 pointer-events-none" />

              {/* Column Header: Frame 1000005788 (id: 4193:9667, width: 238, height: 24) */}
              <div className="w-full flex items-center justify-between z-10">
                {/* Title & Count: Frame 1000005783 (id: 4193:9668, itemSpacing: 8) */}
                <div className="flex items-center gap-[8px]">
                  {/* Done Text (id: 4193:9669, 14px, Inter Bold, #ffffff) */}
                  <span className="text-white text-[14px] leading-[17px] font-bold">
                    Done
                  </span>
                  {/* Count Pill: Frame 1000005773 (id: 4193:9670, width: 24, height: 24, cornerRadius: 12) */}
                  <span className="w-[24px] h-[24px] rounded-[12px] bg-white/10 flex items-center justify-center text-white text-[11px] font-normal leading-[13px]">
                    1
                  </span>
                </div>

                {/* Status Pill: Frame 1000005784 (id: 4193:9672, width: 58, height: 24, fill: #16b05e opacity 0.2, cornerRadius: 12) */}
                <div className="h-[24px] px-[10px] rounded-[12px] bg-[#16b05e]/20 flex items-center gap-[4px]">
                  {/* Dot (id: 4193:9673, width: 6, height: 6, fill: #16b05e) */}
                  <span className="w-[6px] h-[6px] rounded-full bg-[#16b05e]" />
                  {/* Done Text (id: 4193:9674, 11px, Inter Regular, #16b05e) */}
                  <span className="text-[#16b05e] text-[11px] leading-[13px] font-normal">
                    Done
                  </span>
                </div>
              </div>

              {/* Task Card: Frame 1000005809 (id: 4193:9675, width: 238, height: 121, cornerRadius: 15) */}
              <div className="w-full h-[121px] rounded-[15px] bg-gradient-to-b from-[#313e52]/40 to-[#252f3f]/40 border border-[#0f161f] p-[14px] shadow-[1px_5px_20px_rgba(0,0,0,0.2)] flex flex-col justify-between z-10">
                {/* Card Top: Tag + Flag + Title (Frame 1000005800) */}
                <div className="flex flex-col gap-[10px]">
                  {/* Tag + Flag Row (Frame 1000005797) */}
                  <div className="flex items-center justify-between">
                    {/* Game Tag (Frame 1000005791, cornerRadius: 7) */}
                    <div className="h-[22px] px-[6px] py-[4px] rounded-[7px] bg-gradient-to-r from-[#4374f3]/20 to-[#27448d]/20 flex items-center">
                      <span className="text-[#5786ff] text-[10px] leading-[12px] font-medium">
                        Hadi &amp; Hoda Game
                      </span>
                    </div>
                    {/* Flag Icon (tabler:flag, id: 4193:9681) */}
                    <Image
                      src="/assets/images/kanban_flag_icon.svg"
                      alt=""
                      width={22}
                      height={22}
                      unoptimized
                      className="w-[22px] h-[22px]"
                    />
                  </div>

                  {/* Title (id: 4193:9684, 14px, Inter Bold, #ffffff) */}
                  <span className="text-white text-[14px] leading-[17px] font-bold">
                    Landing page design
                  </span>
                </div>

                {/* Card Bottom Meta Row (Frame 1000005796) */}
                <div className="flex items-center justify-between">
                  {/* Avatars: Frame 1000004608 (id: 4193_9686, width: 42, height: 24) */}
                  <div className="relative w-[42px] h-[24px] flex-shrink-0">
                    <Image
                      src="/assets/images/kanban_avatars.png"
                      alt=""
                      width={42}
                      height={24}
                      unoptimized
                      className="w-[42px] h-[24px] object-contain"
                    />
                  </div>

                  {/* Meta Badges: Frame 1000005795 (id: 4193:9696, itemSpacing: 6) */}
                  <div className="flex items-center gap-[6px]">
                    {/* Today Badge: Frame 1000005792 (id: 4193:9697, cornerRadius: 7) */}
                    <div className="h-[24px] px-[8px] rounded-[7px] bg-[#16b05e]/[0.08] border border-[#16b05e]/[0.05] flex items-center gap-[3px]">
                      <Image
                        src="/assets/images/kanban_calendar_icon.svg"
                        alt=""
                        width={13}
                        height={13}
                        unoptimized
                        className="w-[13px] h-[13px]"
                      />
                      <span className="text-[#16b05e] text-[12px] leading-[15px] font-medium">
                        Today
                      </span>
                    </div>

                    {/* Comments Badge: Frame 1000005793 (id: 4193:9700, cornerRadius: 7) */}
                    <div className="h-[24px] px-[5px] rounded-[7px] bg-white/[0.04] border border-white/[0.02] flex items-center gap-[3px]">
                      <Image
                        src="/assets/images/kanban_message_icon.svg"
                        alt=""
                        width={12}
                        height={12}
                        unoptimized
                        className="w-[12px] h-[12px]"
                      />
                      <span className="text-[#d2d4d7] text-[12px] leading-[15px] font-medium">
                        8
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Group 2147223367: Cursor "Designer" Tag (id: 4193:9739, x: 201, y: 310, rotation: 6 deg) */}
          <div className="absolute left-[201px] top-[310px] w-[106px] h-[47px] pointer-events-none select-none z-20">
            <Image
              src="/assets/images/kanban_cursor_designer.png"
              alt="Designer"
              width={106}
              height={47}
              unoptimized
              className="w-[106px] h-[47px] object-contain"
            />
          </div>

          {/* Group 2147223368: Cursor "You" Tag (id: 4193:9743, x: 517, y: 249, rotation: -6 deg) */}
          <div className="absolute left-[517px] top-[249px] w-[76px] h-[44px] pointer-events-none select-none z-20">
            <Image
              src="/assets/images/kanban_cursor_you.png"
              alt="You"
              width={76}
              height={44}
              unoptimized
              className="w-[76px] h-[44px] object-contain"
            />
          </div>
        </div>
      </div>
    </section>
  );
}