<?php /** @var array $settings */ ?>

<!-- Hero -->
<section class="pt-32 pb-16 max-w-6xl mx-auto px-6">
  <div class="gold-line mb-6 animate-fade-in-up"></div>
  <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80 animate-fade-in-up"><?= e(t('page.contact.kicker')) ?></div>
  <h1 class="mt-4 text-5xl md:text-7xl font-display animate-fade-in-up" style="animation-delay:0.1s"><?= e(t('page.contact.title')) ?></h1>
</section>

<section class="max-w-6xl mx-auto px-6 pb-32 grid md:grid-cols-5 gap-12">
  <!-- Left: info -->
  <div class="md:col-span-2 reveal-left space-y-10">
    <div>
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('footer.visit')) ?></div>
      <p class="text-bone/60 whitespace-pre-line leading-relaxed"><?= e($settings['address'] ?? '') ?></p>
      <?php if (!empty($settings['address'])): ?>
        <a href="https://www.google.com/maps?q=<?= urlencode($settings['address']) ?>" target="_blank" rel="noopener"
           class="mt-3 inline-flex items-center gap-2 text-xs text-gold/60 hover:text-gold transition-colors">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <?= e(t('common.directions')) ?>
        </a>
      <?php endif; ?>
    </div>

    <div>
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('page.about.contact')) ?></div>
      <?php if (!empty($settings['phone'])): ?>
        <a href="tel:<?= e($settings['phone']) ?>" class="block text-bone/60 hover:text-gold transition-colors text-lg"><?= e($settings['phone']) ?></a>
      <?php endif; ?>
      <?php if (!empty($settings['email'])): ?>
        <a href="mailto:<?= e($settings['email']) ?>" class="block text-bone/50 hover:text-gold transition-colors mt-1"><?= e($settings['email']) ?></a>
      <?php endif; ?>
    </div>

    <div>
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('footer.hours')) ?></div>
      <ul class="text-bone/50 space-y-2 text-sm">
        <?php foreach (($settings['hours'] ?? []) as $day => $hrs): ?>
          <li class="flex justify-between gap-4 max-w-xs">
            <span class="uppercase text-bone/40 text-xs"><?= e(t('day.' . $day)) ?></span>
            <span class="<?= $hrs ? '' : 'text-bone/25' ?>"><?= e(fmt_hours($hrs)) ?></span>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>

    <?php if (!empty($settings['map_embed_url'])): ?>
      <div class="aspect-video rounded-2xl overflow-hidden border border-white/10">
        <iframe src="<?= e($settings['map_embed_url']) ?>" class="w-full h-full" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    <?php endif; ?>
  </div>

  <!-- Right: form -->
  <div class="md:col-span-3 reveal-right">
    <form method="POST" action="<?= url('/contact') ?>" class="bg-white/[0.02] border border-white/5 rounded-2xl p-8 space-y-5">
      <?= csrf_field() ?>
      <h2 class="text-2xl font-display mb-2"><?= e(t('page.contact.form_title')) ?></h2>
      <p class="text-sm text-bone/40 mb-4"><?= e(t('page.contact.form_hint')) ?></p>
      <div class="grid sm:grid-cols-2 gap-4">
        <div>
          <label class="label"><?= e(t('form.name')) ?> *</label>
          <input name="name" required class="input">
        </div>
        <div>
          <label class="label"><?= e(t('form.email')) ?> *</label>
          <input name="email" type="email" required class="input">
        </div>
      </div>
      <div>
        <label class="label"><?= e(t('form.phone')) ?></label>
        <input name="phone" class="input">
      </div>
      <div>
        <label class="label"><?= e(t('form.message')) ?> *</label>
        <textarea name="message" rows="6" required class="input resize-none"></textarea>
      </div>
      <button class="btn-gold w-full text-sm py-4"><?= e(t('form.send')) ?></button>
    </form>
  </div>
</section>
