---
const cases = [
  { title: 'Work Identity',    desc: 'Keep work communication clear, organized, and easier to review.' },
  { title: 'Private Identity', desc: 'Keep personal conversations natural, focused, and separate from work noise.' },
  { title: 'Protected Space',  desc: 'Some conversations are not only private. They require stronger boundaries and another layer of protection.' },
]
---

<section class="flex flex-col items-center bg-surface px-[130px] py-[110px] w-full">
  <div class="flex flex-col items-center pb-[60px] max-w-[1180px] w-full">
    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">USE CASES</p>
    <div class="h-[15px]"></div>
    <p class="font-bold text-text-primary text-[52px] text-center tracking-[-2.6px] leading-[1.04]">
      Designed for the worlds you already live in.
    </p>
    <div class="h-5"></div>
    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[900px]">
      Work, private life, and protected conversations should not interfere with each other inside one identity.
    </p>
  </div>

  <div class="flex gap-[22px]">
    {cases.map((c) => (
      <div class="bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8 h-[245px] w-[378px] flex flex-col">
        <p class="font-bold text-text-primary text-[25px] tracking-[-0.75px]">{c.title}</p>
        <div class="h-4"></div>
        <p class="text-text-secondary text-[15px] font-normal leading-[1.72]">{c.desc}</p>
      </div>
    ))}
  </div>
</section>