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

<BaseLayout title="About" description="Learn about The Computer Guru Show and host Mike Swanson.">
  <!-- Hero -->
  <section class="hero section">
    <div class="container">
      <span class="badge fade-in">About</span>
      <h1 class="hero__title fade-in">About the Show</h1>
      <p class="hero__subtitle fade-in">
        Helping you deal with all of your technology needs while treating you like a person in the process.
      </p>
    </div>
  </section>

  <!-- Host Bio -->
  <section class="section">
    <div class="container">
      <div class="host-card card fade-in">
        <picture class="host-card__photo">
          <source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
          <img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
        </picture>
        <h2 class="host-card__name">Mike Swanson</h2>
        <p class="host-card__title">The Computer Guru</p>
        <p class="host-card__bio">
          Mike Swanson has been the Tucson community's go-to resource for technology
          solutions that make sense for over 20 years. Since founding Arizona Computer Guru
          in 2001 and launching The Computer Guru Show in 2009, his mission has stayed the
          same: solve your technology problems while treating you like a person in the process.
          Whether you're a home user battling a stubborn computer or a business owner looking
          for IT support that actually speaks your language, The Computer Guru Show delivers
          straight answers without the jargon or the drama. No politics, no fluff -- just
          real solutions from someone who's been in the trenches.
        </p>
        <div class="host-card__meta">
          <span class="host-card__location">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
            Tucson, Arizona
          </span>
        </div>
      </div>
    </div>
  </section>

  <!-- Show History Timeline -->
  <section class="section">
    <div class="container">
      <h2 class="section__title fade-in">Show History</h2>
      <div class="timeline">
        <div class="timeline__item fade-in">
          <div class="timeline__marker"></div>
          <div class="timeline__content card">
            <span class="timeline__year">2009</span>
            <h3>Show Launches</h3>
            <p>The Computer Guru Show debuts on Tucson radio, bringing technology discussion to the airwaves with a mission to make tech accessible and fun for everyone.</p>
          </div>
        </div>
        <div class="timeline__item fade-in">
          <div class="timeline__marker"></div>
          <div class="timeline__content card">
            <span class="timeline__year">2009 - 2018</span>
            <h3>10 Seasons, 194 Episodes</h3>
            <p>Over nearly a decade the show covers the biggest stories in technology -- net neutrality battles, the rise of streaming, smartphone evolution, hacking scandals, self-driving cars, and the early days of AI. Every episode is part of the archive.</p>
          </div>
        </div>
        <div class="timeline__item fade-in">
          <div class="timeline__marker"></div>
          <div class="timeline__content card">
            <span class="timeline__year">2018</span>
            <h3>Hiatus</h3>
            <p>The show goes on hiatus after Season 10 to recharge and rethink the format for a rapidly changing tech landscape.</p>
          </div>
        </div>
        <div class="timeline__item fade-in">
          <div class="timeline__marker timeline__marker--active"></div>
          <div class="timeline__content card">
            <span class="timeline__year">2026</span>
            <h3>The Return</h3>
            <p>The Computer Guru Show returns with a fresh perspective, tackling artificial intelligence, privacy, space technology, and everything shaping our digital future.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- What We Cover -->
  <section class="section">
    <div class="container">
      <h2 class="section__title fade-in">What We Cover</h2>
      <div class="grid grid--3">
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
          </div>
          <h3>Tech News</h3>
          <p>The stories that matter, explained without the jargon.</p>
        </div>
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <h3>Security and Privacy</h3>
          <p>Protecting your data, your devices, and your digital life.</p>
        </div>
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
          </div>
          <h3>Artificial Intelligence</h3>
          <p>Understanding AI tools, trends, and their impact on daily life.</p>
        </div>
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
          </div>
          <h3>Space Technology</h3>
          <p>The new space race and the technology making it possible.</p>
        </div>
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
          </div>
          <h3>Gadgets</h3>
          <p>Hands-on coverage of the devices worth your attention.</p>
        </div>
        <div class="card topic-card fade-in">
          <div class="topic-card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </div>
          <h3>How-Tos</h3>
          <p>Practical guides to get more from your technology.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact CTA -->
  <section class="section">
    <div class="container">
      <div class="cta-card card fade-in">
        <h2>Get in Touch</h2>
        <p>Have a question, topic suggestion, or just want to say hello? We would love to hear from you.</p>
        <a href="/contact" class="btn btn--primary">Contact Us</a>
      </div>
    </div>
  </section>
</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: 600px;
    margin-inline: auto;
  }

  /* Host Card */
  .host-card {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    padding: var(--space-12) var(--space-8);
  }
  .host-card__photo {
    display: block;
    margin-bottom: var(--space-6);
  }
  .host-card__photo img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 50%;
    margin-inline: auto;
    border: 3px solid var(--color-accent);
    box-shadow: 0 0 24px var(--color-accent-glow);
  }
  .host-card__name {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
  }
  .host-card__title {
    font-size: var(--text-lg);
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: var(--space-6);
  }
  .host-card__bio {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-6);
  }
  .host-card__meta {
    display: flex;
    justify-content: center;
  }
  .host-card__location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* Timeline */
  .timeline {
    position: relative;
    max-width: 700px;
    margin-inline: auto;
    padding-left: var(--space-8);
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
  }
  .timeline__item {
    position: relative;
    margin-bottom: var(--space-8);
  }
  .timeline__item:last-child {
    margin-bottom: 0;
  }
  .timeline__marker {
    position: absolute;
    left: calc(-1 * var(--space-8) + 8px);
    top: var(--space-6);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    z-index: 1;
  }
  .timeline__marker--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 12px var(--color-accent-glow);
  }
  .timeline__content h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
  .timeline__content p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }
  .timeline__year {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
  }

  /* Topic Cards */
  .topic-card {
    text-align: center;
    padding: var(--space-8) var(--space-6);
  }
  .topic-card__icon {
    color: var(--color-accent);
    margin-bottom: var(--space-4);
  }
  .topic-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }
  .topic-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  /* CTA Card */
  .cta-card {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    max-width: 600px;
    margin-inline: auto;
  }
  .cta-card h2 {
    margin-bottom: var(--space-4);
  }
  .cta-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
  }
</style>