function Culture() {
  const { t } = useI18n();
  const cards = [
    { tag: 'F-CULT.01', key: 'c1', img: 'assets/hero-3.jpg' },
    { tag: 'F-CULT.02', key: 'c2', img: 'assets/hero-1.jpg' },
    { tag: 'F-CULT.03', key: 'c3', img: 'assets/hero-4.jpg' },
  ];
  const titleLines = t('cult.title');

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

        <div style={cultStyles.intro} className="reveal">
          <h2 className="h-display" style={cultStyles.title}>
            {titleLines[0]}<br />{titleLines[1]}
          </h2>
          <p style={cultStyles.titleEn}>{t('cult.titleSub')}</p>
          <p style={cultStyles.body}>{t('cult.body')}</p>
        </div>

        <div style={cultStyles.grid} className="cult-grid">
          {cards.map((c) => (
            <article key={c.tag} style={cultStyles.card} className="reveal">
              <div style={cultStyles.cardImgWrap} className="cult-card-img">
                <img src={c.img} alt="" style={cultStyles.cardImg} />
                <span style={cultStyles.cardTag}>{c.tag}</span>
              </div>
              <div>
                <h3 style={cultStyles.cardTitle}>{t(`cult.${c.key}.title`)}</h3>
                <p style={cultStyles.cardDesc}>{t(`cult.${c.key}.desc`)}</p>
              </div>
            </article>
          ))}
        </div>

        <CtaBlock />
      </div>
    </section>
  );
}

function CtaBlock() {
  const { t } = useI18n();
  return (
    <div style={ctaStyles.box} className="reveal cta-box">
      <div>
        <span className="eyebrow">{t('cta.eyebrow')}</span>
        <h3 className="h-display" style={ctaStyles.title}>{t('cta.title')}</h3>
        <p style={ctaStyles.titleEn}>{t('cta.titleSub')}</p>
      </div>
      <a href="contact.html" className="btn btn-shu" style={{ flexShrink: 0 }}>
        {t('cta.btn')} <span className="arrow"></span>
      </a>
    </div>
  );
}

const cultStyles = {
  section: { paddingTop: 'var(--section-y)', paddingBottom: 0, background: 'var(--xuan)' },
  intro: { maxWidth: 720, marginBottom: 64 },
  title: { fontSize: 'clamp(28px, 3.6vw, 48px)', color: 'var(--washi)', marginBottom: 12 },
  titleEn: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--kin)', marginBottom: 24 },
  body: { fontSize: 14, lineHeight: 1.9, color: 'var(--washi-dim)' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32 },
  card: { display: 'flex', flexDirection: 'column' },
  cardImgWrap: { aspectRatio: '4 / 5', overflow: 'hidden', position: 'relative', marginBottom: 20 },
  cardImg: { width: '100%', height: '100%', objectFit: 'cover' },
  cardTag: { position: 'absolute', top: 16, left: 16, fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.24em', background: 'rgba(14,11,8,0.7)', backdropFilter: 'blur(8px)', padding: '4px 10px', color: 'var(--kin)' },
  cardTitle: { fontFamily: 'var(--f-jp-serif)', fontSize: 22, fontWeight: 500, color: 'var(--washi)', marginBottom: 12 },
  cardDesc: { fontSize: 13, lineHeight: 1.85, color: 'var(--washi-dim)' },
};

const ctaStyles = {
  box: { marginTop: 120, padding: 'clamp(40px, 6vw, 72px)', background: 'var(--sumi)', border: '1px solid var(--hr)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 32, position: 'relative' },
  title: { fontSize: 'clamp(24px, 2.8vw, 36px)', color: 'var(--washi)', marginTop: 12, marginBottom: 8 },
  titleEn: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--kin)' },
};

window.Culture = Culture;
window.CtaBlock = CtaBlock;