---
const underline    = "/assets/why-underline.svg";
const iconSimple   = "/assets/why-icon-simple.svg";
const iconFamiliar = "/assets/why-icon-familiar.svg";
const iconConn     = "/assets/why-icon-connected.svg";
const iconModern   = "/assets/why-icon-modern.svg";
---

<section class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
  <div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">

    <!-- Header row -->
    <div class="flex flex-col lg:flex-row gap-[36px] items-start overflow-clip w-full">
      <!-- Left: pill + heading + description -->
      <div class="flex flex-1 flex-col gap-[36px] items-start min-w-0">
        <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
          <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">WHY TALKPRO</span>
        </div>
        <div class="flex flex-col gap-[24px] items-start w-full">
          <div class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] w-full">
            <p class="leading-[1.2] mb-0">Designed for the Way</p>
            <p class="leading-[1.2]">People Communicate Today</p>
          </div>
          <!-- Underline decoration -->
          <div class="relative h-0 w-[295.5px] shrink-0">
            <div class="absolute inset-[-0.5px_0]">
              <img alt="" class="block max-w-none size-full" src={underline} />
            </div>
          </div>
          <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
            Communication today happens across personal conversations, communities, work groups, and content channels. TalkPro brings these essential communication experiences together in a simple and familiar interface, making it easier for users to connect, share, and stay updated.
          </p>
        </div>
      </div>

      <!-- Right: illustration -->
      <div class="hidden lg:block relative shrink-0 size-[480px]">
        <img alt="People communicating with TalkPro" class="absolute inset-0 size-full object-contain" src="/assets/why-illustration.png" />
      </div>
    </div>

    <!-- 2×2 card grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
          <img alt="" class="block size-[44px]" src={iconSimple} />
        </div>
        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
        </div>
      </div>
      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
          <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
        </div>
        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
        </div>
      </div>
      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
          <img alt="" class="block size-[44px]" src={iconConn} />
        </div>
        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
        </div>
      </div>
      <div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
          <img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
        </div>
        <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
          <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
        </div>
      </div>
    </div>

  </div>
</section>