@page "/contact"

<PageTitle>Contact</PageTitle>

<div class="contact-container">
    <h1>Contact</h1>
    <p class="subtitle">I am open to opportunities</p>

    <div class="contact-card">
        <h2>Get in touch</h2>
        <p>
            I'm currently exploring new opportunities and would love to hear from you.
            Feel free to reach out via email or connect with me on LinkedIn.
        </p>
        <div class="contact-links">
            <a href="mailto:jonmcc.0723@gmail.com" class="contact-link">
                <span class="link-icon">&#9993;</span>
                <span>jonmcc.0723@gmail.com</span>
            </a>
            <a href="https://www.linkedin.com/in/jonmcc/" target="_blank" class="contact-link">
                <span class="link-icon">&#128100;</span>
                <span>LinkedIn</span>
            </a>
            <a href="https://git.jonathanmccaffrey.ca/JonathanMcCaffrey?tab=activity" target="_blank" class="contact-link">
                <span class="link-icon">&#128187;</span>
                <span>GitHub</span>
            </a>
        </div>
    </div>
</div>

<style>
    .contact-container {
        padding: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }

    h1 {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .subtitle {
        text-align: center;
        font-size: 1.2rem;
        color: #666;
        margin-bottom: 2rem;
        font-style: italic;
    }

    .contact-card {
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 2rem;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .contact-card h2 {
        margin-top: 0;
        color: #333;
    }

    .contact-card p {
        color: #555;
        line-height: 1.6;
    }

    .contact-links {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .contact-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background-color: #f9f9f9;
        border-left: 4px solid #4a90e2;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
        color: #2c3e50;
        font-weight: 600;
    }

    .contact-link:hover {
        background-color: #f0f0f0;
        border-left-color: #2563eb;
        padding-left: 1.25rem;
    }

    .link-icon {
        font-size: 1.5rem;
    }

    @@media (max-width: 768px) {
        h1 {
            font-size: 2rem;
        }
    }
</style>