// About page — recreated from reference
const { useState: useStateAb } = React;

function AboutContactBtns() {
  const [copied, setCopied] = useStateAb(false);
  function copyMail() {
    try { navigator.clipboard.writeText("yanrongz52@gmail.com"); } catch (e) {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  }
  const base = {
    display: "inline-flex", alignItems: "center", gap: 11, padding: "14px 22px", borderRadius: 13,
    fontSize: 15.5, fontWeight: 700, cursor: "pointer", transition: "background .16s ease, border-color .16s ease",
  };
  return (
    <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
      <a href="https://www.linkedin.com" target="_blank" rel="noreferrer"
        style={{ ...base, background: "var(--panel)", border: "1px solid var(--line)", color: "var(--text)" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.08)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "var(--panel)"}>
        请通过领英联系我。
        <span style={{ color: "var(--green)", display: "inline-flex" }}>{I.linkedin()}</span>
      </a>
      <button onClick={copyMail}
        style={{ ...base, background: "var(--panel)", border: "1px solid var(--line)", color: copied ? "var(--green)" : "var(--text)" }}
        onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.08)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "var(--panel)"}>
        {copied ? "已复制邮箱" : "复制邮件"}
        <span style={{ color: copied ? "var(--green)" : "var(--muted-2)", display: "inline-flex" }}>{copied ? I.check() : I.copy()}</span>
      </button>
    </div>);

}

function About() {
  const pStyle = { fontSize: 17, lineHeight: 1.92, color: "var(--muted)", textWrap: "pretty" };
  const leadStyle = { fontSize: "clamp(20px,2vw,26px)", lineHeight: 1.6, color: "var(--text)", fontWeight: 500, textWrap: "pretty" };
  return (
    <div style={{ paddingTop: 64, paddingBottom: 30, maxWidth: 900, margin: "0 auto" }}>
      <Reveal>
        <h1 className="display" style={{ fontSize: "clamp(34px,4.2vw,54px)", lineHeight: 1.12 }}>
          让 AI 真正落到业务里
        </h1>
      </Reveal>
      <Reveal delay={80}>
        <p style={{ ...leadStyle, marginTop: 26, maxWidth: 820 }}>
          我在做的，是把 AI 真正变成能用在业务上的东西。不是停在试用和 demo，而是从一个真实的业务问题出发，判断 AI 能在哪儿帮上忙、帮到什么程度，再把它做成能跑、能进决策的产品。
        </p>
      </Reveal>

      <Reveal delay={150}>
        <div style={{ marginTop: 38, display: "flex", flexDirection: "column", gap: 22 }}>
          <p style={pStyle}>
            这段时间我一个人做了几件还算完整的事。SignalRadar 是一套产品机会情报系统，我自己设计并实现了整条流水线：从多平台采集海外用户声音，到清洗、语义聚类、机会评分，再到每天自动生成日报，背后是一套大模型加数据管线的工作流。VoxLens 是我自建的用户调研引擎，用它做过运动相机、扫地机器人、智能家居这些品类的竞品和出海分析，单个项目处理过四五万条用户声音，最后收敛成能直接指导决策的攻防地图和产品策略。也用它从一万多条声音里，把一个被错杀的社交赛道重新定义成一款产品，从定位、用户场景一路推到具体的 AI 功能和指标。
          </p>
          <p style={pStyle}>
            做这些事，我有几个一直在用的习惯。先想清楚要回答的业务问题，再决定采什么数据、搭什么流程，而不是先动手再找故事。让 AI 服务判断，而不是替我下判断。它很擅长把不完整的信息写得像真的，所以我会给每个结论划证据边界和质量门，过不了的写得再顺也不用。也尽量把主观判断变成能被复核的指标，把拍脑袋选打法，变成用数据选战场。
          </p>
          <p style={pStyle}>
            我是学动画转过来的，对新出的 AI 工具一直有上手就想试的习惯，也因此把编程、大模型、生成式视觉这几条线都摸了一遍。这个网站是我用 Claude Code 自己搭的，也用 AI 一个人做完过一部动画短片。动画和摄影留下的那点审美，一直在帮我判断一个产出到底好不好。
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ marginTop: 40, borderRadius: 20, overflow: "hidden", aspectRatio: "16 / 11", filter: "grayscale(1)" }}>
          <Slot id="about-portrait" placeholder="拖入个人黑白照片" style={{ background: "#0d0d10" }} />
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ marginTop: 40 }}>
          <p style={{ ...leadStyle, maxWidth: 820 }}>
            现在想找一段能深度参与的机会，把一个想法从想清楚做到真正落地，而不只是按部就班地执行。
          </p>
        </div>
      </Reveal>

      {/* contact CTA card (same as home) instead of the stamps footer */}
      <div style={{ marginTop: 30 }}><CTA /></div>
    </div>);

}

Object.assign(window, { About });
