@extends('layouts.subweb')

@section('title', $page->meta_title ?? 'Kontak — ' . $brand->name)

@section('content')

@php $s = $page->sections ?? []; @endphp

<section style="padding:60px 2rem;">
    <div style="max-width:1100px; margin:0 auto;">
        <p class="section-label">{{ $s['label'] ?? 'Hubungi Kami' }}</p>
        <h1 style="font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,48px); font-weight:900; margin-bottom:12px;">
            {{ $s['headline'] ?? 'Mari Berdiskusi' }}
        </h1>
        <p style="color:var(--muted); font-size:16px; max-width:480px; margin-bottom:48px; line-height:1.7;">
            {{ $s['subheadline'] ?? 'Tim kami siap membantu mewujudkan transformasi digital bisnis Anda.' }}
        </p>

        <div class="contact-two-col">
            {{-- Contact Info --}}
            <div class="contact-info-col">
                @php
                    $email   = \App\Models\SiteSetting::get('contact_email',   'info@vestaglobal.co.id', $brand->id);
                    $phone   = \App\Models\SiteSetting::get('contact_phone',   '', $brand->id);
                    $address = \App\Models\SiteSetting::get('contact_address', '', $brand->id);
                    $ig      = \App\Models\SiteSetting::get('social_instagram','', $brand->id);
                    $li      = \App\Models\SiteSetting::get('social_linkedin', '', $brand->id);
                @endphp

                <div class="contact-info-card">
                    <div class="ci-item">
                        <div class="ci-icon">✉</div>
                        <div>
                            <div class="ci-label">Email</div>
                            <a href="mailto:{{ $email }}" class="ci-value">{{ $email }}</a>
                        </div>
                    </div>
                    @if ($phone)
                    <div class="ci-item">
                        <div class="ci-icon">📞</div>
                        <div>
                            <div class="ci-label">Telepon / WhatsApp</div>
                            <a href="tel:{{ $phone }}" class="ci-value">{{ $phone }}</a>
                        </div>
                    </div>
                    @endif
                    @if ($address)
                    <div class="ci-item">
                        <div class="ci-icon">📍</div>
                        <div>
                            <div class="ci-label">Alamat</div>
                            <p class="ci-value">{{ $address }}</p>
                        </div>
                    </div>
                    @endif
                    @if ($ig || $li)
                    <div class="ci-social">
                        @if ($ig)
                            <a href="https://instagram.com/{{ $ig }}" target="_blank" class="ci-social-link">Instagram</a>
                        @endif
                        @if ($li)
                            <a href="{{ $li }}" target="_blank" class="ci-social-link">LinkedIn</a>
                        @endif
                    </div>
                    @endif
                </div>
            </div>

            {{-- Contact Form --}}
            <div class="contact-form-col">
                <form class="contact-form" action="#" method="POST">
                    @csrf
                    <div class="cf-row">
                        <div class="cf-group">
                            <label class="cf-label">Nama Lengkap</label>
                            <input type="text" name="name" class="cf-input" placeholder="John Doe" required>
                        </div>
                        <div class="cf-group">
                            <label class="cf-label">Email</label>
                            <input type="email" name="email" class="cf-input" placeholder="john@example.com" required>
                        </div>
                    </div>
                    <div class="cf-group">
                        <label class="cf-label">Nama Perusahaan</label>
                        <input type="text" name="company" class="cf-input" placeholder="PT Perusahaan Anda">
                    </div>
                    <div class="cf-group">
                        <label class="cf-label">Tertarik dengan layanan</label>
                        <select name="service" class="cf-input">
                            <option value="">-- Pilih layanan --</option>
                            <option>CRM System</option>
                            <option>WhatsApp AI Chatbot</option>
                            <option>IT Infrastructure</option>
                            <option>HRIS & Finance</option>
                            <option>Digital Products</option>
                            <option>Lainnya</option>
                        </select>
                    </div>
                    <div class="cf-group">
                        <label class="cf-label">Pesan</label>
                        <textarea name="message" class="cf-input cf-textarea" rows="5"
                                  placeholder="Ceritakan kebutuhan Anda..."></textarea>
                    </div>
                    <button type="submit" class="btn-primary" style="width:100%;justify-content:center;">
                        Kirim Pesan →
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
.contact-two-col  { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start; }
.contact-info-card{ background:var(--primary); border-radius:20px; padding:32px; }
.ci-item          { display:flex; gap:16px; margin-bottom:28px; }
.ci-icon          { font-size:20px; margin-top:2px; flex-shrink:0; }
.ci-label         { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.3); margin-bottom:4px; }
.ci-value         { color:#fff; font-size:14px; font-weight:500; text-decoration:none; }
.ci-value:hover   { color:var(--accent2); }
.ci-social        { display:flex; gap:10px; margin-top:8px; }
.ci-social-link   { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.6); padding:8px 16px; border-radius:8px; font-size:13px; transition:all .2s; }
.ci-social-link:hover { background:rgba(255,255,255,0.12); color:#fff; }

.contact-form     { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px; }
.cf-row           { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-group         { margin-bottom:18px; }
.cf-label         { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }
.cf-input         { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:13px; font-family:inherit; color:var(--text); transition:border-color .2s; }
.cf-input:focus   { outline:none; border-color:var(--brand-primary,var(--accent)); background:#fff; }
.cf-textarea      { resize:vertical; min-height:120px; }

@media(max-width:768px) {
    .contact-two-col { grid-template-columns:1fr; }
    .cf-row { grid-template-columns:1fr; }
}
</style>
@endpush