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

// Pick a curated set of 6 homegallery shots for the carousel
const carouselImages = [
  "01-DSC_3068.JPG",
  "05-DSC_3072.JPG",
  "08-DSC_3083.JPG",
  "15-DSC_3061.JPG",
  "20-DSC_3090.JPG",
  "13-DSC_3058.JPG",
].map(f => ({ src: u(`/legacy-img/homegallery/${f}`), alt: "Santamaria greenhouse" }));
---
<Base title="Home">
  <Hero />

  <!-- Hero image carousel -->
  <section class="max-w-7xl mx-auto px-5 lg:px-8 pt-8 md:pt-14 pb-10">
    <HeroCarousel images={carouselImages} height="min(70vh, 640px)">
      <div class="reveal max-w-2xl">
        <p class="text-xs tracking-[.22em] uppercase text-white/80 mb-4">Ventimiglia · Liguria · Italia</p>
        <h2 class="font-display text-3xl md:text-5xl text-white leading-tight" data-i18n="home.experience.title">
          For over 65 years, the talent of experience
        </h2>
        <p class="mt-4 text-white/90 max-w-xl" data-i18n="home.experience.body">
          From the Ligurian Riviera to greenhouses on every continent, Santamaria cuttings root quickly, grow uniformly and thrive under every latitude.
        </p>
      </div>
    </HeroCarousel>
  </section>

  <!-- About teaser -->
  <section id="about-teaser" class="py-20 md:py-28">
    <div class="max-w-6xl mx-auto px-5 lg:px-8 grid md:grid-cols-12 gap-10 items-center">
      <div class="md:col-span-5 reveal">
        <figure class="relative rounded-2xl overflow-hidden shadow-[var(--shadow-lift)]">
          <img src={u("/legacy-img/santamaria_serra.jpg")} alt="Sergio Santamaria among carnations" class="w-full h-auto block" loading="lazy" />
          <figcaption class="absolute bottom-0 left-0 right-0 p-5 text-white" style="background: linear-gradient(180deg, transparent, rgba(8,40,24,.85));">
            <p class="text-sm font-medium" data-i18n="about.founder.name">Sergio Santamaria</p>
            <p class="text-xs opacity-80" data-i18n="about.founder.role">Founder & plant breeder</p>
          </figcaption>
        </figure>
      </div>
      <div class="md:col-span-7 reveal">
        <p class="eyebrow" data-i18n="home.about.eyebrow">About us</p>
        <h2 class="mt-3 font-display text-3xl md:text-5xl leading-tight" data-i18n="home.about.title">
          The tradition of two generations, at your service
        </h2>
        <p class="mt-6 text-lg leading-relaxed" style="color: var(--color-ink-soft);" data-i18n="home.about.body">
          The care Santamaria takes in selecting a limited number of varieties among the many under trial is a guarantee of future results.
        </p>
        <a href={u("/about")} class="mt-8 inline-flex items-center gap-2 btn btn-ghost">
          <span data-i18n="common.learn_more">Learn more</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Products teaser -->
  <section id="products-teaser" class="py-20 md:py-28" style="background: var(--color-bg-soft);">
    <div class="max-w-6xl mx-auto px-5 lg:px-8 grid md:grid-cols-12 gap-10 items-center">
      <div class="md:col-span-7 reveal order-2 md:order-1">
        <p class="eyebrow" data-i18n="home.products.eyebrow">Our creations</p>
        <h2 class="mt-3 font-display text-3xl md:text-5xl leading-tight" data-i18n="home.products.title">
          Varieties bred to thrive, wherever you grow
        </h2>
        <p class="mt-6 text-lg leading-relaxed" style="color: var(--color-ink-soft);" data-i18n="home.products.body">
          Five lines, dozens of colours, one obsession.
        </p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href={u("/products")} class="btn btn-primary">
            <span data-i18n="common.discover">Discover</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
          <a href={u("/catalogo_SM.pdf")} target="_blank" rel="noopener" class="btn btn-ghost">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v14m-5-5l5 5 5-5M5 21h14"/></svg>
            <span data-i18n="products.download.cta">Download our 2024/2025 catalogue</span>
          </a>
        </div>
      </div>
      <div class="md:col-span-5 reveal order-1 md:order-2">
        <div class="grid grid-cols-2 gap-3">
          {[1,2,3,4].map(n => (
            <div class="aspect-[4/5] rounded-xl overflow-hidden bg-[color:var(--color-bg-deep)]">
              <img src={u(`/legacy-img/linea-${n}.JPG`)} alt={`Product line ${n}`} class="w-full h-full object-cover" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Stats / pillars -->
  <section class="py-20 md:py-24">
    <div class="max-w-6xl mx-auto px-5 lg:px-8 grid sm:grid-cols-3 gap-8 text-center">
      {[
        { n: "65+",  k: "home.stats.years",     fallback: "Years of breeding" },
        { n: "15",   k: "home.stats.countries", fallback: "Countries we ship to" },
        { n: "100%", k: "home.stats.family",    fallback: "Family-owned" },
      ].map(s => (
        <div class="reveal">
          <div class="font-display text-5xl md:text-6xl" style="color: var(--color-brand);">{s.n}</div>
          <div class="mt-2 text-sm tracking-wider uppercase" style="color: var(--color-muted);" data-i18n={s.k}>{s.fallback}</div>
        </div>
      ))}
    </div>
  </section>

  <!-- Contact teaser -->
  <section id="contact-teaser" class="py-20 md:py-28" style="background: var(--color-brand-deep); color: var(--color-bg);">
    <div class="max-w-6xl mx-auto px-5 lg:px-8 grid md:grid-cols-2 gap-10 items-center">
      <div class="reveal">
        <p class="eyebrow" style="color: var(--color-accent-soft);" data-i18n="home.contacts.eyebrow">Contact us</p>
        <h2 class="mt-3 font-display text-3xl md:text-5xl leading-tight" data-i18n="home.contacts.title">
          A family business, open to the world
        </h2>
        <div class="mt-8 space-y-2 text-lg">
          <p data-i18n="home.contacts.address_line1">Via San Rocco 23 F — Fraz. Bevera</p>
          <p data-i18n="home.contacts.address_line2">18039 Ventimiglia IM, Italy</p>
          <p class="pt-4"><a class="underline underline-offset-4" href="mailto:info@santamariacuttings.it">info@santamariacuttings.it</a></p>
          <p><a class="underline underline-offset-4" href="tel:+390184210026">+39 0184 210026</a></p>
        </div>
      </div>
      <div class="reveal">
        <a href={u("/contact")} class="btn btn-accent">
          <span data-i18n="nav.contact">Contact us</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  </section>
</Base>
<script is:inline>
  // tell the base layout which key drives the <title>
  document.querySelector('title[data-i18n-title]')?.setAttribute('data-page-key', 'nav.home');
</script>