{% extends "base.html" %}

{% block title %}Contact{% endblock %}

{% block content %}

<section class="text-center py-20 bg-gradient-to-br from-red-800 to-orange-400 text-white">
  <h1 class="text-5xl font-extrabold mb-4">Contact Me</h1>
  <p class="text-xl mb-6">Looking to connect? Here's where you can reach me!</p>
</section>

<section class="bg-black text-white py-16 px-6 md:px-20">
  <div class="max-w-4xl mx-auto">
    <div class="grid md:grid-cols-2 gap-12">
      
      <!-- Contact Info -->
      <div>
        <h2 class="text-3xl font-bold mb-4 text-orange-600">Get in Touch</h2>
        <p class="mb-4">Feel free to drop me a message via the form or through any of the channels below:</p>
        <ul class="space-y-3 text-lg">
          <li><strong>Email:</strong> <a href="mailto:you@example.com" class="text-blue-600 hover:underline">ben@bennyshouse.net</a></li>
          <li><strong>Business Website:</strong> <a href="https://bennyshouse.net" class="text-blue-600 hover:underline">bennyshouse.net</a></li>
          <li><strong>Location:</strong> Canyon, Texas</li>
        </ul>
        <div class="mt-6 flex space-x-4">
          
          <a href="https://www.instagram.com/bennyshousefr/" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-instagram fa-lg"></i></a>
          <a href="https://www.linkedin.com/in/benjamin-mosley-849643329/" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-linkedin fa-lg"></i></a>
          <a href="https://github.com/Benny-ui-ux" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-github fa-lg"></i></a>
        </div>
      </div>

    
      <div>
        <form method="POST" action="/contact" class="space-y-4">
          <div>
            <label for="name" class="block font-semibold mb-1">Name</label>
            <input type="text" id="name" name="name" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
          </div>
          <div>
            <label for="email" class="block font-semibold mb-1">Email</label>
            <input type="email" id="email" name="email" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
          </div>
          <div>
            <label for="message" class="block font-semibold mb-1">Message</label>
            <textarea id="message" name="message" rows="5" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none"></textarea>
          </div>
          <div class="text-right">
            <button type="submit" class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">Send</button>
          </div>
        </form>
      </div>

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

{% endblock %}