/* Resume.jsx — "The one-page version": the real one-page résumé, built as a
   flippable paper artifact. Front = the typeset CV (actual PDF content);
   back = the colophon / what's on the site. Click, Enter/Space, or the button
   turns the sheet. A sticky note is pinned to the artifact's corner so it never
   drifts away. */

const RESUME = {
  name: "Abdullahi Abdi",
  contact: [
    "(612) 393-6826",
    "Abdullahi.aabdii@gmail.com",
    "linkedin.com/in/abdull-abdi5",
    "github.com/mulla759",
  ],
  education: [
    {
      org: "University of Minnesota, Twin Cities",
      meta: "Sep. 2023 – Dec. 2027",
      role: "Bachelor of Science, Computer Science & Economics · Minneapolis, MN",
      points: [
        "Coursework: User Experience Design, Database Management Systems, Machine Learning, Distributed Systems",
      ],
    },
  ],
  skills: [
    ["Programming Languages", "Python, Java, JavaScript, TypeScript, SQL, C#"],
    ["Frameworks", "React, Next.js, .NET, FastAPI, Flask, LangChain, LangGraph, OpenAI Agents SDK, TensorFlow"],
    ["Developer Tools", "Git, Docker, K8s, AWS, GCP, PostgreSQL, SQLite, FAISS, Twilio, WebAssembly, MCP, CI/CD"],
    ["Product Management", "Solution Definition, User Research, A/B Testing, MVP Scoping, Prioritization, Tableau"],
  ],
  experience: [
    {
      org: "Westinghouse Nuclear",
      role: "Software Engineer Intern",
      meta: "May 2026 – Present · Minneapolis, MN",
      points: [
        "Defined and delivered FuelNet, an operator-facing UI refresh cutting onsite downtime 2 hours per deployment",
        "Defined a C#/.NET solution replacing a legacy database, cutting initialization 95% from 2 min to under 5 sec",
        "Built a pipeline streaming live crane coordinates over OPC-UA and SuiteLink via DDE, saving 1+ hour per install",
        "Validated data streams against hardware configs across 20+ tests, reducing data anomalies by 10%",
      ],
    },
    {
      org: "NCXT.CO",
      role: "Data Analyst Intern",
      meta: "May 2023 – Oct. 2023 · Minneapolis, MN",
      points: [
        "Built a Python/SQL ETL pipeline normalizing 300+ audits across 386 restaurants, cutting prep to under 1 hour",
        "Engineered a Digital Capabilities Index from search and audit features, adopted across all 386 client locations",
        "Clustered 386 restaurants into 3 archetypes with k-means, surfaced in Tableau to guide 12+ outreach campaigns",
      ],
    },
  ],
  projects: [
    {
      name: "BLACKBOX",
      tech: "Next.js, FastAPI, OpenAI SDK, Twilio, ElevenLabs, Whisper",
      meta: "2026",
      points: [
        "Defined and built an agentic disaster response system, one agent per high-risk household; 2nd of 40+ teams",
        "Designed agentic orchestration with a modality router across 4 APIs, holding 95% contact on degraded networks",
        "Shipped a Next.js console on a WebSocket event bus, cutting dispatcher time per case to under 30 sec",
      ],
    },
    {
      name: "PromiseAI",
      tech: "WebAssembly, Next.js, IndexedDB, uGemma",
      meta: "2026",
      points: [
        "Ran uGemma through WebAssembly for 100% offline, zero egress inference with no server side user store",
        "Cut repeat prompt latency 60% with an LRU cache over embeddings, avoiding WebAssembly reinitialization",
        "Built an interactive Next.js and IndexedDB client persisting goals, streaks, and history with a sub-1-sec cold start",
      ],
    },
    {
      name: "Odysrec.com",
      tech: "Flask, Gemini API, SQLite, React",
      meta: "2025",
      points: [
        "Architected dual mode serving with a local top 100 fallback and full ML ranking on opt in, cutting API cost",
        "Modeled the engagement loop on Pinterest's Save, Revisit, Retain paper, tuning the ranker for repeat visits",
        "Drove 1.4K+ events in 7 days via a gamified swipe UX with radar chart interpretability over ranked results",
      ],
    },
  ],
  leadership: [
    {
      org: "ColorStack University of Minnesota",
      role: "Academic and Professional Development Chair",
      meta: "Oct. 2025 – Present",
      points: [
        "Led technical programming for 100+ CS students, turning post event evaluations into a prioritized backlog",
        "Hosted 4+ workshops on software engineering resumes, technical interviews, and internship prep for 100+ students",
        "Partnered with 5+ industry engineers and campus orgs to source speakers, lifting event turnout 40%",
      ],
    },
    {
      org: "WunderBar Mock Interview Platform",
      role: "Founder",
      meta: "May 2026 – Present",
      points: [
        "Founded a peer to peer platform matching students into mock technical interviews, running 50+ paired sessions",
        "Ran user feedback cycles to define the minimum loveable product, cutting the matching flow to 3 steps",
        "Drove retention through A/B testing on new features, prioritizing what students returned for",
      ],
    },
  ],
};

const EMAIL = "Abdullahi.aabdii@gmail.com";

function SheetBlock({ label, children }) {
  return (
    <div style={{ marginTop: 13 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 3 }}>
        <span style={{ fontFamily: "var(--font-micro)", fontSize: 8.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--vermilion)" }}>{label}</span>
        <span style={{ flex: 1, borderTop: "1px solid var(--rule-strong)" }} />
      </div>
      {children}
    </div>
  );
}

function Entry({ org, role, tech, meta, points }) {
  return (
    <div style={{ padding: "7px 0", borderTop: "1px solid var(--rule)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "baseline" }}>
        <span style={{ fontFamily: "var(--font-serif)", fontSize: 11.5, fontWeight: 700, color: "var(--ink)", letterSpacing: "-0.01em" }}>{org}</span>
        <span style={{ fontFamily: "var(--font-micro)", fontSize: 8, letterSpacing: "0.05em", color: "var(--ink-4)", whiteSpace: "nowrap" }}>{meta}</span>
      </div>
      {role && <div style={{ fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 10, color: "var(--ink-3)", marginTop: 1 }}>{role}</div>}
      {tech && <div style={{ fontFamily: "var(--font-micro)", fontSize: 7.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginTop: 2 }}>{tech}</div>}
      {points.map((p, i) => (
        <div key={i} style={{ fontFamily: "var(--font-body)", fontSize: 9.5, lineHeight: 1.42, color: "var(--ink-2)", marginTop: 3, display: "flex", gap: 6 }}>
          <span style={{ color: "var(--vermilion)" }}>•</span><span>{p}</span>
        </div>
      ))}
    </div>
  );
}

function ResumeSheet({ full }) {
  return (
    <div style={{ position: "relative", background: "var(--paper-bright)", border: "1px solid var(--rule-strong)",
      padding: full ? "clamp(26px, 3.6vw, 50px)" : "clamp(18px, 2.2vw, 30px)",
      fontFamily: "var(--font-body)", color: "var(--ink)" }}>
      <span className="grain-field" style={{ opacity: 0.22 }} />

      <div style={{ position: "relative", textAlign: "center", borderBottom: "2px solid var(--ink)", paddingBottom: 10 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: full ? 40 : 30,
          letterSpacing: "-0.045em", lineHeight: 1, color: "var(--ink)" }}>{RESUME.name}</div>
        <div style={{ marginTop: 6, display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "3px 12px",
          fontFamily: "var(--font-body)", fontSize: full ? 11 : 9.5, color: "var(--ink-3)" }}>
          {RESUME.contact.map((c, i) => (
            <span key={i} style={{ display: "inline-flex", gap: 12 }}>
              {i > 0 && <span style={{ color: "var(--ink-5)" }}>|</span>}{c}
            </span>
          ))}
        </div>
      </div>

      <div className="resume-body" style={{ position: "relative", marginTop: 4 }}>
        <div>
          <SheetBlock label="Education">
            {RESUME.education.map((e, i) => <Entry key={i} {...e} />)}
          </SheetBlock>
          <SheetBlock label="Work Experience">
            {RESUME.experience.map((e, i) => <Entry key={i} {...e} />)}
          </SheetBlock>
          <SheetBlock label="Leadership">
            {RESUME.leadership.map((e, i) => <Entry key={i} {...e} />)}
          </SheetBlock>
        </div>
        <div>
          <SheetBlock label="Technical Skills">
            {RESUME.skills.map(([k, v], i) => (
              <div key={i} style={{ padding: "5px 0", borderTop: "1px solid var(--rule)" }}>
                <div style={{ fontFamily: "var(--font-micro)", fontSize: 8, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>{k}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, lineHeight: 1.4, color: "var(--ink-2)", marginTop: 1 }}>{v}</div>
              </div>
            ))}
          </SheetBlock>
          <SheetBlock label="Projects">
            {RESUME.projects.map((p, i) => <Entry key={i} org={p.name} tech={p.tech} meta={p.meta} points={p.points} />)}
          </SheetBlock>
        </div>
      </div>

      <div style={{ position: "relative", marginTop: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-end", gap: 16, borderTop: "1px solid var(--rule)", paddingTop: 9 }}>
        <span style={{ fontFamily: "var(--font-annotation)", fontSize: 14, color: "var(--vermilion)", transform: "rotate(-2deg)" }}>— with love, Mulla</span>
        <span style={{ fontFamily: "'Noto Sans Shavian', serif", fontSize: 15, color: "var(--ink-3)" }}>·𐑥𐑫𐑤𐑩</span>
      </div>

      {!full && (
        <div style={{ position: "absolute", right: -12, bottom: 72, width: 72, height: 72, borderRadius: "50%",
          border: "1.5px solid var(--vermilion)", color: "var(--vermilion)", transform: "rotate(-11deg)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-micro)", fontSize: 7, letterSpacing: "0.14em", textAlign: "center", lineHeight: 1.5,
          background: "color-mix(in srgb, var(--paper-bright) 70%, transparent)" }}>
          <span>MULLA</span><span>ARCHIVE</span><span>2026</span>
        </div>
      )}
    </div>
  );
}

function ResumeBack({ onNav }) {
  return (
    <div className="flip-back flip-face" style={{ position: "absolute", inset: 0, background: "var(--earth-espresso)",
      color: "var(--paper-on-ink)", padding: "clamp(20px, 3vw, 40px)", display: "flex", flexDirection: "column" }}>
      <span className="grain-field" style={{ opacity: 0.3 }} />
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ fontFamily: "var(--font-micro)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--paper-on-ink-2)" }}>the back of the page</span>
        <span style={{ fontFamily: "var(--font-micro)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--vermilion)" }}>02 / 02</span>
      </div>
      <div style={{ position: "relative", marginTop: "auto", marginBottom: "auto" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(1.7rem, 2.8vw, 2.6rem)",
          lineHeight: 1.03, letterSpacing: "-0.03em", color: "var(--paper-on-ink)", maxWidth: "16ch" }}>
          One page, both sides. The rest is told properly on the site.
        </div>
        <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "9px 24px" }}>
          {[["Work", "work"], ["Archive", "archive"], ["Media", "media"], ["Notes", "notes"], ["About", "about"], ["Contact", "contact"]].map(([label, id]) => (
            <button key={id} onClick={() => onNav(id)} style={{ background: "none", border: "none", padding: 0, textAlign: "left",
              fontFamily: "var(--font-body)", fontSize: 14, color: "var(--paper-on-ink)", cursor: "pointer",
              borderBottom: "1px solid var(--rule-on-ink)", paddingBottom: 5 }}>
              {label}<span style={{ color: "var(--vermilion)", marginLeft: 8 }}>→</span>
            </button>
          ))}
        </div>
      </div>
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        borderTop: "1px solid var(--rule-on-ink)", paddingTop: 13 }}>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: "var(--paper-on-ink-2)" }}>
          Set in Newsreader &amp; Karla. Printed {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}.
        </span>
        <span style={{ fontFamily: "var(--font-micro)", fontSize: 9, letterSpacing: "0.14em", color: "var(--vermilion)" }}>flip back ↺</span>
      </div>
    </div>
  );
}

function StickyNote() {
  return (
    <div style={{ position: "absolute", left: -34, bottom: -22, zIndex: 6, width: 166,
      transform: "rotate(-3.4deg)", filter: "drop-shadow(0 14px 22px rgba(20,18,15,0.22))" }}>
      <span style={{ position: "absolute", top: -9, left: "50%", transform: "translateX(-50%) rotate(2deg)",
        width: 54, height: 18, background: "rgba(237,231,216,0.55)", border: "1px solid rgba(27,24,19,0.10)" }} />
      <div style={{ background: "#F2E27A", color: "var(--ink)", padding: "16px 15px 18px" }}>
        <div style={{ fontFamily: "var(--font-annotation)", fontSize: 17, lineHeight: 1.05 }}>not on here yet —</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 11.5, lineHeight: 1.5, marginTop: 7 }}>
          + SpeakEz, 1st place<br />(we won that night)<br />+ GWS for Dummies
        </div>
      </div>
    </div>
  );
}

function Resume({ onNav }) {
  const [flipped, setFlipped] = React.useState(false);
  const [full, setFull] = React.useState(false);

  React.useEffect(() => {
    if (!full) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setFull(false); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); };
  }, [full]);

  const flip = () => setFlipped(f => !f);

  return (
    <section id="resume" className="section" style={{ background: "var(--paper)" }}>
      <div className="cols cols--resume">
        <div>
          <Kicker style={{ color: "var(--vermilion)" }}>— Résumé</Kicker>
          <h2 style={{ marginTop: 14, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(2.6rem, 5.4vw, 4.4rem)", lineHeight: 0.94, letterSpacing: "-0.04em", color: "var(--ink)" }}>
            The one-page version
          </h2>
          <p style={{ marginTop: 18, fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.55,
            color: "var(--ink-2)", maxWidth: "42ch" }}>
            Everything on this site, folded onto one page for people with forms to fill.
          </p>
          <div style={{ marginTop: 12, fontFamily: "var(--font-micro)", fontSize: 10, letterSpacing: "0.08em", color: "var(--ink-4)" }}>
            1 page · letter · updated sep 29, 2026
          </div>

          <div style={{ marginTop: 26, display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
            <Button variant="solid" onClick={() => window.print()}>Download the PDF</Button>
            <Button variant="ghost" onClick={() => setFull(true)}>Open it full size</Button>
          </div>
          <div style={{ marginTop: 18, fontFamily: "var(--font-annotation)", fontSize: 17, color: "var(--vermilion)", transform: "rotate(-2deg)", display: "inline-block" }}>
            printed the morning of sep 29 ↓
          </div>
        </div>

        <div>
          <div style={{ position: "relative" }}>
            <div className="flip" onClick={flip} role="button" tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); flip(); } }}
              aria-label={flipped ? "Flip the résumé sheet to the front" : "Flip the résumé sheet to the back"}
              style={{ cursor: "pointer", transform: "rotate(0.5deg)" }}>
              <div className="flip-inner" style={{ transform: flipped ? "rotateY(180deg)" : "none", transformStyle: "preserve-3d" }}>
                <div className="flip-face flip-shadow" style={{ background: "var(--paper-bright)" }}>
                  <ResumeSheet />
                </div>
                <ResumeBack onNav={onNav} />
              </div>
            </div>
            <StickyNote />
          </div>
          <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <button onClick={flip} style={{ background: "none", border: "1px solid var(--rule-strong)", padding: "10px 16px",
              fontFamily: "var(--font-micro)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink)" }}>
              {flipped ? "Flip back ↺" : "Flip the page ↺"}
            </button>
            <span style={{ fontFamily: "var(--font-micro)", fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>
              click the sheet to turn it
            </span>
          </div>
        </div>
      </div>

      {full && (
        <div onClick={() => setFull(false)} style={{ position: "fixed", inset: 0, zIndex: 120, background: "rgba(20,18,15,0.66)",
          display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "28px 18px", overflowY: "auto" }}>
          <div onClick={e => e.stopPropagation()} style={{ width: "min(920px, 96vw)", position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span style={{ fontFamily: "var(--font-micro)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--paper-on-ink)" }}>résumé — 1 page · updated sep 29, 2026</span>
              <button onClick={() => setFull(false)} style={{ background: "none", border: "1px solid var(--rule-on-ink)", color: "var(--paper-on-ink)",
                padding: "7px 12px", fontFamily: "var(--font-micro)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase" }}>Close · esc</button>
            </div>
            <ResumeSheet full />
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <span style={{ fontFamily: "var(--font-annotation)", fontSize: 16, color: "var(--paper-on-ink)" }}>Prefer the story?</span>
              <ArrowLink color="var(--paper-on-ink)" onClick={() => { setFull(false); onNav("work"); }}>Back to the work</ArrowLink>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { Resume, ResumeSheet });
