{# Step 2: Profile - Returning customer verification or new customer registration #}
<div class="step-screen" id="stepProfile" data-step="profile" style="display: none;">
    <div class="step-content">
        {# Returning Customer Welcome Banner - Shown when customer found #}
        <div class="welcome-strip" id="welcomeStrip" style="display: none;">
            <div class="avatar">
                <span id="welcomeEmoji">{{ emoji|default('👋')|raw }}</span>
            </div>
            <div class="info">
                <h4 id="welcomeName">Welcome back!</h4>
                <p>Great to see you again</p>
            </div>
        </div>

        {# New Customer Title - Shown when customer not found #}
        <div id="newCustomerHeader">
            <h1 class="step-title">Almost there!</h1>
            <p class="step-desc">We need a few details to set up your account.</p>
        </div>

        {# Returning Customer Title - Hidden by default #}
        <div id="returningCustomerHeader" style="display: none;">
            <h1 class="step-title">Is this you?</h1>
            <p class="step-desc">Please verify your information is correct.</p>
        </div>

        <form class="form-area" id="profileForm" novalidate>
            {# Name Fields (always required) #}
            <div class="row g-3">
                <div class="col-6">
                    <div class="input-group-custom">
                        <label class="input-label" for="firstName">First Name <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text"
                                   class="input-field"
                                   id="firstName"
                                   name="firstName"
                                   placeholder="First"
                                   autocomplete="given-name"
                                   autocapitalize="words"
                                   maxlength="50"
                                   required>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="input-group-custom">
                        <label class="input-label" for="lastName">Last Name <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text"
                                   class="input-field"
                                   id="lastName"
                                   name="lastName"
                                   placeholder="Last"
                                   autocomplete="family-name"
                                   autocapitalize="words"
                                   maxlength="50"
                                   required>
                        </div>
                    </div>
                </div>
            </div>

            {# Phone Field #}
            <div class="input-group-custom" id="profilePhoneGroup">
                <label class="input-label" for="profilePhone">Phone <span class="required">*</span></label>
                <div class="input-wrapper">
                    <i class="fas fa-phone input-icon"></i>
                    <input type="tel"
                           class="input-field"
                           id="profilePhone"
                           name="phone"
                           placeholder="(555) 555-5555"
                           autocomplete="tel"
                           inputmode="tel"
                           required>
                </div>
            </div>

            {# Email Field #}
            <div class="input-group-custom" id="profileEmailGroup">
                <label class="input-label" for="profileEmail">Email <span class="optional-label">(optional)</span></label>
                <div class="input-wrapper">
                    <i class="fas fa-envelope input-icon"></i>
                    <input type="email"
                           class="input-field"
                           id="profileEmail"
                           name="email"
                           placeholder="email@example.com"
                           autocomplete="email"
                           inputmode="email"
                           maxlength="100">
                </div>
            </div>

            {# Address Fields - Collapsible for returning customers #}
            <div class="address-section" id="addressSection">
                <div class="input-group-custom">
                    <label class="input-label" for="address">Address <span class="optional-label">(optional)</span></label>
                    <div class="input-wrapper">
                        <i class="fas fa-home input-icon"></i>
                        <input type="text"
                               class="input-field"
                               id="address"
                               name="address"
                               placeholder="Street address"
                               autocomplete="street-address"
                               maxlength="100">
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-6">
                        <div class="input-group-custom">
                            <label class="input-label" for="city">City</label>
                            <input type="text"
                                   class="input-field input-field-compact"
                                   id="city"
                                   name="city"
                                   placeholder="City"
                                   autocomplete="address-level2"
                                   maxlength="50">
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="input-group-custom">
                            <label class="input-label" for="profileState">State</label>
                            <select class="input-field input-field-compact" id="profileState" name="state" autocomplete="address-level1">
                                <option value="">--</option>
                                {# US States #}
                                {% set usStates = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY','DC'] %}
                                {# Canadian Provinces & Territories #}
                                {% set caProvinces = ['AB','BC','MB','NB','NL','NS','NT','NU','ON','PE','QC','SK','YT'] %}
                                {% for state in usStates %}
                                <option value="{{ state }}"{{ store.state == state ? ' selected' : '' }}>{{ state }}</option>
                                {% endfor %}
                                <option disabled>───────</option>
                                {% for prov in caProvinces %}
                                <option value="{{ prov }}"{{ store.state == prov ? ' selected' : '' }}>{{ prov }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="input-group-custom">
                            <label class="input-label" for="zipcode">ZIP</label>
                            <input type="text"
                                   class="input-field input-field-compact"
                                   id="zipcode"
                                   name="zipcode"
                                   placeholder="12345"
                                   autocomplete="postal-code"
                                   inputmode="numeric"
                                   maxlength="10"
                                   pattern="^\d{5}(-\d{4})?$">
                        </div>
                    </div>
                </div>
            </div>

            {# Hidden fields for returning customer data #}
            <input type="hidden" name="customerId" id="customerId" value="">
            <input type="hidden" name="isReturning" id="isReturning" value="0">
        </form>

        {# "This looks correct" / "Update my info" toggle for returning customers #}
        <div class="returning-actions" id="returningActions" style="display: none;">
            <button type="button" class="btn btn-link text-muted" id="editInfoBtn">
                <i class="fas fa-edit me-1"></i> Update my information
            </button>
        </div>
    </div>
</div>