// ============================================================
// Hero — three layout variants exposed through the `variant` prop.
//   v1 'editorial-split' — left copy, right portrait (default)
//   v2 'full-bleed'      — large editorial image, copy overlay
//   v3 'type-led'        — display type dominant, small accent art
// All variants share the same display-text content & CTA.
// ============================================================

function JmHero({ variant = 'editorial-split', lang, onCta, onSecondary }) {
  const t = JM.t[lang];
  const headlineVi = ['Dấu ấn', 'của các nàng'];
  const headlineEn = ['A mark', 'of your own'];
  const headline = lang === 'vi' ? headlineVi : headlineEn;

  const subVi = 'Trang sức cao cấp với mức giá không cao cấp. Mỗi món đồ là một ngôn ngữ không lời — tôn vinh sự độc đáo trong các nàng.';
  const subEn = 'Fine-feeling jewelry that doesn\'t cost a fortune. Each piece a quiet language — celebrating the one and only you.';
  const sub = lang === 'vi' ? subVi : subEn;

  const lead = JM.collections[0];
  const eyebrow = lead ? `${lang === 'vi' ? lead.name : lead.en} · ${lang === 'vi' ? lead.season : lead.enSeason}` : 'SHINE & UNIQUE';

  if (variant === 'full-bleed') {
    return (
      <section className="jm-hero jm-hero--bleed" data-screen-label="Hero — full-bleed">
        <div className="jm-hero__bleed">
          <JmEditorialImage kind="hero-portrait"/>
          <div className="jm-hero__bleed-overlay">
            <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>{eyebrow}</div>
            <h1 className="jm-hero__display">
              {headline[0]}<br/>
              <span className="jm-hero__brand">{headline[1]}</span>
            </h1>
            <p className="jm-hero__sub">{sub}</p>
            <div className="jm-hero__cta">
              <button className="jm-btn jm-btn-primary" onClick={onCta}>{t['cta.explore']}</button>
              <button className="jm-btn jm-btn-ghost" onClick={onSecondary}>{lang === 'vi' ? 'Về Jesmee →' : 'About Jesmee →'}</button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'type-led') {
    return (
      <section className="jm-hero jm-hero--type" data-screen-label="Hero — type-led">
        <div className="jm-hero__type-inner">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>{eyebrow}</div>
          <h1 className="jm-hero__type-display">
            <span>{headline[0]}</span>
            <span className="jm-hero__brand">{headline[1]}</span>
          </h1>
          <div className="jm-hero__type-foot">
            <p className="jm-hero__sub" style={{ margin: 0 }}>{sub}</p>
            <div className="jm-hero__cta" style={{ marginTop: 12 }}>
              <button className="jm-btn jm-btn-primary" onClick={onCta}>{t['cta.explore']}</button>
              <button className="jm-btn jm-btn-ghost" onClick={onSecondary}>{lang === 'vi' ? 'Về Jesmee →' : 'About Jesmee →'}</button>
            </div>
          </div>
          <div className="jm-hero__type-strip">
            <div className="jm-hero__type-thumb"><JmEditorialImage kind="hand-ring"/></div>
            <div className="jm-hero__type-thumb"><JmEditorialImage kind="ear-stud"/></div>
            <div className="jm-hero__type-thumb"><JmEditorialImage kind="neck-pendant"/></div>
          </div>
        </div>
      </section>
    );
  }

  // editorial-split (default)
  return (
    <section className="jm-hero" data-screen-label="Hero — editorial split">
      <div className="jm-hero__inner">
        <div className="jm-hero__copy">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>{eyebrow}</div>
          <h1 className="jm-hero__display">
            {headline[0]}<br/>
            <span className="jm-hero__brand">{headline[1]}</span>
          </h1>
          <p className="jm-hero__sub">{sub}</p>
          <div className="jm-hero__cta">
            <button className="jm-btn jm-btn-primary" onClick={onCta}>{t['cta.explore']}</button>
            <button className="jm-btn jm-btn-ghost" onClick={onSecondary}>{lang === 'vi' ? 'Về Jesmee →' : 'About Jesmee →'}</button>
          </div>
          <div className="jm-hero__meta">
            <div className="jm-hero__meta-item">
              <div className="jm-label">Titanium</div>
              <div className="jm-small">{lang === 'vi' ? 'không gỉ, không kích ứng' : 'rust-free, skin-friendly'}</div>
            </div>
            <div className="jm-hero__meta-divider"></div>
            <div className="jm-hero__meta-item">
              <div className="jm-label">{lang === 'vi' ? 'Mạ vàng 18K' : '18K plated'}</div>
              <div className="jm-small">{lang === 'vi' ? 'bền màu hằng ngày' : 'colour-fast every day'}</div>
            </div>
            <div className="jm-hero__meta-divider"></div>
            <div className="jm-hero__meta-item">
              <div className="jm-label">{lang === 'vi' ? '15 ngày' : '15 days'}</div>
              <div className="jm-small">{lang === 'vi' ? 'đổi mới sản phẩm' : 'free exchange'}</div>
            </div>
          </div>
        </div>
        <div className="jm-hero__art">
          <JmEditorialImage kind="hero-portrait"/>
          <div className="jm-hero__caption">
            <span className="jm-label">SHINE &amp; UNIQUE</span>
            <span className="jm-small">{lang === 'vi' ? 'Trang sức titanium mạ vàng 18K' : 'Titanium jewelry, 18K gold-plated'}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.JmHero = JmHero;