// src/about.jsx — ABOUT: intro + vertical timeline + values

function About() {
  const { timeline, values } = window.DATA;
  const [openIdx, setOpenIdx] = React.useState(2); // default open one node so it's not all collapsed
  const [openVal, setOpenVal] = React.useState(null);

  return (
    <section id="about" className="sec">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="sec-tag">02 / About</div>
              <h2>不止是<em style={{ fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--display)" }}> "做过什么"</em>，<br />更是"经历过什么、思考过什么"。</h2>
            </div>
            <div className="sec-meta">阅读时间 8 分钟</div>
          </div>
        </Reveal>

        <Reveal>
          <div className="about-profile">
            <div className="about-aside">
              <span>AI 商业化</span>
              <span>实战顾问</span>
              <span>项目复盘者</span>
            </div>
            <div className="about-copy">
              <p>
                我是阿铭。在 AI 泡沫和真实业务之间，我更关心一件事：
                <em>它能不能变成收入、效率和可复制的动作。</em>
              </p>
              <p>
                这页主页不是履历陈列，而是我对 AI 商业化的判断、方法和项目复盘。
                从技术识别到商业咨询，我一直在把“听起来很美”的方案，推到“账上有数”的现场。
              </p>
              <p className="about-note">
                如果你也在判断 AI 到底该怎么落地，欢迎继续往下读。
              </p>
            </div>
            <div className="about-facts">
              <div><b>8 年</b><span>视觉识别与技术背景</span></div>
              <div><b>5 年</b><span>商业咨询与一线项目</span></div>
              <div><b>100+</b><span>AI 项目推进中</span></div>
            </div>
          </div>
        </Reveal>

        <div className="tl-wrap">
          <div className="tl-head">
            <h3>八年 · 五个节点</h3>
            <span className="hint">点击任一节点展开</span>
          </div>

          <Reveal>
            <div className="tl-rail">
              <div className="tl-track">
                {timeline.map((t, i) =>
                <div className={`tl-node${openIdx === i ? " open" : ""}`} key={i}
                onClick={() => setOpenIdx(openIdx === i ? null : i)}>
                    <div className="year">{t.year}</div>
                    <div className="stage">{t.stage}</div>
                    <div className="summary">{t.summary}</div>
                    <div className="tl-node-detail">
                      <div className="row">
                        <div className="lbl">学到的事</div>
                        {t.learned}
                      </div>
                      <div className="row">
                        <div className="lbl">当时 vs 现在的判断</div>
                        <div style={{ marginTop: 6 }}>
                          <span className="then">当时</span>{t.then}
                        </div>
                        <div style={{ marginTop: 8 }}>
                          <span className="now-tag">现在</span>{t.now}
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </Reveal>
        </div>

        <div className="values">
          <Reveal>
            <div className="tl-head" style={{ marginBottom: 20 }}>
              <h3>我的七条信条</h3>
              <span className="hint">点击任一条展开</span>
            </div>
          </Reveal>
          <Reveal>
            <div className="values-grid">
              {values.map((v, i) =>
              <div className={`value-row${openVal === i ? " open" : ""}`} key={i}
              onClick={() => setOpenVal(openVal === i ? null : i)}>
                  <div className="idx">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="ttl">{v.ttl}</div>
                    <div className="exp">{v.exp}</div>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

window.About = About;