{% extends "base.html" %}
{% load static %}

{% block title %}Contact{% endblock %}
{% block meta_description %}Contact Tecvico Corp — support for ViSERA software and general inquiries.{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="contact-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Get in Touch</div>
      <h1 class="page-hero-title" id="contact-heading">Contact Us</h1>
      <p class="page-hero-subtitle">Support for ViSERA software is available via email and Discord.</p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="contact-details-heading">
  <div class="container">
    <h2 class="sr-only" id="contact-details-heading">Contact Details</h2>
    <div class="contact-grid">

      <div class="contact-card glass-card fade-in">
        <div class="contact-icon" aria-hidden="true">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M5 8C5 6.895 5.895 6 7 6H25C26.105 6 27 6.895 27 8V22C27 23.105 26.105 24 25 24H7C5.895 24 5 23.105 5 22V8Z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M5 9L16 16L27 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </div>
        <h3 class="contact-card-title">Email Support</h3>
        <p class="contact-card-desc">
          For software support and general inquiries, reach us at:
        </p>
        <a href="mailto:support@tecvico.com" class="contact-email-link">
          support@tecvico.com
        </a>
      </div>

      <div class="contact-card glass-card fade-in">
        <div class="contact-icon" aria-hidden="true">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20.317 4.37a19.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.057.1 18.08.114 18.1.133 18.11a19.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-.03z"/>
          </svg>
        </div>
        <h3 class="contact-card-title">Discord Community</h3>
        <p class="contact-card-desc">
          Join our Discord server for community support, feature discussions, and announcements.
        </p>
        <a href="https://discord.gg/9XxA6pV9hb" class="btn-primary" target="_blank" rel="noopener noreferrer">
          Join Discord Forum
        </a>
      </div>

      <div class="contact-card glass-card fade-in">
        <div class="contact-icon" aria-hidden="true">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M16 3C11.029 3 7 7.029 7 12C7 19 16 29 16 29C16 29 25 19 25 12C25 7.029 20.971 3 16 3Z" stroke="currentColor" stroke-width="1.5"/>
            <circle cx="16" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
          </svg>
        </div>
        <h3 class="contact-card-title">Office Address</h3>
        <address class="contact-address">
          <p>BC Cancer Research Center</p>
          <p>675 West 10th Ave</p>
          <p>Office 6-112</p>
          <p>Vancouver, BC, V5Z 1L3</p>
          <p>Canada</p>
        </address>
      </div>

    </div>
  </div>
</section>

{% endblock %}