// About.jsx — Delvecore Website UI Kit (responsive)
window.About = function About() {
  const mobile = useIsMobile();
  return (
    <section id="about" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
      <SectionHeader num="07" title="About" ja="について" />
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '280px 1fr 1fr',
        gap: mobile ? 40 : 80,
        alignItems: 'start',
        marginTop: 80,
      }}>
        <div style={{ maxWidth: mobile ? 160 : '100%' }}>
          <img src="assets/avatar.png" alt="Delvecore" style={{ width: '100%', display: 'block', filter: 'grayscale(100%)', mixBlendMode: 'multiply' }} />
        </div>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: mobile ? 'clamp(24px,6vw,36px)' : 'clamp(28px,3vw,44px)', fontWeight: 300, lineHeight: 1.6, letterSpacing: '0.02em' }}>
          課題の本質を<br />深く掘り下げ、<br />
          <em style={{ fontStyle: 'italic', color: '#888884' }}>ITで解決する。</em>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <p style={{ fontSize: 14, lineHeight: 1.9, color: '#888884' }}>Delvecoreは、メーカー勤務のエンジニアが運営するITサービスブランドです。大企業でも制作会社でもない、個人だからこそできる丁寧さと速さで、中小企業・小規模事業者のデジタル課題に向き合います。</p>
          <p style={{ fontSize: 14, lineHeight: 1.9, color: '#888884' }}>サイトを作るだけでなく、「作った後にどう使うか」「業務のどこをITで楽にできるか」まで一緒に考えます。</p>
          <dl style={{ borderLeft: '1px solid #E0DFD8', paddingLeft: 24 }}>
            <dt style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 400, marginBottom: 4 }}>Delve</dt>
            <dd style={{ fontSize: 12, color: '#888884', letterSpacing: '0.05em', marginBottom: 20 }}>深く掘り下げる — 表面ではなく、本質へ。</dd>
            <dt style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 400, marginBottom: 4 }}>Core</dt>
            <dd style={{ fontSize: 12, color: '#888884', letterSpacing: '0.05em' }}>核心・本質 — 課題の中心に届く解決を。</dd>
          </dl>
        </div>
      </div>
    </section>
  );
};