{% extends "public/base.html" %}
{% load static %}

{% block title %}Start a Project — {{ site.site_name }}{% endblock %}
{% block meta_description %}Tell us about your project and we'll get back to you within 48 hours with a tailored proposal.{% endblock %}

{% block extra_head %}
<style>
/* --- Phone picker — dark theme matching contact form --- */
.phone-picker { position:relative; display:flex; gap:.5rem; align-items:stretch; }
.phone-flag-btn {
    display:flex; align-items:center; gap:.4rem;
    padding:13px 20px;
    border:1px solid #16517b; border-radius:30px;
    background:transparent; cursor:pointer; flex-shrink:0;
    font-size:.85rem; font-weight:600; color:#FCFCFC;
    transition:border-color .2s; white-space:nowrap; outline:none;
}
.phone-flag-btn:hover,
.phone-flag-btn.open { border-color:var(--accent-color,#ff404b); }
.phone-flag-btn .pf-flag { font-size:1.2rem; line-height:1; }
.phone-flag-btn .pf-code { color:#FCFCFC; min-width:2.5rem; }
.phone-flag-btn .pf-arrow { font-size:.6rem; color:rgba(255,255,255,.55); transition:transform .2s; }
.phone-flag-btn.open .pf-arrow { transform:rotate(180deg); }
.phone-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); left:0;
    width:260px; background:#0d2137;
    border:1.5px solid rgba(255,255,255,.12); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:9999; overflow:hidden;
}
.phone-dropdown.open { display:flex; flex-direction:column; max-height:240px; }
.pd-search { padding:.5rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); background:#0d2137; flex-shrink:0; }
.pd-search input {
    width:100%; border:1.5px solid rgba(255,255,255,.15); border-radius:6px;
    padding:.35rem .6rem; font-size:.8rem; outline:none;
    color:#fff; background:rgba(255,255,255,.07);
}
.pd-search input:focus { border-color:#ff404b; }
.pd-list { overflow-y:auto; }
.phone-ci {
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .75rem; cursor:pointer; font-size:.82rem; color:rgba(255,255,255,.85);
}
.phone-ci:hover { background:rgba(255,255,255,.06); }
.phone-ci .ci-flag { font-size:1.1rem; flex-shrink:0; }
.phone-ci .ci-name { flex:1; }
.phone-ci .ci-code { color:rgba(255,255,255,.45); font-weight:600; flex-shrink:0; }

/* --- Assessment wizard --- */
.assess-wrap { max-width:780px; margin:0 auto; }

/* Progress */
.assess-progress { display:flex; align-items:center; margin-bottom:2.5rem; }
.assess-step-dot {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.12); color:rgba(255,255,255,.6);
    border:2px solid rgba(255,255,255,.2);
    font-size:.78rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background .3s,color .3s,border-color .3s;
}
.assess-step-dot.active { background:var(--accent-color,#ff404b); color:#fff; border-color:var(--accent-color,#ff404b); }
.assess-step-dot.done   { background:var(--accent-color,#ff404b); color:#fff; border-color:var(--accent-color,#ff404b); }
.assess-step-line { flex:1; height:2px; background:rgba(255,255,255,.15); transition:background .3s; }
.assess-step-line.done  { background:var(--accent-color,#ff404b); }

/* Panels */
.assess-panel { display:none; }
.assess-panel.active { display:block; }

/* Step headings & text */
.assess-panel h2  { color:#fff !important; }
.assess-panel h6  { color:rgba(255,255,255,.85); }
.assess-panel p.description { color:rgba(255,255,255,.85); }
.assess-panel .step-sub { color:rgba(255,255,255,.85); font-weight:600; font-size:.9rem; }

/* Service cards */
.service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.service-card {
    border:1px solid #16517b; border-radius:25px;
    padding:1.25rem 1rem; cursor:pointer; text-align:center;
    background:transparent;
    transition:border-color .2s,background .2s,box-shadow .2s; user-select:none;
}
.service-card:hover  { border-color:var(--accent-color,#ff404b); background:var(--accent-color,#ff404b); box-shadow:0 4px 16px rgba(255,64,75,.3); }
.service-card:hover i    { color:#fff; }
.service-card:hover span { color:#fff; }
.service-card.chosen { border-color:var(--accent-color,#ff404b); background:rgba(255,64,75,.1); }
.service-card i  { font-size:1.6rem; margin-bottom:.5rem; color:rgba(255,255,255,.5); display:block; transition:color .2s; }
.service-card.chosen i  { color:var(--accent-color,#ff404b); }
.service-card span { font-weight:600; font-size:.88rem; color:#FCFCFC; }
.service-card.chosen span { color:var(--accent-color,#ff404b); }

/* Feature checkboxes */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }
.feature-item {
    display:flex; align-items:center; gap:.6rem;
    border:1px solid #16517b; border-radius:25px;
    padding:.75rem 1rem; cursor:pointer; background:transparent;
    transition:border-color .2s,background .2s;
}
.feature-item:hover  { border-color:var(--accent-color,#ff404b); background:rgba(255,64,75,.08); }
.feature-item:hover i    { color:var(--accent-color,#ff404b); }
.feature-item:hover span { color:var(--accent-color,#ff404b); }
.feature-item.chosen { border-color:var(--accent-color,#ff404b); background:rgba(255,64,75,.06); }
.feature-item input  { display:none; }
.feature-item i      { font-size:1rem; color:rgba(255,255,255,.45); flex-shrink:0; transition:color .2s; }
.feature-item.chosen i { color:var(--accent-color,#ff404b); }
.feature-item span   { font-size:.86rem; font-weight:500; color:#FCFCFC; }
.feature-item.chosen span { color:var(--accent-color,#ff404b); }

/* Option cards (budget/timeline) */
.option-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
.option-card {
    border:1px solid #16517b; border-radius:25px;
    padding:.85rem .75rem; cursor:pointer; text-align:center; background:transparent;
    transition:border-color .2s,background .2s; user-select:none;
}
.option-card:hover  { border-color:var(--accent-color,#ff404b); background:rgba(255,64,75,.06); }
.option-card:hover .opt-label,
.option-card:hover .opt-sub   { color:var(--accent-color,#ff404b); }
.option-card.chosen { border-color:var(--accent-color,#ff404b); background:rgba(255,64,75,.06); }
.option-card.chosen .opt-label,
.option-card.chosen .opt-sub  { color:var(--accent-color,#ff404b); }
.option-card .opt-label { font-weight:700; font-size:.88rem; display:block; color:#FCFCFC; transition:color .2s; }
.option-card .opt-sub   { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:.2rem; display:block; transition:color .2s; }

/* Review rows */
.review-row { display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.88rem; }
.review-row .rev-label { width:140px; flex-shrink:0; font-weight:600; color:rgba(255,255,255,.5); }
.review-row .rev-val   { color:rgba(255,255,255,.9); }

/* Form fields */
.assess-field { margin-bottom:1.1rem; }
.assess-field label { display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:rgba(255,255,255,.85); }
.assess-field input,
.assess-field textarea,
.assess-field select {
    width:100%; padding:13px 20px;
    border:1px solid #16517b; border-radius:30px;
    font-size:.9rem; transition:border-color .2s;
    background:transparent; color:#FCFCFC;
    font-family:inherit;
}
.assess-field textarea { border-radius:20px; resize:vertical; }
.assess-field input:focus,
.assess-field textarea:focus,
.assess-field select:focus { outline:none; border-color:var(--accent-color,#ff404b); }
.assess-field input::placeholder,
.assess-field textarea::placeholder { color:rgba(255,255,255,.35); }
.assess-field select option { background:#0d2137; color:#FCFCFC; }

/* Inline selects (title, heard) used outside .assess-field */
.assess-inline-select {
    padding:13px 20px; border:1px solid #16517b; border-radius:30px;
    font-size:.9rem; background:transparent; color:#FCFCFC;
    transition:border-color .2s; width:100%; font-family:inherit;
}
.assess-inline-select:focus { outline:none; border-color:var(--accent-color,#ff404b); }
.assess-inline-select option { background:#0d2137; color:#FCFCFC; }

/* Step nav */
.assess-nav { display:flex; justify-content:space-between; margin-top:2rem; }
.assess-nav .btn { min-width:120px; }
.assess-nav .btn-outline-secondary {
    background:transparent; border:1px solid #16517b; color:rgba(255,255,255,.75);
    transition:background .2s,border-color .2s,color .2s;
}
.assess-nav .btn-outline-secondary:hover {
    background:var(--accent-color,#ff404b); border-color:var(--accent-color,#ff404b); color:#fff;
}

/* Error */
#assess-error { background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.35); color:#fca5a5; border-radius:12px; }

/* Success */
#assess-success { display:none; text-align:center; padding:4rem 1rem; }
#assess-success .success-icon { font-size:3.5rem; color:var(--accent-color,#ff404b); margin-bottom:1rem; }
.af-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.brief-bar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.85rem}
.option-card{text-align:left!important;font-weight:400!important}.option-card strong{font-weight:400!important;font-size:.9rem}
.feature-item.selected,.feature-item.active{border-color:var(--accent-color,#ff404b);background:rgba(255,64,75,.06)}.feature-item.selected span,.feature-item.active span,.feature-item.selected i,.feature-item.active i{color:var(--accent-color,#ff404b)}
.req{color:var(--accent-color,#ff404b);font-weight:700}.feature-item.miss{border-color:#ff404b!important}select.miss{border-color:#ff404b!important}
</style>
{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Start a Project</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="assess-wrap">

                <!-- Success screen -->
                <div id="assess-success">
                    <div class="success-icon"><i class="fa-solid fa-circle-check"></i></div>
                    <h2>Thank you!</h2>
                    <p class="description">We'll be in touch in less than 48 hours.</p>
                    <a href="{% url 'home' %}" class="btn btn-accent mt-3">Back to Home</a>
                </div>

                <!-- Wizard -->
                <div id="assess-form-wrap">

                    <!-- Progress bar -->
                    <div class="assess-progress">
                        <div class="assess-step-dot active" id="dot-1">1</div>
                        <div class="assess-step-line" id="line-1"></div>
                        <div class="assess-step-dot" id="dot-2">2</div>
                        <div class="assess-step-line" id="line-2"></div>
                        <div class="assess-step-dot" id="dot-3">3</div>
                        <div class="assess-step-line" id="line-3"></div>
                        <div class="assess-step-dot" id="dot-4">4</div>
                        <div class="assess-step-line" id="line-4"></div>
                        <div class="assess-step-dot" id="dot-5">5</div>
                    </div>

                    <!-- Step 1: Contact info -->
                    <div class="assess-panel active" id="step-1">
                        <div class="sub-heading mb-2">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-1">Step 1 of 5</h6>
                        </div>
                        <h2 class="mb-4">Tell us about yourself</h2>

                        <!-- Row 1: Title / First Name / Surname -->
                        <div class="row">
                            <div class="col-4 col-md-2">
                                <div class="assess-field">
                                    <label for="as-title">Title</label>
                                    <select id="as-title" class="assess-inline-select">
                                        <option value="">—</option>
                                        <option value="mr">Mr</option>
                                        <option value="mrs">Mrs</option>
                                        <option value="ms">Ms</option>
                                        <option value="miss">Miss</option>
                                        <option value="dr">Dr</option>
                                        <option value="prof">Prof</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-8 col-md-5">
                                <div class="assess-field">
                                    <label for="as-firstname">First Name *</label>
                                    <input type="text" id="as-firstname" placeholder="Jane" autocomplete="given-name">
                                </div>
                            </div>
                            <div class="col-12 col-md-5">
                                <div class="assess-field">
                                    <label for="as-lastname">Surname *</label>
                                    <input type="text" id="as-lastname" placeholder="Smith" autocomplete="family-name">
                                </div>
                            </div>
                        </div>

                        <!-- Row 2: Company / Position -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="assess-field">
                                    <label for="as-company">Company</label>
                                    <input type="text" id="as-company" placeholder="Acme Ltd" autocomplete="organization">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="assess-field">
                                    <label for="as-position">Position / Job Title</label>
                                    <input type="text" id="as-position" placeholder="e.g. CEO, Marketing Director">
                                </div>
                            </div>
                        </div>

                        <!-- Row 3: Email / Phone -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="assess-field">
                                    <label for="as-email">Email Address *</label>
                                    <input type="email" id="as-email" placeholder="jane@acme.com" autocomplete="email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="assess-field">
                                    <label>Phone Number</label>
                                    <div class="phone-picker">
                                        <button type="button" class="phone-flag-btn" id="as-trigger" onclick="togglePicker('as')">
                                            <span class="pf-flag">🇬🇧</span>
                                            <span class="pf-code" id="as-disp">+44</span>
                                            <i class="fa-solid fa-chevron-down pf-arrow"></i>
                                        </button>
                                        <input type="hidden" id="as-code" value="+44">
                                        <div class="phone-dropdown" id="as-dropdown">
                                            <div class="pd-search">
                                                <input type="text" placeholder="Search country…" oninput="filterPicker(this,'as')">
                                            </div>
                                            <div class="pd-list" id="as-list"></div>
                                        </div>
                                        <input type="tel" id="as-phone" placeholder="Phone number"
                                               oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Row 4: How did you hear about us -->
                        <div class="assess-field">
                            <label for="as-heard">How did you hear about us?</label>
                            <select id="as-heard" class="assess-inline-select">
                                <option value="">Select an option…</option>
                                <option value="google">Google Search</option>
                                <option value="referral">Referral / Word of Mouth</option>
                                <option value="linkedin">LinkedIn</option>
                                <option value="instagram">Instagram</option>
                                <option value="facebook">Facebook</option>
                                <option value="youtube">YouTube</option>
                                <option value="social">Other Social Media</option>
                                <option value="event">Event / Conference</option>
                                <option value="press">Press / Article</option>
                                <option value="returning">Returning Client</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <div class="assess-nav">
                            <span></span>
                            <button class="btn btn-accent" onclick="assessNext(1)">Next <i class="fa-solid fa-arrow-right ms-1"></i></button>
                        </div>
                    </div>

                    <!-- Step 2: Service type -->
                    <div class="assess-panel" id="step-2">
                        <div class="sub-heading mb-2">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-1">Step 2 of 5</h6>
                        </div>
                        <h2 class="mb-4">What do you need?</h2>
                        <p style="font-size:.83rem;color:rgba(255,255,255,.6);margin-top:-.5rem;margin-bottom:1rem">Select all that apply</p>
                        <div class="service-grid">
                            <div class="service-card" data-val="web" onclick="pickService(this)">
                                <i class="fa-solid fa-globe"></i><span>Website / Portal</span>
                            </div>
                            <div class="service-card" data-val="ecommerce" onclick="pickService(this)">
                                <i class="fa-solid fa-cart-shopping"></i><span>E-Commerce</span>
                            </div>
                            <div class="service-card" data-val="app" onclick="pickService(this)">
                                <i class="fa-solid fa-mobile-screen"></i><span>Mobile App</span>
                            </div>
                            <div class="service-card" data-val="marketing" onclick="pickService(this)">
                                <i class="fa-solid fa-chart-line"></i><span>SEO / Marketing</span>
                            </div>
                            <div class="service-card" data-val="portal" onclick="pickService(this)">
                                <i class="fa-solid fa-layer-group"></i><span>CMS / Dashboard</span>
                            </div>
                            <div class="service-card" data-val="other" onclick="pickService(this)">
                                <i class="fa-solid fa-ellipsis"></i><span>Other</span>
                            </div>
                        </div>
                        <div class="assess-nav">
                            <button class="btn btn-outline-secondary" onclick="assessBack(2)"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                            <button class="btn btn-accent" onclick="assessNext(2)">Next <i class="fa-solid fa-arrow-right ms-1"></i></button>
                        </div>
                    </div>

                    <!-- Step 3: Features & description -->
                    <div class="assess-panel" id="step-3">
                        <div class="sub-heading mb-2">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-1">Step 3 of 5</h6>
                        </div>
                        <h2 class="mb-3">Features &amp; Details</h2>
                        <p class="step-sub mb-3">Select all that apply <span class="req">*</span></p>
                        <div class="feature-grid mb-4">
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="User Login / Registration">
                                <i class="fa-solid fa-user-lock"></i><span>User Login / Registration</span>
                            </div>
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="Payment Integration">
                                <i class="fa-solid fa-credit-card"></i><span>Payment Integration</span>
                            </div>
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="CMS / Blog">
                                <i class="fa-solid fa-file-pen"></i><span>CMS / Blog</span>
                            </div>
                            
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="API / Integrations">
                                <i class="fa-solid fa-plug"></i><span>API / Integrations</span>
                            </div>
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="SEO/SEM Optimisation">
                                <i class="fa-solid fa-magnifying-glass-chart"></i><span>SEO/SEM Optimisation</span>
                            </div>
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="Analytics / Reporting">
                                <i class="fa-solid fa-chart-bar"></i><span>Analytics / Reporting</span>
                            </div>
                            <div class="feature-item" onclick="toggleFeature(this)">
                                <input type="checkbox" value="Mobile App">
                                <i class="fa-solid fa-mobile-button"></i><span>Mobile App</span>
                            </div>
<div class="feature-item" onclick="toggleFeature(this)"><input type="checkbox" value="AI / LLM Integration"><i class="fa-solid fa-brain"></i><span>AI / LLM Integration</span></div><div class="feature-item" onclick="toggleFeature(this)"><input type="checkbox" value="Booking / Appointments"><i class="fa-solid fa-calendar-check"></i><span>Booking / Appointments</span></div><div class="feature-item" onclick="toggleFeature(this)"><input type="checkbox" value="Live Chat / Support"><i class="fa-solid fa-comments"></i><span>Live Chat / Support</span></div><div class="feature-item" onclick="toggleFeature(this)"><input type="checkbox" value="Membership / Subscriptions"><i class="fa-solid fa-id-card"></i><span>Membership / Subscriptions</span></div><div class="feature-item" onclick="toggleFeature(this)"><input type="checkbox" value="Events / Ticketing"><i class="fa-solid fa-ticket"></i><span>Events / Ticketing</span></div>
                        </div>
                        <div class="assess-field">
<p class="step-sub mb-3">How should it look like? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="design_level" data-val="template" onclick="pickOne(this)"><i class="fa-solid fa-layer-group"></i><span>Template</span></div><div class="feature-item" data-group="design_level" data-val="custom" onclick="pickOne(this)"><i class="fa-solid fa-wand-magic-sparkles"></i><span>Custom</span></div><div class="feature-item" data-group="design_level" data-val="unsure" onclick="pickOne(this)"><i class="fa-solid fa-circle-question"></i><span>Not Sure</span></div></div><p class="step-sub mb-3">How many pages do you need? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="page_count" data-val="1-10" onclick="pickOne(this)"><i class="fa-solid fa-file"></i><span>1 to 10 Pages</span></div><div class="feature-item" data-group="page_count" data-val="10-50" onclick="pickOne(this)"><i class="fa-solid fa-copy"></i><span>10 to 50 Pages</span></div><div class="feature-item" data-group="page_count" data-val="unsure" onclick="pickOne(this)"><i class="fa-solid fa-circle-question"></i><span>Not Sure</span></div></div><p class="step-sub mb-3">Who takes care of copywriting? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="content_author" data-val="client" onclick="pickOne(this)"><i class="fa-solid fa-pen"></i><span>We Will</span></div><div class="feature-item" data-group="content_author" data-val="us" onclick="pickOne(this)"><i class="fa-solid fa-feather"></i><span>You Do It</span></div><div class="feature-item" data-group="content_author" data-val="unsure" onclick="pickOne(this)"><i class="fa-solid fa-circle-question"></i><span>Not Sure</span></div></div><p class="step-sub mb-3">How would you rather pay? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="payment_model" data-val="deposit" onclick="pickOne(this)"><i class="fa-solid fa-wallet"></i><span>Deposit</span></div><div class="feature-item" data-group="payment_model" data-val="milestones" onclick="pickOne(this)"><i class="fa-solid fa-flag-checkered"></i><span>Milestones</span></div><div class="feature-item" data-group="payment_model" data-val="unsure" onclick="pickOne(this)"><i class="fa-solid fa-circle-question"></i><span>Not Sure</span></div></div><p class="step-sub mb-3">How many products, if selling? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="product_count" data-val="1-100" onclick="pickOne(this)"><i class="fa-solid fa-box"></i><span>Up To 100</span></div><div class="feature-item" data-group="product_count" data-val="100+" onclick="pickOne(this)"><i class="fa-solid fa-boxes-stacked"></i><span>Over 100</span></div><div class="feature-item" data-group="product_count" data-val="none" onclick="pickOne(this)"><i class="fa-solid fa-ban"></i><span>Not Selling</span></div></div><p class="step-sub mb-3">Do you have a brand and logo? <span class="req">*</span></p><div class="feature-grid mb-4"><div class="feature-item" data-group="has_brand_assets" data-val="yes" onclick="pickOne(this)"><i class="fa-solid fa-check"></i><span>Yes</span></div><div class="feature-item" data-group="has_brand_assets" data-val="no" onclick="pickOne(this)"><i class="fa-solid fa-xmark"></i><span>No</span></div><div class="feature-item" data-group="has_brand_assets" data-val="unsure" onclick="pickOne(this)"><i class="fa-solid fa-circle-half-stroke"></i><span>Some Of It</span></div></div><div class="af-grid"><div class="assess-field"><label for="as-brand">Brand Name</label><input type="text" id="as-brand"></div><div class="assess-field"><label for="as-existing">Current Website (If You Have Any)</label><input type="text" id="as-existing"></div></div><div class="af-grid"><div class="assess-field"><label for="as-sector">Industry <span class="req">*</span></label><select id="as-sector"><option value=""></option><option>Retail / E-Commerce</option><option>Hospitality</option><option>Health / Medical</option><option>Education</option><option>Property / Construction</option><option>Finance / Legal</option><option>Sports / Fitness</option><option>Music / Entertainment</option><option>Travel</option><option>Technology</option><option>Charity / Non-Profit</option><option>Other</option></select></div><div class="assess-field"><label for="as-country">Target Country <span class="req">*</span></label><select id="as-country"><option value=""></option><option>United Kingdom</option><option>Ireland</option><option>United States</option><option>Canada</option><option>Germany</option><option>France</option><option>Spain</option><option>Italy</option><option>Netherlands</option><option>United Arab Emirates</option><option>Saudi Arabia</option><option>Qatar</option><option>Australia</option><option>Iran</option><option>Turkey</option><option>Afghanistan</option><option>Albania</option><option>Algeria</option><option>Andorra</option><option>Angola</option><option>Anguilla</option><option>Antarctica</option><option>Antigua & Barbuda</option><option>Argentina</option><option>Armenia</option><option>Aruba</option><option>Austria</option><option>Azerbaijan</option><option>Bahamas</option><option>Bahrain</option><option>Bangladesh</option><option>Barbados</option><option>Belarus</option><option>Belgium</option><option>Belize</option><option>Benin</option><option>Bermuda</option><option>Bhutan</option><option>Bolivia</option><option>Bosnia & Herzegovina</option><option>Botswana</option><option>Bouvet Island</option><option>Brazil</option><option>Britain (UK)</option><option>British Indian Ocean Territory</option><option>Brunei</option><option>Bulgaria</option><option>Burkina Faso</option><option>Burundi</option><option>Cambodia</option><option>Cameroon</option><option>Cape Verde</option><option>Caribbean NL</option><option>Cayman Islands</option><option>Central African Rep.</option><option>Chad</option><option>Chile</option><option>China</option><option>Christmas Island</option><option>Cocos (Keeling) Islands</option><option>Colombia</option><option>Comoros</option><option>Congo (Dem. Rep.)</option><option>Congo (Rep.)</option><option>Cook Islands</option><option>Costa Rica</option><option>Croatia</option><option>Cuba</option><option>Curaçao</option><option>Cyprus</option><option>Czech Republic</option><option>Côte d’Ivoire</option><option>Denmark</option><option>Djibouti</option><option>Dominica</option><option>Dominican Republic</option><option>East Timor</option><option>Ecuador</option><option>Egypt</option><option>El Salvador</option><option>Equatorial Guinea</option><option>Eritrea</option><option>Estonia</option><option>Eswatini (Swaziland)</option><option>Ethiopia</option><option>Falkland Islands</option><option>Faroe Islands</option><option>Fiji</option><option>Finland</option><option>French Guiana</option><option>French Polynesia</option><option>French S. Terr.</option><option>Gabon</option><option>Gambia</option><option>Georgia</option><option>Ghana</option><option>Gibraltar</option><option>Greece</option><option>Greenland</option><option>Grenada</option><option>Guadeloupe</option><option>Guam</option><option>Guatemala</option><option>Guernsey</option><option>Guinea</option><option>Guinea-Bissau</option><option>Guyana</option><option>Haiti</option><option>Heard Island & McDonald Islands</option><option>Honduras</option><option>Hong Kong</option><option>Hungary</option><option>Iceland</option><option>India</option><option>Indonesia</option><option>Iraq</option><option>Isle of Man</option><option>Israel</option><option>Jamaica</option><option>Japan</option><option>Jersey</option><option>Jordan</option><option>Kazakhstan</option><option>Kenya</option><option>Kiribati</option><option>Korea (North)</option><option>Korea (South)</option><option>Kuwait</option><option>Kyrgyzstan</option><option>Laos</option><option>Latvia</option><option>Lebanon</option><option>Lesotho</option><option>Liberia</option><option>Libya</option><option>Liechtenstein</option><option>Lithuania</option><option>Luxembourg</option><option>Macau</option><option>Madagascar</option><option>Malawi</option><option>Malaysia</option><option>Maldives</option><option>Mali</option><option>Malta</option><option>Marshall Islands</option><option>Martinique</option><option>Mauritania</option><option>Mauritius</option><option>Mayotte</option><option>Mexico</option><option>Micronesia</option><option>Moldova</option><option>Monaco</option><option>Mongolia</option><option>Montenegro</option><option>Montserrat</option><option>Morocco</option><option>Mozambique</option><option>Myanmar (Burma)</option><option>Namibia</option><option>Nauru</option><option>Nepal</option><option>New Caledonia</option><option>New Zealand</option><option>Nicaragua</option><option>Niger</option><option>Nigeria</option><option>Niue</option><option>Norfolk Island</option><option>North Macedonia</option><option>Northern Mariana Islands</option><option>Norway</option><option>Oman</option><option>Pakistan</option><option>Palau</option><option>Palestine</option><option>Panama</option><option>Papua New Guinea</option><option>Paraguay</option><option>Peru</option><option>Philippines</option><option>Pitcairn</option><option>Poland</option><option>Portugal</option><option>Puerto Rico</option><option>Romania</option><option>Russia</option><option>Rwanda</option><option>Réunion</option><option>Samoa (American)</option><option>Samoa (western)</option><option>San Marino</option><option>Sao Tome & Principe</option><option>Senegal</option><option>Serbia</option><option>Seychelles</option><option>Sierra Leone</option><option>Singapore</option><option>Slovakia</option><option>Slovenia</option><option>Solomon Islands</option><option>Somalia</option><option>South Africa</option><option>South Georgia & the South Sandwich Islands</option><option>South Sudan</option><option>Sri Lanka</option><option>St Barthelemy</option><option>St Helena</option><option>St Kitts & Nevis</option><option>St Lucia</option><option>St Maarten (Dutch)</option><option>St Martin (French)</option><option>St Pierre & Miquelon</option><option>St Vincent</option><option>Sudan</option><option>Suriname</option><option>Svalbard & Jan Mayen</option><option>Sweden</option><option>Switzerland</option><option>Syria</option><option>Taiwan</option><option>Tajikistan</option><option>Tanzania</option><option>Thailand</option><option>Togo</option><option>Tokelau</option><option>Tonga</option><option>Trinidad & Tobago</option><option>Tunisia</option><option>Turkmenistan</option><option>Turks & Caicos Is</option><option>Tuvalu</option><option>US minor outlying islands</option><option>Uganda</option><option>Ukraine</option><option>Uruguay</option><option>Uzbekistan</option><option>Vanuatu</option><option>Vatican City</option><option>Venezuela</option><option>Vietnam</option><option>Virgin Islands (UK)</option><option>Virgin Islands (US)</option><option>Wallis & Futuna</option><option>Western Sahara</option><option>Yemen</option><option>Zambia</option><option>Zimbabwe</option><option>Åland Islands</option><option>Worldwide</option></select></div></div><label for="as-desc">Project Description</label>
                            <textarea id="as-desc" rows="4" oninput="assessData.project_description=this.value;scoreBrief()" placeholder="Describe your project, goals, and any specific requirements…"></textarea>
                        </div>
                        <div class="assess-field">
                            <label for="as-refs">Reference Sites (Optional)</label>
                            <input type="text" id="as-refs" placeholder="e.g. stripe.com, notion.so">
                        </div>
                        <div class="assess-nav">
                            <button class="btn btn-outline-secondary" onclick="assessBack(3)"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                            <button class="btn btn-accent" onclick="assessNext(3)">Next <i class="fa-solid fa-arrow-right ms-1"></i></button>
                        </div>
                    </div>

                    <!-- Step 4: Budget & timeline -->
                    <div class="assess-panel" id="step-4">
                        <div class="sub-heading mb-2">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-1">Step 4 of 5</h6>
                        </div>
                        <h2 class="mb-4">Budget &amp; Timeline</h2>
                        <p class="step-sub mb-3">Approximate Budget</p>
                        <div class="option-grid mb-4">
                            <div class="option-card" data-group="budget" data-val="under5k" onclick="pickOption(this)">
                                <span class="opt-label">Under £5k</span><span class="opt-sub">Starter</span>
                            </div>
                            <div class="option-card" data-group="budget" data-val="5k-15k" onclick="pickOption(this)">
                                <span class="opt-label">£5k – £15k</span><span class="opt-sub">Growth</span>
                            </div>
                            <div class="option-card" data-group="budget" data-val="15k-40k" onclick="pickOption(this)">
                                <span class="opt-label">£15k – £40k</span><span class="opt-sub">Professional</span>
                            </div>
                            <div class="option-card" data-group="budget" data-val="40k-100k" onclick="pickOption(this)">
                                <span class="opt-label">£40k – £100k</span><span class="opt-sub">Enterprise</span>
                            </div>
                            <div class="option-card" data-group="budget" data-val="100k+" onclick="pickOption(this)">
                                <span class="opt-label">£100k+</span><span class="opt-sub">Large scale</span>
                            </div>
                            <div class="option-card" data-group="budget" data-val="discuss" onclick="pickOption(this)">
                                <span class="opt-label">Let's Discuss</span><span class="opt-sub">Flexible</span>
                            </div>
                        </div>
                        <p class="step-sub mb-3">Desired Timeline</p>
                        <div class="option-grid">
                            <div class="option-card" data-group="timeline" data-val="asap" onclick="pickOption(this)">
                                <span class="opt-label">ASAP</span><span class="opt-sub">Urgent</span>
                            </div>
                            <div class="option-card" data-group="timeline" data-val="1-3m" onclick="pickOption(this)">
                                <span class="opt-label">1 – 3 months</span><span class="opt-sub">Near term</span>
                            </div>
                            <div class="option-card" data-group="timeline" data-val="3-6m" onclick="pickOption(this)">
                                <span class="opt-label">3 – 6 months</span><span class="opt-sub">Standard</span>
                            </div>
                            <div class="option-card" data-group="timeline" data-val="6m+" onclick="pickOption(this)">
                                <span class="opt-label">6 months+</span><span class="opt-sub">Long term</span>
                            </div>
                            <div class="option-card" data-group="timeline" data-val="flexible" onclick="pickOption(this)">
                                <span class="opt-label">Flexible</span><span class="opt-sub">No Rush</span>
                            </div>
                        </div>
                        <div class="assess-nav">
                            <button class="btn btn-outline-secondary" onclick="assessBack(4)"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                            <button class="btn btn-accent" onclick="assessNext(4)">Next <i class="fa-solid fa-arrow-right ms-1"></i></button>
                        </div>
                    </div>

                    <!-- Step 5: Review & submit -->
                    <div class="assess-panel" id="step-5">
                        <div class="sub-heading mb-2">
                            <i class="fa-regular fa-circle-dot"></i>
                            <h6 class="font-1">Step 5 of 5</h6>
                        </div>
                        <h2 class="mb-4">Review &amp; Submit</h2>
                        <div id="assess-review" class="mb-4"></div>
                        <div id="assess-error" style="display:none;color:#dc2626;font-size:.85rem;margin-bottom:1rem;padding:.75rem 1rem;background:#fef2f2;border-radius:8px;border:1px solid #fca5a5"></div>
                        <div class="assess-nav">
                            <button class="btn btn-outline-secondary" onclick="assessBack(5)"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                            <button class="btn btn-accent" id="assess-submit-btn" onclick="assessSubmit()">
                                <i class="fa-solid fa-paper-plane me-1"></i> Submit
                            </button>
                        </div>
                    </div>

                </div><!-- /assess-form-wrap -->
            </div><!-- /assess-wrap -->
        </div>
    </div>

</div>
{% endblock %}

{% block recaptcha %}
{% if site.recaptcha_site_key %}
<script src="https://www.google.com/recaptcha/api.js?render={{ site.recaptcha_site_key }}" async></script>
<script>window.RCK="{{ site.recaptcha_site_key }}";</script>
<style>.grecaptcha-badge{display:none!important}</style>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
var assessData = {
    title:'', first_name:'', last_name:'', name:'',
    company:'', position:'', email:'', phone:'', heard_from:'',
    service_types:[], features:[], project_description:'',
    reference_sites:'', budget:'', timeline:''
};

/* ---- Country picker (shared with contact page) ---- */
var COUNTRIES=[
    {d:'+44',f:'🇬🇧',n:'United Kingdom'},{d:'+1',f:'🇺🇸',n:'United States'},
    {d:'+971',f:'🇦🇪',n:'UAE'},{d:'+90',f:'🇹🇷',n:'Turkey'},
    {d:'+98',f:'🇮🇷',n:'Iran'},{d:'+49',f:'🇩🇪',n:'Germany'},
    {d:'+33',f:'🇫🇷',n:'France'},{d:'+39',f:'🇮🇹',n:'Italy'},
    {d:'+34',f:'🇪🇸',n:'Spain'},{d:'+31',f:'🇳🇱',n:'Netherlands'},
    {d:'+46',f:'🇸🇪',n:'Sweden'},{d:'+47',f:'🇳🇴',n:'Norway'},
    {d:'+45',f:'🇩🇰',n:'Denmark'},{d:'+41',f:'🇨🇭',n:'Switzerland'},
    {d:'+43',f:'🇦🇹',n:'Austria'},{d:'+32',f:'🇧🇪',n:'Belgium'},
    {d:'+48',f:'🇵🇱',n:'Poland'},{d:'+7',f:'🇷🇺',n:'Russia'},
    {d:'+966',f:'🇸🇦',n:'Saudi Arabia'},{d:'+965',f:'🇰🇼',n:'Kuwait'},
    {d:'+974',f:'🇶🇦',n:'Qatar'},{d:'+973',f:'🇧🇭',n:'Bahrain'},
    {d:'+968',f:'🇴🇲',n:'Oman'},{d:'+961',f:'🇱🇧',n:'Lebanon'},
    {d:'+20',f:'🇪🇬',n:'Egypt'},{d:'+91',f:'🇮🇳',n:'India'},
    {d:'+92',f:'🇵🇰',n:'Pakistan'},{d:'+86',f:'🇨🇳',n:'China'},
    {d:'+81',f:'🇯🇵',n:'Japan'},{d:'+82',f:'🇰🇷',n:'South Korea'},
    {d:'+65',f:'🇸🇬',n:'Singapore'},{d:'+61',f:'🇦🇺',n:'Australia'},
    {d:'+64',f:'🇳🇿',n:'New Zealand'},{d:'+55',f:'🇧🇷',n:'Brazil'},
    {d:'+52',f:'🇲🇽',n:'Mexico'},
];
function buildPicker(prefix){
    var list=document.getElementById(prefix+'-list');
    if(!list)return;
    list.innerHTML=COUNTRIES.map(function(c){
        return '<div class="phone-ci" data-d="'+c.d+'" data-f="'+c.f+'" onclick="pickCountry(event,\''+prefix+'\')">'
            +'<span class="ci-flag">'+c.f+'</span>'
            +'<span class="ci-name">'+c.n+'</span>'
            +'<span class="ci-code">'+c.d+'</span></div>';
    }).join('');
}
function togglePicker(prefix){
    var btn=document.getElementById(prefix+'-trigger');
    var dd=document.getElementById(prefix+'-dropdown');
    var wasOpen=dd.classList.contains('open');
    document.querySelectorAll('.phone-dropdown.open').forEach(function(d){d.classList.remove('open');});
    document.querySelectorAll('.phone-flag-btn.open').forEach(function(b){b.classList.remove('open');});
    if(!wasOpen){btn.classList.add('open');dd.classList.add('open');var si=dd.querySelector('input');if(si)si.focus();}
}
function pickCountry(e,prefix){
    var item=e.currentTarget;
    document.getElementById(prefix+'-code').value=item.getAttribute('data-d');
    document.getElementById(prefix+'-disp').textContent=item.getAttribute('data-d');
    document.getElementById(prefix+'-trigger').querySelector('.pf-flag').textContent=item.getAttribute('data-f');
    document.getElementById(prefix+'-trigger').classList.remove('open');
    document.getElementById(prefix+'-dropdown').classList.remove('open');
}
function filterPicker(input,prefix){
    var q=input.value.toLowerCase();
    document.getElementById(prefix+'-list').querySelectorAll('.phone-ci').forEach(function(item){
        item.style.display=item.textContent.toLowerCase().indexOf(q)>=0?'':'none';
    });
}
document.addEventListener('click',function(e){
    document.querySelectorAll('.phone-dropdown.open').forEach(function(dd){
        var prefix=dd.id.replace('-dropdown','');
        var btn=document.getElementById(prefix+'-trigger');
        if(btn&&!btn.contains(e.target)&&!dd.contains(e.target)){
            btn.classList.remove('open');dd.classList.remove('open');
        }
    });
});
buildPicker('as');

function pickService(el) {
    el.classList.toggle('chosen');
    var val = el.getAttribute('data-val');
    var idx = assessData.service_types.indexOf(val);
    if (idx > -1) assessData.service_types.splice(idx, 1);
    else assessData.service_types.push(val);
}

function toggleFeature(el) {
    el.classList.toggle('chosen');
    el.querySelector('input').checked = el.classList.contains('chosen');
}

function pickOption(el) {
    var g = el.getAttribute('data-group');
    document.querySelectorAll('.option-card[data-group="'+g+'"]').forEach(function(c){ c.classList.remove('chosen'); });
    el.classList.add('chosen');
    assessData[g] = el.getAttribute('data-val');
    scoreBrief();
}

function assessGoTo(n) {
    document.querySelectorAll('.assess-panel').forEach(function(p){ p.classList.remove('active'); });
    document.getElementById('step-'+n).classList.add('active');
    for (var i=1; i<=5; i++) {
        var dot = document.getElementById('dot-'+i);
        if (i < n)       { dot.classList.add('done'); dot.classList.remove('active'); dot.innerHTML='<i class="fa-solid fa-check" style="font-size:.65rem"></i>'; }
        else if (i === n){ dot.classList.remove('done'); dot.classList.add('active'); dot.textContent=i; }
        else             { dot.classList.remove('done','active'); dot.textContent=i; }
        if (i < 5) document.getElementById('line-'+i).classList.toggle('done', i < n);
    }
    window.scrollTo({top:0, behavior:'smooth'});
}

function assessNext(from) {
    if (from === 1) {
        var firstName = document.getElementById('as-firstname').value.trim();
        var lastName  = document.getElementById('as-lastname').value.trim();
        var email     = document.getElementById('as-email').value.trim();
        if (!firstName) { document.getElementById('as-firstname').focus(); return; }
        if (!lastName)  { document.getElementById('as-lastname').focus(); return; }
        if (!email || email.indexOf('@') < 1) { document.getElementById('as-email').focus(); return; }
        var cc    = document.getElementById('as-code').value;
        var phone = document.getElementById('as-phone').value.trim();
        assessData.title      = document.getElementById('as-title').value;
        assessData.first_name = firstName;
        assessData.last_name  = lastName;
        assessData.name       = (firstName + ' ' + lastName).trim();
        assessData.company    = document.getElementById('as-company').value.trim();
        assessData.position   = document.getElementById('as-position').value.trim();
        assessData.email      = email;
        assessData.phone      = phone ? cc + ' ' + phone : '';
        assessData.heard_from = document.getElementById('as-heard').value;
    }
    if (from === 2 && assessData.service_types.length === 0) return;
    if (from === 3) {
        assessData.features = Array.from(document.querySelectorAll('.feature-item.chosen input')).map(function(cb){ return cb.value; });
        assessData.project_description = document.getElementById('as-desc').value.trim();
        assessData.reference_sites     = document.getElementById('as-refs').value.trim();
        assessData.brand_name = document.getElementById('as-brand').value.trim();
        assessData.sector = document.getElementById('as-sector').value.trim();
        assessData.existing_site = document.getElementById('as-existing').value.trim();
        assessData.country = document.getElementById('as-country').value.trim();
    }
    if (from === 4 && (!assessData.budget || !assessData.timeline)) return;
    if (from === 4) buildReview();
    assessGoTo(from + 1);
}

function assessBack(from) { if (from > 1) assessGoTo(from - 1); }

function buildReview() {
    var sl = {web:'Website / Portal',ecommerce:'E-Commerce',app:'Mobile App',marketing:'SEO / Marketing',portal:'CMS / Dashboard',other:'Other'};
    var heardLabels = {google:'Google Search',referral:'Referral / Word of Mouth',linkedin:'LinkedIn',instagram:'Instagram',facebook:'Facebook',youtube:'YouTube',social:'Other Social Media',event:'Event / Conference',press:'Press / Article',returning:'Returning Client',other:'Other'};
    var rows = [
        ['Name',        (assessData.title ? assessData.title.charAt(0).toUpperCase()+assessData.title.slice(1)+' ' : '') + assessData.name],
        ['Company',     assessData.company || '—'],
        ['Position',    assessData.position || '—'],
        ['Email',       assessData.email],
        ['Phone',       assessData.phone  || '—'],
        ['Found us via', assessData.heard_from ? (heardLabels[assessData.heard_from] || assessData.heard_from) : '—'],
        ['Service',     assessData.service_types.map(function(v){ return sl[v]||v; }).join(', ') || '—'],
        ['Features',    assessData.features.length ? assessData.features.join(', ') : '—'],
        ['Description', assessData.project_description || '—'],
        ['References',  assessData.reference_sites || '—'],
        ['Budget',      assessData.budget],
        ['Timeline',    assessData.timeline],
    ];
    document.getElementById('assess-review').innerHTML = rows.map(function(r){
        return '<div class="review-row"><span class="rev-label">'+r[0]+'</span><span class="rev-val">'+r[1]+'</span></div>';
    }).join('');
}

function pickOne(el){var g=el.getAttribute("data-group");var a=document.querySelectorAll('[data-group="'+g+'"]');for(var n=0;n<a.length;n++){a[n].classList.remove("chosen");}el.classList.add("chosen");assessData[g]=el.getAttribute("data-val");scoreBrief();}
function toggleFlag(el,k){
 el.classList.toggle('chosen');
 assessData[k]=el.classList.contains('chosen');
 scoreBrief();}
function scoreBrief(){
 var d=assessData,n=0;
 if(d.service_types.length)n++;
 if(d.page_count)n++;if(d.design_level)n++;
 if(d.has_brand_assets)n++;if(d.content_author)n++;
 if(d.budget)n++;if(d.timeline)n++;
 if((d.project_description||'').length>30)n++;
 d.brief_score=Math.round(n/8*100);
 var e=document.getElementById('briefPct');
 if(e)e.textContent=d.brief_score+'%';}

function assessSubmit() {
    var btn = document.getElementById('assess-submit-btn');
    var err = document.getElementById('assess-error');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Sending…';
    err.style.display = 'none';
    if(!assessData._t&&window.grecaptcha&&window.RCK){grecaptcha.ready(function(){grecaptcha.execute(window.RCK,{action:'assessment'}).then(function(t){assessData['g-recaptcha-response']=t;assessData._t=1;assessSubmit();});});return;}
    fetch('/contact/assessment/', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(assessData)
    })
    .then(function(r) {
        if (!r.ok) {
            return r.text().then(function(t) {
                throw new Error('Server error ' + r.status + (t ? ': ' + t.replace(/<[^>]+>/g,'').substring(0,300).trim() : ''));
            });
        }
        return r.json();
    })
    .then(function(data) {
        if (data.status === 'ok' || data.success) {
            document.getElementById('assess-form-wrap').style.display = 'none';
            document.getElementById('assess-success').style.display   = 'block';
        } else {
            err.textContent = data.error || 'Something went wrong. Please try again.';
            err.style.display = 'block';
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-paper-plane me-1"></i> Submit';
        }
    })
    .catch(function(e) {
        err.textContent = e.message || 'Could not connect to the server. Please try again.';
        err.style.display = 'block';
        btn.disabled = false;
        btn.innerHTML = '<i class="fa-solid fa-paper-plane me-1"></i> Submit';
    });
}
(function(){var o=assessNext;window.assessNext=function(st){if(st===3){var N=["design_level","page_count","has_brand_assets","content_author","payment_model","product_count"],bad=0,i,n;for(i=0;i<N.length;i++){var a=document.querySelectorAll('[data-group="'+N[i]+'"]'),ok=false;for(n=0;n<a.length;n++){if(a[n].classList.contains("chosen"))ok=true;}for(n=0;n<a.length;n++){if(ok){a[n].classList.remove("miss");}else{a[n].classList.add("miss");}}if(!ok)bad++;}var D=["as-sector","as-country"];for(i=0;i<D.length;i++){var e=document.getElementById(D[i]);if(e){if(!e.value){e.classList.add("miss");bad++;}else{e.classList.remove("miss");}}}var m=document.getElementById("s3err");if(!m){m=document.createElement("p");m.id="s3err";m.style.color="#ff404b";m.style.fontWeight="600";m.style.fontSize=".85rem";m.textContent="Please answer every section marked with a star before continuing.";var c=document.getElementById("as-country"),w=c.parentNode.parentNode;w.parentNode.insertBefore(m,w.nextSibling);}m.style.display=bad?"block":"none";if(bad)return false;}return o(st);};})();
</script>
{% endblock %}