---
import BaseLayout from '../layouts/BaseLayout.astro';
import CTABanner from '../components/CTABanner.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, 'contact.title')}
  description={`Contactez Cachet Peintres Décorateurs — ${general.phone} — ${general.email}. Nous servons Laval, la Rive-Nord et les environs.`}
  canonical="/contact"
>
  <!-- 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, 'contact.title')}</span>
      </nav>
      <h1 class="page-title">{t(lang, 'contact.title')}</h1>
      <p class="page-subtitle">{t(lang, 'contact.subtitle')}</p>
    </div>
  </section>

  <section class="contact-section">
    <div class="container-site contact-grid">
      <!-- Contact info -->
      <div class="contact-info">
        <div class="contact-card">
          <div class="contact-card-icon">
            <svg width="22" height="22" 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>
          </div>
          <div>
            <h3>{t(lang, 'contact.phone')}</h3>
            <a href={`tel:${general.phone.replace(/\D/g, '')}`} class="contact-value contact-link">
              {general.phone}
            </a>
          </div>
        </div>

        <div class="contact-card">
          <div class="contact-card-icon">
            <svg width="22" height="22" 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>
          </div>
          <div>
            <h3>{t(lang, 'contact.email')}</h3>
            <a href={`mailto:${general.email}`} class="contact-value contact-link">
              {general.email}
            </a>
          </div>
        </div>

        <div class="contact-card">
          <div class="contact-card-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
          </div>
          <div>
            <h3>{t(lang, 'contact.address')}</h3>
            <p class="contact-value">{general.address}</p>
            <p class="contact-service-area">Zone desservie : {general.serviceArea}</p>
          </div>
        </div>

        <!-- Hours -->
        <div class="contact-hours">
          <h3 class="contact-hours-title">{t(lang, 'contact.hours')}</h3>
          <ul class="hours-list">
            <li>
              <span class="hours-day">Lundi – Vendredi</span>
              <span class="hours-time">7h00 – 18h00</span>
            </li>
            <li>
              <span class="hours-day">Samedi</span>
              <span class="hours-time">8h00 – 16h00</span>
            </li>
            <li>
              <span class="hours-day">Dimanche</span>
              <span class="hours-time closed">Fermé</span>
            </li>
          </ul>
        </div>

        <!-- Social -->
        {general.facebook && (
          <div class="contact-social">
            <h3 class="contact-social-title">{t(lang, 'contact.follow')}</h3>
            <a
              href={general.facebook}
              class="social-link"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
              </svg>
              Suivez-nous sur Facebook
            </a>
          </div>
        )}

        <!-- Legal -->
        <div class="contact-legal">
          <p>RBQ : {general.rbq}</p>
          <p>NEQ : {general.neq} ({general.legalName})</p>
        </div>
      </div>

      <!-- CTA -->
      <div class="contact-action-panel">
        <div class="contact-cta-card">
          <div class="contact-cta-icon">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14,2 14,8 20,8"/>
              <line x1="16" y1="13" x2="8" y2="13"/>
              <line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
          </div>
          <h2>Demandez votre soumission</h2>
          <p>Obtenez une estimation personnalisée et gratuite pour votre projet de peinture ou décoration.</p>
          <a href="/soumission" class="btn-primary contact-soumission-btn">
            {t(lang, 'cta.soumission')}
          </a>
        </div>

        <!-- Map placeholder -->
        <div class="contact-map">
          <h3 class="contact-map-title">{t(lang, 'contact.map.title')}</h3>
          <div class="map-placeholder">
            <div class="map-placeholder-inner">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                <circle cx="12" cy="10" r="3"/>
              </svg>
              <p>Laval & Rive-Nord, Québec</p>
              <span class="map-service-area">{general.serviceArea}</span>
              <a
                href={`https://maps.google.com/?q=Laval+Quebec`}
                target="_blank"
                rel="noopener noreferrer"
                class="btn-outline map-btn"
              >
                Voir sur Google Maps
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <CTABanner />
</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;
  }

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

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: start;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.375rem;
    background-color: var(--color-brand-50);
    border: 1.5px solid var(--color-brand-100);
    border-radius: 8px;
  }

  .contact-card-icon {
    width: 44px;
    height: 44px;
    background-color: var(--color-brand-600);
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .contact-card h3 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-400);
    margin-bottom: 0.375rem;
  }

  .contact-value {
    font-size: 1.0625rem;
    color: var(--color-gray-dark);
    font-weight: 400;
  }

  .contact-link {
    color: var(--color-brand-600);
    font-weight: 700;
    transition: opacity 0.2s ease;
  }

  .contact-link:hover { opacity: 0.75; }

  .contact-service-area {
    font-size: 0.875rem;
    color: var(--color-brand-400);
    margin-top: 0.25rem;
  }

  .contact-hours {
    padding: 1.375rem;
    background-color: var(--color-brand-50);
    border: 1.5px solid var(--color-brand-100);
    border-radius: 8px;
  }

  .contact-hours-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-400);
    margin-bottom: 0.875rem;
  }

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

  .hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9375rem;
  }

  .hours-day {
    color: var(--color-gray-dark);
    opacity: 0.8;
  }

  .hours-time {
    font-weight: 700;
    color: var(--color-brand-600);
  }

  .hours-time.closed {
    color: var(--color-gray-light);
    font-weight: 400;
  }

  .contact-social { margin-top: 0.25rem; }

  .contact-social-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.625rem;
  }

  .social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #1877f2;
    font-weight: 700;
    transition: opacity 0.2s ease;
  }

  .social-link:hover { opacity: 0.8; }

  .contact-legal {
    font-size: 0.75rem;
    color: var(--color-gray-dark);
    opacity: 0.45;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Action panel */
  .contact-action-panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .contact-cta-card {
    background-color: var(--color-brand-600);
    color: #ffffff;
    padding: 2.5rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .contact-cta-icon {
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-cta-card h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    color: #ffffff;
    font-family: var(--font-display);
  }

  .contact-cta-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
  }

  .contact-soumission-btn {
    background-color: #ffffff;
    color: var(--color-brand-600);
    margin-top: 0.5rem;
  }

  .contact-soumission-btn:hover {
    background-color: var(--color-brand-50);
  }

  .map-placeholder {
    background-color: var(--color-brand-50);
    border: 1.5px solid var(--color-brand-100);
    border-radius: 10px;
    overflow: hidden;
  }

  .map-placeholder-inner {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--color-brand-400);
  }

  .map-placeholder-inner p {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-brand-600);
  }

  .map-service-area {
    font-size: 0.875rem;
    color: var(--color-gray-dark);
    opacity: 0.65;
  }

  .map-btn {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
  }

  .contact-map-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-400);
    margin-bottom: 0.875rem;
  }

  @media (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }
</style>
