@extends('layouts.app')

@section('title', 'Kontak')

@section('content')
<div class="kontak-container">
    <div class="kontak-header">
        <h1>Hubungi Kami</h1>
        <p>Ada pertanyaan atau butuh bantuan? Tim kami siap membantu Anda</p>
    </div>

    <div class="kontak-grid">
        <div class="kontak-info">
            <div class="info-item">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z"/>
                    </svg>
                </div>
                <div>
                    <h3>Telepon</h3>
                    <p>+62 812 3456 7890</p>
                    <p class="sub">Senin-Jumat, 08:00-17:00 WIB</p>
                </div>
            </div>

            <div class="info-item">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                        <polyline points="22,6 12,13 2,6"/>
                    </svg>
                </div>
                <div>
                    <h3>Email</h3>
                    <p>support@seismicdetect.id</p>
                    <p class="sub">info@seismicdetect.id</p>
                </div>
            </div>

            <div class="info-item">
                <div class="info-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                </div>
                <div>
                    <h3>Alamat</h3>
                    <p>Jl. Teknologi No. 123, Sleman</p>
                    <p class="sub">Yogyakarta, Indonesia 55281</p>
                </div>
            </div>
        </div>

        <div class="kontak-form">
            <h3>Kirim Pesan</h3>
            <form action="#" method="POST">
                @csrf
                <div class="form-group">
                    <label for="nama">Nama Lengkap</label>
                    <input type="text" id="nama" name="nama" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="subject">Subjek</label>
                    <input type="text" id="subject" name="subject" required>
                </div>
                <div class="form-group">
                    <label for="message">Pesan</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn-submit">Kirim Pesan</button>
            </form>
        </div>
    </div>
</div>

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

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

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

.kontak-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.kontak-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 12px;
}

.info-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    flex-shrink: 0;
}

.info-icon svg {
    width: 24px;
    height: 24px;
}

.info-item h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.info-item p {
    margin: 0;
    color: #1a1a1a;
}

.info-item .sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.kontak-form {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 1.5rem;
}

.kontak-form h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #dc2626;
}

.btn-submit {
    width: 100%;
    padding: 0.75rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #b91c1c;
}

@media (max-width: 768px) {
    .kontak-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endsection