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

// These mirror the 4 product "lines" the legacy site exposes.
// In the real redesign they would be driven by a content collection or CMS export.
const lines = [
  {
    id: 1, name: "Standard",
    latin: "Dianthus caryophyllus",
    taglineKey: "products.line.standard.tagline",
    taglineFallback: "The classic large-bloom carnation, refined over decades.",
    img: u("/legacy-img/linea-1.JPG"),
  },
  {
    id: 2, name: "Spray",
    latin: "Dianthus caryophyllus var. multiflora",
    taglineKey: "products.line.spray.tagline",
    taglineFallback: "Multi-bloom stems, vivid colour palettes, rapid rooting.",
    img: u("/legacy-img/linea-2.JPG"),
  },
  {
    id: 3, name: "Mediterranea",
    latin: "Dianthus mediterranea",
    taglineKey: "products.line.mediterranea.tagline",
    taglineFallback: "Bred for warmer climates — heat tolerant and productive.",
    img: u("/legacy-img/linea-3.JPG"),
  },
  {
    id: 4, name: "Fragrance",
    latin: "Dianthus caryophyllus odoratus",
    taglineKey: "products.line.fragrance.tagline",
    taglineFallback: "Heirloom fragrance, modern disease resistance.",
    img: u("/legacy-img/linea-4.JPG"),
  },
];
---
<Base title="Our products" currentPath="/products">
  <section class="section-banner" style={`background-image: url('${u("/legacy-img/products.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="products.hero.subtitle">Five lines. One obsession: quality.</p>
        <h1 class="mt-3 font-display text-5xl md:text-7xl text-white leading-[1.05]" data-i18n="products.hero.title">Our products</h1>
      </div>
    </div>
  </section>

  <!-- Catalogue download ------------------------------------------------>
  <section class="py-16">
    <div class="max-w-5xl mx-auto px-5 lg:px-8">
      <div class="rounded-2xl p-8 md:p-10 flex flex-col md:flex-row items-center gap-6 reveal"
           style="background: var(--color-bg-soft); border: 1px solid var(--color-line);">
        <div class="shrink-0 w-16 h-16 rounded-xl grid place-items-center"
             style="background: var(--color-brand); color: var(--color-bg);">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
        </div>
        <div class="flex-1 text-center md:text-start">
          <p class="eyebrow" data-i18n="products.catalogue.eyebrow">Catalogue 2024 / 2025</p>
          <p class="mt-1 font-display text-2xl md:text-3xl" data-i18n="products.download.cta">
            Download our 2024/2025 catalogue
          </p>
          <p class="text-sm mt-1" style="color: var(--color-muted);" data-i18n="products.download.hint">PDF · 9 MB</p>
        </div>
        <a href={u("/catalogo_SM.pdf")} target="_blank" rel="noopener" class="btn btn-primary">
          <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>PDF</span>
        </a>
      </div>
    </div>
  </section>

  <!-- Resistance notice ------------------------------------------------->
  <section class="pb-12">
    <div class="max-w-5xl mx-auto px-5 lg:px-8">
      <div class="reveal">
        <p class="eyebrow" data-i18n="products.notice.title">A note on disease resistance</p>
        <p class="mt-3 text-base leading-relaxed max-w-3xl" style="color: var(--color-ink-soft);" data-i18n="products.notice.body">
          The resistance evaluation to Fusarium Oxysporum sp. Dianthi concerns every race of this pathogen known at present, on the basis of tests carried out by Professor A. Garibaldi at the Plant Pathology Institute of the University of Turin (Italy).
        </p>
      </div>
    </div>
  </section>

  <!-- Lines list -------------------------------------------------------->
  <section class="py-8">
    <div class="max-w-7xl mx-auto px-5 lg:px-8 grid gap-16">
      {lines.map((line, idx) => (
        <article class={`grid md:grid-cols-12 gap-8 items-center reveal ${idx % 2 === 1 ? 'md:[&>*:first-child]:order-2' : ''}`}>
          <div class="md:col-span-7">
            <div class="aspect-[16/10] rounded-2xl overflow-hidden shadow-[var(--shadow-lift)]"
                 style="background: var(--color-bg-deep);">
              <img src={line.img} alt={line.name} class="w-full h-full object-cover" />
            </div>
          </div>
          <div class="md:col-span-5">
            <p class="eyebrow"><span data-i18n="products.line.prefix">Line</span> 0{line.id}</p>
            <h2 class="mt-2 font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3.2rem);">{line.name}</h2>
            <p class="mt-1 italic" style="color: var(--color-muted);">{line.latin}</p>
            <p class="mt-5 text-lg leading-relaxed" style="color: var(--color-ink-soft);" data-i18n={line.taglineKey}>{line.taglineFallback}</p>
            <a href={u("/catalogo_SM.pdf")} target="_blank" rel="noopener"
               class="mt-6 inline-flex items-center gap-2 btn btn-ghost">
              <span data-i18n="products.line.cta">Explore the line</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>
        </article>
      ))}
    </div>
  </section>

</Base>
<script is:inline>
  document.querySelector('title[data-i18n-title]')?.setAttribute('data-page-key', 'nav.products');
</script>