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

{% block title %}FamilyTouch - Welcome{% endblock %}

{% block extra_css %}
<style>
    .hero {
        text-align: center;
        padding: 4rem 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        margin-bottom: 3rem;
    }
    
    .hero h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .hero p {
        font-size: 1.3rem;
        margin-bottom: 2rem;
        opacity: 0.95;
    }
    
    .hero-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
    }
    
    .card {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    
    .card-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .card h3 {
        margin-bottom: 0.5rem;
        color: #667eea;
    }
    
    .card p {
        color: #666;
        margin-bottom: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="hero">
    <h1>Welcome to FamilyTouch</h1>
    <p>Connecting Patients, Doctors, and Family Members in Real-Time</p>
    <div class="hero-buttons">
        <a href="{% url 'familytouch:patient_welcome' %}" class="btn">I'm a Patient</a>
        <a href="{% url 'familytouch:doctor_welcome' %}" class="btn btn-secondary">I'm a Doctor</a>
        <a href="{% url 'familytouch:family_welcome' %}" class="btn btn-secondary">I'm Family</a>
    </div>
</div>

<h2 style="text-align: center; margin-bottom: 2rem;">How FamilyTouch Works</h2>

<div class="card-grid">
    <a href="{% url 'familytouch:connected_care' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">🔗</div>
        <h3>Connected Care</h3>
        <p>Seamlessly connect patients with healthcare providers and family members for coordinated, holistic care.</p>
    </a>
    
    <a href="{% url 'familytouch:mobile_first' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">📱</div>
        <h3>Mobile First</h3>
        <p>Access your health information and communicate anywhere, anytime with our mobile-optimized platform.</p>
    </a>
    
    <a href="{% url 'familytouch:secure_private' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">🔒</div>
        <h3>Secure & Private</h3>
        <p>Your health data is protected with enterprise-grade encryption and HIPAA compliance.</p>
    </a>
    
    <a href="{% url 'familytouch:real_time_updates' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">⚡</div>
        <h3>Real-Time Updates</h3>
        <p>Get instant notifications about appointments, medications, and important health updates.</p>
    </a>
    
    <a href="{% url 'familytouch:health_tracking' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">📊</div>
        <h3>Health Tracking</h3>
        <p>Monitor vital signs, medications, and medical history all in one unified dashboard.</p>
    </a>
    
    <a href="{% url 'familytouch:direct_communication' %}" class="card" style="text-decoration:none;color:inherit;cursor:pointer;">
        <div class="card-icon">💬</div>
        <h3>Direct Communication</h3>
        <p>Message your healthcare team and family members directly within the application.</p>
    </a>
</div>
{% endblock %}