{{-- Contact Form Component --}}
@php
    $formTitle = $component['content']['title'] ?? 'Get in Touch';
    $submitText = $component['content']['submit_text'] ?? 'Send Message';
    $formId = 'contact-form-' . uniqid();
@endphp

<div class="contact-form-wrapper">
    @if($formTitle)
        <h3 class="mb-4" style="font-family: var(--heading-font);">{{ $formTitle }}</h3>
    @endif

    <form id="{{ $formId }}" class="contact-form" method="POST" action="{{ route('contact.submit') }}">
        @csrf

        <div class="row g-3">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
            </div>

            <div class="col-12">
                <div class="form-group">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="tel" class="form-control" id="phone" name="phone">
                </div>
            </div>

            <div class="col-12">
                <div class="form-group">
                    <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="subject" name="subject" required>
                </div>
            </div>

            <div class="col-12">
                <div class="form-group">
                    <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                </div>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="bi bi-send me-2"></i>{{ $submitText }}
                </button>
            </div>
        </div>
    </form>

    <div id="{{ $formId }}-response" class="mt-3" style="display: none;"></div>
</div>

<style>
    .contact-form-wrapper {
        background: #f8f9fa;
        padding: 2rem;
        border-radius: 12px;
    }

    .form-label {
        font-family: var(--body-font);
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .form-control {
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        padding: 0.75rem 2rem;
    }

    .btn-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
</style>

<script>
document.getElementById('{{ $formId }}').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = this;
    const responseDiv = document.getElementById('{{ $formId }}-response');
    const submitBtn = form.querySelector('button[type="submit"]');

    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';

    fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        responseDiv.style.display = 'block';
        if (data.success) {
            responseDiv.className = 'alert alert-success';
            responseDiv.textContent = data.message || 'Thank you for your message! We will get back to you soon.';
            form.reset();
        } else {
            responseDiv.className = 'alert alert-danger';
            responseDiv.textContent = data.message || 'Something went wrong. Please try again.';
        }
    })
    .catch(error => {
        responseDiv.style.display = 'block';
        responseDiv.className = 'alert alert-danger';
        responseDiv.textContent = 'An error occurred. Please try again later.';
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="bi bi-send me-2"></i>{{ $submitText }}';
    });
});
</script>