/* global React */
/* Rooted fork of design-system/project/ui_kits/hwanghee_com/HeroAbout.jsx.
   Only the mascot image src is rewritten to a path that resolves from the
   site root (index.html sits at /). All other markup, copy, and styling
   match the canonical handoff component exactly. */

window.HeroAbout = function HeroAbout({ cards }) {
  return (
    <section id="top" style={{ paddingTop: 64, paddingBottom: 48 }}>
      <div className="meta" style={{ color: 'var(--ink-3)' }}>About · 2026-05-27 갱신</div>
      <h1 style={{ marginTop: 12, marginBottom: 18 }}>빅이사</h1>
      <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--ink)', maxWidth: 620, margin: 0 }}>
        백엔드 개발자. 도구도 만들고 / 그 도구로 글도 쓰고 / 주식봇·게코 사육장도 굴리는 다면체 사이드프로젝트 광.
      </p>

      <hr style={{ margin: '48px 0', border: 0, borderTop: '1px solid var(--rule)' }} />

      <h3 style={{ marginBottom: 12 }}>이 사이트가 뭐냐면</h3>
      <p style={{ fontSize: 16, lineHeight: 1.7, marginTop: 0 }}>
        빅이사가 평소 만들고 굴리는 것들의 작업실 투어입니다. 아래 카드는 시간이 지나면서 슬쩍슬쩍 갱신됩니다.
      </p>
      <p style={{ fontSize: 16, lineHeight: 1.7, marginTop: 12, color: 'var(--ink-2)' }}>
        한 잔이면 다음 달 AI API 청구서 한 줄, 두 잔이면 호빛이 다음 주 CGD(귀뚜라미는 별도). 어디까지나 농담입니다 — 진짜로 도움이 되는 건 카드 한 장 끝까지 읽어주시는 일입니다.
      </p>

      <div style={{
        marginTop: 32, padding: 20,
        background: 'var(--accent-soft)',
        border: '1px solid var(--accent)',
        borderRadius: 8,
      }}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <img src="design-system/project/assets/hobit.jpeg" alt="호빛이"
             style={{ width: 84, height: 84, borderRadius: 6, objectFit: 'cover', border: '1px solid var(--accent)', flexShrink: 0 }} />
        <div>
          <div className="meta" style={{ color: 'var(--accent-deep)', marginBottom: 6 }}>마스코트</div>
          <div style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink)' }}>
            이 사이트의 마스코트는 크레스티드 게코 <strong>호빛이</strong>(2024-12 출생, 현재 약 16개월). 카드 5번 "사육장 자동화"의 첫 사용자입니다. 옆 비바리움의 <strong>용용이</strong>(오키나와 소드테일 뉴트)도 종종 등장합니다.
          </div>
        </div>
      </div>
      </div>

      <hr style={{ margin: '48px 0', border: 0, borderTop: '1px solid var(--rule)' }} />

      <h3 style={{ marginBottom: 16 }}>지금 굴리고 있는 것들</h3>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {cards.map(c => (
          <li key={c.slug} style={{ fontSize: 15, lineHeight: 1.6 }}>
            <a href={`#card-${c.slug}`} style={{ textDecorationColor: 'var(--rule)' }}>
              {c.headline}
            </a>
            <span style={{ color: 'var(--ink-2)' }}> — {c.summary}</span>
          </li>
        ))}
      </ul>

      <hr style={{ margin: '48px 0', border: 0, borderTop: '1px solid var(--rule)' }} />

      <h3 style={{ marginBottom: 12 }}>그리고</h3>
      <p style={{ fontSize: 16, lineHeight: 1.7 }}>
        버킷리스트에 "소설쓰기"가 있었습니다. <a href="#card-piuroforge">piuroforge</a>는 그 항목을 핑계 삼아 시작된 도구이고, <a href="#card-setgeltei-temur">setgeltei-temur</a>는 그 도구로 쓴 첫 결과물입니다.
      </p>
    </section>
  );
};