<?php
/**
 * Privacy Policy and Terms of Service dialogs (opened from footer links).
 */
?>

<!-- Privacy Policy -->
<div
    id="privacy-modal"
    class="fixed inset-0 z-[112] hidden items-center justify-center bg-neutral-950/70 px-4 py-8 backdrop-blur-md transition-opacity duration-300 opacity-0 pointer-events-none sm:px-6"
    role="dialog"
    aria-modal="true"
    aria-labelledby="privacy-modal-title"
>
    <div class="relative w-full max-w-2xl max-h-[min(92vh,760px)] overflow-y-auto rounded-2xl border border-neutral-200/90 bg-white p-8 shadow-2xl shadow-neutral-900/20 sm:p-10 transform scale-[0.97] opacity-0 transition-all duration-300 ease-out">
        <button
            type="button"
            onclick="closePrivacyModal()"
            class="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
            aria-label="Close privacy policy"
        >
            <svg class="h-5 w-5" 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>

        <p class="text-xs font-semibold uppercase tracking-wider text-primary-600">Legal</p>
        <h2 id="privacy-modal-title" class="mt-1 text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
            Privacy Policy
        </h2>
        <p class="mt-1 text-sm text-neutral-500">Last updated: April 2026</p>

        <div class="mt-8 space-y-5 text-sm leading-relaxed text-neutral-600">
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Overview</h3>
                <p class="mt-2">
                    CandleCraft Academy (“we”, “us”) respects your privacy. This policy describes how we collect, use, and protect personal information when you use our website, book workshops, or contact us.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Information we collect</h3>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    <li>Contact details you provide (name, email, phone) when you enquire or book.</li>
                    <li>Booking and attendance information related to classes you register for.</li>
                    <li>Technical data such as browser type and approximate region, where available, to keep the site secure.</li>
                </ul>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">How we use information</h3>
                <p class="mt-2">
                    We use this information to respond to enquiries, manage bookings, send service related messages, and improve our workshops and website. We do not sell your personal data.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Cookies and similar technologies</h3>
                <p class="mt-2">
                    We may use cookies or local storage where needed for security, preferences, or analytics. You can control cookies through your browser settings.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Retention and security</h3>
                <p class="mt-2">
                    We keep personal data only as long as needed for the purposes above or as required by law, and we use reasonable measures to protect it.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Your choices</h3>
                <p class="mt-2">
                    You may request access to or correction of your personal information, or ask questions about this policy, by contacting us at the details shown in the site footer.
                </p>
            </section>
        </div>
    </div>
</div>

<!-- Terms of Service -->
<div
    id="terms-modal"
    class="fixed inset-0 z-[112] hidden items-center justify-center bg-neutral-950/70 px-4 py-8 backdrop-blur-md transition-opacity duration-300 opacity-0 pointer-events-none sm:px-6"
    role="dialog"
    aria-modal="true"
    aria-labelledby="terms-modal-title"
>
    <div class="relative w-full max-w-2xl max-h-[min(92vh,760px)] overflow-y-auto rounded-2xl border border-neutral-200/90 bg-white p-8 shadow-2xl shadow-neutral-900/20 sm:p-10 transform scale-[0.97] opacity-0 transition-all duration-300 ease-out">
        <button
            type="button"
            onclick="closeTermsModal()"
            class="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
            aria-label="Close terms of service"
        >
            <svg class="h-5 w-5" 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>

        <p class="text-xs font-semibold uppercase tracking-wider text-primary-600">Legal</p>
        <h2 id="terms-modal-title" class="mt-1 text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
            Terms of Service
        </h2>
        <p class="mt-1 text-sm text-neutral-500">Last updated: April 2026</p>

        <div class="mt-8 space-y-5 text-sm leading-relaxed text-neutral-600">
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Agreement</h3>
                <p class="mt-2">
                    By using this website or booking a workshop with CandleCraft Academy, you agree to these terms. If you do not agree, please do not use our services.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Workshops and bookings</h3>
                <p class="mt-2">
                    Class descriptions, schedules, and prices are offered in good faith and may change. A booking is confirmed only when we communicate confirmation according to our booking process (including any payment or deposit rules stated at checkout or by email).
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Conduct and safety</h3>
                <p class="mt-2">
                    Participants are expected to follow staff instructions and venue rules. We may refuse service or ask someone to leave if behaviour risks safety or disrupts the class.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Cancellations and changes</h3>
                <p class="mt-2">
                    Cancellation, refund, and reschedule policies depend on the specific workshop and will be communicated at booking or in your confirmation. We may need to cancel or reschedule classes due to low enrolment, instructor availability, or force majeure; in those cases we will offer reasonable alternatives where possible.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Limitation of liability</h3>
                <p class="mt-2">
                    Creative workshops involve materials and tools. You participate at your own risk to the extent permitted by law. We are not liable for indirect or consequential loss except where such exclusion is not allowed by applicable law.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Intellectual property</h3>
                <p class="mt-2">
                    Site content, branding, and class materials remain our property or our licensors’ property unless otherwise stated. You may not copy or redistribute them without permission.
                </p>
            </section>
            <section>
                <h3 class="text-base font-semibold text-neutral-900">Changes</h3>
                <p class="mt-2">
                    We may update these terms from time to time. Continued use of the site after changes constitutes acceptance of the updated terms.
                </p>
            </section>
        </div>
    </div>
</div>

<script>
(function () {
    var TRANS_MS = 300;

    function syncBodyOverflow() {
        var contact = document.getElementById('contact-modal');
        var privacy = document.getElementById('privacy-modal');
        var terms = document.getElementById('terms-modal');
        var open =
            (contact && contact.classList.contains('flex')) ||
            (privacy && privacy.classList.contains('flex')) ||
            (terms && terms.classList.contains('flex'));
        document.body.style.overflow = open ? 'hidden' : '';
    }

    function clearCloseTimer(modal) {
        if (!modal) return;
        var raw = modal.getAttribute('data-cc-close-timer');
        if (raw) {
            clearTimeout(parseInt(raw, 10));
            modal.removeAttribute('data-cc-close-timer');
        }
    }

    /** Instant hide (no animation). Used when switching between the two legal modals. */
    function forceHideModal(modal) {
        if (!modal) return;
        clearCloseTimer(modal);
        var inner = modal.querySelector('div.relative');
        if (inner) {
            inner.style.removeProperty('transform');
            inner.style.removeProperty('opacity');
        }
        modal.classList.remove('flex', 'opacity-100', 'pointer-events-auto');
        modal.classList.add('hidden', 'opacity-0', 'pointer-events-none');
        modal.setAttribute('aria-hidden', 'true');
    }

    function showModal(modal) {
        if (!modal) return;
        clearCloseTimer(modal);

        modal.classList.remove('hidden');
        modal.classList.add('flex', 'opacity-0', 'pointer-events-none');
        modal.removeAttribute('aria-hidden');

        var inner = modal.querySelector('div.relative');
        if (inner) {
            inner.style.transform = 'scale(0.97)';
            inner.style.opacity = '0';
        }

        requestAnimationFrame(function () {
            requestAnimationFrame(function () {
                modal.classList.remove('opacity-0', 'pointer-events-none');
                modal.classList.add('opacity-100', 'pointer-events-auto');
                if (inner) {
                    inner.style.transform = 'scale(1)';
                    inner.style.opacity = '1';
                }
                syncBodyOverflow();
            });
        });
    }

    function hideModal(modal) {
        if (!modal || !modal.classList.contains('flex')) return;
        clearCloseTimer(modal);

        var inner = modal.querySelector('div.relative');
        if (inner) {
            inner.style.transform = 'scale(0.97)';
            inner.style.opacity = '0';
        }

        modal.classList.remove('opacity-100', 'pointer-events-auto');
        modal.classList.add('opacity-0', 'pointer-events-none');

        var tid = window.setTimeout(function () {
            modal.removeAttribute('data-cc-close-timer');
            modal.classList.remove('flex');
            modal.classList.add('hidden');
            modal.setAttribute('aria-hidden', 'true');
            if (inner) {
                inner.style.removeProperty('transform');
                inner.style.removeProperty('opacity');
            }
            syncBodyOverflow();
        }, TRANS_MS);
        modal.setAttribute('data-cc-close-timer', String(tid));
    }

    window.__ccSyncBodyOverflow = syncBodyOverflow;

    window.openPrivacyModal = function () {
        forceHideModal(document.getElementById('terms-modal'));
        showModal(document.getElementById('privacy-modal'));
    };

    window.closePrivacyModal = function () {
        hideModal(document.getElementById('privacy-modal'));
    };

    window.openTermsModal = function () {
        forceHideModal(document.getElementById('privacy-modal'));
        showModal(document.getElementById('terms-modal'));
    };

    window.closeTermsModal = function () {
        hideModal(document.getElementById('terms-modal'));
    };

    document.addEventListener('DOMContentLoaded', function () {
        var pm0 = document.getElementById('privacy-modal');
        var tm0 = document.getElementById('terms-modal');
        if (pm0) pm0.setAttribute('aria-hidden', 'true');
        if (tm0) tm0.setAttribute('aria-hidden', 'true');

        document.addEventListener('click', function (e) {
            var p = document.getElementById('privacy-modal');
            var t = document.getElementById('terms-modal');
            if (p && e.target === p) window.closePrivacyModal();
            if (t && e.target === t) window.closeTermsModal();
        });

        document.addEventListener('keydown', function (e) {
            if (e.key !== 'Escape') return;
            var p = document.getElementById('privacy-modal');
            var t = document.getElementById('terms-modal');
            if (p && p.classList.contains('flex')) {
                e.preventDefault();
                window.closePrivacyModal();
                return;
            }
            if (t && t.classList.contains('flex')) {
                e.preventDefault();
                window.closeTermsModal();
            }
        }, true);
    });
})();
</script>
