@extends('layouts.main')

@section('title', 'Terms of Service')
@section('description', 'The rules, rights, and responsibilities governing your use of our services.')

@section('content')
<section id="terms-root" x-data="pageHero()" x-init="Alpine.store('terms', { ids })" class="relative overflow-hidden pt-28 lg:pt-32 pb-10 lg:pb-14">
    <div class="absolute inset-0 -z-10">
        <div class="absolute inset-0 bg-dark-gradient opacity-90"></div>
        <div class="absolute inset-0 bg-dots opacity-10"></div>
    </div>
    <div class="particles -z-0" aria-hidden="true">
        <template x-for="(p,i) in particles" :key="'tr-'+i">
            <span class="particle" :style="`--x:${p.x};--y:${p.y};--dx:${p.dx};--dy:${p.dy};--dur:${p.d};--delay:${p.delay};`"></span>
        </template>
    </div>
    <div class="container-custom text-center">
        <h1 :id="ids.title" class="font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-text-primary text-glow">Terms of Service</h1>
        <p :id="ids.sub" class="mt-4 text-text-secondary text-lg max-w-3xl mx-auto">Please read these terms carefully before using our services.</p>
    </div>
</section>

<section class="pb-20 lg:pb-28">
    <div class="container-custom space-y-6">
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">1. Acceptance of Terms</h2>
            <p class="text-text-secondary">By accessing or using our services, you agree to be bound by these Terms. If you do not agree, do not use our services.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">2. Eligibility</h2>
            <p class="text-text-secondary">You must be of legal age in your jurisdiction and capable of forming a binding contract to use our services.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">3. Accounts & Security</h2>
            <p class="text-text-secondary">You are responsible for maintaining the confidentiality of your account and for all activities that occur under your account.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">4. Intellectual Property</h2>
            <p class="text-text-secondary">All content and IP associated with our services are owned by or licensed to us. You may not copy, distribute, or create derivative works without permission.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">5. User Conduct</h2>
            <p class="text-text-secondary">You agree not to misuse the services, engage in unlawful activities, or interfere with the platform’s integrity or security.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">6. Disclaimers</h2>
            <p class="text-text-secondary">Services are provided “as is” without warranties of any kind. Use is at your own risk.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">7. Limitation of Liability</h2>
            <p class="text-text-secondary">To the fullest extent permitted by law, we are not liable for indirect, incidental, or consequential damages resulting from your use of the services.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">8. Indemnification</h2>
            <p class="text-text-secondary">You agree to defend, indemnify, and hold us harmless from claims arising out of your use of the services or violation of these Terms.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">9. Termination</h2>
            <p class="text-text-secondary">We may suspend or terminate access at any time for any violation of these Terms or other lawful reasons.</p>
        </article>
        <article class="card card-variant-dark">
            <h2 class="font-heading text-2xl text-text-primary mb-2">10. Governing Law & Changes</h2>
            <p class="text-text-secondary">These Terms are governed by applicable local laws. We may update these Terms; continued use constitutes acceptance.</p>
        </article>
    </div>
</section>
@endsection

@push('scripts')
<script>
    function pageHero(){
        const uid = () => 'id-' + Math.random().toString(36).slice(2, 8);
        return {
            ids: { title: uid(), sub: uid() },
            particles: Array.from({ length: 16 }).map(() => {
                const d = (Math.random() * 8 + 8).toFixed(2) + 's';
                const delay = (-Math.random() * 6).toFixed(2) + 's';
                const x = (Math.random() * 100).toFixed(2) + '%';
                const y = (Math.random() * 100).toFixed(2) + '%';
                const dx = ((Math.random() * 40) - 20).toFixed(0) + 'px';
                const dy = ((Math.random() * 40) - 20).toFixed(0) + 'px';
                return { x, y, dx, dy, d, delay };
            })
        }
    }
    document.addEventListener('DOMContentLoaded', () => {
        const ids = Alpine.store('terms')?.ids || {};
        gsap.utils.toArray('.card-variant-dark').forEach((el, i) => {
            gsap.from(el, { y: 24, opacity: 0, duration: 0.6, ease: 'power2.out', delay: i * 0.04, scrollTrigger: { trigger: el, start: 'top 90%' } });
        });
        const mm = gsap.matchMedia();
        mm.add('(min-width: 1024px)', () => {
            const tl = gsap.timeline({ scrollTrigger: { trigger: '#terms-root', start: 'top top', end: '+=320', scrub: true } });
            if (ids.title) tl.to('#' + ids.title, { yPercent: -10 }, 0);
            if (ids.sub) tl.to('#' + ids.sub, { yPercent: -16 }, 0);
        });
    });
</script>
@endpush