{% extends "base.html" %}

{% block title %}Contact - Charles Feinn // AppSimple{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/assets/css/pages/contact.css" />
{% endblock %}

{% block content %}
<!-- Contact Section -->
<h1 class="page-title">Get in Touch</h1>
<p class="page-intro">Ready to explore how AI can transform your business? Have questions about my services? I'd love to hear from you. Choose the method that works best for you.</p>

<div class="contact-methods">
    <div class="contact-method">
        <div class="contact-icon-container">
            <svg class="icon contact-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
            </svg>
        </div>
        <a href="mailto:charles@appsimple.io">charles@appsimple.io</a>
    </div>

    <div class="contact-method">
        <div class="contact-icon-container">
            <svg class="icon contact-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                <rect x="2" y="9" width="4" height="12"></rect>
                <circle cx="4" cy="4" r="2"></circle>
            </svg>
        </div>
        <a href="https://linkedin.com/in/charlesfeinn" target="_blank">LinkedIn</a>
    </div>
</div>

<h2 class="section-heading">Send a Message</h2>
<p class="section-intro">Fill out the form below, and I'll get back to you within 24 hours.</p>

<form id="contact-form" class="contact-form" action="https://formspree.io/f/xpwplpjw" method="POST">
    <div class="form-group">
        <label class="form-label" for="name">Name</label>
        <input type="text" id="name" name="name" class="form-input" required>
    </div>

    <div class="form-group">
        <label class="form-label" for="email">Email</label>
        <input type="email" id="email" name="email" class="form-input" required>
    </div>

    <div class="form-group">
        <label class="form-label" for="company">Company (Optional)</label>
        <input type="text" id="company" name="company" class="form-input">
    </div>

    <div class="form-group">
        <label class="form-label" for="message">How can I help?</label>
        <textarea id="message" name="message" class="form-textarea" required></textarea>
    </div>

    <!-- Add a form status element that will be hidden by default -->
    <div id="form-status" class="form-status" style="display: none;"></div>

    <button type="submit" class="form-button">Send Message</button>
</form>
{% endblock %}