---
import Base from "../layouts/Base.astro";
import { u } from "../lib/url";

const galleryImages = [
  "01_DSC_3256.JPG","02_DSC_3270.JPG","03_DSC_3264.JPG","04_DSC_3276.JPG",
  "05_DSC_3283.JPG","06_DSC_3309.JPG","07_DSC_3316.JPG","08_DSC_3331.JPG",
  "09_DSC_3332.JPG","10_DSC_3336.JPG","11_DSC_3356.JPG","12_DSC_3343.JPG",
  "13_DSC_3345.JPG","14_DSC_3358.JPG","15_DSC_3363.JPG",
];
---
<Base title="About us" currentPath="/about">
  <!-- Hero -->
  <section class="section-banner" style={`background-image: url('${u("/legacy-img/aboutus.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="about.hero.subtitle">Company's mission</p>
        <h1 class="mt-3 font-display text-5xl md:text-7xl text-white leading-[1.05]" data-i18n="about.hero.title">About us</h1>
      </div>
    </div>
  </section>

  <!-- Intro -->
  <section class="py-20 md:py-28">
    <div class="max-w-5xl mx-auto px-5 lg:px-8 grid md:grid-cols-12 gap-12">
      <div class="md:col-span-5 reveal">
        <p class="eyebrow" data-i18n="about.section1.eyebrow">Our story</p>
        <h2 class="mt-3 font-display text-3xl md:text-4xl leading-tight" data-i18n="about.section1.title">
          We give new life to your harvest
        </h2>
      </div>
      <div class="md:col-span-7 reveal">
        <p class="text-lg leading-relaxed" style="color: var(--color-ink-soft);" data-i18n="about.section1.body">
          The care Santamaria takes in singling out a limited number of varieties among the many being experimented is a guarantee of future results.
        </p>
      </div>
    </div>
  </section>

  <!-- Gallery -->
  <section class="py-10" style="background: var(--color-bg-soft);">
    <div class="max-w-7xl mx-auto px-5 lg:px-8 py-10">
      <div class="masonry">
        {galleryImages.map((f, i) => (
          <figure class="reveal">
            <img src={u(`/legacy-img/about/${f}`)} alt={`Santamaria nursery ${i+1}`} loading="lazy" />
          </figure>
        ))}
      </div>
    </div>
  </section>

  <!-- Mission -->
  <section class="py-20 md:py-28">
    <div class="max-w-5xl mx-auto px-5 lg:px-8 grid md:grid-cols-12 gap-12">
      <div class="md:col-span-5 reveal">
        <p class="eyebrow" data-i18n="about.section2.eyebrow">Our mission</p>
        <h2 class="mt-3 font-display text-3xl md:text-4xl leading-tight" data-i18n="about.section2.title">
          Our mission
        </h2>
      </div>
      <div class="md:col-span-7 reveal">
        <p class="text-lg leading-relaxed" style="color: var(--color-ink-soft);" data-i18n="about.section2.body">
          Breed, develop and select the best new varieties of carnations.
        </p>
      </div>
    </div>
  </section>

  <!-- Founder -->
  <section class="pb-28">
    <div class="max-w-4xl mx-auto px-5 lg:px-8 text-center">
      <figure class="reveal inline-block rounded-2xl overflow-hidden shadow-[var(--shadow-lift)]">
        <img src={u("/legacy-img/santamaria.jpg")} alt="Sergio Santamaria" class="block max-h-[520px] w-auto mx-auto" loading="lazy" />
      </figure>
      <figcaption class="mt-6 reveal">
        <p class="font-display text-2xl" style="color: var(--color-brand);" data-i18n="about.founder.name">Sergio Santamaria</p>
        <p class="text-sm tracking-wider uppercase" style="color: var(--color-muted);" data-i18n="about.founder.role">Founder & plant breeder</p>
      </figcaption>
    </div>
  </section>
</Base>
<script is:inline>
  document.querySelector('title[data-i18n-title]')?.setAttribute('data-page-key', 'nav.about');
</script>