---
import BaseLayout from '../layouts/BaseLayout.astro';
import SoumissionForm from '../components/SoumissionForm.astro';
import { getLangFromUrl, t } from '../i18n/utils';
import general from '../content/settings/general.json';

const lang = getLangFromUrl(Astro.url);
return Astro.redirect('/404');

---
<BaseLayout
  title={t(lang, 'nav.soumission')}
  description="Demandez votre soumission gratuite pour vos travaux de peinture ou décoration à Laval et sur la Rive-Nord. Cachet Peintres Décorateurs vous répond rapidement."
  canonical="/soumission"
>
  <!-- Page header -->
  <section class="page-header">
    <div class="container-site">
      <nav class="breadcrumb" aria-label="Fil d'Ariane">
        <a href="/">{t(lang, 'nav.accueil')}</a>
        <span aria-hidden="true">›</span>
        <span aria-current="page">{t(lang, 'nav.soumission')}</span>
      </nav>
      <h1 class="page-title">{t(lang, 'soumission.title')}</h1>
      <p class="page-subtitle">{t(lang, 'soumission.subtitle')}</p>
    </div>
  </section>

  <section class="soumission-section">
    <div class="container-site soumission-grid">
      <!-- Form -->
      <div class="soumission-form-col">
        <SoumissionForm />
      </div>

      <!-- Side info -->
      <aside class="soumission-sidebar">
        <div class="sidebar-card">
          <h2 class="sidebar-title">Comment ça fonctionne</h2>
          <ol class="process-list">
            <li class="process-step">
              <div class="process-num">1</div>
              <div>
                <h3>Remplissez le formulaire</h3>
                <p>Décrivez votre projet en quelques mots — type de travaux, superficie et délai souhaité.</p>
              </div>
            </li>
            <li class="process-step">
              <div class="process-num">2</div>
              <div>
                <h3>Nous vous contactons</h3>
                <p>Un de nos experts vous rappelle dans les 24–48 heures pour planifier une visite gratuite.</p>
              </div>
            </li>
            <li class="process-step">
              <div class="process-num">3</div>
              <div>
                <h3>Soumission détaillée</h3>
                <p>Vous recevez une soumission claire et sans engagement, avec tous les détails du projet.</p>
              </div>
            </li>
          </ol>
        </div>

        <div class="sidebar-contact">
          <h3>Ou contactez-nous directement</h3>
          <a href={`tel:${general.phone.replace(/\D/g, '')}`} class="sidebar-phone">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l.94-.94a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            {general.phone}
          </a>
          <a href={`mailto:${general.email}`} class="sidebar-email">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
            {general.email}
          </a>
          <p class="sidebar-legal">
            Numéro RBQ : {general.rbq}<br />
            {general.legalName}
          </p>
        </div>
      </aside>
    </div>
  </section>
</BaseLayout>

<style>
  .page-header {
    background-color: var(--color-brand-50);
    border-bottom: 1.5px solid var(--color-brand-100);
    padding: 3rem 0 2.5rem;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-brand-400);
    margin-bottom: 1rem;
  }

  .breadcrumb a {
    color: var(--color-brand-600);
    transition: opacity 0.2s ease;
  }

  .breadcrumb a:hover { opacity: 0.7; }

  .breadcrumb span[aria-current] {
    color: var(--color-gray-dark);
    opacity: 0.7;
  }

  .page-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-brand-600);
    margin-bottom: 0.75rem;
  }

  .page-subtitle {
    font-size: 1.125rem;
    color: var(--color-gray-dark);
    opacity: 0.75;
    max-width: 560px;
  }

  .soumission-section {
    padding: 4rem 0 5rem;
  }

  .soumission-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 4rem;
    align-items: start;
  }

  /* Sidebar */
  .soumission-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .sidebar-card {
    background-color: var(--color-brand-50);
    border: 1.5px solid var(--color-brand-100);
    border-radius: 10px;
    padding: 2rem;
  }

  .sidebar-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-brand-600);
    margin-bottom: 1.5rem;
  }

  .process-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .process-num {
    width: 36px;
    height: 36px;
    background-color: var(--color-brand-600);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    flex-shrink: 0;
  }

  .process-step h3 {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.25rem;
  }

  .process-step p {
    font-size: 0.875rem;
    color: var(--color-gray-dark);
    opacity: 0.75;
    line-height: 1.55;
  }

  .sidebar-contact {
    background-color: var(--color-brand-600);
    color: #ffffff;
    border-radius: 10px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .sidebar-contact h3 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
  }

  .sidebar-phone,
  .sidebar-email {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    transition: opacity 0.2s ease;
  }

  .sidebar-phone:hover,
  .sidebar-email:hover { opacity: 0.8; }

  .sidebar-legal {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
    line-height: 1.6;
  }

  @media (max-width: 900px) {
    .soumission-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .soumission-sidebar {
      order: -1;
    }
  }
</style>

