@extends('layouts.user')

@section('title', 'About Us | Smart Dermatology')

@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">About <span style="color: var(--brand-pink);">Section</span></h1>
            <p class="lead mb-4">Bridging the gap between Technology and Healthcare.</p>
        </div>
    </section>

    <section class="py-5 bg-white">
        <div class="container">
            <div class="row align-items-center py-5">
                <div class="col-md-6">
                    <h2 class="fw-bold mb-4">Our Mission</h2>
                    <p class="text-muted">Smart Dermatology was built to make skin health monitoring accessible, approachable, and informed by AI-assisted screening.</p>
                    <p class="text-muted">We help users distinguish between everyday irritation and conditions that deserve fast professional attention.</p>
                </div>
                <div class="col-md-6 text-center">
                    <div class="p-4" style="background-color: #fff0f3; border-radius: 20px;">
                        <i class="fas fa-heartbeat fa-5x mb-3" style="color: var(--brand-pink);"></i>
                        <h4 class="fw-bold">Health First</h4>
                        <p class="small text-muted">Focusing on accuracy and user safety above all else.</p>
                    </div>
                </div>
            </div>

            <hr>

            <div class="row align-items-center py-5">
                <div class="col-md-6 order-md-2">
                    <h2 class="fw-bold mb-4">The Purpose of Smart Dermatology</h2>
                    <ul class="list-unstyled">
                        <li class="mb-3"><i class="fas fa-check-circle me-2" style="color: var(--brand-pink);"></i> <strong>Early Detection:</strong> Identifying major skin diseases with AI assistance.</li>
                        <li class="mb-3"><i class="fas fa-check-circle me-2" style="color: var(--brand-pink);"></i> <strong>Education:</strong> Providing understandable disease information and precautions.</li>
                        <li class="mb-3"><i class="fas fa-check-circle me-2" style="color: var(--brand-pink);"></i> <strong>Accessibility:</strong> Offering a simple interface for home screening.</li>
                        <li class="mb-3"><i class="fas fa-check-circle me-2" style="color: var(--brand-pink);"></i> <strong>Support:</strong> Encouraging professional consultation when risk is higher.</li>
                    </ul>
                </div>
                <div class="col-md-6 order-md-1">
                    <img src="{{ asset('theme/user/assets/download.jpg') }}" class="img-fluid rounded shadow-sm w-100" alt="Technology and Health">
                </div>
            </div>
        </div>
    </section>
@endsection