/* API Archive + Now feed + Footer */

const APIS = [
  { glyph: "☕",    name: "Java",         kind: "lang · primary" },
  { glyph: "∿",    name: "Spring Boot",  kind: "framework · api" },
  { glyph: "⚛",    name: "React",        kind: "framework · ui" },
  { glyph: "∎",    name: "MyBatis",      kind: "orm · query" },
  { glyph: "◎",    name: "MySQL",        kind: "db · primary" },
  { glyph: "▦",    name: "JSP",          kind: "view · legacy" },
  { glyph: "◐",    name: "OpenAI API",   kind: "ai · llm" },
  { glyph: "{ }",  name: "JavaScript",   kind: "lang · frontend" },
  { glyph: "▶_",   name: "Git",          kind: "vcs" },
  { glyph: "◆",    name: "Figma",        kind: "design · ui" },
  { glyph: "≋",    name: "Notion",       kind: "협업 · pm" },
  { glyph: "☸",    name: "PM / PL",      kind: "planning · lead" },
];

function ApiArchive() {
  return (
    <section data-screen-label="03 API Archive">
      <div className="section-head">
        <span className="section-head-num">§03</span>
        <h2 className="section-head-kr">API Archive.</h2>
        <span className="section-head-en">/stack — which -a</span>
      </div>
      <div className="api-grid">
        {APIS.map((a, i) => (
          <div key={i} className="api-card">
            <div className="api-card-glyph">{a.glyph}</div>
            <div className="api-card-name">{a.name}</div>
            <div className="api-card-kind">{a.kind}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

const NOW_LINES = [
  { t: "09:10", tag: "COMMIT",    tagCls: "",    msg: "feat(bems): 설비 상태 실시간 폴링 구조 개선", meta: "energy-platform" },
  { t: "10:34", tag: "REVIEW",    tagCls: "am",  msg: "에너지 거래 API 응답 스펙 검토 · 클라이언트 협의", meta: "prosumer" },
  { t: "11:55", tag: "SHIPPED",   tagCls: "",    msg: "HEMS 모니터링 v1.3 배포. 가구별 상태 조회 성능 개선", meta: "work" },
  { t: "14:00", tag: "MEETING",   tagCls: "mag", msg: "스마트팜 플랫폼 요구사항 분석 · PM 리딩", meta: "planning" },
  { t: "16:20", tag: "LEARNING",  tagCls: "am",  msg: "OpenAI API RAG 파이프라인 설계 실험 중", meta: "ai-side" },
  { t: "19:30", tag: "WRITING",   tagCls: "mag", msg: "블로그 \"버그 잡는 개발자\" AI 활용 홈페이지 제작 후기 작성", meta: "naver-blog" },
  { t: "22:00", tag: "COMMIT",    tagCls: "",    msg: "COMPARE AI 모델 랭킹 벤치마크 업데이트", meta: "side" },
];

function Now() {
  return (
    <section data-screen-label="04 Now">
      <div className="section-head">
        <span className="section-head-num">§04</span>
        <h2 className="section-head-kr">Now.</h2>
        <span className="section-head-en">/now — tail -f activity.log</span>
      </div>
      <div className="now-feed">
        {NOW_LINES.map((l, i) => (
          <div key={i} className="now-line">
            <span className="time">{l.t}</span>
            <span className={"tag " + l.tagCls}>▸ {l.tag}</span>
            <span className="msg">{l.msg}</span>
            <span className="meta">[{l.meta}]</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer>
      <div>
        <div className="sig">$ goodbye_visitor --with-love</div>
        <div style={{ marginTop: 8, color: "var(--ink-ghost)" }}>
          © 2026 정경철 · Fullstack Developer · object-c.shop
        </div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div><a href="mailto:object0108@gmail.com">object0108@gmail.com</a></div>
        <div style={{ marginTop: 4 }}><a href="tel:01097168816">010-9716-8816</a></div>
        <div style={{ marginTop: 4, color: "var(--ink-ghost)" }}>
          <a href="https://blog.naver.com/object0108" target="_blank" rel="noreferrer">blog.naver.com/object0108 ↗</a>
        </div>
      </div>
    </footer>
  );
}

window.ApiArchive = ApiArchive;
window.Now = Now;
window.Foot = Foot;