@extends('layouts.public')
@section('title','Contact PLOCAL')
@section('description','Contact PLOCAL with questions about evaluations, business listings, advertising, or general support.')
@section('canonical',config('plocal.public_url').'/contact.html')
@section('image',config('plocal.public_url').'/assets/img/og-meta/plocal-contact.png')
@push('styles')<link rel="stylesheet" href="/assets/css/pages/contact-public.css">@endpush
@section('content')
@include('public.partials.site-header')
<main id="main-content" class="plocal-contact-page">
    <section class="plocal-contact-hero" aria-labelledby="contact-title"><div class="container plocal-contact-container"><nav class="plocal-contact-breadcrumb" aria-label="Breadcrumb"><ol><li><a href="{{ url('/') }}">Home</a></li><li aria-current="page">Contact PLOCAL</li></ol></nav><div class="plocal-contact-hero-content"><p class="plocal-contact-eyebrow">Get in touch</p><h1 id="contact-title">How can we help?</h1><p>Send a question about PLOCAL, a business evaluation, advertising, or a public Profile. We will receive your request through our support system.</p></div></div></section>
    <section class="plocal-contact-section" aria-labelledby="contact-form-title"><div class="container plocal-contact-container plocal-contact-grid"><div class="plocal-contact-intro"><p class="plocal-contact-eyebrow">Contact PLOCAL</p><h2 id="contact-form-title">Tell us what you need.</h2><p>Use the form for a clear, factual request. For account or payment questions, include the relevant business or Profile so our team can identify the right context.</p><div class="plocal-contact-info"><div><i class="far fa-envelope" aria-hidden="true"></i><span><strong>Email</strong><a href="mailto:info@plocal.com">info@plocal.com</a></span></div><div><i class="far fa-clock" aria-hidden="true"></i><span><strong>Official contact</strong><span>Use this page or the official email above.</span></span></div></div></div><form class="plocal-contact-form" action="{{ route('public.support-cases.store') }}" method="post" data-plocal-contact-form novalidate><input type="hidden" name="source_form" value="contact"><input type="text" name="_plocal_hp" tabindex="-1" autocomplete="off" aria-hidden="true" class="plocal-contact-honeypot"><div class="plocal-contact-form-row"><label for="contact-name">Name</label><input id="contact-name" name="name" type="text" maxlength="120" autocomplete="name" required></div><div class="plocal-contact-form-row"><label for="contact-email">Email</label><input id="contact-email" name="email" type="email" maxlength="254" autocomplete="email" required></div><div class="plocal-contact-form-row"><label for="contact-phone">Phone <span>(optional)</span></label><input id="contact-phone" name="phone" type="tel" maxlength="40" autocomplete="tel"></div><div class="plocal-contact-form-row"><label for="contact-inquiry">How can we help?</label><select id="contact-inquiry" name="inquiry_type" required><option value="" selected disabled>Select a topic</option><option value="General question">General question</option><option value="Business evaluation">Business evaluation</option><option value="Advertising">Advertising</option><option value="Business Profile">Business Profile</option><option value="Billing / payment question">Billing / payment question</option><option value="Trust &amp; Safety">Trust &amp; Safety</option></select></div><div class="plocal-contact-form-row"><label for="contact-business">Business or Profile <span>(optional)</span></label><input id="contact-business" name="business_or_profile" type="text" maxlength="255"></div><div class="plocal-contact-form-row"><label for="contact-message">Message</label><textarea id="contact-message" name="message" rows="6" minlength="10" maxlength="10000" required></textarea></div><button class="plocal-contact-submit" type="submit">Send request <i class="far fa-arrow-right" aria-hidden="true"></i></button><p class="plocal-contact-feedback" data-contact-feedback role="status" aria-live="polite"></p></form></div></section>
    <section class="plocal-contact-section plocal-contact-section--soft" aria-labelledby="contact-extra-title"><div class="container plocal-contact-container plocal-contact-extra"><div><p class="plocal-contact-eyebrow">Still looking?</p><h2 id="contact-extra-title">Find the right place to start.</h2><p>Browse the directory to explore evaluated businesses, or review our safety guidance before responding to an unfamiliar request.</p></div><div class="plocal-contact-actions"><a href="{{ url('/find-businesses') }}">Find Businesses <i class="far fa-arrow-right" aria-hidden="true"></i></a><a href="{{ url('/trust-and-safety.html') }}">Trust &amp; Safety <i class="far fa-arrow-right" aria-hidden="true"></i></a></div></div></section>
</main>
@include('public.partials.site-footer')
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',function(){const form=document.querySelector('[data-plocal-contact-form]');if(!form)return;const feedback=form.querySelector('[data-contact-feedback]');form.addEventListener('submit',async function(event){event.preventDefault();if(!form.checkValidity()){form.reportValidity();return;}const button=form.querySelector('button[type="submit"]');button.disabled=true;feedback.textContent='Sending your request…';feedback.className='plocal-contact-feedback is-sending';try{const response=await fetch(form.action,{method:'POST',headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},body:new FormData(form)});const data=await response.json();if(!response.ok)throw new Error(data.error||'Please check the form and try again.');form.reset();feedback.textContent=data.message||'Your request was received by PLOCAL.';feedback.className='plocal-contact-feedback is-success';}catch(error){feedback.textContent=error.message||'Your request could not be received. Please email info@plocal.com.';feedback.className='plocal-contact-feedback is-error';}finally{button.disabled=false;}});});
</script>
@endpush
@endsection