---
import Base from "../layouts/Base.astro";
import { u } from "../lib/url";
---
<Base title="Contact us" currentPath="/contact">
  <section class="section-banner" style={`background-image: url('${u("/legacy-img/ufficio.JPG")}');`}>
    <div class="max-w-6xl mx-auto px-5 lg:px-8 py-32 md:py-48">
      <div class="max-w-2xl reveal">
        <p class="text-xs tracking-[.22em] uppercase text-white/80" data-i18n="contact.hero.subtitle">We'd love to hear from you</p>
        <h1 class="mt-3 font-display text-5xl md:text-7xl text-white leading-[1.05]" data-i18n="contact.hero.title">Contact us</h1>
      </div>
    </div>
  </section>

  <!-- Info cards -->
  <section class="py-20 md:py-24">
    <div class="max-w-6xl mx-auto px-5 lg:px-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
      <article class="reveal rounded-2xl p-8" style="background: var(--color-bg-soft); border: 1px solid var(--color-line);">
        <div class="w-11 h-11 rounded-xl grid place-items-center mb-5" style="background: var(--color-brand); color: var(--color-bg);">
          <svg width="20" height="20" 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 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <p class="eyebrow" data-i18n="contact.address.title">Where to find us</p>
        <p class="mt-2 text-lg" data-i18n="contact.address.street">Via S. Rocco, 23 F</p>
        <p data-i18n="contact.address.city">18039 Ventimiglia IM, Italy</p>
      </article>

      <article class="reveal rounded-2xl p-8" style="background: var(--color-bg-soft); border: 1px solid var(--color-line);">
        <div class="w-11 h-11 rounded-xl grid place-items-center mb-5" style="background: var(--color-brand); color: var(--color-bg);">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
        </div>
        <p class="eyebrow" data-i18n="contact.email.title">Write us</p>
        <a href="mailto:info@santamariacuttings.it" class="mt-2 inline-block text-base md:text-lg hover:underline break-all">info@santamariacuttings.it</a>
      </article>

      <article class="reveal rounded-2xl p-8" style="background: var(--color-bg-soft); border: 1px solid var(--color-line);">
        <div class="w-11 h-11 rounded-xl grid place-items-center mb-5" style="background: var(--color-brand); color: var(--color-bg);">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92V21a1 1 0 0 1-1.1 1 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 3.17 4.1 1 1 0 0 1 4.17 3H8.3a1 1 0 0 1 1 .75c.12.96.36 1.9.72 2.8a1 1 0 0 1-.22 1.05L8.1 9.1a16 16 0 0 0 6.8 6.8l1.5-1.7a1 1 0 0 1 1.05-.22c.9.36 1.84.6 2.8.72a1 1 0 0 1 .75 1.02z"/></svg>
        </div>
        <p class="eyebrow" data-i18n="contact.phone.title">Call us</p>
        <a href="tel:+390184210026" class="mt-2 inline-block text-lg hover:underline">+39 0184 210026</a>
        <p class="mt-4 text-sm" style="color: var(--color-muted);"><span data-i18n="contact.hours.weekdays">Mon–Fri · 8:30 – 18:00</span></p>
        <p class="text-sm" style="color: var(--color-muted);"><span data-i18n="contact.hours.saturday">Sat · 8:30 – 12:30</span></p>
      </article>
    </div>
  </section>

  <!-- Map -->
  <section class="pb-24">
    <div class="max-w-7xl mx-auto px-5 lg:px-8">
      <div class="rounded-2xl overflow-hidden shadow-[var(--shadow-lift)] reveal" style="aspect-ratio: 16/7;">
        <iframe
          title="Santamaria on the map"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29096.051549023767!2d7.571577192179464!3d43.82744093767457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cded0cce486621%3A0x6998cc8034c5bf6f!2sSANTAMARIA%20CARNATION%20CUTTINGS%20SPECIALIST!5e0!3m2!1sit!2sus!4v1602603073254!5m2!1sit!2sus"
          width="100%"
          height="100%"
          style="border:0"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"
          allowfullscreen
        ></iframe>
      </div>
    </div>
  </section>
</Base>
<script is:inline>
  document.querySelector('title[data-i18n-title]')?.setAttribute('data-page-key', 'nav.contact');
</script>