@extends('frontend.layouts.app')
@section('title', 'Contact Us')
@section('content')
<section style="padding-top:40px;">
    <div class="container">
        <div class="section-title"><h2>Get In <span>Touch</span></h2><p>We'd love to hear from you</p></div>
        <div class="grid grid-3" style="margin-bottom:40px;">
            <div class="card hover-lift" style="padding:26px; text-align:center;"><i class="fa-solid fa-phone" style="color:var(--primary); font-size:1.5rem;"></i><h4 style="margin-top:12px;">Phone</h4><p style="opacity:0.65;">{{ $siteSettings['phone'] }}</p></div>
            <div class="card hover-lift" style="padding:26px; text-align:center;"><i class="fa-solid fa-envelope" style="color:var(--primary); font-size:1.5rem;"></i><h4 style="margin-top:12px;">Email</h4><p style="opacity:0.65;">{{ $siteSettings['email'] }}</p></div>
            <div class="card hover-lift" style="padding:26px; text-align:center;"><i class="fa-solid fa-location-dot" style="color:var(--primary); font-size:1.5rem;"></i><h4 style="margin-top:12px;">Address</h4><p style="opacity:0.65;">{{ $siteSettings['address'] }}</p></div>
        </div>
        @if($siteSettings['google_maps_embed'])
        <div class="card" style="overflow:hidden; padding:0;">
            <iframe src="{{ $siteSettings['google_maps_embed'] }}" style="width:100%; height:400px; border:0;" loading="lazy"></iframe>
        </div>
        @endif
    </div>
</section>
@endsection