{# Step 4: Terms & Signature - Legal agreement and signature capture #}
<div class="step-screen" id="stepTerms" data-step="terms" style="display: none;">
    <div class="step-content">
        <h1 class="step-title">Review & Sign</h1>
        <p class="step-desc">Please read the terms below and sign to complete check-in.</p>

        <form class="form-area" id="termsForm" novalidate>
            {# Terms & Conditions Box #}
            <div class="terms-box" id="termsBox">
                <h5>Terms & Conditions</h5>
                <div class="terms-content" id="termsContent">
                    {# Terms HTML loaded from store settings or default template #}
                    <p>Seller represents to {{ store.companyName|default('the Company') }}:</p>
                    <p>A) Seller lawfully owns the items.</p>
                    <p>B) Seller has disclosed known defects.</p>
                    <p>Seller represents that each designer item is authentic. Items not picked up today will be donated to charity, except you will receive STORE CREDIT for items we purchase.</p>
                </div>
            </div>

            {# Scroll Indicator - Shows until user scrolls to bottom #}
            <div class="scroll-indicator" id="scrollIndicator">
                <i class="fas fa-chevron-down"></i>
                <span>Scroll to read more</span>
            </div>

            {# Signature Section #}
            <div class="signature-section">
                <div class="signature-header">
                    <label class="input-label">Your Signature</label>
                    <button type="button" class="clear-signature-btn" id="clearSignatureBtn">
                        <i class="fas fa-redo"></i> Clear
                    </button>
                </div>
                <canvas class="signature-canvas" id="signatureCanvas" aria-label="Signature area"></canvas>
                <p class="signature-hint" id="signatureHint">Use your finger to sign above</p>
                <div class="invalid-feedback" id="signatureError" style="display: none;">
                    Please provide your signature
                </div>
            </div>

            {# Checkbox Fallback - For devices with canvas issues #}
            <div class="checkbox-fallback" id="checkboxFallback" style="display: none;">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Having trouble signing? Check the box below instead.
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="checkbox"
                           id="signatureCheckbox"
                           name="signatureCheckbox">
                    <label class="form-check-label" for="signatureCheckbox">
                        I agree to the terms and conditions above and acknowledge this constitutes my electronic signature.
                    </label>
                </div>
            </div>

            {# Hidden fields #}
            <input type="hidden" name="signatureData" id="signatureData" value="">
            <input type="hidden" name="signatureType" id="signatureType" value="canvas">
            <input type="hidden" name="termsVersion" id="termsVersion" value="{{ termsVersion|default('1.0') }}">
            <input type="hidden" name="termsAccepted" id="termsAccepted" value="0">
        </form>
    </div>
</div>