@extends('layouts.user')

@section('title', 'Disease Encyclopedia | Smart Dermatology')

@push('styles')
    <style>
        .disease-detail-card { background: white; border-radius: 20px; border: 1px solid rgba(246, 144, 166, 0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; height: 100%; padding: 30px; display: flex; flex-direction: column; }
        .disease-detail-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(246, 144, 166, 0.2); border-bottom: 5px solid var(--brand-pink); }
        .badge-step { display: inline-block; background-color: #fff0f3; color: var(--brand-pink); font-weight: 600; padding: 4px 15px; border-radius: 50px; font-size: 0.75rem; margin-bottom: 15px; text-transform: uppercase; }
        .prevention-box { background-color: #fcfcfc; border-left: 3px solid var(--brand-pink); padding: 10px 15px; margin-top: auto; font-size: 0.85rem; border-radius: 0 10px 10px 0; }
        .disease-title { color: #333; font-weight: 700; margin-bottom: 10px; }
    </style>
@endpush

@php
    $diseases = [
        ['badge' => 'Common Condition', 'title' => 'Eczema', 'description' => 'Inflammatory skin condition with dryness, itching, and recurring rashes.', 'precaution' => 'Use fragrance-free moisturizers and avoid harsh detergents.', 'prevention' => 'Identify triggers like stress or specific fabrics; keep skin hydrated.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Viral', 'title' => 'Warts', 'description' => 'Small, grainy skin growths caused by viral infections (HPV).', 'precaution' => 'Do not pick or scratch; cover them to prevent spread.', 'prevention' => 'Wear footwear in public pools and avoid direct contact with others\' warts.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Fungal', 'title' => 'Tinea Ringworm', 'description' => 'A fungal infection that creates a red, circular rash with clearer skin in the middle.', 'precaution' => 'Keep the area dry and do not share towels or clothing.', 'prevention' => 'Wear breathable clothing and wash gym clothes immediately after use.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Chronic', 'title' => 'Atopic Dermatitis', 'description' => 'A chronic condition making skin red, itchy, and sensitive.', 'precaution' => 'Apply thick creams within three minutes of bathing.', 'prevention' => 'Use humidifiers in dry weather and avoid sudden temperature changes.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Non-Cancerous', 'title' => 'Benign Keratosis', 'description' => 'Non-cancerous waxy or scaly skin growths.', 'precaution' => 'Avoid irritating the area with tight clothing or scratching.', 'prevention' => 'Maintain overall skin health and observe any unusual changes.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Critical', 'title' => 'Melanoma', 'description' => 'The most serious form of skin cancer, often developing in a mole or dark spot.', 'precaution' => 'Consult a dermatologist immediately for any changing mole.', 'prevention' => 'Strict sun protection and regular full-body skin checks are essential.', 'card_class' => 'border-danger', 'badge_class' => 'bg-danger text-white'],
        ['badge' => 'Autoimmune', 'title' => 'Psoriasis', 'description' => 'Immune response causing rapid cell buildup and silvery scales.', 'precaution' => 'Use lukewarm water for showers and avoid skin injuries.', 'prevention' => 'Manage stress and limit alcohol because these are common triggers.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Common / Age', 'title' => 'Seborrheic Keratoses', 'description' => 'Common noncancerous skin growth in older adults.', 'precaution' => 'Usually harmless but can be removed if irritated by friction.', 'prevention' => 'No specific prevention; they are mostly linked to age and genetics.', 'card_class' => '', 'badge_class' => ''],
        ['badge' => 'Urgent', 'title' => 'Basal Cell Carcinoma', 'description' => 'A skin cancer that often looks like a pearly bump or non-healing sore.', 'precaution' => 'Do not ignore sores that will not heal.', 'prevention' => 'Avoid peak sun hours and wear protective hats.', 'card_class' => 'border-warning', 'badge_class' => 'bg-warning text-dark'],
        ['badge' => 'Moles', 'title' => 'Melanocytic Nevi', 'description' => 'Commonly known as moles, formed by pigment-producing cells.', 'precaution' => 'Use the ABCDE rule to monitor for changes.', 'prevention' => 'Limit excessive UV exposure to reduce new mole formation.', 'card_class' => '', 'badge_class' => ''],
    ];
@endphp

@section('content')
    <section class="hero-mini" style="height: 70vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white;">
        <div class="container text-center animate__animated animate__fadeIn">
            <h1 class="display-3 fw-bold">Dermatology <span style="color: var(--brand-pink);">Library</span></h1>
            <p class="lead mb-4">Detailed insights and care guides for your skin health.</p>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4">
                @foreach ($diseases as $disease)
                    <div class="col-md-6 col-lg-4">
                        <div class="disease-detail-card {{ $disease['card_class'] }}">
                            <span class="badge-step {{ $disease['badge_class'] }}">{{ $disease['badge'] }}</span>
                            <h4 class="disease-title">{{ $disease['title'] }}</h4>
                            <p class="text-muted small">{{ $disease['description'] }}</p>
                            <p class="small"><strong>Precaution:</strong> {{ $disease['precaution'] }}</p>
                            <div class="prevention-box"><strong>Prevention:</strong> {{ $disease['prevention'] }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection
