function About() {
  const { t } = useI18n();
  const titleLines = t('about.title');
  return (
    <section id="about" style={aboutStyles.section}>
      <div className="container">
        <div className="section-head reveal">
          <span className="num">{t('about.num')}</span>
          <span className="line"></span>
          <span className="eyebrow">{t('about.eyebrow')}</span>
        </div>

        <div style={aboutStyles.grid} className="split-grid">
          <div style={aboutStyles.imgWrap} className="reveal about-img-wrap">
            <img src="assets/hero-1.jpg" alt="" style={aboutStyles.img} />
            <div style={aboutStyles.imgBorder}></div>
            <div style={aboutStyles.imgCaption}>
              <span style={{ color: 'var(--kin)' }}>—</span> {t('about.caption')}
            </div>
          </div>

          <div>
            <h2 className="h-display reveal" style={aboutStyles.title}>
              {titleLines[0]}<br />
              {titleLines[1]}
            </h2>
            <p className="reveal reveal-delay-1" style={aboutStyles.titleEn}>
              {t('about.titleSub')}
            </p>
            <div style={aboutStyles.divider} className="reveal reveal-delay-1"></div>

            <div style={aboutStyles.body}>
              <p className="reveal reveal-delay-2">{t('about.body1')}</p>
              <p className="reveal reveal-delay-3">{t('about.body2')}</p>
            </div>

            <div style={aboutStyles.stats} className="reveal reveal-delay-3">
              <div style={aboutStyles.stat}>
                <div style={aboutStyles.statNum}>{t('about.stat.foundedNum')}</div>
                <div style={aboutStyles.statLabel}>{t('about.stat.foundedLabel')}</div>
              </div>
              <div style={aboutStyles.statSep}></div>
              <div style={aboutStyles.stat}>
                <div style={aboutStyles.statNum}>{t('about.stat.domainsNum')}</div>
                <div style={aboutStyles.statLabel}>{t('about.stat.domainsLabel')}</div>
              </div>
              <div style={aboutStyles.statSep}></div>
              <div style={aboutStyles.stat}>
                <div style={aboutStyles.statNum}>{t('about.stat.hqNum')}</div>
                <div style={aboutStyles.statLabel}>{t('about.stat.hqLabel')}</div>
              </div>
            </div>

            <a href="contact.html" className="btn" style={{ marginTop: 40 }}>
              {t('about.cta')} <span className="arrow"></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

const aboutStyles = {
  section: { paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)', position: 'relative' },
  grid: { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(32px, 6vw, 96px)', alignItems: 'center' },
  imgWrap: { position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden' },
  img: { width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.95)' },
  imgBorder: { position: 'absolute', inset: 0, border: '1px solid var(--kin)', opacity: 0.4, pointerEvents: 'none', transform: 'translate(16px, 16px)' },
  imgCaption: { position: 'absolute', left: 0, bottom: -28, fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.24em', color: 'var(--washi-dim)', textTransform: 'uppercase' },
  title: { fontSize: 'clamp(28px, 3.6vw, 48px)', color: 'var(--washi)', marginBottom: 12 },
  titleEn: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 'clamp(16px, 1.6vw, 20px)', color: 'var(--kin)', marginBottom: 32 },
  divider: { width: 60, height: 1, background: 'var(--kin)', opacity: 0.6, marginBottom: 32 },
  body: { display: 'flex', flexDirection: 'column', gap: 20, fontSize: 15, lineHeight: 1.9, color: 'var(--washi-dim)', marginBottom: 48 },
  stats: { display: 'flex', alignItems: 'center', gap: 28, paddingTop: 32, borderTop: '1px solid var(--hr)' },
  stat: { display: 'flex', flexDirection: 'column', gap: 6 },
  statNum: { fontFamily: 'var(--f-jp-serif)', fontSize: 'clamp(24px, 2.4vw, 32px)', color: 'var(--kin)', fontWeight: 500 },
  statLabel: { fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--washi-dim)', textTransform: 'uppercase' },
  statSep: { width: 1, height: 32, background: 'var(--hr)' },
};

window.About = About;