@extends('layouts.app')

@section('title', 'Tentang Kami')

@section('content')
<div class="about-container">
    <div class="about-header">
        <h1>Tentang SeismicDetect</h1>
        <p>Sistem deteksi dini gempa bumi berbasis Internet of Things (IoT)</p>
    </div>

    <div class="about-content">
        <div class="about-section">
            <h2>Misi Kami</h2>
            <p>Menyediakan sistem peringatan dini gempa yang akurat, cepat, dan terjangkau untuk masyarakat Indonesia yang berada di wilayah rawan bencana.</p>
        </div>

        <div class="about-section">
            <h2>Teknologi yang Digunakan</h2>
            <ul class="tech-list">
                <li>
                    <strong>Sensor Akselerometer MPU6050</strong>
                    <p>Sensor presisi tinggi untuk mendeteksi getaran gempa dalam 3 sumbu (X, Y, Z)</p>
                </li>
                <li>
                    <strong>ESP32 Microcontroller</strong>
                    <p>Mikrokontroler dengan konektivitas Wi-Fi untuk transmisi data real-time</p>
                </li>
                <li>
                    <strong>Laravel Framework</strong>
                    <p>Backend web app untuk pemrosesan dan visualisasi data</p>
                </li>
                <li>
                    <strong>Chart.js & Leaflet</strong>
                    <p>Library JavaScript untuk grafik real-time dan peta interaktif</p>
                </li>
            </ul>
        </div>

        <div class="about-section">
            <h2>Tim Pengembang</h2>
            <div class="team-grid">
                <div class="team-card">
                    <div class="team-avatar">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <circle cx="12" cy="8" r="4" stroke="currentColor"/>
                            <path d="M5 20v-2a7 7 0 0 1 14 0v2" stroke="currentColor"/>
                        </svg>
                    </div>
                    <h3>Tim IoT Engineer</h3>
                    <p>Pengembangan hardware dan firmware sensor</p>
                </div>
                <div class="team-card">
                    <div class="team-avatar">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor"/>
                            <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor"/>
                            <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor"/>
                        </svg>
                    </div>
                    <h3>Tim Web Developer</h3>
                    <p>Pengembangan dashboard dan visualisasi data</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.about-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

.about-header {
    text-align: center;
    margin-bottom: 3rem;
}

.about-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.about-section {
    margin-bottom: 3rem;
}

.about-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dc2626;
    display: inline-block;
}

.tech-list {
    list-style: none;
    padding: 0;
}

.tech-list li {
    background: #f9fafb;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid #dc2626;
}

.tech-list strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
}

.tech-list p {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.team-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.team-avatar {
    width: 80px;
    height: 80px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #dc2626;
}

.team-avatar svg {
    width: 40px;
    height: 40px;
}

.team-card h3 {
    margin-bottom: 0.5rem;
}

.team-card p {
    color: #6b7280;
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .about-container {
        padding: 1rem;
    }
}
</style>
@endsection