{#
    Demo Form Modal Partial (UI Only)
    PRD: Feature 6 - Primary CTA / Demo Form (lines 173-183)
    SDD: PRD Mapping (lines 338-350)

    Requirements:
    - Required fields: name, email, phone, store_name, store_type
    - Store type dropdown: Resale/Consignment, Sporting Goods, Phone Check-In, Other
    - Hidden team_plus_interest field (set via JS from Team+ page)
    - CSRF token field
    - Form action="/api/demo/contact" for non-JS fallback
    - Form method="POST" for non-JS fallback
#}

{# Demo Form Modal #}
<div class="modern-modal" id="demoFormModal" role="dialog" aria-modal="true" aria-labelledby="demoFormTitle" hidden>
    <div class="modern-modal__overlay" data-demo-close></div>
    <div class="modern-modal__content">
        <button class="modern-modal__close" type="button" data-demo-close aria-label="Close modal">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <div class="modern-modal__header">
            <h2 id="demoFormTitle" class="modern-modal__title">Schedule a Demo</h2>
            <p class="modern-modal__subtitle">See how BuyerKiosk can transform your store operations.</p>
        </div>

        {# Form with non-JS fallback per PRD edge case line 284 #}
        <form
            id="demoForm"
            class="modern-form"
            action="/api/demo/contact"
            method="POST"
            novalidate
        >
            {# CSRF Token #}
            <input type="hidden" name="{{ csrf_key }}" value="{{ csrf_token }}">

            {# Hidden field for Team+ interest (set via JS) #}
            <input type="hidden" name="team_plus_interest" id="teamPlusInterest" value="0">

            {# Hidden field for source tracking #}
            <input type="hidden" name="source" id="demoSource" value="homepage">

            {# Name Field #}
            <div class="modern-form__group">
                <label for="demoName" class="modern-form__label">Full Name <span class="modern-form__required">*</span></label>
                <input
                    type="text"
                    id="demoName"
                    name="name"
                    class="modern-form__input"
                    required
                    autocomplete="name"
                    placeholder="John Smith"
                >
                <span class="modern-form__error" id="demoNameError" aria-live="polite"></span>
            </div>

            {# Email Field #}
            <div class="modern-form__group">
                <label for="demoEmail" class="modern-form__label">Email Address <span class="modern-form__required">*</span></label>
                <input
                    type="email"
                    id="demoEmail"
                    name="email"
                    class="modern-form__input"
                    required
                    autocomplete="email"
                    placeholder="john@example.com"
                >
                <span class="modern-form__error" id="demoEmailError" aria-live="polite"></span>
            </div>

            {# Phone Field #}
            <div class="modern-form__group">
                <label for="demoPhone" class="modern-form__label">Phone Number <span class="modern-form__required">*</span></label>
                <input
                    type="tel"
                    id="demoPhone"
                    name="phone"
                    class="modern-form__input"
                    required
                    autocomplete="tel"
                    placeholder="(555) 123-4567"
                >
                <span class="modern-form__error" id="demoPhoneError" aria-live="polite"></span>
            </div>

            {# Store Name Field #}
            <div class="modern-form__group">
                <label for="demoStoreName" class="modern-form__label">Store Name <span class="modern-form__required">*</span></label>
                <input
                    type="text"
                    id="demoStoreName"
                    name="store_name"
                    class="modern-form__input"
                    required
                    placeholder="My Resale Store"
                >
                <span class="modern-form__error" id="demoStoreNameError" aria-live="polite"></span>
            </div>

            {# Store Type Dropdown #}
            <div class="modern-form__group">
                <label for="demoStoreType" class="modern-form__label">Store Type <span class="modern-form__required">*</span></label>
                <select
                    id="demoStoreType"
                    name="store_type"
                    class="modern-form__select"
                    required
                >
                    <option value="">Select store type...</option>
                    <option value="resale_consignment">Resale/Consignment</option>
                    <option value="sporting_goods">Sporting Goods</option>
                    <option value="phone_checkin">Phone Check-In</option>
                    <option value="other">Other</option>
                </select>
                <span class="modern-form__error" id="demoStoreTypeError" aria-live="polite"></span>
            </div>

            {# Submit Button #}
            <div class="modern-form__actions">
                <button type="submit" class="modern-btn modern-btn--primary modern-btn--block modern-btn--large" id="demoSubmitBtn">
                    <span class="modern-btn__text">Request Demo</span>
                    <span class="modern-btn__loading" hidden>
                        <svg class="modern-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Submitting...
                    </span>
                </button>
            </div>

            {# Success/Error Messages #}
            <div class="modern-form__message modern-form__message--success" id="demoSuccessMessage" hidden>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Thank you! We'll be in touch shortly to schedule your demo.</span>
            </div>
            <div class="modern-form__message modern-form__message--error" id="demoErrorMessage" hidden>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span id="demoErrorText">Something went wrong. Please try again.</span>
            </div>
        </form>

        {# noscript fallback message display #}
        <noscript>
            <style>.modern-form__message--noscript { display: block !important; }</style>
        </noscript>
    </div>
</div>

{# Demo Form JavaScript - Basic modal control #}
<script>
(function() {
    const modal = document.getElementById('demoFormModal');
    const triggers = document.querySelectorAll('[data-demo-trigger]');
    const closers = document.querySelectorAll('[data-demo-close]');
    const teamPlusField = document.getElementById('teamPlusInterest');
    const sourceField = document.getElementById('demoSource');

    // Check if on Team+ page
    const isTeamPlusPage = document.body.getAttribute('data-page') === 'team-plus';

    // Open modal
    function openModal(source) {
        modal.hidden = false;
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';

        // Set source tracking
        if (sourceField && source) {
            sourceField.value = source;
        }

        // Set team_plus_interest if on Team+ page
        if (teamPlusField && isTeamPlusPage) {
            teamPlusField.value = '1';
        }

        // Track PostHog event if available
        if (typeof posthog !== 'undefined') {
            posthog.capture('demo_form_opened', {
                source: source || 'unknown',
                page: isTeamPlusPage ? 'team-plus' : 'homepage'
            });
        }

        // Focus first input
        setTimeout(function() {
            const firstInput = modal.querySelector('input:not([type="hidden"])');
            if (firstInput) firstInput.focus();
        }, 100);
    }

    // Close modal
    function closeModal() {
        modal.hidden = true;
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
    }

    // Bind trigger buttons
    triggers.forEach(function(trigger) {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            const source = trigger.getAttribute('data-posthog-position') || 'unknown';
            openModal(source);
        });
    });

    // Bind close buttons
    closers.forEach(function(closer) {
        closer.addEventListener('click', function(e) {
            e.preventDefault();
            closeModal();
        });
    });

    // Close on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.hidden) {
            closeModal();
        }
    });

    // Check for URL params (non-JS fallback success/error)
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('demo') === 'success') {
        document.getElementById('demoSuccessMessage').hidden = false;
        openModal('redirect');
    } else if (urlParams.get('demo') === 'error') {
        document.getElementById('demoErrorMessage').hidden = false;
        openModal('redirect');
    }
})();
</script>