// About — 会社概要 + 代表プロフィール

function About() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const rootStyle = isMobile ? { ...aboutStyles.root, padding: '0 20px 80px' } : aboutStyles.root;
  const sectionLabelWrapStyle = isMobile ? { ...aboutStyles.sectionLabelWrap, margin: '0 auto 48px' } : aboutStyles.sectionLabelWrap;
  const innerStyle = isMobile
    ? { ...aboutStyles.inner, gridTemplateColumns: '1fr', gap: 48 }
    : aboutStyles.inner;
  const profileLedeStyle = isMobile
    ? { ...aboutStyles.profileLede, whiteSpace: 'normal', fontSize: 14, lineHeight: 1.85, margin: '4px 0 20px' }
    : aboutStyles.profileLede;

  return (
    <section id="about" style={rootStyle}>
      {/* Section label on divider */}
      <div style={sectionLabelWrapStyle}>
        <span style={aboutStyles.sectionLabel}>会社概要</span>
      </div>

      <div style={innerStyle}>
        {/* Company facts — 左 */}
        <div style={aboutStyles.company}>
          <dl style={aboutStyles.facts}>
            <FactRow k="社名"   v="Proteinus" isMobile={isMobile} />
            <FactRow k="設立"   v="2022年" isMobile={isMobile} />
            <FactRow k="所在地" v="神奈川県" isMobile={isMobile} />
            <FactRow k="事業"   v={<>AI ネイティブな受託開発<br/>ソフトウェアエンジニアリング全般</>} isMobile={isMobile} />
            <FactRow k="代表"   v="吉松 志鶴麻" isMobile={isMobile} />
          </dl>
        </div>

        {/* Profile — 右 */}
        <div style={aboutStyles.profile}>
          <div style={aboutStyles.profileLabel}>代表プロフィール</div>

          <p style={profileLedeStyle}>
            大学院中退後、農家、牧場、自衛隊、教員などを経て、ソフトウェアエンジニアの道へ。
          </p>

          <ol style={aboutStyles.timeline}>
            <TimelineItem year="2014"         title="大学院中退"   body={<>糖鎖工学の研究してました。<br/>飽きました。</>} isMobile={isMobile} />
            <TimelineItem year="2014"         title="農家 / 牧場"  body={<>奨学金返済してました。<br/>肉体労働って素晴らしいですね。</>} isMobile={isMobile} />
            <TimelineItem year="2014–2016"  title="陸上自衛隊"     body={<>人生で一度は軍隊へ。<br/>楽しかったです。</>} isMobile={isMobile} />
            <TimelineItem year="2016–2020"  title="教員"           body="除隊するのに最高の理由でした。" isMobile={isMobile} />
            <TimelineItem year="2022"         title="Proteinus 創業"  body={<>小さく始めて高品質を保つ。<br/>道中出会った最高の仲間と開発者集団 Proteinus を立ち上げました。</>} isMobile={isMobile} />
            <TimelineItem year="2023–現在"   title="サイバーエージェント" body={<>システム開発に従事。<br/>永遠に修行してます。</>} last isMobile={isMobile} />
          </ol>
        </div>
      </div>
    </section>
  );
}

function FactRow({ k, v, isMobile }) {
  const rowStyle = isMobile
    ? { ...aboutStyles.factRow, gridTemplateColumns: '72px 1fr', gap: 14, padding: '14px 0' }
    : aboutStyles.factRow;
  const vStyle = isMobile ? { ...aboutStyles.factV, fontSize: 14, lineHeight: 1.65 } : aboutStyles.factV;
  return (
    <div style={rowStyle}>
      <dt style={aboutStyles.factK}>{k}</dt>
      <dd style={vStyle}>{v}</dd>
    </div>
  );
}

function TimelineItem({ year, title, body, last, isMobile }) {
  const itemStyle = {
    ...aboutStyles.tlItem,
    ...(last ? {} : aboutStyles.tlItemBorder),
    ...(isMobile ? { gridTemplateColumns: '80px 1fr', gap: 16, padding: '14px 0' } : {}),
  };
  const titleStyle = isMobile ? { ...aboutStyles.tlTitle, fontSize: 15 } : aboutStyles.tlTitle;
  const textStyle = isMobile ? { ...aboutStyles.tlText, fontSize: 13, lineHeight: 1.8 } : aboutStyles.tlText;
  return (
    <li style={itemStyle}>
      <div style={aboutStyles.tlYear}>{year}</div>
      <div style={aboutStyles.tlBody}>
        <div style={titleStyle}>{title}</div>
        <div style={textStyle}>{body}</div>
      </div>
    </li>
  );
}

const aboutStyles = {
  root: {
    padding: '0 44px 140px',
    background: 'var(--paper)',
    color: 'var(--ink)',
    fontFamily: 'var(--sans)',
  },

  sectionLabelWrap: {
    maxWidth: 1100, margin: '0 auto 72px',
    position: 'relative',
    height: 1,
    background: 'var(--ink-15)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sectionLabel: {
    background: 'var(--paper)',
    padding: '0 24px',
    transform: 'translateY(-0.5px)',
    fontFamily: 'var(--serif-jp)',
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: '0.5em',
    color: 'var(--ink-75)',
    textIndent: '0.5em',
  },

  inner: {
    maxWidth: 1100, margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '0.9fr 1.3fr',
    gap: 80,
    alignItems: 'start',
  },

  // Company facts
  company: { display: 'flex', flexDirection: 'column', gap: 0 },
  facts: { margin: 0, display: 'flex', flexDirection: 'column', gap: 0 },
  factRow: {
    display: 'grid',
    gridTemplateColumns: '96px 1fr',
    gap: 20,
    padding: '18px 0',
    borderBottom: '1px solid var(--ink-12)',
    alignItems: 'baseline',
  },
  factK: {
    fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase',
    color: 'var(--ink-55)',
    margin: 0,
    fontFamily: 'var(--sans)',
  },
  factV: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 16, lineHeight: 1.7,
    color: 'var(--ink)',
    margin: 0,
  },

  // Profile
  profile: { display: 'flex', flexDirection: 'column', gap: 18 },
  profileLabel: {
    fontSize: 12, letterSpacing: 2.4, textTransform: 'uppercase',
    color: 'var(--ink-55)',
    fontFamily: 'var(--sans)',
  },
  profileName: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 'clamp(28px, 3vw, 40px)',
    fontWeight: 500,
    lineHeight: 1.3,
    margin: '0 0 4px',
    letterSpacing: '-0.005em',
    display: 'flex', alignItems: 'baseline', gap: 20, flexWrap: 'wrap',
  },
  profileNameRomaji: {
    fontFamily: '"Newsreader", serif',
    fontStyle: 'italic',
    fontSize: 18,
    fontWeight: 400,
    color: 'var(--ink-55)',
    letterSpacing: 0.2,
  },
  profileLede: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 15, lineHeight: 1.8,
    color: 'var(--ink-75)',
    margin: '4px 0 28px',
    maxWidth: 'none',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },

  // Timeline
  timeline: {
    listStyle: 'none',
    margin: 0, padding: 0,
    display: 'flex', flexDirection: 'column',
  },
  tlItem: {
    display: 'grid',
    gridTemplateColumns: '96px 1fr',
    gap: 24,
    padding: '18px 0',
  },
  tlItemBorder: { borderBottom: '1px solid var(--ink-12)' },
  tlYear: {
    fontFamily: 'var(--mono)',
    fontSize: 12,
    color: 'var(--ink-55)',
    letterSpacing: 0.4,
    paddingTop: 4,
    whiteSpace: 'nowrap',
  },
  tlBody: { display: 'flex', flexDirection: 'column', gap: 4 },
  tlTitle: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 16, fontWeight: 500,
    color: 'var(--ink)',
    letterSpacing: 0.2,
  },
  tlText: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 14, lineHeight: 1.85,
    color: 'var(--ink-70)',
  },
};

window.About = About;