function Business() {
  const { t } = useI18n();
  const [activeCategory, setActiveCategory] = React.useState('all');

  const categories = [
    { id: 'all', key: 'biz.cat.all' },
    { id: 'it', key: 'biz.cat.it' },
    { id: 'culture', key: 'biz.cat.culture' },
    { id: 'life', key: 'biz.cat.life' },
  ];

  const services = [
    { id: 'aitranspdf', cat: 'it', num: 'F.01', flagship: true, link: 'https://www.aitranspdf.com/' },
    { id: 'belindoc', cat: 'it', num: 'F.02', flagship: true, link: 'https://belindoc.com/' },
    { id: 'sys', cat: 'it', num: 'F.03' },
    { id: 'soft', cat: 'it', num: 'F.04' },
    { id: 'game', cat: 'it', num: 'F.05' },
    { id: 'ec', cat: 'it', num: 'F.06' },
    { id: 'antique', cat: 'culture', num: 'F.07' },
    { id: 'food', cat: 'life', num: 'F.08' },
  ];

  const filtered = activeCategory === 'all' ? services : services.filter(s => s.cat === activeCategory);
  const titleLines = t('biz.title');

  return (
    <section id="business" style={bizStyles.section}>
      <div style={bizStyles.bgText} className="biz-bg-text" aria-hidden="true">BUSINESS</div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head reveal">
          <span className="num">{t('biz.num')}</span>
          <span className="line"></span>
          <span className="eyebrow">{t('biz.eyebrow')}</span>
        </div>

        <div style={bizStyles.head}>
          <div className="reveal">
            <h2 className="h-display" style={bizStyles.title}>
              {titleLines[0]}<br />{titleLines[1]}
            </h2>
            <p style={bizStyles.titleEn}>{t('biz.titleSub')}</p>
          </div>
          <div style={bizStyles.tabs} className="reveal reveal-delay-1 biz-tabs">
            {categories.map(c => (
              <button key={c.id} onClick={() => setActiveCategory(c.id)}
                style={{
                  ...bizStyles.tab,
                  color: activeCategory === c.id ? 'var(--kin)' : 'var(--washi-dim)',
                  borderColor: activeCategory === c.id ? 'var(--kin)' : 'var(--hr)',
                }}>
                <span style={bizStyles.tabJp}>{t(c.key)}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={bizStyles.grid} className="biz-grid">
          {filtered.map((s, i) => (
            <ServiceCard key={s.id} {...s} t={t} index={i} />
          ))}
        </div>

        {(activeCategory === 'all' || activeCategory === 'culture') && (
          <div style={bizStyles.gallery} className="reveal">
            <div style={bizStyles.galleryHead}>
              <div>
                <span className="eyebrow">{t('biz.gallery.eyebrow')}</span>
                <h3 className="h-display" style={{ fontSize: 24, marginTop: 8, color: 'var(--washi)' }}>
                  {t('biz.gallery.title')}
                </h3>
              </div>
              <span style={bizStyles.galleryMeta}>L.025 · L.041 · L.063 · L.078</span>
            </div>
            <div style={bizStyles.galleryGrid} className="biz-gallery-grid">
              {[1, 2, 3, 4].map(n => (
                <div key={n} style={bizStyles.galleryItem}>
                  <img src={`assets/hero-${n}.jpg`} alt="" style={bizStyles.galleryImg} />
                  <div style={bizStyles.galleryOverlay}>
                    <span style={bizStyles.galleryTag}>L.0{n * 17}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function ServiceCard({ id, num, link, flagship, t }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={link || '#'}
      target={link ? '_blank' : undefined}
      rel={link ? 'noopener noreferrer' : undefined}
      style={{
        ...bizStyles.card,
        background: hover ? 'var(--sumi)' : 'transparent',
        borderColor: hover ? 'var(--kin)' : 'var(--hr)',
        cursor: link ? 'pointer' : 'default',
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="reveal">
      {flagship && (<span style={bizStyles.flagship}>{t('biz.flagship')}</span>)}
      <div style={bizStyles.cardNum}>{num}</div>
      <div style={bizStyles.cardBody}>
        <h3 style={bizStyles.cardTitle}>{t(`biz.s.${id}.title`)}</h3>
        <p style={bizStyles.cardSub}>{t(`biz.s.${id}.subtitle`)}</p>
        <div style={bizStyles.cardDivider}></div>
        <p style={bizStyles.cardDesc}>{t(`biz.s.${id}.desc`)}</p>
      </div>
      {link && (
        <div style={{ ...bizStyles.cardArrow, transform: hover ? 'translateX(8px)' : 'translateX(0)' }}>
          <span>{t('biz.view')}</span>
          <span style={bizStyles.arrowLine}></span>
        </div>
      )}
    </a>
  );
}

const bizStyles = {
  section: { paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)', background: 'var(--xuan)', position: 'relative', overflow: 'hidden' },
  bgText: { position: 'absolute', top: '8%', right: '-3%', fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(120px, 22vw, 320px)', color: 'var(--sumi-2)', opacity: 0.4, pointerEvents: 'none', lineHeight: 0.8, letterSpacing: '-0.02em' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32, marginBottom: 64 },
  title: { fontSize: 'clamp(28px, 3.6vw, 48px)', color: 'var(--washi)', marginBottom: 8 },
  titleEn: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--kin)' },
  tabs: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  tab: { background: 'transparent', border: '1px solid var(--hr)', padding: '12px 20px', cursor: 'pointer', transition: 'all 0.3s' },
  tabJp: { fontFamily: 'var(--f-jp-serif)', fontSize: 13, letterSpacing: '0.06em' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 1, background: 'var(--hr)', border: '1px solid var(--hr)' },
  card: { position: 'relative', padding: '32px 28px 28px', minHeight: 280, display: 'flex', flexDirection: 'column', transition: 'all 0.4s cubic-bezier(0.22, 1, 0.36, 1)', border: '1px solid transparent', color: 'inherit' },
  flagship: { position: 'absolute', top: 16, right: 20, fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.24em', color: 'var(--shu)', border: '1px solid var(--shu)', padding: '2px 8px', textTransform: 'uppercase' },
  cardNum: { fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--kin)', letterSpacing: '0.2em', marginBottom: 24 },
  cardBody: { flex: 1 },
  cardTitle: { fontFamily: 'var(--f-jp-serif)', fontSize: 22, fontWeight: 500, color: 'var(--washi)', marginBottom: 6, letterSpacing: '0.02em' },
  cardSub: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--kin)', marginBottom: 16 },
  cardDivider: { width: 24, height: 1, background: 'var(--kin)', opacity: 0.6, marginBottom: 16 },
  cardDesc: { fontSize: 13, lineHeight: 1.8, color: 'var(--washi-dim)' },
  cardArrow: { marginTop: 24, display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.24em', color: 'var(--kin)', transition: 'transform 0.4s', textTransform: 'uppercase' },
  arrowLine: { width: 24, height: 1, background: 'var(--kin)', position: 'relative' },
  gallery: { marginTop: 80, paddingTop: 48, borderTop: '1px solid var(--hr)' },
  galleryHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 },
  galleryMeta: { fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.24em', color: 'var(--nibi)' },
  galleryGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 },
  galleryItem: { position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden', cursor: 'pointer' },
  galleryImg: { width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 1.2s ease' },
  galleryOverlay: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(14,11,8,0.85) 100%)', display: 'flex', alignItems: 'flex-end', padding: 16 },
  galleryTag: { fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--kin)' },
};

window.Business = Business;