---
const floatCards = [
  {
    icon: '☷',
    title: 'Work / Private / Protected',
    desc: 'One account, multiple communication worlds.',
    pos: 'left-[-40px] top-[75.5px]',
  },
  {
    icon: '✦',
    title: 'AI Summary Ready',
    desc: 'Long conversations and group highlights organized automatically.',
    pos: 'left-[180px] top-[270px]',
  },
  {
    icon: '◌',
    title: 'Protected Hidden Space',
    desc: 'When privacy needs more, enter a protected space.',
    pos: 'left-[20px] top-[540px]',
  },
]
---

<section class="relative w-full overflow-hidden">
  <img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />

  <div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
    <!-- Left column -->
    <div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
      <div class="flex flex-col gap-6">
        <div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
          <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦  Available on iOS and Android</p>
        </div>

        <div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
          <p>One User.</p>
          <p>Multiple Worlds.</p>
        </div>

        <p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
          Talk Pro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, Talk Pro helps people stay connected in one familiar experience.
        </p>
      </div>

      <div class="flex items-center gap-[14px]">
        <button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
          Download Talk Pro  ↓
        </button>
        <button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
          Explore Features  →
        </button>
      </div>

      <div class="flex items-center gap-[10px]">
        {['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
          <div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
            <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
          </div>
        ))}
      </div>
    </div>

    <!-- Phone mockup -->
    <div class="relative h-[690px] w-[430px] shrink-0">
      <div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
        <img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
      </div>

      {floatCards.map((card) => (
        <div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
          <div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
            <span class="text-brand font-bold text-[18px]">{card.icon}</span>
          </div>
          <div class="flex flex-col gap-1">
            <p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
            <p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>