---
const halftone = "/assets/core-halftone-bg.png";
const iconPrivate = "/assets/core-icon-private.png";
const iconGroups = "/assets/core-icon-groups.png";
const iconChannels = "/assets/core-icon-channels.png";
const iconVoice = "/assets/core-icon-voice.png";
const iconVideo = "/assets/core-icon-video.png";
const iconMedia = "/assets/core-icon-media.png";

const cards = [
  { img: iconPrivate,  title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
  { img: iconGroups,   title: 'Group Chats',       desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
  { img: iconChannels, title: 'Channels',           desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
  { img: iconVoice,    title: 'Voice Calls',        desc: 'Talk in real time whenever messages are not enough.' },
  { img: iconVideo,    title: 'Video Calls',         desc: 'Connect face-to-face with a simple and reliable video call experience.' },
  { img: iconMedia,    title: 'Media Sharing',      desc: 'Share photos, videos, files, and updates in your conversations.' },
]
---

<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-[120px] overflow-hidden">
  <!-- Background halftone -->
  <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[1319px] w-[2363px] object-cover pointer-events-none opacity-20" src={halftone} />

  <!-- Section header -->
  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip px-[180px] w-[1280px]">
    <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">CORE FEATURES</span>
    </div>
    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
    <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
      Different identities, different conversations, and different privacy levels should not be forced into one flat interface. TalkPro lets them exist in order inside one platform.
    </p>
  </div>

  <!-- Card grid -->
  <div class="relative flex flex-col gap-[22px] items-start w-[1280px]">
    <!-- Row 1 -->
    <div class="flex gap-[22px] items-start w-full">
      {cards.slice(0, 3).map(card => (
        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
          <div class="relative shrink-0 size-[160px] overflow-hidden">
            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
          </div>
          <div class="flex flex-col gap-[12px] items-start text-center w-full">
            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
          </div>
        </div>
      ))}
    </div>
    <!-- Row 2 -->
    <div class="flex gap-[22px] items-center w-full">
      {cards.slice(3).map(card => (
        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
          <div class="relative shrink-0 size-[160px] overflow-hidden">
            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
          </div>
          <div class="flex flex-col gap-[12px] items-start text-center w-full">
            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
