// ============================================================
// About — brand story, mission, awards, workshop, founders.
// Editorial. Long page broken by alternating section bgs.
// ============================================================

function JmAbout({ lang, onGoShop }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const t = JM.t[lang];

  const stats = [
    { num: '2020',                      vi: 'năm thành lập',        en: 'founded' },
    { num: String(JM.products.length),  vi: 'thiết kế đang mở bán', en: 'designs available' },
    { num: '18K',                       vi: 'mạ vàng',              en: 'gold plating' },
    { num: '15',                        vi: 'ngày đổi mới',         en: 'day exchange' },
  ];

  const values = [
    { icon: 'sparkles', vi: 'Cao cấp, có thể chạm tới', en: 'Premium, within reach',
      viDesc: 'Tiêu chuẩn châu Âu — nhưng vẫn là giá Việt Nam. Không có lý do để chất lượng phải đắt.',
      enDesc: 'European standards at a Vietnamese price. Quality shouldn\'t be expensive.' },
    { icon: 'shield-check', vi: 'Minh bạch, không điều kiện ẩn', en: 'Transparent, no fine print',
      viDesc: 'Đổi mới 15 ngày — viết rõ trên website, không phải tìm trong chính sách.',
      enDesc: '15-day exchange — stated on every page, never hidden.' },
    { icon: 'fingerprint', vi: 'Một dấu ấn duy nhất', en: 'One of one',
      viDesc: 'JES — Jewelry Styling. MEE — Me. Mỗi món là một dấu vân tay — riêng của các nàng.',
      enDesc: 'JES — Jewelry Styling. MEE — Me. Each piece, a fingerprint — of your own.' },
  ];

  return (
    <div data-screen-label="About">
      {/* Hero */}
      <section className="jm-about__hero">
        <div className="jm-container">
          <div className="jm-about__hero-inner">
            <div>
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>
                {lang === 'vi' ? 'Về Jesmee' : 'About Jesmee'}
              </div>
              <h1 className="jm-display" style={{ marginBottom: 24 }}>
                {t['about.title']}
              </h1>
              <p style={{ fontSize: 18, color: 'var(--jm-muted)', maxWidth: 540 }}>
                {lang === 'vi'
                  ? 'Jesmee không chỉ bán trang sức. Jesmee bán sự tự tin — ngôn ngữ không lời để các nàng kể câu chuyện của chính mình.'
                  : 'Jesmee doesn\'t sell jewelry. Jesmee sells confidence — a silent language for you to tell your own story.'}
              </p>
            </div>
            <div className="jm-about__hero-art">
              <JmEditorialImage kind="editorial-styling"/>
            </div>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section className="jm-about__stats">
        <div className="jm-container">
          <div className="jm-about__stats-row">
            {stats.map((s, i) => (
              <div className="jm-about__stat" key={i}>
                <div className="jm-display jm-about__stat-num">{s.num}</div>
                <div className="jm-small">{lang === 'vi' ? s.vi : s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="jm-section">
        <div className="jm-container">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 12 }}>
            {lang === 'vi' ? 'Triết lý' : 'Philosophy'}
          </div>
          <h2 className="jm-h1" style={{ marginBottom: 56, maxWidth: 720 }}>
            {lang === 'vi' ? '"Sản phẩm cao cấp với mức giá không cao cấp"' : '"Premium product, accessible price"'}
          </h2>
          <div className="jm-about__values">
            {values.map((v, i) => (
              <div className="jm-about__value" key={i}>
                <i data-lucide={v.icon} className="jm-icon jm-icon-lg" style={{ color: 'var(--jm-cam-dat)' }}></i>
                <h3 className="jm-title" style={{ marginTop: 18 }}>{lang === 'vi' ? v.vi : v.en}</h3>
                <p className="jm-small" style={{ marginTop: 10 }}>{lang === 'vi' ? v.viDesc : v.enDesc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Workshop block */}
      <section className="jm-section jm-section-alt">
        <div className="jm-container">
          <div className="jm-editorial__inner">
            <div className="jm-editorial__art">
              <JmEditorialImage kind="about-studio"/>
            </div>
            <div>
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>
                {lang === 'vi' ? 'Chất liệu' : 'Materials'}
              </div>
              <h2 className="jm-h1" style={{ marginBottom: 24 }}>
                {lang === 'vi' ? 'Đẹp hôm nay, vẫn đẹp năm sau.' : 'Beautiful today, still beautiful next year.'}
              </h2>
              <p style={{ marginBottom: 20 }}>
                {lang === 'vi'
                  ? 'Lõi titanium không gỉ, không bị đen khi gặp mồ hôi hay nước. Lớp mạ vàng 18K hoặc bạch kim giữ màu khi đeo hằng ngày. Đá CZ cắt giác sáng và ngọc trai nuôi nước ngọt chọn lọc.'
                  : 'A titanium core that will not rust or tarnish with sweat or water. 18K gold or platinum plating that stays bright with daily wear. Bright-cut CZ and selected freshwater pearls.'}
              </p>
              <p style={{ color: 'var(--jm-muted)' }}>
                {lang === 'vi'
                  ? 'Thiết kế đa công dụng: một món có thể đeo nhiều cách, từ bàn làm việc đến bữa tiệc. Nhẫn, vòng, dây chuyền và bông tai cùng một ngôn ngữ thẩm mỹ để các nàng phối thành set.'
                  : 'Designed to be worn many ways, from desk to dinner. Rings, bracelets, necklaces and earrings share one design language, so they pair into sets.'}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="jm-section jm-section-alt">
        <div className="jm-container">
          <div className="jm-about__cta">
            <h2 className="jm-h1" style={{ maxWidth: 640 }}>
              {lang === 'vi'
                ? 'Hành trình mới của các nàng có thể bắt đầu hôm nay — bằng một dấu ấn nhỏ.'
                : 'Your new chapter can begin today — with one small mark.'}
            </h2>
            <button className="jm-btn jm-btn-primary" onClick={onGoShop}>{t['cta.explore']}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.JmAbout = JmAbout;