// page-resume.jsx — one-page resume, print + download actions
const { SiteCtx: SiteCtx_R, useReveal: useReveal_R, I18N: I18N_R } = window.MM_HOOKS;

function ResumePage() {
  const { lang } = React.useContext(SiteCtx_R);
  const t = I18N_R[lang];
  const D = window.SITE_DATA;
  const H = D.HERO;
  const [ref, shown] = useReveal_R({ threshold: 0.1 });
  const [ref2, shown2] = useReveal_R({ threshold: 0.05 });

  const onPrint = () => window.print();

  return (
    <section id="resume" className="page page--scrollable page-resume">
      <div className="page-inner">
        <div ref={ref} className={`reveal ${shown ? "is-shown" : ""}`}>
          <div className="section-eyebrow">{t.resume_eyebrow}</div>
          <h2 className="section-title">{t.resume_title}</h2>
          <p className="section-sub">{t.resume_sub}</p>
        </div>

        <div ref={ref2} className={`resume-card reveal-pop ${shown2 ? "is-shown" : ""}`}>
          <div className="resume-head">
            <div>
              <div className="resume-name">{H.name_en}<span className="resume-name-zh">{H.name_zh}</span></div>
              <div className="resume-role">AI Product Manager</div>
            </div>
            <div className="resume-contact">
              <div><a href={`mailto:${H.email}`}>{H.email}</a></div>
              <div><a href={H.github} target="_blank" rel="noopener">github.com/AmoryMing</a></div>
              <div><a href={H.linkedin} target="_blank" rel="noopener">linkedin.com/in/amorymu</a></div>
            </div>
          </div>

          <div className="resume-section">
            <div className="resume-section-title">Summary</div>
            <div className="resume-summary">
              {lang === "zh" ? D.ABOUT_INTRO_ZH[0] : D.ABOUT_INTRO_EN[0]}
            </div>
          </div>

          <div className="resume-section">
            <div className="resume-section-title">Experience</div>
            {D.EXPERIENCE.map((e, i) => (
              <div key={i} className="resume-exp">
                <div className="resume-exp-head">
                  <div>
                    <span className="resume-exp-role">{lang === "zh" ? e.role_zh : e.role_en}</span>
                    {" · "}
                    <span className="resume-exp-co">{lang === "zh" ? e.company_zh : e.company_en}</span>
                  </div>
                  <div className="resume-exp-period">{e.period}</div>
                </div>
                <ul className="resume-exp-list">
                  {(lang === "zh" ? e.highlights_zh : e.highlights_en).map((h, j) => <li key={j}>{h}</li>)}
                </ul>
              </div>
            ))}
          </div>

          <div className="resume-section">
            <div className="resume-section-title">Education</div>
            <div className="resume-2col">
              {D.EDUCATION.map((e, i) => (
                <div key={i} className="resume-edu">
                  <strong>{lang === "zh" ? e.school_zh : e.school_en}</strong>
                  <div>{lang === "zh" ? e.degree_zh : e.degree_en}</div>
                  <div className="meta">{e.gpa} · {e.period}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="resume-section">
            <div className="resume-section-title">Skills</div>
            <div className="resume-skills">
              {D.SKILLS.map((s, i) => (
                <div key={i}>
                  <div className="resume-skill-cat">{lang === "zh" ? s.category_zh : s.category_en}</div>
                  <div className="resume-skill-items">{s.items.join(" · ")}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="resume-actions">
          <a className="btn btn--primary" href="resume.pdf" download>
            ⬇ {t.download}
          </a>
          <button className="btn" onClick={onPrint}>
            🖨 {t.print}
          </button>
        </div>
      </div>
    </section>
  );
}

window.ResumePage = ResumePage;