@extends('layouts.site')
@section('title','Contact Zuma')
@section('description',"Get in touch with the Zuma team. We're available in Kenya, Uganda and Tanzania.")
@push('styles')
<style>
.contact-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:900px){.contact-grid{grid-template-columns:2fr 1.2fr}}
.contact-form{background:#fff;border-radius:20px;padding:40px;border:1px solid var(--line);box-shadow:var(--shadow)}
.form-row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.form-row.two{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.85rem;font-weight:700;color:var(--ink)}
.form-group input,.form-group textarea,.form-group select{
  padding:12px 16px;border:1.5px solid var(--line);border-radius:10px;
  font-size:.95rem;font-family:inherit;transition:border-color .2s;background:#fff;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.1);
}
.form-group textarea{resize:vertical;min-height:140px}
.contact-info{display:flex;flex-direction:column;gap:24px}
.ci-card{background:#fff;border-radius:16px;padding:24px;border:1px solid var(--line)}
.ci-card h4{font-size:1rem;margin-bottom:14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
.ci-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;font-size:.88rem;color:var(--ink-2)}
.ci-icon{width:34px;height:34px;border-radius:9px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.offices-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.offices-grid{grid-template-columns:repeat(3,1fr)}}
.office-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.office-flag{font-size:2rem;margin-bottom:10px}
.office-card h4{font-size:1rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin-bottom:8px}
.office-card p{font-size:.83rem;color:var(--ink-3);line-height:1.6}
</style>
@endpush
@section('content')
<div class="page-hero">
    <div class="wrap">
        <div class="breadcrumb"><a href="/">Home</a> <i class="fas fa-chevron-right" style="font-size:.6rem"></i> Contact</div>
        <h1>Let's Talk</h1>
        <p>Whether you're a customer, partner, investor, or press — we want to hear from you.</p>
    </div>
</div>
<section style="padding:80px 0">
    <div class="wrap">
        <div class="contact-grid">
            <div class="contact-form reveal">
                <h2 style="font-size:1.6rem;margin-bottom:8px">Send us a message</h2>
                <p style="color:var(--ink-3);margin-bottom:28px">We reply to every message within 24 hours on business days.</p>
                @if(session('success'))
                    <div style="background:#e8f5e9;border:1px solid #a5d6a7;padding:14px 18px;border-radius:10px;margin-bottom:20px;color:#1b5e20;font-weight:600">
                        <i class="fas fa-check-circle"></i> {{ session('success') }}
                    </div>
                @endif
                <form method="POST" action="/contact">
                    @csrf
                    <div class="form-row two" style="margin-bottom:16px">
                        <div class="form-group"><label>Your name</label><input type="text" name="name" placeholder="Jane Wanjiku" required></div>
                        <div class="form-group"><label>Phone / WhatsApp</label><input type="tel" name="phone" placeholder="+254 700 000 000"></div>
                    </div>
                    <div class="form-row two" style="margin-bottom:16px">
                        <div class="form-group"><label>Email address</label><input type="email" name="email" placeholder="you@example.com" required></div>
                        <div class="form-group"><label>I am a…</label>
                            <select name="type">
                                <option>Customer / User</option>
                                <option>Driver</option>
                                <option>Restaurant / Food Business</option>
                                <option>Pharmacy / Health Provider</option>
                                <option>Vendor / Merchant</option>
                                <option>Property Owner / Agent</option>
                                <option>Employer</option>
                                <option>Freelancer</option>
                                <option>Investor</option>
                                <option>Press / Media</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom:16px"><label>Subject</label><input type="text" name="subject" placeholder="e.g. Partnership opportunity" required></div>
                    <div class="form-group" style="margin-bottom:24px"><label>Message</label><textarea name="message" placeholder="Tell us what's on your mind…" required></textarea></div>
                    <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center">Send Message <i class="fas fa-paper-plane"></i></button>
                </form>
            </div>
            <div class="contact-info">
                <div class="ci-card reveal">
                    <h4>📧 Email us directly</h4>
                    <div class="ci-item"><div class="ci-icon"><i class="fas fa-headset"></i></div><div><strong>Customer Support</strong><br><a href="mailto:support@zuma.app" style="color:var(--primary)">support@zuma.app</a></div></div>
                    <div class="ci-item"><div class="ci-icon"><i class="fas fa-handshake"></i></div><div><strong>Partnerships</strong><br><a href="mailto:partners@zuma.app" style="color:var(--primary)">partners@zuma.app</a></div></div>
                    <div class="ci-item"><div class="ci-icon"><i class="fas fa-chart-line"></i></div><div><strong>Investors</strong><br><a href="mailto:invest@zuma.app" style="color:var(--primary)">invest@zuma.app</a></div></div>
                    <div class="ci-item"><div class="ci-icon"><i class="fas fa-newspaper"></i></div><div><strong>Press & Media</strong><br><a href="mailto:press@zuma.app" style="color:var(--primary)">press@zuma.app</a></div></div>
                </div>
                <div class="ci-card reveal">
                    <h4>📱 Call or WhatsApp</h4>
                    <div class="ci-item"><div class="ci-icon">🇰🇪</div><div><strong>Kenya</strong><br>+254 700 000 000</div></div>
                    <div class="ci-item"><div class="ci-icon">🇺🇬</div><div><strong>Uganda</strong><br>+256 700 000 000</div></div>
                    <div class="ci-item"><div class="ci-icon">🇹🇿</div><div><strong>Tanzania</strong><br>+255 700 000 000</div></div>
                    <p style="font-size:.78rem;color:var(--ink-3);margin-top:8px">Support hours: Mon–Fri 8 AM – 6 PM EAT. Emergency: 24/7.</p>
                </div>
                <div class="ci-card reveal">
                    <h4>🔗 Follow Zuma</h4>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:4px">
                        <a href="#" style="background:var(--primary-light);color:var(--primary);padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-x-twitter"></i> Twitter</a>
                        <a href="#" style="background:#e8f5e9;color:#1b5e20;padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-whatsapp"></i> WhatsApp</a>
                        <a href="#" style="background:#ede7f6;color:#4a148c;padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-instagram"></i> Instagram</a>
                        <a href="#" style="background:#E8F0FE;color:#1A73E8;padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:64px">
            <h3 style="text-align:center;font-size:1.5rem;margin-bottom:32px" class="reveal">Our Offices</h3>
            <div class="offices-grid">
                <div class="office-card reveal"><div class="office-flag">🇰🇪</div><h4>Nairobi, Kenya</h4><p>Zuma House, Westlands<br>Nairobi, Kenya<br><br>Headquarters & Engineering</p></div>
                <div class="office-card reveal" style="transition-delay:.1s"><div class="office-flag">🇺🇬</div><h4>Kampala, Uganda</h4><p>Kololo Hill Drive<br>Kampala, Uganda<br><br>Uganda Country Office</p></div>
                <div class="office-card reveal" style="transition-delay:.2s"><div class="office-flag">🇹🇿</div><h4>Dar es Salaam, Tanzania</h4><p>Masaki Peninsula<br>Dar es Salaam, Tanzania<br><br>Tanzania Country Office</p></div>
            </div>
        </div>
    </div>
</section>
@endsection