@extends('website.layouts.app')

@section('content')
    @include('website.components.header')

    <main class="pt-20">
        <section class="bg-teal-deep text-white py-16 md:py-24 relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-4 md:mb-6">Terms and Conditions</h1>
                <p class="text-base sm:text-xl text-teal-100 max-w-3xl mx-auto leading-relaxed">Effective Date: 2026-05-15</p>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-cream">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                    <!-- Table of Contents Sidebar -->
                    <div class="lg:col-span-1 order-2 lg:order-1">
                        <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 sticky top-24">
                            <h3 class="text-lg font-heading font-bold text-teal-deep mb-4">Quick Navigation</h3>
                            <nav class="space-y-2">
                                <a href="#company-info" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Company Information</a>
                                <a href="#definitions" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Definitions</a>
                                <a href="#eligibility" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Eligibility</a>
                                <a href="#account" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Account Registration</a>
                                <a href="#membership" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Membership Plans</a>
                                <a href="#activation" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Membership Activation</a>
                                <a href="#digital-card" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Digital Membership Card</a>
                                <a href="#usage" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Membership Usage Rules</a>
                                <a href="#offers" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Partner Offers</a>
                                <a href="#payments" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Payments</a>
                                <a href="#refunds" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Refunds</a>
                                <a href="#contact" class="block text-sm text-gray-600 hover:text-amber-gold transition-colors py-1">Contact Information</a>
                            </nav>
                        </div>
                    </div>

                    <!-- Main Content -->
                    <div class="lg:col-span-3 order-1 lg:order-2">
                        <div class="bg-white rounded-2xl p-8 md:p-12 shadow-lg border border-gray-100">
                            <p class="text-lg leading-relaxed mb-8 text-gray-700">Welcome to Savesmart.lk. These Terms and Conditions ("Terms") govern your access to and use of the SaveSmart.lk website, digital membership platform, and related services operated by Savesmart (Pvt) Ltd. By accessing, registering, subscribing to, or using SaveSmart.lk, you agree to comply with and be legally bound by these Terms and Conditions. If you do not agree with these Terms, please do not use our website or services.</p>

                            <!-- Company Information Card -->
                            <div id="company-info" class="bg-gradient-to-br from-teal-deep/5 to-amber-gold/5 rounded-xl p-6 mb-8 border border-teal-deep/10">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="building-2" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">1. Company Information</h2>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="briefcase" class="w-5 h-5 text-teal-deep mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-gray-500">Company Name</p>
                                            <p class="font-medium text-gray-900">Savesmart (Pvt) Ltd</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="hash" class="w-5 h-5 text-teal-deep mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-gray-500">Registration No.</p>
                                            <p class="font-medium text-gray-900">PV00363428</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3 md:col-span-2">
                                        <i data-lucide="map-pin" class="w-5 h-5 text-teal-deep mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-gray-500">Registered Address</p>
                                            <p class="font-medium text-gray-900">556/1/15, 5th Lane, Pitipana Town, Homagama, Sri Lanka</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="mail" class="w-5 h-5 text-teal-deep mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-gray-500">Email</p>
                                            <p class="font-medium text-gray-900">support@savesmart.lk</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="phone" class="w-5 h-5 text-teal-deep mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-gray-500">Phone</p>
                                            <p class="font-medium text-gray-900">+94 70 630 2900</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Definitions -->
                            <div id="definitions" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-amber-gold rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="book-open" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">2. Definitions</h2>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
                                    <div class="space-y-3">
                                        <div class="flex items-start gap-3">
                                            <i data-lucide="building" class="w-4 h-4 text-teal-deep mt-1 shrink-0"></i>
                                            <div>
                                                <span class="font-bold text-gray-900">"Company", "Savesmart", "we", "our", or "us"</span>
                                                <span class="text-gray-600"> refers to Savesmart (Pvt) Ltd.</span>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <i data-lucide="user" class="w-4 h-4 text-teal-deep mt-1 shrink-0"></i>
                                            <div>
                                                <span class="font-bold text-gray-900">"Member", "user", "you", or "your"</span>
                                                <span class="text-gray-600"> refers to any person who accesses or uses the platform.</span>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <i data-lucide="building-2" class="w-4 h-4 text-teal-deep mt-1 shrink-0"></i>
                                            <div>
                                                <span class="font-bold text-gray-900">"Partner Business"</span>
                                                <span class="text-gray-600"> means any business or organization providing offers, discounts, products, or services through Savesmart.</span>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <i data-lucide="credit-card" class="w-4 h-4 text-teal-deep mt-1 shrink-0"></i>
                                            <div>
                                                <span class="font-bold text-gray-900">"Membership"</span>
                                                <span class="text-gray-600"> means a paid subscription granting access to Savesmart benefits.</span>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <i data-lucide="id-card" class="w-4 h-4 text-teal-deep mt-1 shrink-0"></i>
                                            <div>
                                                <span class="font-bold text-gray-900">"Digital Membership Card"</span>
                                                <span class="text-gray-600"> means the electronic membership identification issued by Savesmart.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Eligibility -->
                            <div id="eligibility" class="bg-gradient-to-br from-amber-gold/5 to-teal-deep/5 rounded-xl p-6 mb-8 border border-amber-gold/10">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="user-check" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">3. Eligibility</h2>
                                </div>
                                <p class="text-gray-600 mb-4">To use Savesmart services, you must:</p>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="flex items-center gap-2 bg-white rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check-circle" class="w-5 h-5 text-teal-deep"></i>
                                        <span class="text-sm text-gray-700">Be at least 18 years of age</span>
                                    </div>
                                    <div class="flex items-center gap-2 bg-white rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check-circle" class="w-5 h-5 text-teal-deep"></i>
                                        <span class="text-sm text-gray-700">Have consent from a parent or legal guardian</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mt-4">By registering, you confirm that all information provided is accurate and complete.</p>
                            </div>

                            <!-- Account Registration -->
                            <div id="account" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="user-plus" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">4. Account Registration</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Users are required to create an account to access membership services. You agree to:</p>
                                <div class="space-y-2">
                                    <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check" class="w-4 h-4 text-teal-deep mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Provide accurate, current, and complete information</span>
                                    </div>
                                    <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check" class="w-4 h-4 text-teal-deep mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Keep your account information updated</span>
                                    </div>
                                    <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check" class="w-4 h-4 text-teal-deep mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Maintain the confidentiality of your login credentials</span>
                                    </div>
                                    <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="check" class="w-4 h-4 text-teal-deep mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Accept responsibility for all activities conducted through your account</span>
                                    </div>
                                </div>
                                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 mt-0.5 shrink-0"></i>
                                        <p class="text-sm text-red-700">Savesmart reserves the right to suspend or terminate accounts containing false, inaccurate, or misleading information.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Membership Plans -->
                            <div id="membership" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-amber-gold rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="credit-card" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">5. Membership Plans</h2>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                    <div class="bg-gradient-to-br from-teal-deep to-teal-dark rounded-xl p-6 text-white text-center">
                                        <h4 class="font-bold text-lg mb-2">1 Month</h4>
                                        <p class="text-3xl font-heading font-bold text-amber-gold mb-1">LKR 499</p>
                                        <p class="text-sm text-teal-100">per month</p>
                                    </div>
                                    <div class="bg-gradient-to-br from-amber-gold to-amber-dark rounded-xl p-6 text-white text-center">
                                        <h4 class="font-bold text-lg mb-2">6 Months</h4>
                                        <p class="text-3xl font-heading font-bold text-white mb-1">LKR 2,499</p>
                                        <p class="text-sm text-amber-100">save LKR 495</p>
                                    </div>
                                    <div class="bg-gradient-to-br from-teal-deep to-teal-dark rounded-xl p-6 text-white text-center relative overflow-hidden">
                                        <div class="absolute top-2 right-2 bg-amber-gold text-white text-xs px-2 py-1 rounded-full font-bold">BEST VALUE</div>
                                        <h4 class="font-bold text-lg mb-2">Annual</h4>
                                        <p class="text-3xl font-heading font-bold text-amber-gold mb-1">LKR 4,999</p>
                                        <p class="text-sm text-teal-100">save LKR 989</p>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">Membership fees may be revised by Savesmart at any time without prior notice. Any changes will not affect active memberships already purchased.</p>
                            </div>

                            <!-- Membership Activation -->
                            <div id="activation" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="zap" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">6. Membership Activation</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Membership becomes active only after:</p>
                                <div class="space-y-2">
                                    <div class="flex items-center gap-3 bg-green-50 rounded-lg p-3 border border-green-200">
                                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">1</div>
                                        <span class="text-sm text-gray-700">Successful payment confirmation</span>
                                    </div>
                                    <div class="flex items-center gap-3 bg-green-50 rounded-lg p-3 border border-green-200">
                                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">2</div>
                                        <span class="text-sm text-gray-700">Approval and issuance of the digital membership card by Savesmart</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mt-4">Savesmart reserves the right to refuse, delay, or cancel membership activation if suspicious or fraudulent activity is detected.</p>
                            </div>

                            <!-- Digital Membership Card -->
                            <div id="digital-card" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="id-card" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">7. Digital Membership Card</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Members will receive a personalized digital membership card containing a unique identification code and/or QR code. Members must:</p>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="flex items-center gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="qr-code" class="w-5 h-5 text-teal-deep"></i>
                                        <span class="text-sm text-gray-700">Present valid membership card when redeeming partner offers</span>
                                    </div>
                                    <div class="flex items-center gap-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                                        <i data-lucide="refresh-cw" class="w-5 h-5 text-teal-deep"></i>
                                        <span class="text-sm text-gray-700">Ensure membership details remain accurate and current</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mt-4">The digital membership card remains the property of Savesmart.</p>
                            </div>

                            <!-- Membership Usage Rules -->
                            <div id="usage" class="bg-red-50 rounded-xl p-6 mb-8 border border-red-200">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="shield-alert" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">8. Membership Usage Rules</h2>
                                </div>
                                <p class="text-gray-700 mb-4 font-bold">Memberships are strictly personal and non-transferable. Members shall not:</p>
                                <div class="space-y-2">
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Share membership credentials or cards with others</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Allow unauthorized individuals to use membership benefits</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Duplicate, alter, or falsify membership information</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Misrepresent themselves when redeeming offers</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Use Savesmart services for unlawful purposes</span>
                                    </div>
                                </div>
                                <p class="text-sm text-red-700 mt-4 font-bold">Violation of these rules may result in immediate suspension or termination without refund.</p>
                            </div>

                            <!-- Partner Offers -->
                            <div id="offers" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="building-2" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">9. Partner Offers and Discounts</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Savesmart acts solely as a facilitator connecting members with partner businesses. Partner businesses independently determine:</p>
                                <div class="grid grid-cols-2 md:grid-cols-5 gap-2 mb-4">
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200">
                                        <i data-lucide="percent" class="w-5 h-5 text-teal-deep mx-auto mb-1"></i>
                                        <p class="text-xs text-gray-700">Discount percentages</p>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200">
                                        <i data-lucide="file-text" class="w-5 h-5 text-teal-deep mx-auto mb-1"></i>
                                        <p class="text-xs text-gray-700">Promotional terms</p>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200">
                                        <i data-lucide="calendar" class="w-5 h-5 text-teal-deep mx-auto mb-1"></i>
                                        <p class="text-xs text-gray-700">Availability periods</p>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200">
                                        <i data-lucide="check-square" class="w-5 h-5 text-teal-deep mx-auto mb-1"></i>
                                        <p class="text-xs text-gray-700">Redemption conditions</p>
                                    </div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200">
                                        <i data-lucide="package" class="w-5 h-5 text-teal-deep mx-auto mb-1"></i>
                                        <p class="text-xs text-gray-700">Product availability</p>
                                    </div>
                                </div>
                                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                                    <p class="font-bold text-yellow-800 mb-2">Savesmart does not guarantee:</p>
                                    <ul class="text-sm text-yellow-700 space-y-1">
                                        <li>• Continuous availability of any offer</li>
                                        <li>• Specific discount amounts</li>
                                        <li>• Product or service quality</li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Partner Services Responsibility -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-gray-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="alert-circle" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">10. Responsibility for Partner Services</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Products and services purchased from partner businesses are solely the responsibility of the respective partner business. Savesmart shall not be liable for:</p>
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-4">
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Product defects</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Service quality issues</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Delays or cancellations</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Pricing disputes</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Refund disputes</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Damages from products/services</div>
                                </div>
                                <p class="text-sm text-gray-600">Any disputes relating to products or services must be resolved directly with the relevant partner business.</p>
                            </div>

                            <!-- Payments -->
                            <div id="payments" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-amber-gold rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="credit-card" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">11. Payments</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Payments for memberships may be made through:</p>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <span class="bg-teal-deep text-white px-4 py-2 rounded-full text-sm">PayHere</span>
                                    <span class="bg-teal-deep text-white px-4 py-2 rounded-full text-sm">Direct Bank Transfer</span>
                                    <span class="bg-teal-deep text-white px-4 py-2 rounded-full text-sm">Other approved methods</span>
                                </div>
                                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="shield-check" class="w-5 h-5 text-blue-600 mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="font-bold text-blue-800 mb-1">Security</p>
                                            <p class="text-sm text-blue-700">Savesmart does not store customer card information.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Refunds -->
                            <div id="refunds" class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">12. Refunds</h2>
                                </div>
                                <div class="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-4">
                                    <p class="text-sm text-orange-800"><strong>Refund Window:</strong> Within 3 calendar days from payment date</p>
                                    <p class="text-sm text-orange-800"><strong>Processing Time:</strong> Up to 14 business days</p>
                                </div>
                                <p class="text-gray-600 mb-4">Savesmart reserves the right to refuse refunds in cases involving:</p>
                                <ul class="space-y-2">
                                    <li class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="x" class="w-4 h-4 text-red-500"></i> Membership misuse
                                    </li>
                                    <li class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="x" class="w-4 h-4 text-red-500"></i> Fraudulent activity
                                    </li>
                                    <li class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="x" class="w-4 h-4 text-red-500"></i> Violation of these Terms
                                    </li>
                                </ul>
                                <p class="text-sm text-gray-600 mt-4">Additional conditions are governed by the separate <a href="{{ route('website.refund-policy') }}" class="text-teal-deep hover:text-amber-gold">Refund Policy</a>.</p>
                            </div>

                            <!-- Cancellation -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-gray-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="x-circle" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">13. Cancellation</h2>
                                </div>
                                <p class="text-gray-600">Memberships cannot be cancelled once activated. Membership benefits remain available until the membership expiry date. Savesmart memberships are not automatically renewed. Members are responsible for manually renewing memberships.</p>
                            </div>

                            <!-- Website Availability -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="globe" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">14. Website Availability</h2>
                                </div>
                                <p class="text-gray-600 mb-4">While Savesmart strives to maintain uninterrupted access, we do not guarantee continuous, error-free, or secure operation of the website. Temporary interruptions may occur due to:</p>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200 text-xs text-gray-700">Maintenance</div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200 text-xs text-gray-700">Technical failures</div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200 text-xs text-gray-700">Security updates</div>
                                    <div class="bg-gray-50 rounded-lg p-3 text-center border border-gray-200 text-xs text-gray-700">Circumstances beyond control</div>
                                </div>
                            </div>

                            <!-- Intellectual Property -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="copyright" class=" w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">15. Intellectual Property</h2>
                                </div>
                                <p class="text-gray-600 mb-4">All website content including logos, trademarks, graphics, text, images, videos, software, and designs are the exclusive property of Savesmart (Pvt) Ltd unless otherwise stated.</p>
                                <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                                    <p class="text-sm text-purple-800"><strong>No content may be copied, reproduced, distributed, modified, or commercially exploited without prior written permission.</strong></p>
                                </div>
                            </div>

                            <!-- Prohibited Activities -->
                            <div class="bg-red-50 rounded-xl p-6 mb-8 border border-red-200">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="ban" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">16. Prohibited Activities</h2>
                                </div>
                                <p class="text-gray-700 mb-4 font-bold">Users shall not:</p>
                                <div class="space-y-2">
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Attempt unauthorized access to systems or databases</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Upload malicious software or harmful code</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Interfere with website security</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Engage in fraudulent activities</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Scrape or harvest website data</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-red-600 mt-0.5 shrink-0"></i>
                                        <span class="text-sm text-gray-700">Use automated systems without permission</span>
                                    </div>
                                </div>
                                <p class="text-sm text-red-700 mt-4 font-bold">Savesmart reserves the right to pursue legal action for violations.</p>
                            </div>

                            <!-- Account Suspension -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="user-x" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">17. Account Suspension and Termination</h2>
                                </div>
                                <p class="text-gray-600 mb-4">Savesmart may suspend or terminate accounts immediately if users:</p>
                                <div class="space-y-2">
                                    <div class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-500"></i> Violate these Terms
                                    </div>
                                    <div class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-500"></i> Engage in fraudulent activity
                                    </div>
                                    <div class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-500"></i> Abuse partner offers
                                    </div>
                                    <div class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-500"></i> Damage Savesmart's reputation
                                    </div>
                                    <div class="flex items-center gap-2 text-sm text-gray-700">
                                        <i data-lucide="alert-triangle" class="w-4 h-4 text-orange-500"></i> Use the platform unlawfully
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mt-4">Termination may occur without prior notice.</p>
                            </div>

                            <!-- Limitation of Liability -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-gray-600 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="shield-alert" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">18. Limitation of Liability</h2>
                                </div>
                                <p class="text-gray-600 mb-4">To the maximum extent permitted by law, Savesmart shall not be liable for:</p>
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-4">
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Indirect damages</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Loss of profits</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Loss of opportunities</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Loss of goodwill</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Data loss</div>
                                    <div class="bg-gray-50 rounded-lg p-2 text-center border border-gray-200 text-xs text-gray-700">Service interruptions</div>
                                </div>
                                <p class="text-sm text-gray-600">Savesmart's total liability shall not exceed the amount paid by the member for the applicable membership subscription.</p>
                            </div>

                            <!-- Indemnification -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="shield" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">19. Indemnification</h2>
                                </div>
                                <p class="text-gray-600">Users agree to indemnify and hold harmless Savesmart, its directors, employees, affiliates, and partners from any claims, liabilities, damages, losses, or expenses arising from violation of these Terms, misuse of the platform, or violation of laws or third-party rights.</p>
                            </div>

                            <!-- Privacy -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="lock" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">20. Privacy</h2>
                                </div>
                                <p class="text-gray-600">Use of Savesmart services is also governed by the <a href="{{ route('website.privacy-policy') }}" class="text-teal-deep hover:text-amber-gold">Savesmart Privacy Policy</a>.</p>
                            </div>

                            <!-- Changes to Terms -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="file-text" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">21. Changes to Terms</h2>
                                </div>
                                <p class="text-gray-600">Savesmart reserves the right to amend these Terms at any time. Updated Terms shall become effective immediately upon publication on the website. Continued use of the platform constitutes acceptance of revised Terms.</p>
                            </div>

                            <!-- Governing Law -->
                            <div class="mb-8">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-teal-deep rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="gavel" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-teal-deep">22. Governing Law</h2>
                                </div>
                                <p class="text-gray-600">These Terms and Conditions shall be governed by and interpreted in accordance with the laws of the Democratic Socialist Republic of Sri Lanka. Any disputes arising under these Terms shall be subject to the exclusive jurisdiction of the courts of Sri Lanka.</p>
                            </div>

                            <!-- Contact Information -->
                            <div id="contact" class="bg-gradient-to-br from-teal-deep to-teal-dark rounded-xl p-6 text-white">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center text-white">
                                        <i data-lucide="mail" class="w-5 h-5"></i>
                                    </div>
                                    <h2 class="text-xl font-heading font-bold text-white">23. Contact Information</h2>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="building" class="w-5 h-5 text-amber-gold mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-teal-200">Company</p>
                                            <p class="font-medium">Savesmart (Pvt) Ltd</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="map-pin" class="w-5 h-5 text-amber-gold mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-teal-200">Address</p>
                                            <p class="font-medium">556/1/15, 5th Lane, Pitipana Town, Homagama, Sri Lanka</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="mail" class="w-5 h-5 text-amber-gold mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-teal-200">Email</p>
                                            <p class="font-medium">support@savesmart.lk</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3">
                                        <i data-lucide="phone" class="w-5 h-5 text-amber-gold mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-teal-200">Phone</p>
                                            <p class="font-medium">+94 70 630 2900</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start gap-3 md:col-span-2">
                                        <i data-lucide="globe" class="w-5 h-5 text-amber-gold mt-0.5 shrink-0"></i>
                                        <div>
                                            <p class="text-sm text-teal-200">Website</p>
                                            <p class="font-medium">www.savesmart.lk</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('website.components.footer')
@endsection