@extends('layouts.public')

@section('title', 'Contact Us - ' . ($settings['site_title'] ?? 'BANKING'))

@section('content')
<section class="public-page-hero">
    <div class="container">
        <h1 class="public-page-title">Contact Us</h1>
        <p class="public-page-subtitle">We are here to help you around the clock</p>
    </div>
</section>

<section class="public-page-body">
    <div class="container container-narrow">
        <div class="public-content-card">
            <div class="public-prose">
                {!! $settings['contact_page_content'] ?? '<p>Get in touch with our team — we usually reply within a few minutes.</p>' !!}
            </div>
        </div>

        <div class="public-contact-grid">
            <div class="public-contact-card">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0D6B58" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
                <h3>Email</h3>
                <p>
                    <a href="mailto:{{ $general['bank_email'] ?? '' }}" class="text-[#0D6B58] hover:underline">
                        {{ $general['bank_email'] ?? 'support@banking.com' }}
                    </a>
                </p>
            </div>
            <div class="public-contact-card">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0D6B58" stroke-width="1.5"><path d="M5 3h4l2 5-2 1a12 12 0 006 6l1-2 5 2v4a2 2 0 01-2 2A17 17 0 013 5a2 2 0 012-2z"/></svg>
                <h3>Phone</h3>
                <p>{{ $general['bank_phone'] ?? '+1 (555) 123-4567' }}</p>
            </div>
            <div class="public-contact-card">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0D6B58" stroke-width="1.5"><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
                <h3>Address</h3>
                <p>{{ $general['bank_address'] ?? '123 Financial District, New York, NY 10004' }}</p>
            </div>
        </div>

        <div class="public-cta-inline">
            <h3>Prefer to talk to a person?</h3>
            <p>Send us a message through the support desk in your dashboard.</p>
            <div class="public-cta-actions">
                <a href="{{ route('login') }}" class="btn btn-outline">Sign In</a>
                <a href="{{ route('register') }}" class="btn btn-primary">Open an Account</a>
            </div>
        </div>
    </div>
</section>
@endsection