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

<BaseLayout title="Hidden Den Cafe">
  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content fade-in">
          <h1 class="hero-title">🏡 Hidden Den Cafe</h1>
          <p class="hero-subtitle">A cozy corner of the internet</p>
        </div>
      </div>
    </section>

    <!-- About Hidden Den Section -->
    <section class="section about-den">
      <div class="container">
        <div class="card fade-in">
          <h2>☕ About Hidden Den</h2>
          <p>
            Welcome to Hidden Den Cafe - a warm, self-hosted space where technology 
            meets comfort. This is a personal corner of the internet built with love, 
            care, and a strong belief in privacy and open-source values.
          </p>
          <p>
            Everything here runs on self-hosted infrastructure, giving complete control 
            over data and services. No cloud dependencies, no tracking, just a cozy 
            digital home.
          </p>
        </div>
      </div>
    </section>

    <!-- About Mats Section -->
    <section class="section about-me">
      <div class="container">
        <div class="card fade-in">
          <h2>🦊 About Me</h2>
          <p>
            Hey there! I'm Mats, a gay furry developer who loves building things 
            and being part of the warm, welcoming furry community. I'm passionate 
            about self-hosting, open-source software, and creating cozy spaces 
            both online and off.
          </p>
          <p>
            I work primarily with Python and Flask, though I'm always learning new 
            things (currently exploring JavaScript and the C stack). When I get those 
            surges of creative energy, I love diving into new projects - from Reddit 
            downloaders to Telegram sticker tools, and everything in between.
          </p>
          <p>
            Coffee enthusiast ☕ • Linux lover 🐧 • Self-hosting advocate 🏠
          </p>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="section services">
      <div class="container">
        <div class="card fade-in">
          <h2>🛠️ Services</h2>
          <p>Here are the services currently running in the den:</p>
          
          <div class="service-list">
            <div class="service-item">
              <h3>
                <a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">
                  📦 Gitea
                </a>
              </h3>
              <p>Self-hosted Git service for all my projects and code repositories.</p>
            </div>
            
            <div class="service-item coming-soon">
              <h3>🔜 More Coming Soon</h3>
              <p>The den is always growing! More services will be added as they're developed and deployed.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Support Section -->
    <section class="section support">
      <div class="container">
        <div class="card fade-in">
          <h2>💝 How to Help Out</h2>
          <p>
            If you'd like to support the Hidden Den and help keep the lights on, 
            here are some ways you can contribute:
          </p>
          
          <div class="support-list">
            <div class="support-item">
              <h3>🌟 Share & Spread the Word</h3>
              <p>Tell others about the projects and services hosted here!</p>
            </div>
            
            <div class="support-item">
              <h3>🐛 Report Issues</h3>
              <p>Found a bug or have a suggestion? Let me know!</p>
            </div>
            
            <div class="support-item">
              <h3>☕ Buy Me a Coffee</h3>
              <p>
                Donations help cover server costs and keep the den cozy. 
                <span class="coming-soon-text">(Payment links coming soon!)</span>
              </p>
            </div>

            <div class="support-item">
              <h3>🤝 Contribute</h3>
              <p>Check out the projects on Gitea - contributions are always welcome!</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <p>Made with 💖 by Mats</p>
        <p class="footer-links">
          <a href="https://git.hiddenden.cafe" target="_blank" rel="noopener noreferrer">Gitea</a>
          <span class="separator">•</span>
          <a href="https://dmush.cloud" target="_blank" rel="noopener noreferrer">dmush.cloud</a>
        </p>
      </div>
    </footer>
  </main>
</BaseLayout>

<style>
  main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
  }

  /* Hero Section */
  .hero {
    padding: var(--space-xl) 0;
    text-align: center;
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-light) 100%);
  }

  .hero-title {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-dim);
  }

  /* Sections */
  .section {
    padding: var(--space-lg) 0;
  }

  .card {
    background: var(--color-bg-light);
    border-radius: 12px;
    padding: var(--space-lg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 165, 116, 0.1);
  }

  .card h2 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
  }

  .card p {
    margin-bottom: var(--space-md);
    color: var(--color-text);
  }

  .card p:last-child {
    margin-bottom: 0;
  }

  /* Services Section */
  .service-list {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .service-item {
    background: var(--color-bg);
    padding: var(--space-md);
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
  }

  .service-item h3 {
    margin-bottom: var(--space-xs);
    font-size: 1.25rem;
  }

  .service-item p {
    color: var(--color-text-dim);
    margin: 0;
  }

  .service-item.coming-soon {
    border-left-color: var(--color-warm);
    opacity: 0.8;
  }

  /* Support Section */
  .support-list {
    margin-top: var(--space-md);
    display: grid;
    gap: var(--space-md);
  }

  .support-item {
    background: var(--color-bg);
    padding: var(--space-md);
    border-radius: 8px;
  }

  .support-item h3 {
    margin-bottom: var(--space-xs);
    font-size: 1.25rem;
  }

  .support-item p {
    color: var(--color-text-dim);
    margin: 0;
  }

  .coming-soon-text {
    font-style: italic;
    color: var(--color-warm);
  }

  /* Footer */
  .footer {
    margin-top: auto;
    padding: var(--space-lg) 0;
    text-align: center;
    border-top: 1px solid rgba(212, 165, 116, 0.2);
    background: var(--color-bg-light);
  }

  .footer p {
    color: var(--color-text-dim);
    margin-bottom: var(--space-xs);
  }

  .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
  }

  .separator {
    color: var(--color-warm);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2rem;
    }

    .hero-subtitle {
      font-size: 1rem;
    }

    .card h2 {
      font-size: 1.5rem;
    }
  }
</style>