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

<BaseLayout title="Contact" description="Get in touch with The Computer Guru Show for questions, sponsorships, or guest appearances.">
  <!-- Hero -->
  <section class="hero section">
    <div class="container">
      <span class="badge fade-in">Contact</span>
      <h1 class="hero__title fade-in">Get in Touch</h1>
      <p class="hero__subtitle fade-in">
        Questions, feedback, or business inquiries -- we would love to hear from you.
      </p>
    </div>
  </section>

  <!-- Contact Form -->
  <section class="section">
    <div class="container">
      <div class="form-card card fade-in">
        <form action="#" method="post" class="contact-form">
          <div class="form-group">
            <label for="contact-name">Name</label>
            <input
              type="text"
              id="contact-name"
              name="name"
              required
              autocomplete="name"
              placeholder="Your name"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="contact-email">Email</label>
            <input
              type="email"
              id="contact-email"
              name="email"
              required
              autocomplete="email"
              placeholder="your@email.com"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="contact-subject">Subject</label>
            <select id="contact-subject" name="subject" required class="form-select">
              <option value="" disabled selected>Select a subject</option>
              <option value="general">General</option>
              <option value="sponsorship">Sponsorship</option>
              <option value="guest">Guest Appearance</option>
              <option value="technical">Technical Issue</option>
            </select>
          </div>
          <div class="form-group">
            <label for="contact-message">Message</label>
            <textarea
              id="contact-message"
              name="message"
              required
              rows="6"
              placeholder="Your message..."
              class="form-textarea"
            ></textarea>
          </div>
          <button type="submit" class="btn btn--primary form-submit">Send Message</button>
        </form>
      </div>
    </div>
  </section>

  <!-- Sponsorship -->
  <section class="section">
    <div class="container">
      <div class="sponsor-card card fade-in">
        <div class="sponsor-card__icon">
          <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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        </div>
        <h2>Sponsor the Show</h2>
        <p>
          Reach a dedicated audience of tech enthusiasts. The Computer Guru Show offers sponsorship
          opportunities including pre-roll, mid-roll, and post-roll placements, as well as dedicated
          segments and custom integrations.
        </p>
        <p class="sponsor-card__note">
          For sponsorship inquiries, select "Sponsorship" in the contact form above or reach out directly.
        </p>
      </div>
    </div>
  </section>

  <!-- Social Links -->
  <section class="section">
    <div class="container">
      <h2 class="section__title fade-in">Find Us Online</h2>
      <div class="grid grid--3">
        <a href="#" class="card social-card fade-in">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          <span>X / Twitter</span>
        </a>
        <a href="#" class="card social-card fade-in">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.086-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.332-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.086-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.332-.946 2.418-2.157 2.418z"/></svg>
          <span>Discord</span>
        </a>
        <a href="/feed.xml" class="card social-card fade-in">
          <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="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>
          <span>RSS Feed</span>
        </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: 520px;
    margin-inline: auto;
  }

  /* Form Card */
  .form-card {
    max-width: 600px;
    margin-inline: auto;
    padding: var(--space-8);
  }
  .form-group {
    margin-bottom: var(--space-6);
  }
  .form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
  }
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    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-sans);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
  }
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
    border-color: var(--color-accent);
  }
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-text-muted);
  }
  .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--space-8);
  }
  .form-textarea {
    resize: vertical;
    min-height: 120px;
  }
  .form-submit {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
  }

  /* Sponsor Card */
  .sponsor-card {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    padding: var(--space-8);
  }
  .sponsor-card__icon {
    color: var(--color-warning);
    margin-bottom: var(--space-4);
  }
  .sponsor-card h2 {
    margin-bottom: var(--space-4);
  }
  .sponsor-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.8;
    margin-bottom: var(--space-4);
  }
  .sponsor-card__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  /* Social Cards */
  .social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--color-text-primary);
    cursor: pointer;
  }
  .social-card:hover {
    color: var(--color-accent);
  }
  .social-card span {
    font-size: var(--text-sm);
    font-weight: 600;
  }
</style>