@extends('layouts.app')

@section('content')

<style>
.quote-page {
    padding: 80px 0;
    background: #FAF7F2;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #2C2C2C;
}

.quote-page .container {
    max-width: 1120px;
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.section-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #C9A84C;
    margin-bottom: 12px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #0F1A2E;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
}

.response-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 14px;
}

.response-badge i {
    font-size: 14px;
    line-height: 1;
}

.quote-form-wrap {
    max-width: 680px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 4px 16px rgba(15, 26, 46, 0.08);
    border: 1px solid #E5E7EB;
}

.form-step {
    font-size: 15px;
    font-weight: 700;
    color: #0F1A2E;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-step .num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #C9A84C;
    color: #0F1A2E;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group {
    margin-bottom: 22px;
}

.form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #0F1A2E;
    margin-bottom: 5px;
}

.hint {
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 5px;
}

.form-control,
.form-select {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 11px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #2C2C2C;
    background-color: #FFFFFF;
    min-height: 48px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #C9A84C;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.chk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 13.5px;
    color: #2C2C2C;
}

.chk-item:hover {
    border-color: #C9A84C;
    background: rgba(201, 168, 76, 0.08);
}

.chk-item input[type="checkbox"] {
    width: auto;
    accent-color: #C9A84C;
}

.minutes-range-wrap {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FCFCFA;
}

.minutes-range-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.minutes-range-label {
    font-size: 13px;
    font-weight: 600;
    color: #0F1A2E;
}

.minutes-range-value {
    font-size: 13px;
    font-weight: 700;
    color: #0F1A2E;
}

.minutes-range {
    width: 100%;
    accent-color: #C9A84C;
}

.form-divider {
    border: none;
    border-top: 1px solid #F3F4F6;
    margin: 28px 0;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: #0F1A2E;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.submit-btn:hover {
    background: #1B2D4A;
}

.form-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 12.5px;
    color: #9CA3AF;
}

@media (max-width: 768px) {
    .quote-page {
        padding: 56px 0;
    }

    .quote-form-wrap {
        padding: 30px 24px;
    }

    .checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 550px) {
    .quote-page .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .quote-form-wrap {
        padding: 24px 18px;
        border-radius: 10px;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<section class="quote-page">
    <div class="container">
        <div class="section-header">
            <div class="section-badge">Free Quote</div>

            <h2 class="section-title">Get Your Free Quote</h2>

            <p class="section-subtitle">
                Tell us what you need. We'll send a personalised quote within 24 hours.
            </p>

            <div class="response-badge">
                <i class="bi bi-clock-history"></i>
                Average response time: under 12 hours
            </div>
        </div>

        <div class="quote-form-wrap" id="quoteFormWrap">
            @if (session('success'))
                <div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-sm text-green-700">
                    {{ session('success') }}
                </div>
            @endif

            <form action="{{ route('quote.store') }}" method="POST">
                @csrf

                <div class="form-step">
                    <span class="num">1</span>
                    About You
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-name" class="form-label">Your Name</label>
                            <input type="text" class="form-control" id="q-name" name="name" required placeholder="First and last name">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-business" class="form-label">Business Name</label>
                            <input type="text" class="form-control" id="q-business" name="business_name" required placeholder="Your company name">
                        </div>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="q-email" name="email" required placeholder="you@business.com">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-phone" class="form-label">Phone</label>
                            <input type="tel" class="form-control" id="q-phone" name="phone" placeholder="(403) 555-0000">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="q-web" class="form-label">Website or Social Media</label>
                    <p class="hint">So we can look at your current online presence</p>
                    <input type="url" class="form-control" id="q-web" name="website" placeholder="https://yourbusiness.com or @handle">
                </div>

                <div class="form-group">
                    <label for="q-industry" class="form-label">Industry</label>
                    <select class="form-select" id="q-industry" name="industry" required>
                        <option value="" disabled selected>Select your industry</option>
                        <option>Restaurant & Hospitality</option>
                        <option>Trades & Home Services</option>
                        <option>Real Estate</option>
                        <option>Professional Services</option>
                        <option>Health, Fitness & Wellness</option>
                        <option>Retail & E-commerce</option>
                        <option>Technology & Startups</option>
                        <option>Construction & Development</option>
                        <option>Automotive</option>
                        <option>Non-Profit</option>
                        <option>Other</option>
                    </select>
                </div>

                <hr class="form-divider">

                <div class="form-step">
                    <span class="num">2</span>
                    What Do You Need?
                </div>

                <div class="form-group">
                    <label class="form-label">Services You're Interested In</label>
                    <p class="hint">Select all that apply</p>

                    <div class="checkbox-grid">
                        <label class="chk-item"><input type="checkbox" name="services" value="Promotional Videos"> Promotional Videos</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Social Media Management"> Social Media Management</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Instagram Content"> Instagram Content</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="TikTok Content"> TikTok Content</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="YouTube Content"> YouTube Content</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Facebook Content"> Facebook Content</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Website Copy"> Website Copy</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Blog Posts & SEO"> Blog Posts & SEO</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Email Marketing"> Email Marketing</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Proposals & Pitch Decks"> Proposals & Pitch Decks</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Resume & CV Writing"> Resume & CV Writing</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Ad Copy"> Ad Copy</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="YouTube Training"> YouTube Training</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="AI Training / Workshop"> AI Training / Workshop</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Consultation"> Consultation</label>
                        <label class="chk-item"><input type="checkbox" name="services" value="Not Sure — Advise Me"> Not Sure — Advise Me</label>
                    </div>

                    <div class="minutes-range-wrap">
                        <div class="minutes-range-top">
                            <span class="minutes-range-label">Estimated Minutes Needed</span>
                            <span class="minutes-range-value"><span id="minutesValue">30</span> min</span>
                        </div>
                        <input
                            class="minutes-range"
                            type="range"
                            id="q-service-minutes"
                            name="service_minutes"
                            min="5"
                            max="240"
                            step="5"
                            value="30"
                        >
                    </div>
                </div>

                <div class="form-group">
                    <label for="q-word-count" class="form-label">Number of Words</label>
                    <p class="hint">Approximate word count needed (leave blank if unsure)</p>
                    <input type="number" class="form-control" id="q-word-count" name="word_count" min="1" placeholder="e.g. 500">
                </div>

                <div class="form-group">
                    <label for="q-goal" class="form-label">What's your main goal?</label>
                    <select class="form-select" id="q-goal" name="goal" required>
                        <option value="" disabled selected>Select your primary goal</option>
                        <option>Get more customers / leads</option>
                        <option>Build a stronger online presence</option>
                        <option>Increase brand awareness</option>
                        <option>Win more proposals / contracts</option>
                        <option>Bring past customers back</option>
                        <option>Launch a new product or service</option>
                        <option>Land a new job</option>
                        <option>Other</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="q-details" class="form-label">Tell us more</label>
                    <p class="hint">Any details about what you need, timeline, or challenges</p>
                    <textarea class="form-control" id="q-details" name="details" rows="4" placeholder="E.g., I need 3 short video ads for Instagram"></textarea>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-budget" class="form-label">Approximate Budget</label>
                            <select class="form-select" id="q-budget" name="budget">
                                <option value="" disabled selected>Select optional</option>
                                <option>Under $500/month</option>
                                <option>$500 – $1,000/month</option>
                                <option>$1,000 – $2,500/month</option>
                                <option>$2,500 – $5,000/month</option>
                                <option>$5,000+/month</option>
                                <option>One-time project</option>
                                <option>Not sure yet</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="q-source" class="form-label">How did you hear about us?</label>
                            <select class="form-select" id="q-source" name="source">
                                <option value="" disabled selected>Select optional</option>
                                <option>Google Search</option>
                                <option>Social Media</option>
                                <option>Referral</option>
                                <option>Networking Event</option>
                                <option>BNI</option>
                                <option>LinkedIn</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                </div>

                <hr class="form-divider">

                <button class="submit-btn" type="submit">
                    Get My Free Quote 
                </button>

                <p class="form-footer">
                    No obligation. No spam. Just a straight answer within 24 hours.<br>
                    All prices in Canadian dollars (CAD), excluding 5% GST.
                </p>
            </form>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minutesSlider = document.getElementById('q-service-minutes');
    var minutesValue = document.getElementById('minutesValue');

    if (!minutesSlider || !minutesValue) {
        return;
    }

    minutesSlider.addEventListener('input', function () {
        minutesValue.textContent = minutesSlider.value;
    });
});
</script>

@endsection