---
import { getCollection } from "astro:content"
import PageLayout from "@layouts/PageLayout.astro"
import ArrowCard from "@components/ArrowCard"
import StackCard from "@components/StackCard.astro"
import { SITE, SOCIALS } from "@consts"
import TwinklingStars from "@components/TwinklingStars.astro"
import MeteorShower from "@components/MeteorShower.astro"

const posts = (await getCollection("blog"))
  .filter(post => !post.data.draft)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0,3)

const projects = (await getCollection("projects"))
  .filter(project => !project.data.draft)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0,3)

const stack = [
  { 
    text: "Astro", 
    icon: "astro", 
    href: "https://astro.build" 
  },
  { 
    text: "Javascript", 
    icon: "javascript", 
    href: "https://www.javascript.com" 
  },
  { 
    text: "Typescript", 
    icon: "typescript", 
    href: "https://www.typescriptlang.org" 
  },
  { 
    text: "Tailwind", 
    icon: "tailwind", 
    href: "https://tailwindcss.com" 
  },
]
---

<PageLayout title="Home" description={SITE.DESCRIPTION}>

  <!-- Light Mode: Particles -->
  <div class='absolute inset-0 block dark:hidden'>
    <div id='particles1' class='fixed inset-0'></div>
    <div id='particles2' class='fixed inset-0'></div>
    <div id='particles3' class='fixed inset-0'></div>
  </div>

  <!-- Dark Theme: Stars -->
  <div class='absolute inset-0 bg-black hidden dark:block'>
    <div id='stars1' class='fixed inset-0'></div>
    <div id='stars2' class='fixed inset-0'></div>
    <div id='stars3' class='fixed inset-0'></div>
  </div>

  <!-- Dark Theme: Twinkling Stars / Metors -->
  <div id="galaxy" class="fixed inset-0">
    <div class="hidden dark:block">
      <TwinklingStars/>
      <MeteorShower/>
    </div>
  </div>

  <script is:inline src="/js/bg.js"></script>

  
  <!-- HERO -->
  <section class="relative h-screen w-full">
    <div id="planetcont" class='animate absolute inset-0 top-1/4 overflow-hidden'>
      <div id="crescent" class='absolute top-0 left-1/2 -translate-x-1/2 w-[250vw] min-h-[100vh] aspect-square rounded-full p-[1px] bg-gradient-to-b from-black/25 dark:from-white/75 from-0% to-transparent to-5%'>
        <div id="planet" class='w-full h-full bg-white dark:bg-black rounded-full p-[1px] overflow-hidden flex justify-center'>
          <div id="blur" class='w-full h-20 rounded-full bg-neutral-900/25 dark:bg-white/25 blur-3xl'/>
        </div>
      </div>
    </div>
    <div class="animate absolute h-full w-full flex items-center justify-center">
      <div class='relative w-full h-full flex items-center justify-center'>
        <div class='p-5 text-center'>
          <p class='animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75'>
            Время пришло!
          </p>
          <p class='animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white'>
            Для новых горизонтов возможностей! 
          </p>
          <p class='animated text-sm md:text-base lg:text-lg opacity-75'>
            Мы расскажем вам про новое поколение ПЛАТ УПРАВЛЕНИЯ.
          </p>
          <div id="ctaButtons" class='animated flex flex-wrap gap-4 justify-center mt-5'>
            <a href='/blog' class='py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend'>
              Читать блог
            </a>
            <a href='/work' class='py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend'>
              Промсмотреть работу
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="relative w-full" style=''>
    <div style='justify-content: center; display: flex'>
      <img src='/img04.jpg' style='max-width:360px; height:auto; border-radius: 1em;'/>
    </div>
  </section>
  <div class="relative bg-white dark:bg-black">
    <div class="mx-auto max-w-screen-sm p-5 space-y-24 pb-16">

      <!-- About Section -->
      <section class="animate">
        <article>
          <p>Мы команда <b><i>инженеров</i></b>, <b><i>програмистов</i></b>, <b><i>архитекторов</i></b>, <b><i>конструкторов</i></b>, <b><i>тестировщиков</i></b>, которвые собрались для общего дела.</p>
          <p>Проектирование и изготовление печатных плат – это важный этап в создании электронных устройств. Наша компания специализируется на разработке и программировании плат управления, которые могут быть частью различных устройств, от беспилотных летательных аппаратов (БПЛА) до умных домов и систем оповещения.</p>
          <p><b>Вот несколько ключевых аспектов</b>, <b>которые следует учесть при проектировании и изготовлении печатных плат</b>:</p>
          <p>
            <b>Определение правил проектирования платы:</b>
              <p>Прежде чем начать размещение компонентов, важно определить правила проектирования печатной платы. Это включает в себя выбор метода изготовления, определение стека платы и установку ограничений для обеспечения производительности и надежности.</p>
            <b>Размещение компонентов:</b>
              <p>Хорошее размещение компонентов обеспечивает решаемость и простоту трассировки. Группировка компонентов по типу помогает предотвратить необходимость долгой трассировки по всей плате.</p>
            <b>Расположение питания и заземления:</b>
              <p>Важно правильно разместить питание и заземление в стеке платы. Это включает в себя учет смешанных сигналов и обеспечение надежной работы.</p>
            <b>Соблюдение механических ограничений:</b>
              <p>Расположение разъемов и соблюдение размеров корпуса также важно для успешного проектирования.</p>
        </article>
      </section>

      <!-- Blog Preview Section -->
      <section class="animate">
        <div class="space-y-4">
          <div class="flex justify-between">
            <p class="font-semibold text-black dark:text-white">
              Наши последние посты
            </p>
            <a href="/blog" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
              <span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
                Все посты
              </span>
            </a>
          </div>
          <ul class="space-y-4">
            {posts.map((post) => (
              <li>
                <ArrowCard entry={post} />
              </li>
            ))}
          </ul>
        </div>
      </section>

      <!-- Tech Stack Section -->
      <section class="animate">
        <div class="space-y-4">
          <p class="font-semibold text-black dark:text-white">
            Сайт сделан на следующих технологиях
          </p>
          <div class="flex flex-wrap items-center gap-2 mt-5">
            {stack.map(item => (
              <StackCard 
                text={item.text}
                icon={item.icon}
                href={item.href}
              />
            ))}
          </div>
          <div>
            Демонстрируя реактивность и статичность, специального фреймворка
            <a href="https://www.solidjs.com/" target="_blank" class="w-fit group underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
              <span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
                SolidJS
              </span>
            </a>
          </div>
        </div>
      </section>

      <!-- Project Preview Section -->
      <section class="animate">
        <div class="space-y-4">
          <div class="flex justify-between">
            <p class="font-semibold text-black dark:text-white">
              Последние проекты
            </p>
            <a href="/projects" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
              <span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
                Все проекты
              </span>
            </a>
          </div>
          <ul class="space-y-4">
            {projects.map((project) => (
              <li>
                <ArrowCard entry={project} />
              </li>
            ))}
          </ul>
        </div>
      </section>

      <!-- Contact Section -->
      <section class="animate">
        <div>
          <p class="font-semibold text-black dark:text-white">
            Для связи
          </p>
          <p>
            у нас есть email и телеграм бот обратной связи, так же есть каналы в telegram, youtube, github.
          </p>
          <div class="grid grid-cols-4 gap-y-2 mt-4 auto-cols-min">
            {SOCIALS.map(social => (
              <div class="col-span-1 flex items-center gap-1">
                <span class="whitespace-nowrap truncate">
                  {social.NAME}
                </span>
              </div>
              <div class="col-span-3 truncate">
                <a href={social.HREF} target="_blank" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
                  <span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
                    {social.TEXT}
                  </span>
                </a>
              </div>
            ))}
        </div>
      </section>
    </div>
  </div>
</PageLayout>
