<?php
/// file: app/Components/contact-form.php

declare(strict_types=1);

/** @var array<string, mixed>|null $errors */
$errors = $errors ?? [];
$err = static function (string $f) use ($errors): string {
    return isset($errors[$f]) ? implode(' ', $errors[$f]) : '';
};
?>
<form method="post" action="<?= e(url('/contact')) ?>" class="contact-form grid gap-6 md:grid-cols-2" novalidate>
    <?= \App\Core\Csrf::field() ?>
    <div class="md:col-span-2">
        <label class="muted-label mb-2 block" for="full_name">Full name</label>
        <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white focus:border-electric-400/50 focus:outline-none" type="text" id="full_name" name="full_name" value="<?= e(old('full_name', '')) ?>" required autocomplete="name">
        <?php if ($err('full_name')): ?><p class="mt-1 text-xs text-red-400"><?= e($err('full_name')) ?></p><?php endif; ?>
    </div>
    <div>
        <label class="muted-label mb-2 block" for="email">Email</label>
        <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white focus:border-electric-400/50 focus:outline-none" type="email" id="email" name="email" value="<?= e(old('email', '')) ?>" required autocomplete="email">
        <?php if ($err('email')): ?><p class="mt-1 text-xs text-red-400"><?= e($err('email')) ?></p><?php endif; ?>
    </div>
    <div>
        <label class="muted-label mb-2 block" for="company">Company</label>
        <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white focus:border-electric-400/50 focus:outline-none" type="text" id="company" name="company" value="<?= e(old('company', '')) ?>" autocomplete="organization">
    </div>
    <div>
        <label class="muted-label mb-2 block" for="project_type">Project type</label>
        <select class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white focus:border-electric-400/50 focus:outline-none" id="project_type" name="project_type">
            <?php $pt = old('project_type', ''); ?>
            <option value="">Select</option>
            <option value="Immersive web" <?= $pt === 'Immersive web' ? 'selected' : '' ?>>Immersive web</option>
            <option value="Campaign" <?= $pt === 'Campaign' ? 'selected' : '' ?>>Campaign</option>
            <option value="Platform" <?= $pt === 'Platform' ? 'selected' : '' ?>>Platform</option>
            <option value="Other" <?= $pt === 'Other' ? 'selected' : '' ?>>Other</option>
        </select>
    </div>
    <div>
        <label class="muted-label mb-2 block" for="budget_range">Budget range</label>
        <select class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" id="budget_range" name="budget_range">
            <?php $br = old('budget_range', ''); ?>
            <option value="">Select</option>
            <option value="< 25k" <?= $br === '< 25k' ? 'selected' : '' ?>>&lt; 25k</option>
            <option value="25k — 75k" <?= $br === '25k — 75k' ? 'selected' : '' ?>>25k — 75k</option>
            <option value="75k — 150k" <?= $br === '75k — 150k' ? 'selected' : '' ?>>75k — 150k</option>
            <option value="150k+" <?= $br === '150k+' ? 'selected' : '' ?>>150k+</option>
        </select>
    </div>
    <div>
        <label class="muted-label mb-2 block" for="timeline">Timeline</label>
        <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" type="text" id="timeline" name="timeline" value="<?= e(old('timeline', '')) ?>" placeholder="e.g. Q3 2026">
    </div>
    <div class="md:col-span-2">
        <label class="muted-label mb-2 block" for="message">Message</label>
        <textarea class="min-h-[160px] w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white focus:border-electric-400/50 focus:outline-none" id="message" name="message" required><?= e(old('message', '')) ?></textarea>
        <?php if ($err('message')): ?><p class="mt-1 text-xs text-red-400"><?= e($err('message')) ?></p><?php endif; ?>
    </div>
    <div class="md:col-span-2">
        <button type="submit" class="magnetic-button rounded-full bg-white px-10 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-carbon">Send</button>
    </div>
</form>
