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

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

{% block extra_css %}
<style>
    .welcome-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .welcome-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    .welcome-header p {
        font-size: 1.1rem;
        opacity: 0.95;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .feature-box {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        border-left: 4px solid #667eea;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .feature-box h3 {
        color: #667eea;
        margin-bottom: 0.5rem;
    }
    
    .feature-box p {
        color: #666;
        line-height: 1.5;
    }
    
    .cta-section {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        padding: 3rem;
        border-radius: 8px;
        text-align: center;
        margin-top: 3rem;
    }
    
    .cta-section h2 {
        margin-bottom: 1rem;
    }
    
    .cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }
    
    .info-section {
        background: #f8f9fa;
        padding: 2rem;
        border-radius: 8px;
        margin-top: 2rem;
    }
    
    .info-section h3 {
        color: #333;
        margin-bottom: 1rem;
    }
    
    .info-section ul {
        list-style-position: inside;
        color: #666;
    }
    
    .info-section li {
        margin-bottom: 0.5rem;
    }
    
    .roles-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .role-card {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        border: 2px solid #667eea;
    }
    
    .role-card h4 {
        color: #667eea;
        margin-bottom: 0.5rem;
    }
    
    .role-card p {
        color: #666;
        font-size: 0.9rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="welcome-header">
    <h1>👨‍👩‍👧 Welcome, Family Member</h1>
    <p>Stay informed and connected with your loved one's health journey</p>
</div>

<h2 style="margin-bottom: 1.5rem;">Your Family Care Features</h2>

<div class="features-grid">
    {% for feature in features %}
    <div class="feature-box">
        <h3>✓ {{ feature }}</h3>
        <p>
            {% if "monitor" in feature.lower %}
                Real-time updates on health status, vital signs, and important medical milestones.
            {% elif "important" in feature.lower %}
                Get instant notifications about appointments, medications, and health alerts.
            {% elif "healthcare" in feature.lower %}
                Direct communication channels with doctors and care team members.
            {% elif "assist" in feature.lower %}
                Help manage appointments, medications, and medical paperwork on their behalf.
            {% elif "access" in feature.lower %}
                View authorized medical records and health information with full transparency.
            {% endif %}
        </p>
    </div>
    {% endfor %}
</div>

<div class="info-section">
    <h3>👥 Family Roles & Responsibilities</h3>
    <p style="margin-bottom: 1rem; color: #666;">Define your role to better organize care responsibilities with other family members.</p>
    <div class="roles-section">
        <div class="role-card">
            <h4>📱 Caregiver</h4>
            <p>Manage day-to-day care, medications, and appointments. Coordinate with healthcare team.</p>
        </div>
        <div class="role-card">
            <h4>👀 Guardian</h4>
            <p>Provide oversight and make care decisions. Full access to medical records and contacts.</p>
        </div>
        <div class="role-card">
            <h4>💬 Support</h4>
            <p>Provide emotional support and encouragement. View basic health status updates.</p>
        </div>
        <div class="role-card">
            <h4>🏥 Advocate</h4>
            <p>Represent loved one during medical decisions. Attend appointments and meetings.</p>
        </div>
    </div>
    {% if user.is_authenticated %}
    <div style="text-align: center; margin-top: 1.5rem;">
        <a href="{% url 'familytouch:family_role_management' %}" class="btn" style="background: #667eea; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 5px; display: inline-block;">Manage My Roles & Responsibilities</a>
    </div>
    {% endif %}
</div>

<div class="info-section">
    <h3>🛠️ Family Care Tools</h3>
    {% if user.is_authenticated and user.profile.user_type == 'family' %}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
        <a href="{% url 'familytouch:dashboard' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            📊 Family Dashboard
        </a>
        <a href="{% url 'familytouch:family_role_management' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            👥 Manage Roles
        </a>
        <a href="{% url 'familytouch:meal_choice' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            🍽️ Meal Preferences
        </a>
        <a href="{% url 'familytouch:connected_care' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            🔗 Connect Patients
        </a>
        <a href="{% url 'familytouch:real_time_updates' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            ⚡ Patient Updates
        </a>
        <a href="{% url 'familytouch:direct_communication' %}" style="padding: 1.5rem; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: bold;">
            💬 Send Messages
        </a>
    </div>
    {% else %}
    <p style="margin-top: 1rem; color: #666;">Sign up or log in to access your family care tools.</p>
    {% endif %}
</div>

<div class="info-section">
    <h3>🎯 How to Get Started:</h3>
    <ol>
        <li><strong>Create Your Family Account</strong> - Sign up with your email or phone number</li>
        <li><strong>Get Invited or Invite</strong> - Receive an invitation from your loved one OR invite them to connect</li>
        <li><strong>Select Your Role</strong> - Choose your role (Caregiver, Guardian, Support, or Advocate)</li>
        <li><strong>Set Permissions</strong> - Define what health information you can access</li>
        <li><strong>Start Connecting</strong> - Receive updates and communicate with care team</li>
    </ol>
</div>

<div class="cta-section">
    <h2>Keep Your Family Healthy & Connected</h2>
    <p>Join families staying informed and involved in their loved one's healthcare</p>
    <div class="cta-buttons">
        <a href="{% url 'familytouch:family_signup' %}" class="btn">Join as Family Member</a>
        <a href="#" class="btn btn-secondary">Learn More</a>
    </div>
</div>

<div class="info-section">
    <h3>❓ Family Member FAQs</h3>
    <ul>
        <li><strong>What information can I see?</strong> - Only what your loved one grants you access to, with full transparency.</li>
        <li><strong>Can I help manage appointments?</strong> - Yes, with permission you can help schedule and track appointments.</li>
        <li><strong>How do I communicate with doctors?</strong> - Use the secure messaging feature to contact the healthcare team.</li>
        <li><strong>What if there's an emergency?</strong> - The app includes emergency protocols and direct doctor contact.</li>
        <li><strong>Is this HIPAA compliant?</strong> - Yes, all family access is HIPAA-compliant and audited.</li>
        <li><strong>Can multiple family members connect?</strong> - Yes, coordinate with multiple caregivers and family members.</li>
    </ul>
</div>

<div class="info-section">
    <h3>💪 The FamilyTouch Difference</h3>
    <ul>
        <li><strong>Privacy Controlled</strong> - Your loved one has full control over what you can see</li>
        <li><strong>Three-Way Communication</strong> - Direct lines between patients, doctors, and families</li>
        <li><strong>Real-Time Updates</strong> - Stay informed with push notifications and alerts</li>
        <li><strong>All in One Place</strong> - No more phone calls, emails, or scattered information</li>
        <li><strong>Mobile Friendly</strong> - Access on any device, anytime, anywhere</li>
    </ul>
</div>
{% endblock %}