{% extends 'familytouch/base.html' %}

{% block title %}Secure & Private - FamilyTouch{% endblock %}

{% block content %}
<div style="max-width:800px;margin:2rem auto;background:white;padding:2rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06);">
    <h2>🔒 Secure & Private</h2>
    <p style="font-size:1.1rem;color:#666;margin-bottom:1.5rem;">Your health data is protected with enterprise-grade encryption and HIPAA compliance.</p>
    
    <h3>Security Features</h3>
    <ul style="line-height:1.8;color:#555;">
        <li><strong>End-to-End Encryption:</strong> All data encrypted in transit and at rest</li>
        <li><strong>HIPAA Compliant:</strong> Meets all healthcare privacy and security regulations</li>
        <li><strong>Two-Factor Authentication:</strong> Optional 2FA for enhanced account security</li>
        <li><strong>Audit Logs:</strong> Complete audit trail of all data access and modifications</li>
        <li><strong>Data Backup:</strong> Automatic daily backups with disaster recovery</li>
    </ul>
    
    <h3 style="margin-top:2rem;">Your Privacy Rights</h3>
    <div style="background:#fff3cd;padding:1rem;border-radius:4px;border-left:4px solid #ffc107;margin-bottom:1rem;">
        <strong>You control your data:</strong>
        <ul style="margin-top:0.5rem;margin-bottom:0;color:#555;">
            <li>Granular permission controls — decide who sees what</li>
            <li>Revoke access anytime — remove users or restrict permissions instantly</li>
            <li>Data deletion — request complete data removal at any time</li>
            <li>Export your data — download your health information in standard formats</li>
        </ul>
    </div>
    
    <h3>Certifications & Compliance</h3>
    <ul style="line-height:1.8;color:#555;">
        <li>✓ HIPAA BAA (Business Associate Agreement)</li>
        <li>✓ GDPR Compliant</li>
        <li>✓ SOC 2 Type II Certified</li>
        <li>✓ PCI DSS Level 1</li>
        <li>✓ Regular Security Audits</li>
    </ul>
    
    <div style="margin-top:2rem;padding:1rem;background:#f0f8ff;border-left:4px solid #667eea;border-radius:4px;">
        <strong>Ready to get started?</strong> <a href="{% url 'familytouch:home' %}" class="btn" style="margin-left:1rem;">Back to Home</a>
    </div>
</div>
{% endblock %}