<?php
/// file: app/View/careers/index.php

declare(strict_types=1);

/** @var list<array<string, mixed>> $roles */
/** @var array<string, mixed> $flash */
$f = $flash ?? [];
?>
<div class="page-below-header md:pt-32">
<section class="section-spacing">
    <div class="container-shell max-w-4xl">
        <p class="muted-label">Careers</p>
        <h1 class="cinematic-heading mt-4">We hire for taste, generosity, and technical poise.</h1>
        <p class="mt-8 text-silver-400">Remote-friendly with intentional overlap hours. Small teams mean broad ownership—clarity matters more than title.</p>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell grid gap-12 lg:grid-cols-2">
        <div>
            <h2 class="font-display text-2xl text-white">Culture</h2>
            <p class="mt-4 text-silver-400">We protect focus time, document decisions, and critique work—not people. Feedback is fast, kind, and specific.</p>
            <h3 class="mt-10 text-white">Why join</h3>
            <ul class="mt-4 list-disc space-y-2 pl-5 text-sm text-silver-400">
                <li>Hands-on ownership of visible launches</li>
                <li>Room to push motion, sound, and interaction craft</li>
                <li>Partners who respect scope and timelines</li>
            </ul>
        </div>
        <div>
            <h2 class="font-display text-2xl text-white">Open roles</h2>
            <div class="mt-6 space-y-4">
                <?php foreach ($roles as $job): ?>
                    <div class="rounded-2xl border border-white/10 p-6">
                        <h3 class="text-white"><?= e((string) $job['title']) ?></h3>
                        <p class="muted-label mt-2"><?= e((string) $job['location']) ?> · <?= e((string) $job['type']) ?></p>
                        <p class="mt-4 text-sm text-silver-400"><?= nl2br(e((string) $job['description'])) ?></p>
                    </div>
                <?php endforeach; ?>
                <?php if ($roles === []): ?>
                    <p class="text-silver-500">No open roles right now—send a general application anyway.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<section class="section-spacing">
    <div class="container-shell max-w-3xl">
        <h2 class="font-display text-2xl text-white">Apply</h2>
        <?php if (! empty($f['success'])): ?>
            <div class="mt-6 rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-6 text-emerald-200"><?= e((string) $f['success']) ?></div>
        <?php endif; ?>
        <?php if (! empty($f['error'])): ?>
            <div class="mt-6 rounded-2xl border border-red-500/30 bg-red-500/10 p-6 text-red-200"><?= e((string) $f['error']) ?></div>
        <?php endif; ?>
        <form method="post" action="<?= e(url('/careers')) ?>" class="mt-8 grid gap-6">
            <?= \App\Core\Csrf::field() ?>
            <div>
                <label class="muted-label mb-2 block" for="career_id">Role</label>
                <select class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" id="career_id" name="career_id">
                    <option value="">General application</option>
                    <?php foreach ($roles as $job): ?>
                        <option value="<?= (int) $job['id'] ?>"><?= e((string) $job['title']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="muted-label mb-2 block" for="cf_name">Full name</label>
                <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" type="text" id="cf_name" name="full_name" value="<?= e(old('full_name', '')) ?>" required>
            </div>
            <div>
                <label class="muted-label mb-2 block" for="cf_email">Email</label>
                <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" type="email" id="cf_email" name="email" value="<?= e(old('email', '')) ?>" required>
            </div>
            <div>
                <label class="muted-label mb-2 block" for="portfolio_url">Portfolio URL</label>
                <input class="w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" type="url" id="portfolio_url" name="portfolio_url" value="<?= e(old('portfolio_url', '')) ?>">
            </div>
            <div>
                <label class="muted-label mb-2 block" for="cf_message">Message</label>
                <textarea class="min-h-[140px] w-full rounded-xl border border-white/15 bg-charcoal/50 px-4 py-3 text-white" id="cf_message" name="message" required><?= e(old('message', '')) ?></textarea>
            </div>
            <button type="submit" class="rounded-full bg-white px-8 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-carbon">Submit</button>
        </form>
    </div>
</section>
</div>
