---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import { Image } from 'astro:assets'
import { motion } from 'motion/react'

import browserCollapsed from '../assets/collapsed.png'
import browseMultiToolbar from '../assets/multiple-toolbar.png'
import browserSingleToolbar from '../assets/single-toolbar.png'
import tutaLogo from '../assets/tuta-logo.png'
import Button from './Button.astro'
import { ArrowRight } from 'lucide-astro'

import { getTitleAnimation, getZoomInAnimation } from '../animations'
---

<section id="sponsors" class="px-4 lg:flex-row lg:px-12 lg:py-32 xl:px-24">
  <div class="mx-auto flex flex-col px-6 lg:w-1/2 lg:px-0 lg:text-center">
    <motion.span client:load {...getTitleAnimation(0.2)}>
      <Title class="font-bold">Our Sponsors</Title>
    </motion.span>
    <motion.span client:load {...getTitleAnimation(0.4)}>
      <Description>
        We are grateful to our sponsors for their support. They help us to keep
        the project alive.<br />You can also be part of this journey by donating <a
          href="/donate"
          class="text-coral">here</a
        >!
      </Description>
    </motion.span>
    <div class="relative mt-8 flex items-center justify-center">
      <motion.span client:load {...getTitleAnimation(0.6)}>
        <a href="https://tuta.com/" target="_blank" class="w-fit">
          <Image src={tutaLogo} alt="Tuta" class="h-16 w-fit object-contain" />
        </a>
      </motion.span>
    </div>
  </div>
</section>
<section
  id="customization"
  class="relative flex w-full flex-col overflow-y-hidden px-10 py-36 pt-24 md:px-12 lg:flex-row lg:gap-12 xl:px-52"
>
  <div>
    <motion.span client:load {...getTitleAnimation(0.2)}>
      <Title
        >Customizable<br class="md:hidden" /> to <br
          class="hidden md:block"
        />the last pixel</Title
      >
    </motion.span>
    <motion.span client:load {...getTitleAnimation(0.4)}>
      <Description class="lg:w-1/2 lg:px-0">
        Experience a new standard in web browsing with Zen Browser. Designed from the ground up for complete customization, Zen allows you to tailor every aspect of your browsing experience to meet your specific needs. Your imagination is the limit, literally.
      </Description>
    </motion.span>
    <div class="mt-4 flex gap-4">
      <motion.span client:load {...getTitleAnimation(0.6)}>
        <Button isPrimary href="/mods">
          Explore Zen Mods
          <ArrowRight className="size-4" />
        </Button>
      </motion.span>
    </div>
  </div>
  <div
    class="relative ml-16 mt-32 flex h-32 md:mt-52 lg:mx-0 lg:mt-0 lg:w-1/2"
    id="browser-images"
  >
    <Image
      src={browserCollapsed}
      alt="Zen browser"
      class="absolute left-[65%] top-[5%] w-2/3 -translate-x-1/2 rounded-md shadow-md"
    />
    <Image
      src={browseMultiToolbar}
      alt="Zen browser"
      class="absolute left-1/2 top-1/2 mx-auto w-2/3 -translate-x-1/2 transform rounded-md"
    />
    <Image
      src={browserSingleToolbar}
      alt="Zen browser"
      class="absolute left-[10%] top-[15%] z-10 w-2/3 -translate-x-1/2 rounded-md shadow-md"
    />
  </div>
</section>
<style>
  #browser-images {
    & img:nth-child(1) {
      transform: rotate(5deg) scale(1.05) translateX(-52%) translateY(-10%);
    }

    & img:nth-child(2) {
      transform: rotate(2deg) scale(1.05) translateX(-50%) translateY(10%);
    }

    & img:nth-child(3) {
      transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
    }
  }
</style>