<script lang="ts">
  let formData = {
    name: '',
    email: '',
    company: '',
    message: ''
  };

  function handleSubmit() {
    // Form submission would be handled here
    console.log('Form submitted:', formData);
  }
</script>

<section class="py-20 bg-surface">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-8">
        Get in Touch
      </h2>
      <p class="text-lg text-text/80 text-center mb-12">
        Ready to transform your business with expert Microsoft 365 support?
        Fill out the form below and we'll get back to you within 24 hours.
      </p>

      <form on:submit|preventDefault={handleSubmit} class="space-y-6">
        <div>
          <label for="name" class="block text-sm font-medium text-text mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            bind:value={formData.name}
            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
            required
          />
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-text mb-2">
            Email
          </label>
          <input
            type="email"
            id="email"
            bind:value={formData.email}
            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
            required
          />
        </div>

        <div>
          <label for="company" class="block text-sm font-medium text-text mb-2">
            Company
          </label>
          <input
            type="text"
            id="company"
            bind:value={formData.company}
            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
          />
        </div>

        <div>
          <label for="message" class="block text-sm font-medium text-text mb-2">
            Message
          </label>
          <textarea
            id="message"
            bind:value={formData.message}
            rows="4"
            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
            required
          ></textarea>
        </div>

        <button
          type="submit"
          class="w-full bg-primary hover:bg-link-hover text-white px-8 py-4 rounded-lg text-lg font-semibold transition-colors duration-200"
        >
          Send Message
        </button>
      </form>
    </div>
  </div>
</section> 