---
import CrushBase from '../layouts/CrushBase.astro';
---

<CrushBase title="dangrubb.net">
  <div class="crush-page">
    <header class="top-banner">
      <div class="brand">
        <span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
      </div>
      <p class="tagline">OFFICIAL SITE</p>
    </header>

    <main class="logo-section">
      <div class="logo-wrapper">
        <img src="/src/img/pack-splatter.png" alt="" class="splatter-img">
        <div class="logo-overlay">
          <img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
        </div>
      </div>
    </main>

    <footer class="bottom-nav">
      <a href="https://ai.dangrubb.net" class="nav-item">AI</a>
      <span class="nav-dot">•</span>
      <a href="/blog" class="nav-item">BLOG</a>
      <span class="nav-dot">•</span>
      <a href="https://pi.dangrubb.net/jellyfin" class="nav-item">MEDIA</a>
      <span class="nav-dot">•</span>
      <a href="https://pi.dangrubb.net/nextcloud" class="nav-item">STORAGE</a>
      <span class="nav-dot">•</span>
      <a href="/cv" class="nav-item">CV</a>
      <span class="nav-dot">•</span>
      <a href="https://pi.dangrubb.net/dangit" class="nav-item">GIT</a>
    </footer>
  </div>
</CrushBase>

<style>
  .crush-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--crush-white);
  }

  .top-banner {
    text-align: center;
    padding: 40px 20px 20px;
    background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
    border-bottom: 3px solid var(--crush-teal);
  }

  .brand {
    font-family: 'Alfa Slab One', 'Georgia', serif;
    font-size: clamp(3rem, 10vw, 5rem);
    color: var(--crush-teal);
    letter-spacing: -2px;
    line-height: 1;
  }

  .brand-dot { color: var(--crush-teal-light); }
  .brand-tld { color: var(--crush-teal-dark); }

  .tagline {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--crush-teal);
    margin-top: 8px;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .logo-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
  }

  .logo-wrapper {
    position: relative;
    width: 450px;
    height: 450px;
  }

  .splatter-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .logo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .logo-img {
    width: 38%;
    height: 38%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
  }

  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 40px 20px 60px;
    background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
    border-top: 3px solid var(--crush-teal);
  }

  .nav-item {
    font-size: 18px;
    font-weight: 700;
    color: var(--crush-teal);
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 4px;
    background: rgba(0, 139, 139, 0.05);
    transition: all 0.3s ease;
  }

  .nav-item:hover {
    background: rgba(0, 139, 139, 0.15);
    color: var(--crush-teal-dark);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 139, 139, 0.2);
  }

  .nav-dot {
    font-size: 20px;
    color: var(--crush-teal);
    opacity: 0.5;
  }

  @media (max-width: 768px) {
    .top-banner { padding: 30px 15px 15px; }
    .logo-section { padding: 50px 15px; }
    .logo-wrapper { width: 320px; height: 320px; }
    .nav-item { font-size: 15px; padding: 6px 12px; }
  }

  @media (max-width: 480px) {
    .brand { font-size: 2.5rem; }
    .logo-wrapper { width: 240px; height: 240px; }
    .bottom-nav { flex-direction: column; gap: 4px; }
    .nav-dot { display: none; }
  }
</style>