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

{% block title %}Mobile First - 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>📱 Mobile First</h2>
    <p style="font-size:1.1rem;color:#666;margin-bottom:1.5rem;">Access your health information and communicate anywhere, anytime with our mobile-optimized platform.</p>
    
    <h3>Why Mobile First Matters</h3>
    <ul style="line-height:1.8;color:#555;">
        <li><strong>Always Connected:</strong> Access your health data on the go from any device</li>
        <li><strong>Responsive Design:</strong> Seamless experience on phones, tablets, and desktops</li>
        <li><strong>Offline Access:</strong> View critical information even without internet connection</li>
        <li><strong>Push Notifications:</strong> Get instant alerts about appointments and important updates</li>
        <li><strong>Native Apps:</strong> Download FamilyTouch on iOS and Android for the best experience</li>
    </ul>
    
    <h3 style="margin-top:2rem;">Supported Platforms</h3>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0;">
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;text-align:center;">
            <strong>iOS App</strong><br>
            Download on App Store<br>
            <small style="color:#999;">Version 1.0+</small>
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;text-align:center;">
            <strong>Android App</strong><br>
            Download on Google Play<br>
            <small style="color:#999;">Version 1.0+</small>
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;text-align:center;">
            <strong>Web App</strong><br>
            Access anytime at familytouch.com<br>
            <small style="color:#999;">Always up-to-date</small>
        </div>
    </div>
    
    <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 %}