library/apps/frontend/src/app/components/footer/footer.component.ts

/**
 * @copyright 2026 NHCarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [CommonModule],
  template: `
    <footer class="footer" role="contentinfo">
      <div class="footer-content">
        <div class="cta-section">
          <section class="cta-card discord" aria-labelledby="discord-heading">
            <h2 id="discord-heading">Join the Community</h2>
            <p>Want to chat about what we're reading, playing, or listening to? Got recommendations? Come hang out!</p>
            <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-discord">
              Join our Discord<span class="sr-only"> (opens in new window)</span>
            </a>
          </section>

          <section class="cta-card donate" aria-labelledby="donate-heading">
            <h2 id="donate-heading">Support Naomi</h2>
            <p>Enjoying the vibes? Your support helps keep the servers running and the coffee flowing!</p>
            <a href="https://donate.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-donate">
              Buy us a coffee<span class="sr-only"> (opens in new window)</span>
            </a>
          </section>
        </div>

        <div class="footer-bottom">
          <p>&copy; {{ currentYear }} NHCarrigan. Made with love.</p>
        </div>
      </div>
    </footer>
  `,
  styles: [`
    .footer {
      background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
      color: var(--witch-moon);
      padding: 3rem 2rem 1.5rem;
      margin-top: 4rem;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
    }

    .cta-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .cta-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      border: 2px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .cta-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .cta-card h2 {
      margin: 0 0 0.75rem 0;
      font-size: 1.25rem;
      color: var(--witch-moon);
    }

    .cta-card p {
      margin: 0 0 1.25rem 0;
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--witch-lavender);
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .btn-discord {
      background: #5865F2;
      color: white;
    }

    .btn-discord:hover {
      background: #4752C4;
    }

    .btn-donate {
      background: var(--witch-rose);
      color: var(--witch-moon);
    }

    .btn-donate:hover {
      background: var(--witch-mauve);
      color: var(--witch-purple);
    }

    .footer-bottom {
      text-align: center;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .footer-bottom p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--witch-lavender);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  `]
})
export class FooterComponent {
  currentYear = new Date().getFullYear();
}