---
import { allTaglines } from "../i18n/helpers";
import { LANG_MAP } from "../i18n/config";

const taglines = allTaglines();

// Group into aesthetic rows that mirror the "feel" of the original JPG:
// shorter, wider lines at top/middle and non-latin scripts in their own row
// so they breathe in their own rhythm.
const rows = [
  ['it', 'en', 'es'],
  ['fr', 'pt', 'de'],
  ['nl', 'tr', 'hu'],
  ['ja', 'ko'],
  ['zh', 'ar', 'he'],
  ['ru'],
];

const byCode = Object.fromEntries(taglines.map(t => [t.code, t]));
---
<section class="relative py-20 md:py-28" style="background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);">
  <div class="max-w-6xl mx-auto px-5 lg:px-8 text-center">
    <p class="eyebrow reveal">Since 1958 · Ventimiglia, Italia</p>

    <h1 class="mt-6 font-display text-4xl md:text-6xl lg:text-7xl leading-[1.05] tracking-tight reveal" style="color: var(--color-ink);">
      Santamaria,
      <span class="italic underline-accent" style="color: var(--color-brand);">the carnation</span>
      you'll find anywhere it grows.
    </h1>

    <div class="mt-12 tagline-stack" aria-label="Our specialty, in 15 languages">
      {rows.map(row => (
        <div class="flex flex-wrap justify-center items-center gap-x-8 gap-y-2">
          {row.map(code => {
            const info = LANG_MAP[code as keyof typeof LANG_MAP];
            const item = byCode[code];
            if (!info || !item) return null;
            return (
              <span
                class="tagline-line"
                data-lang={info.code}
                lang={info.code}
                dir={info.dir}
                title={info.englishName}
              >{item.tagline}</span>
            );
          })}
        </div>
      ))}
    </div>

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