@extends('layouts.app')

@section('title', 'Security - Gletra')

@section('content')
<div class="security-hero py-5 mb-5" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); color: white; border-radius: 0 0 50px 50px;">
    <div class="container py-5 text-center">
        <div class="mb-4">
            <div class="p-3 bg-white bg-opacity-10 d-inline-block rounded-circle mb-3">
                <i class="bi bi-shield-lock-fill display-3"></i>
            </div>
        </div>
        <h1 class="fw-extrabold display-4 mb-3">Security at Gletra</h1>
        <p class="lead opacity-75 max-w-2xl mx-auto">Your trust is our most valuable asset. We employ bank-grade security to keep your data and transactions safe.</p>
        <div class="d-flex justify-content-center gap-3 mt-4">
            <span class="badge bg-success bg-opacity-20 text-success border border-success border-opacity-20 px-3 py-2 rounded-pill">
                <i class="bi bi-patch-check-fill me-1"></i> ISO 27001 COMPLIANT
            </span>
            <span class="badge bg-primary bg-opacity-20 text-white border border-white border-opacity-20 px-3 py-2 rounded-pill">
                <i class="bi bi-lock-fill me-1"></i> 256-BIT ENCRYPTION
            </span>
        </div>
    </div>
</div>

<div class="container py-4">
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-up">
                <div class="bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                    <i class="bi bi-credit-card-2-front fs-3"></i>
                </div>
                <h4 class="fw-bold">Payment Safety</h4>
                <p class="text-muted small">We use PCI-DSS compliant payment gateways. Gletra never stores your card number or CVV.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-up">
                <div class="bg-success-light text-success rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                    <i class="bi bi-person-check fs-3"></i>
                </div>
                <h4 class="fw-bold">Account Protection</h4>
                <p class="text-muted small">Multi-factor authentication (2FA) and real-time monitoring of suspicious login attempts.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-up">
                <div class="bg-warning-light text-warning rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                    <i class="bi bi-cloud-check fs-3"></i>
                </div>
                <h4 class="fw-bold">Data Encryption</h4>
                <p class="text-muted small">All data transmitted between you and Gletra is encrypted using 256-bit SSL technology.</p>
            </div>
        </div>
    </div>

    <div class="row align-items-center mb-5 py-5">
        <div class="col-lg-6">
            <h2 class="fw-extrabold mb-4">Our Multi-Layered Security Approach</h2>
            <div class="d-flex gap-3 mb-4">
                <div class="flex-shrink-0">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">1</div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">Network Security</h5>
                    <p class="text-muted">Enterprise-grade firewalls and intrusion detection systems proactively monitor and block threats.</p>
                </div>
            </div>
            <div class="d-flex gap-3 mb-4">
                <div class="flex-shrink-0">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">2</div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">Data Sovereignty</h5>
                    <p class="text-muted">Personal data is stored in secured, isolated environments with strictly regulated access controls.</p>
                </div>
            </div>
            <div class="d-flex gap-3">
                <div class="flex-shrink-0">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">3</div>
                </div>
                <div>
                    <h5 class="fw-bold mb-1">Fraud Monitoring</h5>
                    <p class="text-muted">AI-driven fraud detection systems identify and flag high-risk transactions instantly.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 offset-lg-1 mt-5 mt-lg-0">
            <div class="bg-light p-5 rounded-5 border-start border-4 border-primary shadow-sm">
                <h4 class="fw-bold mb-3">Security Checklist for You</h4>
                <ul class="list-unstyled mb-0">
                    <li class="mb-3 d-flex align-items-start gap-2">
                        <i class="bi bi-check2-circle text-success mt-1"></i>
                        <span>Use a strong, unique password of at least 8-12 characters.</span>
                    </li>
                    <li class="mb-3 d-flex align-items-start gap-2">
                        <i class="bi bi-check2-circle text-success mt-1"></i>
                        <span>Enable Two-Factor Authentication (2FA) in settings.</span>
                    </li>
                    <li class="mb-3 d-flex align-items-start gap-2">
                        <i class="bi bi-check2-circle text-success mt-1"></i>
                        <span>Always logout if using a public or shared computer.</span>
                    </li>
                    <li class="d-flex align-items-start gap-2">
                        <i class="bi bi-check2-circle text-success mt-1"></i>
                        <span>Regularly check your recent login activity.</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="bg-dark text-white rounded-5 p-5 text-center mb-5 position-relative overflow-hidden">
        <div class="position-absolute translate-middle top-50 start-50 opacity-10" style="z-index: 0;">
            <i class="bi bi-shield-fill-exclamation" style="font-size: 20rem;"></i>
        </div>
        <div class="position-relative" style="z-index: 1;">
            <h2 class="fw-bold mb-3">Found a vulnerability?</h2>
            <p class="opacity-75 mb-4 max-w-xl mx-auto">We welcome security researchers to help us keep Gletra safe. If you find any issues, please report them to our security team.</p>
            <a href="mailto:security@gletra.com" class="btn btn-warning fw-bold px-5 py-3 rounded-pill shadow-lg">
                <i class="bi bi-envelope-fill me-2"></i> Report Vulnerability
            </a>
        </div>
    </div>
</div>

<style>
    .fw-extrabold { font-weight: 800; }
    .max-w-2xl { max-width: 42rem; }
    .max-w-xl { max-width: 36rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .bg-primary-light { background: rgba(79, 70, 229, 0.1); }
    .bg-success-light { background: rgba(34, 197, 94, 0.1); }
    .bg-warning-light { background: rgba(245, 158, 11, 0.1); }
    .hover-up { transition: transform 0.3s ease; }
    .hover-up:hover { transform: translateY(-10px); }
</style>
@endsection