---
import { u } from "../lib/url";
// Single-language, editorial hero. Copy swaps via data-i18n.
---
<section class="relative overflow-hidden" style="background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);">
  <!-- decorative mark, subtle -->
  <svg
    class="absolute opacity-[.05] pointer-events-none select-none"
    style="top:-120px; right:-120px; width:560px; height:560px; color: var(--color-brand);"
    viewBox="0 0 64 64" aria-hidden="true"
  >
    <path d="M32 6 L36 22 L48 16 L42 28 L58 30 L44 36 L52 48 L38 44 L34 60 L30 44 L16 48 L22 36 L8 30 L22 28 L16 16 L28 22 Z" fill="currentColor"/>
  </svg>

  <div class="max-w-6xl mx-auto px-5 lg:px-8 pt-20 md:pt-28 pb-16 md:pb-20 text-center relative z-10">
    <p class="text-xs tracking-[.22em] uppercase reveal" style="color: var(--color-accent);">
      Since 1958 · Ventimiglia, Italia
    </p>

    <h1
      class="mt-7 font-display leading-[1.02] tracking-tight reveal"
      style="color: var(--color-brand); font-size: clamp(2.4rem, 6vw, 5.2rem);"
      data-i18n="hero.tagline"
    >Carnation Cuttings Specialist</h1>

    <p
      class="mt-7 mx-auto max-w-2xl text-lg md:text-xl leading-relaxed reveal"
      style="color: var(--color-ink-soft);"
      data-i18n="hero.subheading"
    >Two generations, one family, a single passion: breeding and selecting the finest carnation cuttings.</p>

    <div class="mt-10 flex flex-wrap gap-3 justify-center reveal">
      <a href={u("/products")} class="btn btn-primary" data-i18n="hero.cta_primary">Our varieties</a>
      <a href={u("/about")} class="btn btn-ghost" data-i18n="hero.cta_secondary">Meet us</a>
    </div>

    <!-- Decorative rule with petal icon -->
    <div class="mt-14 flex items-center justify-center gap-4 reveal">
      <span class="h-px w-12" style="background: var(--color-line);"></span>
      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" style="color: var(--color-accent); opacity:.7;">
        <circle cx="12" cy="12" r="2" fill="currentColor"/>
        <path d="M12 2v6M12 16v6M2 12h6M16 12h6M4.9 4.9l4.2 4.2M14.9 14.9l4.2 4.2M4.9 19.1l4.2-4.2M14.9 9.1l4.2-4.2" stroke="currentColor" stroke-width="1.5" fill="none"/>
      </svg>
      <span class="h-px w-12" style="background: var(--color-line);"></span>
    </div>
  </div>
</section>