@extends('layouts.frontend')

@section('title', 'Contact — Bavly × Movix')
@section('meta_description', 'Start a software, SaaS, branding or digital project with Bavly × Movix. WhatsApp or email — Cairo, Egypt.')

@section('content')
<section class="page-hero">
    <div class="container">
        <p class="eyebrow">Contact</p>
        <h1 class="display-4 fw-semibold">Tell us what you want to build.</h1>
        <p class="lead text-secondary">If you have a product, a system, or a brand that needs to exist in the real world — start here.</p>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn btn-light" href="{{ $setting->whatsappUrl() }}" target="_blank" rel="noopener noreferrer">Chat on WhatsApp</a>
            @if($setting->email)
                <a class="btn btn-outline-light" href="mailto:{{ $setting->email }}">{{ $setting->email }}</a>
            @endif
        </div>
        @if($setting->phone)
            <p class="text-secondary mt-3 mb-0">WhatsApp {{ $setting->phone }} · {{ $setting->address }}</p>
        @endif
    </div>
</section>

<section class="section pt-0">
    <div class="container">
        <form class="col-lg-7 px-0" method="POST" action="{{ route('contact.store') }}">
            @csrf
            <div class="honeypot" aria-hidden="true">
                <label for="company_website">Website</label>
                <input type="text" id="company_website" name="company_website" tabindex="-1" autocomplete="off">
            </div>

            @if(session('success'))
                <div class="alert alert-success" role="status">{{ session('success') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger" role="alert">{{ $errors->first() }}</div>
            @endif

            <div class="mb-3">
                <label class="form-label" for="name">Name</label>
                <input class="form-control" id="name" name="name" value="{{ old('name') }}" required autocomplete="name">
            </div>
            <div class="mb-3">
                <label class="form-label" for="email">Email</label>
                <input class="form-control" id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email">
            </div>
            <div class="mb-3">
                <label class="form-label" for="phone">Phone <span class="text-secondary">(optional)</span></label>
                <input class="form-control" id="phone" name="phone" value="{{ old('phone') }}" autocomplete="tel">
            </div>
            <div class="mb-3">
                <label class="form-label" for="message">Project</label>
                <textarea class="form-control" id="message" name="message" rows="6" required minlength="10">{{ old('message') }}</textarea>
            </div>
            <button class="btn btn-light" type="submit">Send Message</button>
        </form>
    </div>
</section>
@endsection