function Profile() {
  const { t } = useI18n();
  const items = [
    { key: 'company', sub: null },
    { key: 'founded', sub: null },
    { key: 'rep', sub: null },
    { key: 'hq', sub: t('profile.row.hq.sub') },
    { key: 'tel', sub: t('profile.row.tel.sub') },
    { key: 'domains', sub: null },
  ];

  return (
    <section id="profile" style={profStyles.section}>
      <div className="container">
        <div className="section-head reveal">
          <span className="num">{t('profile.num')}</span>
          <span className="line"></span>
          <span className="eyebrow">{t('profile.eyebrow')}</span>
        </div>

        <div style={profStyles.grid} className="split-grid">
          <div className="reveal">
            <h2 className="h-display" style={profStyles.title}>{t('profile.title')}</h2>
            <p style={profStyles.intro}>{t('profile.intro')}</p>
            <div style={profStyles.imgWrap}>
              <img src="assets/hero-2.jpg" alt="" style={profStyles.img} />
            </div>
          </div>

          <div style={profStyles.right}>
            <ul style={profStyles.list}>
              {items.map((it) => (
                <li key={it.key} style={profStyles.row} className="reveal profile-row">
                  <div style={profStyles.rowLabel}>
                    <span style={profStyles.rowJp}>{t(`profile.row.${it.key}.label`)}</span>
                  </div>
                  <div style={profStyles.rowVal}>
                    <span style={profStyles.rowMain}>{t(`profile.row.${it.key}.val`)}</span>
                    {it.sub && <span style={profStyles.rowSub}>{it.sub}</span>}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

const profStyles = {
  section: { paddingTop: 0, paddingBottom: 'var(--section-y)', position: 'relative' },
  grid: { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(32px, 6vw, 96px)', alignItems: 'flex-start' },
  title: { fontSize: 'clamp(28px, 3.4vw, 44px)', color: 'var(--washi)', marginBottom: 16 },
  intro: { fontSize: 14, lineHeight: 1.9, color: 'var(--washi-dim)', marginBottom: 32 },
  imgWrap: { aspectRatio: '4 / 3', overflow: 'hidden', position: 'relative' },
  img: { width: '100%', height: '100%', objectFit: 'cover' },
  right: { borderTop: '1px solid var(--hr)' },
  list: { listStyle: 'none' },
  row: { display: 'grid', gridTemplateColumns: '180px 1fr', padding: '24px 0', borderBottom: '1px solid var(--hr)', gap: 24, alignItems: 'baseline' },
  rowLabel: { display: 'flex', flexDirection: 'column', gap: 4 },
  rowJp: { fontFamily: 'var(--f-jp-serif)', fontSize: 14, color: 'var(--kin)', letterSpacing: '0.08em' },
  rowVal: { display: 'flex', flexDirection: 'column', gap: 4 },
  rowMain: { fontFamily: 'var(--f-jp-serif)', fontSize: 18, color: 'var(--washi)', fontWeight: 500 },
  rowSub: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--washi-dim)' },
};

window.Profile = Profile;