@extends('layouts.app')

@section('title', 'Contact')

@section('content')
<div class="container">
    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card section-card">
                <div class="card-body p-4">
                    <h1>Contact us</h1>
                    <p class="text-muted">ShrimpHut provides online-only support for orders, livestock questions, delivery issues, compatibility queries, and aftercare follow-up. The quickest way to help you properly is to include clear order and tank details from the start.</p>
                    <p><strong>Support email:</strong><br>{{ $settings->get('support_email', 'support@shrimphut.co.uk') }}</p>
                    <hr>
                    <h2 class="h5">Working hours</h2>
                    <div class="small text-muted mb-3">{!! $settings->get('working_hours_html') !!}</div>
                    <hr>
                    <h2 class="h5">What to contact us about</h2>
                    <ul class="small text-muted mb-0">
                        <li>Pre-order product, compatibility, or livestock suitability questions</li>
                        <li>Order changes before dispatch, where still possible</li>
                        <li>Tracking, delivery delays, or courier-related problems</li>
                        <li>DOA reports within the stated reporting window via the dedicated claim form</li>
                        <li>Faults, damages, or order discrepancies</li>
                        <li>General aftercare or setup questions after delivery</li>
                    </ul>
                    <div class="mt-3">
                        <a href="{{ route('contact.doa') }}" class="btn btn-outline-primary btn-sm">Open DOA claim form</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card section-card">
                <div class="card-body p-4">
                    <div class="small text-muted mb-3">Please include your order number where relevant and give as much useful detail as possible. For livestock issues, that may include tank size, species kept, recent parameter readings, recent maintenance, and clear photos where appropriate.</div>
                    <form method="post" class="row g-3">
                        @csrf
                        <div class="col-md-6"><input name="name" class="form-control" placeholder="Name"></div>
                        <div class="col-md-6"><input name="email" class="form-control" placeholder="Email"></div>
                        <div class="col-12"><input name="subject" class="form-control" placeholder="Subject or order number"></div>
                        <div class="col-12"><textarea name="message" rows="6" class="form-control" placeholder="Tell us what has happened, what you need help with, and any key order or tank details."></textarea></div>
                        <div class="col-12">@include('partials.recaptcha')</div>
                        <div class="col-12"><button class="btn btn-primary">Send message</button></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection