/* global React, RESUME, tr, useLang, Icon, Crystal */
const { useState: useStateS, useEffect: useEffectS } = React;

// ============= HERO =============
function Hero() {
  const { lang } = useLang();
  const H = RESUME.hero;
  const M = RESUME.meta;
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot" />
              <span className="eyebrow">{lang === 'zh' ? '产品经理 · AI 方向' : 'Product Manager · AI'}</span>
            </div>
            <h1 className="hero-title">
              <span className="axiom-en"><em>Nyota</em></span>
              <span className="axiom-zh-name">佳树</span>
            </h1>
            <p className="hero-pitch">{tr(H.pitch, lang)}</p>
            <div className="hero-cta">
              <a className="link-btn" href={`https://${H.link}`} target="_blank" rel="noreferrer">
                <span>{H.link}</span><Icon.Arrow />
              </a>
              <a className="link-btn ghost" href="#axiom"><span>{lang === 'zh' ? '查看产品决策' : 'See decisions'}</span><Icon.Arrow /></a>
            </div>
          </div>
          <Crystal />
        </div>
        <div className="hero-stats">
          <div className="hero-stats-label">{lang === 'zh' ? '独立项目 Axiom · 真实数据' : 'Solo project Axiom · live data'}</div>
          <div className="hero-stats-grid">
          {H.stats.map((s, i) =>
            <div className="stat" key={i}>
              <div className="v"><em className="em">{s.v}</em></div>
              <div className="l">{tr(s.l, lang)}</div>
            </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ============= STRENGTHS =============
function Strengths() {
  const { lang } = useLang();
  const S = RESUME.strengths;
  return (
    <section className="section" id="strengths">
      <div className="container">
        <div className="section-header">
          <span className="section-num">01 / STRENGTHS</span>
        </div>
        <h2 className="section-title">{lang === 'zh' ? <>个人<em className="em">优势</em></> : <>Core <em className="em">strengths</em></>}</h2>
        <p className="section-sub">{lang === 'zh' ? '六年互联网产品实战，三年开放平台与 B 端工具，独立交付 AI 产品。' : 'Six years in product, three in two-sided open platforms and B-end tooling, plus solo-shipped AI products.'}</p>
        <div className="strengths-grid" style={{ marginTop: 56 }}>
          {S.items.map((it, i) =>
          <article className="strength-card reveal" key={i}>
              <span className="strength-tag">{tr(it.tag, lang)}</span>
              <h3 className="strength-head">{tr(it.head, lang)}</h3>
              <p className="strength-body" style={{ fontFamily: "-apple-system", color: "rgb(15, 12, 8)" }}>{tr(it.body, lang)}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============= AI PROJECT (Axiom + Prism) =============
function ProjectCard({ data, id, feature, techBlock, diagram }) {
  const { lang } = useLang();
  const Diagram = diagram;
  return (
    <article className={`project-card ${feature ? 'feature' : ''} reveal`} id={id}>
      <div className="project-head">
        <div>
          <h3 className="project-name"><span className="it">{tr(data.name, lang)}</span></h3>
          <p className="project-tagline">{tr(data.tagline, lang)}</p>
          <a className="project-link" href={`https://${data.link}`} target="_blank" rel="noreferrer">
            {data.link} <Icon.Arrow />
          </a>
        </div>
        <p className="project-intro">{tr(data.intro, lang)}</p>
      </div>
      <div className="project-body">
        {Diagram ? <Diagram /> : (
          <div className="project-decisions">
            {data.decisions.map((d, i) =>
            <div className="decision" key={i}>
                <span className="decision-bullet" />
                <div>
                  <div className="decision-h">{tr(d.h, lang)}</div>
                  <div className="decision-b">{tr(d.b, lang)}</div>
                </div>
              </div>
            )}
          </div>
        )}
        {techBlock && data.tech &&
        <div className="tech-block">
            <span className="label">{lang === 'zh' ? '技术演进' : 'Tech evolution'}</span>
            <div>{tr(data.tech, lang)}</div>
          </div>
        }
      </div>
    </article>);

}

function AIProjects() {
  const { lang } = useLang();
  return (
    <section className="section" id="ai">
      <div className="container">
        <div className="section-header">
          <span className="section-num">02 / AI PROJECTS</span>
        </div>
        <h2 className="section-title">{lang === 'zh' ? <>AI 产品 <em className="em">独立项目</em></> : <>Solo <em className="em">AI projects</em></>}</h2>
        <p className="section-sub">{lang === 'zh' ? 'Axiom 是评估方法论的产品实践版本，PrismEval 是它的工具化版本——两者互为印证与喂养。' : 'Axiom is the product instance of an evaluation methodology; PrismEval is its tooled version — they validate and feed each other.'}</p>
        <div style={{ display: 'grid', gap: 36, marginTop: 56 }}>
          <ProjectCard data={RESUME.axiom} id="axiom" feature techBlock diagram={window.AxiomDiagram} />
          <ProjectCard data={RESUME.prism} id="prism" diagram={window.PrismDiagram} />
        </div>
      </div>
    </section>);

}

// ============= WORK ITEM =============
function WorkItem({ w, defaultOpen = false, isOther = false }) {
  const { lang } = useLang();
  const [open, setOpen] = useStateS(defaultOpen);
  const hasDetail = w.bullets && w.bullets.length || w.phases && w.phases.length;
  return (
    <div className={`work-item ${isOther ? 'is-other' : ''} ${w.art ? 'has-art' : ''}`}>
      {w.art && <WorkArt kind={w.art} />}
      <div className="work-item-main">
      <div className="work-period">{tr(w.period, lang)}</div>
      <h3 className="work-org">
        <span className="it">{tr(w.org, lang)}</span>
        <span className="role">· {tr(w.role, lang)}</span>
      </h3>
      {w.headline && <div className="work-headline">{tr(w.headline, lang)}</div>}
      {w.summary && <p className="work-summary">{tr(w.summary, lang)}</p>}
      {hasDetail &&
      <button className={`work-toggle ${open ? 'open' : ''}`} onClick={() => setOpen(!open)}>
          <span>{open ? lang === 'zh' ? '收起' : 'Collapse' : lang === 'zh' ? '展开详情' : 'Expand'}</span>
          <Icon.Chev />
        </button>
      }
      {hasDetail &&
      <div className={`work-detail ${open ? 'open' : ''}`}>
          <div className="inner">
            {w.bullets &&
          <div className="work-bullets">
                {w.bullets.map((b, i) =>
            <div className="bullet" key={i}>
                    <div className="bullet-h">{tr(b.h, lang)}</div>
                    <div className="bullet-b">{tr(b.b, lang)}</div>
                  </div>
            )}
              </div>
          }
            {w.phases && w.phases.map((p, i) =>
          <div className="phase" key={i}>
                <div className="phase-title">{tr(p.title, lang)}</div>
                <div className="phase-intro">{tr(p.intro, lang)}</div>
                <div className="work-bullets">
                  {p.items.map((b, j) =>
              <div className="bullet" key={j}>
                      <div className="bullet-h">{tr(b.h, lang)}</div>
                      <div className="bullet-b">{tr(b.b, lang)}</div>
                    </div>
              )}
                </div>
              </div>
          )}
          </div>
        </div>
      }
      </div>
    </div>);

}

// ============= WORK SECTION =============
function Work() {
  const { lang } = useLang();
  return (
    <section className="section" id="work">
      <div className="container">
        <div className="section-header">
          <span className="section-num">03 / WORK</span>
        </div>
        <h2 className="section-title">{lang === 'zh' ? <>工作 <em className="em">经历</em></> : <>Work <em className="em">history</em></>}</h2>
        <p className="section-sub work-flow-line">{lang === 'zh' ? '休闲手游发行 → 移动游戏研发 → 国内 Top1 直播平台 → 国内 Top 金融互联网公司 → 国内 Top3 OTA 平台。' : 'Casual mobile-game publisher → Mobile-game studio → China\'s #1 live-streaming platform → Top fintech internet company → Top-3 OTA platform.'}</p>
        <div className="timeline has-art-items" style={{ marginTop: 56 }}>
          {RESUME.work.map((w, i) =>
          <WorkItem
            key={i}
            w={w}
            defaultOpen={i === 0}
            isOther={!w.bullets && !w.phases} />

          )}
        </div>
      </div>
    </section>);

}

// ============= AWARDS + EDUCATION =============
function Awards() {
  const { lang } = useLang();
  const A = RESUME.awards;
  return (
    <section className="section" id="awards">
      <div className="container">
        <div className="section-header">
          <span className="section-num">04 / RECOGNITION</span>
        </div>
        <h2 className="section-title">{lang === 'zh' ? <>奖项与 <em className="em">影响力</em></> : <>Recognition & <em className="em">community</em></>}</h2>
        <div style={{ marginTop: 48 }}>
          <div className="award-block">
            <ul className="award-list">
              {A.community.items.map((it, i) => <li key={i}>{tr(it, lang)}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

// ============= CONTACT =============
function Contact() {
  const { lang } = useLang();
  const M = RESUME.meta;
  const [copied, setCopied] = useStateS(null);
  const copy = (k, v) => {
    navigator.clipboard?.writeText(v);
    setCopied(k);
    setTimeout(() => setCopied(null), 1600);
  };
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-header">
          <span className="section-num">05 / CONTACT</span>
        </div>
        <div className="contact-card">
          <div>
            <h2 className="contact-title">
              {lang === 'zh' ? <>让我们 <em className="em">连接</em>。</> : <>Let's <em className="em">connect</em>.</>}
            </h2>
            <p className="contact-meta">
              {lang === 'zh' ?
              '正在寻找平台产品经理（AI 方向）相关机会。也欢迎来 Axiom 真实体验一段对话。' :
              'Looking for Platform PM (AI) roles. Also feel free to try Axiom and have a real conversation.'}
            </p>
          </div>
          <div className="contact-list">
            <div className="contact-row">
              <Icon.Phone />
              <span className="label">PHONE</span>
              <span className="val">{M.phone}</span>
              <button className={`copy-btn ${copied === 'phone' ? 'done' : ''}`} onClick={() => copy('phone', M.phone)}>
                {copied === 'phone' ? lang === 'zh' ? '已复制' : 'Copied' : lang === 'zh' ? '复制' : 'Copy'}
              </button>
            </div>
            <div className="contact-row">
              <Icon.Mail />
              <span className="label">EMAIL</span>
              <span className="val">{M.email}</span>
              <button className={`copy-btn ${copied === 'email' ? 'done' : ''}`} onClick={() => copy('email', M.email)}>
                {copied === 'email' ? lang === 'zh' ? '已复制' : 'Copied' : lang === 'zh' ? '复制' : 'Copy'}
              </button>
            </div>
            <div className="contact-row">
              <Icon.Pin />
              <span className="label">{lang === 'zh' ? '坐标' : 'BASE'}</span>
              <span className="val">{tr(M.location, lang)}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;
window.Strengths = Strengths;
window.AIProjects = AIProjects;
window.Work = Work;
window.Awards = Awards;
window.Contact = Contact;