@extends('site.layout')

@section('title', 'যোগাযোগ — সমিতি কিপার লাইট সাপোর্ট')
@section('description', 'সমিতি কিপার লাইট-এর সাথে যোগাযোগ করুন — ইমেইলে বাংলায় সহায়তা। বিক্রয়, সাপোর্ট বা কাস্টম প্ল্যান নিয়ে আমাদের টিম পাশে আছে।')
@section('canonical', route('site.contact'))

@php
    $nav = 'contact';
    $email = function_exists('get_option')
        ? (get_option('support_email', '') ?: config('mail.from.address'))
        : config('mail.from.address');
@endphp

@push('jsonld')
<script type="application/ld+json">
{!! json_encode([
    '@context'=>'https://schema.org','@type'=>'ContactPage','name'=>'যোগাযোগ — সমিতি কিপার লাইট',
    'url'=>route('site.contact'),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
<script type="application/ld+json">
{!! json_encode([
    '@context'=>'https://schema.org','@type'=>'BreadcrumbList','itemListElement'=>[
        ['@type'=>'ListItem','position'=>1,'name'=>'হোম','item'=>url('/')],
        ['@type'=>'ListItem','position'=>2,'name'=>'যোগাযোগ','item'=>route('site.contact')],
    ],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
<style>
    .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
    @media(max-width:820px){.cgrid{grid-template-columns:1fr;gap:28px}}
    .cmethods{display:grid;gap:14px}
    .cm{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
    .cm:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--red-soft)}
    .cm .ic{width:48px;height:48px;border-radius:13px;background:var(--red-soft);display:grid;place-items:center;font-size:1.35rem;flex:none}
    .cm .t{font-weight:600}
    .cm .s{color:var(--muted);font-size:.9rem}
    .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
    .form label{display:block;font-weight:600;font-size:.92rem;margin:14px 0 6px}
    .form input,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-family:inherit;font-size:1rem;background:var(--bg-soft);transition:border-color .15s ease,background .15s ease}
    .form input:focus,.form textarea:focus{outline:none;border-color:var(--red);background:#fff}
    .form .btn{width:100%;justify-content:center;margin-top:18px}
    .office-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-top:18px}
    .office-card h3{font-size:1.05rem;margin:0 0 12px}
    .office-row{margin-bottom:12px}
    .office-row:last-child{margin-bottom:0}
    .office-row strong{display:block;font-size:.88rem;color:var(--ink);margin-bottom:3px}
    .office-row p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
</style>

<section style="background:var(--bg-soft);padding:18px 0 8px">
    <div class="wrap">
        <div class="breadcrumb"><a href="{{ url('/') }}">হোম</a> / যোগাযোগ</div>
        <div class="center" style="padding:30px 0 4px">
            <span class="eyebrow">যোগাযোগ</span>
            <h1 style="font-size:2.6rem;font-weight:700;margin:10px 0">আমরা পাশে আছি</h1>
            <p class="lead" style="margin:0 auto">প্রশ্ন, বিক্রয় বা কাস্টম প্ল্যান — যেকোনো বিষয়ে আমাদের টিমের সাথে বাংলায় কথা বলুন।</p>
        </div>
    </div>
</section>

<section class="section" style="padding-top:30px">
    <div class="wrap cgrid">
        <div class="reveal">
            <h2 style="font-size:1.5rem;margin-bottom:16px">সরাসরি যোগাযোগ</h2>
            <div class="cmethods">
                <a class="cm" href="mailto:{{ $email }}"><span class="ic">✉️</span><span><span class="t">ইমেইল</span><br><span class="s">{{ $email }}</span></span></a>
            </div>
            <div style="margin-top:22px;color:var(--muted);font-size:.92rem">
                <strong style="color:var(--ink)">সাপোর্ট সময়:</strong> প্রতিদিন সকাল ৯টা — রাত ৯টা (শুক্রবার বন্ধ)।
            </div>
            @if (!empty($site_head_office ?? '') || !empty($site_registered_office ?? ''))
                <div class="office-card">
                    <h3>অফিস ঠিকানা</h3>
                    @if (!empty($site_head_office ?? ''))
                        <div class="office-row">
                            <strong>Head Office</strong>
                            <p>{{ $site_head_office }}</p>
                        </div>
                    @endif
                    @if (!empty($site_registered_office ?? ''))
                        <div class="office-row">
                            <strong>Registered Office</strong>
                            <p>{{ $site_registered_office }}</p>
                        </div>
                    @endif
                </div>
            @endif
        </div>

        <div class="reveal">
            <form class="form" id="contactForm">
                @csrf
                <h2 style="font-size:1.5rem;margin-bottom:4px">বার্তা পাঠান</h2>
                <p style="color:var(--muted);font-size:.92rem">ফর্ম পূরণ করুন — আমরা যোগাযোগ করব।</p>
                <div id="cf-success" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:14px 16px;color:#15803d;font-weight:600;margin-bottom:12px">
                    ✅ আপনার বার্তা পৌঁছে গেছে! আমরা শীঘ্রই যোগাযোগ করব।
                </div>
                <label for="cn">নাম *</label>
                <input id="cn" name="name" required placeholder="আপনার নাম">
                <label for="cp">মোবাইল নম্বর</label>
                <input id="cp" name="phone" inputmode="tel" placeholder="01XXXXXXXXX">
                <label for="cmsg">বার্তা *</label>
                <textarea id="cmsg" name="message" rows="4" required placeholder="আপনি কী জানতে চান?"></textarea>
                <button class="btn btn-primary" type="submit" id="cf-btn">✉️ বার্তা পাঠান</button>
            </form>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.getElementById('contactForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('cf-btn');
    btn.disabled = true;
    btn.textContent = 'পাঠানো হচ্ছে…';
    try {
        const res = await fetch('{{ route('site.contact.store') }}', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json'},
            body: new FormData(this),
        });
        if (res.ok) {
            document.getElementById('cf-success').style.display = 'block';
            this.reset();
            btn.style.display = 'none';
        } else {
            btn.disabled = false;
            btn.textContent = '✉️ বার্তা পাঠান';
            alert('কিছু সমস্যা হয়েছে। আবার চেষ্টা করুন।');
        }
    } catch {
        btn.disabled = false;
        btn.textContent = '✉️ বার্তা পাঠান';
        alert('ইন্টারনেট সমস্যা। আবার চেষ্টা করুন।');
    }
});
</script>
@endpush
@endsection