@extends('layouts.user')

@section('title', 'Smart Dermatology | AI-Powered Skin Analysis')

@section('content')
    <section class="hero">
        <div class="container text-center animate__animated animate__fadeIn">
            <h1 class="display-3 fw-bold">Your Skin Deserves <br><span style="color: var(--brand-pink);">Smart Care</span></h1>
            <p class="lead mb-4">Professional AI-driven insights for dermatological health.</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                <a href="{{ route('checker') }}" class="btn btn-pink btn-lg">Start Free Analysis</a>
                @guest
                    <a href="{{ route('register') }}" class="btn btn-outline-light btn-lg rounded-pill px-4">Create Account</a>
                @endguest
            </div>
        </div>
    </section>

    <section class="py-5 bg-white" id="about">
        <div class="container text-center">
            <h2 class="fw-bold mb-5">How It Works</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <i class="fas fa-camera fa-3x mb-3" style="color: var(--brand-pink);"></i>
                    <h4>Snap a Photo</h4>
                    <p class="text-muted">Take a clear, well-lit picture of the affected skin area.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <i class="fas fa-microscope fa-3x mb-3" style="color: var(--brand-pink);"></i>
                    <h4>AI Analysis</h4>
                    <p class="text-muted">Our deep learning model scans for patterns and textures.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <i class="fas fa-notes-medical fa-3x mb-3" style="color: var(--brand-pink);"></i>
                    <h4>Get Results</h4>
                    <p class="text-muted">Receive instant info on potential conditions and precautions.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img src="{{ asset('theme/user/assets/derm_-_hero_image_2_1.width-1300.jpg') }}" class="img-fluid rounded pb-3 mb-3" alt="Check Skin">
                </div>
                <div class="col-md-6">
                    <h2 class="fw-bold">Early Identification of Skin Issues</h2>
                    <p class="text-muted">Skin conditions like Melanoma or Psoriasis can be tricky to spot. Our AI uses advanced deep learning to help you understand your skin better. Simply upload a photo and get instant results.</p>
                    <a href="{{ route('checker') }}" class="btn btn-pink">Check Your Skin</a>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5 fw-bold">Conditions We Specialize In</h2>
            <div class="row g-4">
                @foreach (['Eczema', 'Warts', 'Tinea Ringworm', 'Atopic Dermatitis', 'Benign Keratosis', 'Melanoma', 'Psoriasis', 'Seborrheic Keratoses', 'Basal Cell Carcinoma', 'Melanocytic Nevi'] as $condition)
                    <div class="col-md-4 col-lg-3">
                        <div class="card disease-card p-3 h-100">
                            <h5 class="card-title">{{ $condition }}</h5>
                            <p class="small text-muted mb-0">Explore educational guidance, symptoms, and prevention tips for {{ $condition }}.</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection