/* global React, Button, BracketLabel, MonoMeta, PortraitPlaceholder, Reveal, Counter */
const { useEffect: useEffectResume, useState: useStateResume } = React;

const SKILLS = [
  { name: "Figma", level: 82 },
  { name: "Brand identity", level: 74 },
  { name: "Claude Code / AI tools", level: 70 },
  { name: "Systems thinking", level: 68 },
  { name: "Prototyping", level: 62 },
  { name: "HTML / CSS", level: 55 },
];

const WORK_EXP = [
  {
    role: "UX Design Intern", italic: "Intern", company: "Funsize, Austin TX", dates: "2026 — Present",
    bullets: [
      "Starting summer 2026. First professional design role, at a design agency in Austin.",
      "Will be contributing to product and brand work across client briefs, under senior direction.",
      "Entering with the intention to learn more than I demonstrate, at least at the beginning.",
    ],
  },
  {
    role: "Freelance Designer", italic: "Designer", company: "Independent, Fort Worth TX", dates: "2024 — Present",
    bullets: [
      "Identity and brand work for local clients. First real briefs, with real constraints and real feedback.",
      "Small site builds and visual identity for a community-facing non-profit; learned how much decisions matter when someone else has to live with them.",
    ],
  },
  {
    role: "Store Manager", italic: "Manager", company: "CVS, Fort Worth TX", dates: "2022 — Present",
    bullets: [
      "Managing daily operations, scheduling, and a full team since age seventeen.",
      "Built communication habits under real pressure: frustrated customers, things going wrong at once, no script.",
      "Transferable in full: delegation, ownership, staying composed, keeping people moving.",
    ],
  },
];

const EDU = [
  { degree: "High School Diploma", italic: "Diploma", institution: "James Martin High School, Arlington TX", date: "2024" },
];

const AWARDS = [
  { name: "First freelance identity still in active use by the client", year: "2025" },
  { name: "Self-directed. No formal design program, all practice-built", year: "2024" },
  { name: "Joining Funsize before turning 21", year: "2026" },
];

function ResumePage({ navigate }) {
  const [downloading, setDownloading] = useStateResume(false);
  const onDownload = () => {
    setDownloading(true);
    setTimeout(() => setDownloading(false), 1800);
  };
  return (
    <div className="resume-page page-enter" data-screen-label="Resume">
      <span className="resume-tag" style={{ fontFamily: "var(--font-body)", letterSpacing: "0.22em", border: "1px solid var(--border-faint)", color: "var(--fg-3)" }}>The dossier · 2026</span>

      <div className="resume-head">
        <div>
          <h1 className="resume-name">Jaeden <em>Thai</em></h1>
          <div className="resume-info-grid">
            <div className="resume-info-cell">
              <span className="label">Based in</span>
              <span className="value" style={{ textTransform: "none", letterSpacing: 0, fontWeight: 400 }}>Fort Worth, Texas</span>
            </div>
            <div className="resume-info-cell">
              <span className="label">Email</span>
              <span className="value" style={{ textTransform: "none", letterSpacing: 0, fontWeight: 400 }}>hello@jaedenthai.studio</span>
            </div>
            <div className="resume-info-cell">
              <span className="label">Network</span>
              <span className="value" style={{ textTransform: "none", letterSpacing: 0, fontWeight: 400 }}>read.cv/jaeden</span>
            </div>
            <div className="resume-info-cell">
              <span className="label">Phone</span>
              <span className="value" style={{ textTransform: "none", letterSpacing: 0, fontWeight: 400 }}>+1 · 817 · 000 · 0000</span>
            </div>
          </div>
        </div>
        <div className="resume-portrait">
          <img src="../assets/IMG_7952-topaz-denoise-sharpen.jpg" alt="Jaeden Thai" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%" }} />
          <div className="grain-overlay" style={{ position: "absolute", inset: 0, backgroundImage: "url(../assets/grain-heavy.svg)", backgroundSize: "240px", opacity: 0.18, mixBlendMode: "screen" }} />
          <span style={{ position: "absolute", bottom: 14, left: 16 }} className="bracket-label">Figure 01: J. Thai</span>
        </div>
      </div>

      <div className="resume-body">
        <div className="resume-section">
          <h3>Experience</h3>
          {WORK_EXP.map((w, i) => (
            <div key={i} className="resume-job">
              <span className="checkbox" />
              <div className="resume-job-meat">
                <span className="role">{w.role.replace(w.italic, "").trim()} <em>{w.italic}</em></span>
                <span className="company" style={{ textTransform: "none", letterSpacing: "0.04em", color: "var(--fg-3)" }}>{w.company}</span>
                <ul className="achievements">
                  {w.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
              <span className="dates">{w.dates}</span>
            </div>
          ))}
        </div>

        <div className="resume-section">
          <h3>What I reach for</h3>
          <div className="skills-grid">
            {SKILLS.map((s, i) => (
              <div key={i} className="skill-cell">
                <span className="num">0{i + 1}</span>
                <span className="name" style={{ fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: 0, textTransform: "none", color: "var(--fg-1)" }}>{s.name}</span>
                <div className="bar">
                  <Reveal>
                    <div style={{ width: s.level + "%" }} />
                  </Reveal>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="resume-grid-2">
        <div className="resume-section">
          <h3>Education</h3>
          {EDU.map((e, i) => (
            <div key={i} className="edu-cell">
              <span className="degree">{e.degree.replace(e.italic, "").trim()} <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic" }}>{e.italic}</em></span>
              <span className="institution" style={{ textTransform: "none", letterSpacing: "0.04em" }}>{e.institution}</span>
              <span className="date">{e.date}</span>
            </div>
          ))}
        </div>
        <div className="resume-section">
          <h3>Quietly noted</h3>
          {AWARDS.map((a, i) => (
            <div key={i} className="award-row">
              <span className="name" style={{ fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: 0, textTransform: "none", color: "var(--fg-1)" }}>{a.name}</span>
              <span className="yr">{a.year}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="resume-download">
        <div className="eye" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 18, letterSpacing: 0, textTransform: "none", color: "var(--fg-3)" }}>For offline reading</div>
        <Button variant="primary" onClick={onDownload}>
          {downloading ? "Preparing the PDF…" : "Download PDF ↓"}
        </Button>
      </div>
    </div>
  );
}

window.ResumePage = ResumePage;