---
import BaseLayout from '../layouts/BaseLayout.astro';
import { platforms } from '../data/platforms';
---

<BaseLayout title="Subscribe" description="Subscribe to The Computer Guru Show on your favorite podcast platform.">
  <!-- Hero -->
  <section class="hero section">
    <div class="container">
      <span class="badge fade-in">Subscribe</span>
      <h1 class="hero__title fade-in">Subscribe to The Computer Guru Show</h1>
      <p class="hero__subtitle fade-in">
        Never miss an episode. Choose your favorite platform.
      </p>
    </div>
  </section>

  <!-- Platform Grid -->
  <section class="section">
    <div class="container">
      <div class="grid grid--3">
        {platforms.map((platform) => (
          <a href={platform.url} class="card platform-card fade-in" target={platform.url.startsWith('http') ? '_blank' : undefined} rel={platform.url.startsWith('http') ? 'noopener noreferrer' : undefined}>
            <div class="platform-card__icon" data-platform={platform.icon}>
              {platform.icon === 'apple' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
              )}
              {platform.icon === 'spotify' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
              )}
              {platform.icon === 'google' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm-.001 4.5a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5 7.5 7.5 0 0 1-7.5-7.5 7.5 7.5 0 0 1 7.5-7.5zm0 2a5.5 5.5 0 0 0-5.5 5.5 5.5 5.5 0 0 0 5.5 5.5 5.5 5.5 0 0 0 5.5-5.5 5.5 5.5 0 0 0-5.5-5.5zm0 2a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 12a3.5 3.5 0 0 1 3.499-3.5z"/></svg>
              )}
              {platform.icon === 'overcast' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14l2-4 2 4"/><path d="M12 14l2-4 2 4"/></svg>
              )}
              {platform.icon === 'pocketcasts' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
              )}
              {platform.icon === 'rss' && (
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
              )}
            </div>
            <h3 class="platform-card__name">{platform.name}</h3>
            <span class="btn btn--ghost platform-card__btn">Subscribe</span>
          </a>
        ))}
      </div>
    </div>
  </section>

  <!-- RSS Feed Section -->
  <section class="section">
    <div class="container">
      <div class="rss-section fade-in">
        <h2 class="section__title">RSS Feed</h2>
        <p class="rss-section__desc">
          Prefer a dedicated podcast app or RSS reader? Copy the feed URL below and add it manually.
          RSS (Really Simple Syndication) lets you subscribe to content updates without needing
          a specific platform account. Most podcast apps have an "Add by URL" option where you
          can paste this link.
        </p>
        <div class="rss-input-group">
          <input
            type="text"
            id="rss-url"
            value="https://radio.azcomputerguru.com/feed.xml"
            readonly
            class="rss-input"
            aria-label="RSS Feed URL"
          />
          <button id="copy-rss" class="btn btn--primary" type="button">Copy</button>
        </div>
        <p id="copy-feedback" class="rss-feedback" aria-live="polite"></p>
      </div>
    </div>
  </section>

  <!-- What to Expect -->
  <section class="section">
    <div class="container">
      <h2 class="section__title fade-in">What to Expect</h2>
      <div class="grid grid--3">
        <div class="card expect-card fade-in">
          <h3>New Episodes</h3>
          <p>Fresh episodes are on the way. Subscribe now so you are ready when they drop.</p>
          <span class="badge">Coming Soon</span>
        </div>
        <div class="card expect-card fade-in">
          <h3>Full Archive</h3>
          <p>All 194 episodes from 10 seasons of the original run are available right now.</p>
          <span class="badge">Available</span>
        </div>
        <div class="card expect-card fade-in">
          <h3>Show Notes</h3>
          <p>Every episode includes detailed show notes with links to the topics discussed.</p>
          <span class="badge">Available</span>
        </div>
      </div>
    </div>
  </section>

  <script is:inline>
    document.getElementById('copy-rss').addEventListener('click', function() {
      var input = document.getElementById('rss-url');
      var feedback = document.getElementById('copy-feedback');
      navigator.clipboard.writeText(input.value).then(function() {
        feedback.textContent = 'Copied to clipboard.';
        feedback.className = 'rss-feedback rss-feedback--success';
        setTimeout(function() {
          feedback.textContent = '';
          feedback.className = 'rss-feedback';
        }, 3000);
      }).catch(function() {
        input.select();
        feedback.textContent = 'Press Ctrl+C to copy.';
        feedback.className = 'rss-feedback';
      });
    });
  </script>
</BaseLayout>

<style>
  .hero {
    text-align: center;
    padding-block: var(--space-16) var(--space-8);
  }
  .hero__title {
    font-size: var(--text-4xl);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 520px;
    margin-inline: auto;
  }

  /* Platform Cards */
  .platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    cursor: pointer;
    color: var(--color-text-primary);
  }
  .platform-card:hover {
    color: var(--color-text-primary);
  }
  .platform-card__icon {
    color: var(--color-accent);
    margin-bottom: var(--space-4);
    transition: transform var(--transition-base);
  }
  .platform-card:hover .platform-card__icon {
    transform: scale(1.1);
  }
  .platform-card__name {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
  }
  .platform-card__btn {
    margin-top: auto;
  }

  /* RSS Section */
  .rss-section {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }
  .rss-section__desc {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
    line-height: 1.8;
  }
  .rss-input-group {
    display: flex;
    gap: var(--space-2);
    max-width: 500px;
    margin-inline: auto;
  }
  .rss-input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .rss-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
  }
  .rss-feedback {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    min-height: 1.4em;
  }
  .rss-feedback--success {
    color: var(--color-success);
  }

  /* Expect Cards */
  .expect-card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
  }
  .expect-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
  }
  .expect-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
  }
</style>