// HomePage.jsx — single-page personal site.
// No navigation bar, no off-page links. Everything Oscar wants to say
// lives on this one page: identity, research, running, contact.
// Surfaces stay in the light Rei dialect (paper white, ultramarine accents,
// hairline rules, mono readouts, lowercase only). Red is woven in as
// stamped/registration accents — ID stamps, corner ticks, the brand dot,
// the underline on "run", the live indicator. Never as decoration.

const H_PAPER = "#ffffff";
const H_PAGE_BG = "#fafaf7"; // a touch warm so the dossier cards feel inset
const H_INK = "#15171f";
const H_INK_SOFT = "#3a3f4a";
const H_MUTED = "#6b6f78";
const H_HAIR = "rgba(21,23,31,0.12)";
const H_HAIR_HI = "rgba(21,23,31,0.22)";
const H_UM = "#1f3fb5";
const H_UM_LIGHT = "#3957d6";
const H_EYE = "#8b1e2b"; // Rei-eye red, anchor of every red touch
const H_EYE_INK = "#5a121b"; // pressed/deep red — only where ink-stamped
const H_MINT = "#b2cdc4"; // matches the logo's baked-in plate

function HomePage() {
  return (
    <div style={s.page} data-screen-label="home">
      {/* ============ BRAND COVER ============
          full-bleed splash above the dossier. typographic, asymmetric,
          corner registration ticks in red. the only place oscar's name
          gets monumental. =================================== */}
      <section style={s.cover}>
        {/* corner registration ticks — red ink stamps */}
        <span style={{ ...s.tick, ...s.tickTL }} aria-hidden="true"></span>
        <span style={{ ...s.tick, ...s.tickTR }} aria-hidden="true"></span>
        <span style={{ ...s.tick, ...s.tickBL }} aria-hidden="true"></span>
        <span style={{ ...s.tick, ...s.tickBR }} aria-hidden="true"></span>

        {/* top row — id stamp left, classified ribbon right */}
        <div style={s.coverTop}>
          <span style={s.idStamp}>
            <span style={s.idStampLabel}>id</span>
            <span style={s.idStampNum}>of&middot;001</span>
          </span>
          <span style={s.coverRibbon}>
            <span style={s.coverRibbonText}>pilot &middot; dossier</span>
            <span style={s.liveDot} aria-hidden="true"></span>
          </span>
        </div>

        {/* monumental name */}
        <div style={s.coverCenter}>
          <div style={s.coverKicker}>
            <span style={s.coverKickerBar}></span>
            year of our lord 2026
          </div>
          <h1 style={s.coverName}>
            <span style={s.coverNameLine}>oscar</span>
            <span style={s.coverNameLine}>
              fang<span style={s.coverNameDot}>.</span>
            </span>
          </h1>
          <div style={s.coverRole}>
            researcher <span style={s.coverRoleAmp}>&amp;</span> <span style={s.coverRoleUnderline}>runner</span>
            <span style={s.coverRoleSep}>&nbsp;&middot;&nbsp;</span>
            dca
          </div>
        </div>

        {/* bottom row — readout left, scroll affordance right */}
        <div style={s.coverBottom}>
          <span style={s.coverReadout}>
            <strong style={s.strong}>focus</strong>&nbsp;&nbsp;memory safety &middot; unsafe rust &nbsp;&middot;&nbsp;
            <strong style={s.strong}>build</strong>&nbsp;&nbsp;sub-3 marathon
          </span>
          <span style={s.scrollHint}>
            scroll&nbsp;&nbsp;<span style={s.scrollArrow}>&darr;</span>
          </span>
        </div>
      </section>

      <div style={s.frame}>
        {/* ============ classified ribbon — header within the dossier ============ */}
        <div style={s.classified}>
          <span style={s.ribbon}>pilot &middot; dossier</span>
          <span style={s.brandMark}>
            <span style={s.brandDot}></span>oscar fang
          </span>
          <span style={s.classifiedMeta}>
            <strong style={s.strong}>id</strong>&nbsp;&nbsp;<span style={{ color: H_EYE }}>of-001</span>
            &nbsp;&middot;&nbsp;<strong style={s.strong}>base</strong>&nbsp;&nbsp;dca &nbsp;&middot;&nbsp;<strong style={s.strong}>status</strong>
            &nbsp;&nbsp;<span style={{ color: H_INK }}>nominal</span>
          </span>
        </div>

        {/* ============ hero — logo + identity dossier ============ */}
        <section style={s.hero}>
          <div style={s.logoPlate}>
            <img src="assets/oscar_avatar_single.png" alt="" style={s.logoImg} />
          </div>

          <div style={s.identity}>
            <div style={s.kicker}>oscar fang</div>
            <h1 style={s.h1}>
              i do <span style={s.h1ResearchAccent}>research</span>
              <br />
              and i{" "}
              <span style={s.h1RunAccent}>
                run<span style={s.h1RunUnderline}></span>
              </span>
              .
            </h1>
            <p style={s.tagline}>
              phd, computer science &mdash; programming languages &amp; security.
              <br />
              george washington university &middot; advised by jie zhou.
            </p>
            <div style={s.heroReadout}>
              <strong style={s.strong}>focus</strong>&nbsp;&nbsp;memory safety / unsafe rust &nbsp;&middot;&nbsp;
              <strong style={s.strong}>year</strong>&nbsp;&nbsp;1 of 5
            </div>
          </div>
        </section>

        {/* ============ two big tiles — research + running ============ */}
        <section style={s.tiles}>
          <div style={{ ...s.tile, ...s.tileResearch }}>
            <div style={s.tileLabel}>01 &mdash; research</div>
            <div style={s.tileHeadline}>
              memory safety,
              <br />
              where rust ends.
            </div>
            <div style={s.tileBody}>
              benchmarks, static analysis, and verification for the unsafe corners of systems code. building tools that prove what type systems
              can&rsquo;t.
            </div>
            <div style={s.tileFoot}>
              <span>phd &middot; gw systems security lab</span>
              <span>year 1 of 5</span>
            </div>
          </div>

          <div style={{ ...s.tile, ...s.tileRunning }}>
            <div style={s.tileLabel}>
              <span style={s.tileLabelMark}></span>02 &mdash; running
            </div>
            <div style={s.tileHeadline}>
              bos, 2027.
              <br />
              16 weeks out.
            </div>
            <div style={s.tileBody}>
              chasing a sub-3 marathon. weekly mileage, routes around the dca mall loop and rock creek, splits pulled live from strava.
            </div>
            <div style={s.tileFoot}>
              <span>training since jan 2026</span>
              <span>
                day streak <strong style={{ color: "#ffffff", fontWeight: 400 }}>47</strong>
              </span>
            </div>
          </div>
        </section>

        {/* ============ training pulse — small inline running readout ============ */}
        <section style={s.pulse}>
          <div style={s.pulseHeader}>
            <span>current pulse</span>
            <span style={s.pulseHeaderMeta}>
              <span style={s.liveDotInline} aria-hidden="true"></span>
              live &middot; strava + garmin
            </span>
          </div>
          <div style={s.pulseGrid}>
            <div style={s.pulseItem}>
              <div style={s.pulseLabel}>t-minus race</div>
              <div style={s.pulseVal}>
                355<span style={s.pulseUnit}>d</span>
              </div>
              <div style={s.pulseSub}>boston &middot; 19 apr 2027</div>
            </div>
            <div style={s.pulseDivider} />
            <div style={s.pulseItem}>
              <div style={s.pulseLabel}>week volume</div>
              <div style={s.pulseVal}>
                62.0<span style={s.pulseUnit}>km</span>
              </div>
              <div style={s.pulseSub}>wk 6 of 16</div>
            </div>
            <div style={s.pulseDivider} />
            <div style={s.pulseItem}>
              <div style={s.pulseLabel}>day streak</div>
              <div style={s.pulseVal}>
                47<span style={{ ...s.pulseUnit, color: H_EYE }}>&nbsp;&#9679;</span>
              </div>
              <div style={s.pulseSub}>longest of the block</div>
            </div>
            <div style={s.pulseDivider} />
            <div style={s.pulseItem}>
              <div style={s.pulseLabel}>target finish</div>
              <div style={s.pulseVal}>
                2:59<span style={s.pulseUnit}>:45</span>
              </div>
              <div style={s.pulseSub}>sub-3:00 attempt</div>
            </div>
          </div>
        </section>

        {/* ============ contact dossier ============ */}
        <section style={s.contactDossier}>
          <div style={s.dossierHeader}>say hi</div>
          <div style={s.contactRow}>
            <div style={s.contactLeft}>
              <div style={s.contactEmail}>goscargong at gmail</div>
              <div style={s.contactSub}>
                <strong style={s.strong}>base</strong>&nbsp;&nbsp;dca &nbsp;&middot;&nbsp;<strong style={s.strong}>lab</strong>&nbsp;&nbsp;gw, foggy
                bottom
              </div>
            </div>
            <div style={s.contactSocial}>
              <a href="#" style={s.socialA} aria-label="email">
                <i className="fa-solid fa-envelope"></i>
              </a>
              <a href="#" style={s.socialA} aria-label="github">
                <i className="fa-brands fa-github"></i>
              </a>
              <a href="#" style={s.socialA} aria-label="linkedin">
                <i className="fa-brands fa-linkedin"></i>
              </a>
              <a href="#" style={s.socialA} aria-label="strava">
                <i className="fa-brands fa-strava"></i>
              </a>
              <a href="#" style={s.socialA} aria-label="orcid">
                <i className="fa-brands fa-orcid"></i>
              </a>
            </div>
          </div>
        </section>

        {/* ============ footer status line ============ */}
        <footer style={s.footer}>
          <span style={s.readout}>
            sys&nbsp;&nbsp;analysis&nbsp;&nbsp;nominal &nbsp;&middot;&nbsp;
            <span style={{ color: H_UM_LIGHT }}>
              pattern <strong style={{ color: H_UM_LIGHT, fontWeight: 400 }}>blue</strong>
            </span>
            &nbsp;&middot;&nbsp;
            <span style={{ color: H_EYE }}>&#9679;</span>&nbsp;dca &middot; 2026
          </span>
          <span style={s.readout}>one page &middot; built by hand &middot; no jekyll, no analytics</span>
        </footer>
      </div>
    </div>
  );
}

// =================== styles ===================
const s = {
  page: {
    minHeight: "100vh",
    background: H_PAGE_BG,
    color: H_INK_SOFT,
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    fontWeight: 300,
    textTransform: "lowercase",
    WebkitFontSmoothing: "antialiased",
  },
  frame: {
    maxWidth: 1200,
    margin: "0 auto",
    padding: "32px 32px 60px",
    display: "flex",
    flexDirection: "column",
    gap: 28,
  },

  // ============ BRAND COVER ============
  cover: {
    position: "relative",
    minHeight: "100vh",
    background: H_PAPER,
    borderBottom: `1px solid ${H_HAIR}`,
    padding: "64px 64px 56px",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
    gap: 32,
    overflow: "hidden",
  },

  // corner registration ticks (red ink stamps)
  tick: {
    position: "absolute",
    width: 18,
    height: 18,
    borderColor: H_EYE,
    borderStyle: "solid",
    borderWidth: 0,
  },
  tickTL: { top: 28, left: 28, borderTopWidth: 1, borderLeftWidth: 1 },
  tickTR: { top: 28, right: 28, borderTopWidth: 1, borderRightWidth: 1 },
  tickBL: { bottom: 28, left: 28, borderBottomWidth: 1, borderLeftWidth: 1 },
  tickBR: { bottom: 28, right: 28, borderBottomWidth: 1, borderRightWidth: 1 },

  // top row
  coverTop: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    flexWrap: "wrap",
    gap: 16,
  },
  idStamp: {
    display: "inline-flex",
    alignItems: "baseline",
    gap: 10,
    fontFamily: "ui-monospace, Menlo, monospace",
  },
  idStampLabel: {
    fontSize: 10,
    letterSpacing: "0.32em",
    color: H_MUTED,
  },
  idStampNum: {
    fontSize: 13,
    letterSpacing: "0.18em",
    color: H_EYE,
    fontWeight: 400,
    borderBottom: `1px solid ${H_EYE}`,
    paddingBottom: 1,
  },
  coverRibbon: {
    display: "inline-flex",
    alignItems: "center",
    gap: 12,
  },
  coverRibbonText: {
    background: H_UM,
    color: "#ffffff",
    fontSize: 11,
    letterSpacing: "0.35em",
    fontWeight: 300,
    padding: "4px 14px",
  },
  liveDot: {
    display: "inline-block",
    width: 8,
    height: 8,
    background: H_EYE,
    borderRadius: "50%",
    boxShadow: `0 0 0 3px rgba(139,30,43,0.15)`,
    animation: "home-pulse 1.6s ease-in-out infinite",
  },

  // monumental name
  coverCenter: {
    alignSelf: "center",
    display: "flex",
    flexDirection: "column",
    gap: 28,
    maxWidth: 1100,
  },
  coverKicker: {
    display: "inline-flex",
    alignItems: "center",
    gap: 14,
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.32em",
    color: H_MUTED,
  },
  coverKickerBar: {
    display: "inline-block",
    width: 36,
    height: 1,
    background: H_EYE,
  },
  coverName: {
    fontSize: "clamp(80px, 14vw, 220px)",
    fontWeight: 200,
    letterSpacing: "-0.04em",
    lineHeight: 0.9,
    margin: 0,
    color: H_INK,
    display: "flex",
    flexDirection: "column",
  },
  coverNameLine: { display: "block" },
  coverNameDot: { color: H_EYE, fontWeight: 200 },
  coverRole: {
    display: "inline-flex",
    alignItems: "baseline",
    flexWrap: "wrap",
    fontSize: "clamp(18px, 1.8vw, 22px)",
    fontWeight: 300,
    color: H_INK_SOFT,
    letterSpacing: "-0.005em",
    marginTop: 8,
  },
  coverRoleAmp: { color: H_EYE, fontWeight: 300, margin: "0 2px" },
  coverRoleUnderline: {
    display: "inline-block",
    borderBottom: `2px solid ${H_EYE}`,
    paddingBottom: 2,
    color: H_INK,
  },
  coverRoleSep: { color: H_MUTED },

  // bottom row
  coverBottom: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-end",
    flexWrap: "wrap",
    gap: 16,
    paddingTop: 24,
    borderTop: `1px solid ${H_HAIR}`,
  },
  coverReadout: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    color: H_MUTED,
    lineHeight: 2,
  },
  scrollHint: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.22em",
    color: H_MUTED,
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
  },
  scrollArrow: {
    display: "inline-block",
    color: H_EYE,
    animation: "home-bob 1.8s ease-in-out infinite",
  },

  // ---------- classified ribbon (header substitute) ----------
  classified: {
    display: "flex",
    alignItems: "center",
    gap: 20,
    flexWrap: "wrap",
    paddingBottom: 18,
    borderBottom: `1px solid ${H_HAIR}`,
  },
  ribbon: {
    display: "inline-block",
    background: H_UM,
    color: "#ffffff",
    fontWeight: 300,
    fontSize: 11,
    letterSpacing: "0.35em",
    padding: "4px 14px",
  },
  brandMark: {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    color: H_INK,
    fontSize: 14,
    letterSpacing: "0.05em",
    fontWeight: 300,
  },
  brandDot: {
    width: 8,
    height: 8,
    background: H_EYE,
    display: "inline-block",
  },
  classifiedMeta: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    color: H_MUTED,
    marginLeft: "auto",
  },
  strong: { color: H_INK, fontWeight: 400 },
  readout: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    color: H_MUTED,
    lineHeight: 2,
  },

  // ---------- hero ----------
  hero: {
    display: "grid",
    gridTemplateColumns: "320px 1fr",
    gap: 48,
    alignItems: "stretch",
    background: H_PAPER,
    border: `1px solid ${H_HAIR}`,
    borderLeft: `3px solid ${H_UM}`,
    padding: 0,
  },
  logoPlate: {
    background: H_MINT,
    height: 380,
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "center",
    overflow: "hidden",
  },
  logoImg: { height: "100%", width: "auto", display: "block" },
  identity: {
    minWidth: 0,
    padding: "36px 36px 28px 0",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
  },
  kicker: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.32em",
    color: H_UM,
    marginBottom: 18,
  },
  h1: {
    fontSize: "clamp(44px, 6vw, 72px)",
    fontWeight: 200,
    letterSpacing: "-0.025em",
    lineHeight: 1,
    margin: "0 0 22px",
    color: H_INK,
  },
  h1ResearchAccent: { color: H_INK },
  h1RunAccent: {
    position: "relative",
    display: "inline-block",
    color: H_INK,
  },
  h1RunUnderline: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: "0.06em",
    height: 3,
    background: H_EYE,
  },
  tagline: {
    fontSize: 16,
    lineHeight: 1.6,
    margin: "0 0 22px",
    color: H_INK_SOFT,
    fontWeight: 300,
    maxWidth: 520,
  },
  heroReadout: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    color: H_MUTED,
    paddingTop: 16,
    borderTop: `1px solid ${H_HAIR}`,
    maxWidth: 520,
  },

  // ---------- tiles ----------
  tiles: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 16,
  },
  tile: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
    padding: "26px 28px 24px",
    minHeight: 260,
    color: "#ffffff",
    border: `1px solid ${H_HAIR}`,
    borderLeft: `3px solid ${H_UM}`,
    background: H_PAPER,
  },
  tileResearch: {
    background: "#1f2740", // ultramarine night, pulled from Rei
    borderLeftColor: H_UM_LIGHT,
    color: "#d8d2c4",
  },
  tileRunning: {
    background: H_UM,
    borderLeftColor: "#ffffff",
    color: "#ffffff",
  },
  tileLabel: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.32em",
    opacity: 0.85,
    marginBottom: 22,
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
  },
  tileLabelMark: {
    display: "inline-block",
    width: 6,
    height: 6,
    background: H_EYE,
  },
  tileHeadline: {
    fontSize: 30,
    fontWeight: 200,
    letterSpacing: "-0.02em",
    lineHeight: 1.05,
    marginBottom: 16,
    color: "#ffffff",
  },
  tileBody: {
    fontSize: 14,
    lineHeight: 1.65,
    opacity: 0.82,
    flex: 1,
    maxWidth: 360,
    fontWeight: 300,
  },
  tileFoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 22,
    paddingTop: 14,
    borderTop: "1px solid rgba(255,255,255,0.18)",
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    opacity: 0.85,
  },

  // ---------- training pulse ----------
  pulse: {
    background: H_PAPER,
    border: `1px solid ${H_HAIR}`,
    borderLeft: `3px solid ${H_UM}`,
    padding: "22px 26px",
    display: "flex",
    flexDirection: "column",
    gap: 18,
  },
  pulseHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "baseline",
    paddingBottom: 12,
    borderBottom: `1px solid ${H_HAIR}`,
    color: H_MUTED,
    fontWeight: 200,
    fontSize: 11,
    letterSpacing: "0.35em",
  },
  pulseHeaderMeta: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 10,
    letterSpacing: "0.18em",
    color: H_MUTED,
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
  },
  liveDotInline: {
    display: "inline-block",
    width: 6,
    height: 6,
    background: H_EYE,
    borderRadius: "50%",
    animation: "home-pulse 1.6s ease-in-out infinite",
  },
  pulseGrid: {
    display: "grid",
    gridTemplateColumns: "1fr 1px 1fr 1px 1fr 1px 1fr",
    gap: 0,
    alignItems: "stretch",
  },
  pulseDivider: { background: H_HAIR },
  pulseItem: { padding: "4px 26px" },
  pulseLabel: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    color: H_MUTED,
    marginBottom: 10,
  },
  pulseVal: {
    fontWeight: 200,
    fontSize: 38,
    lineHeight: 1,
    letterSpacing: "-0.02em",
    color: H_INK,
    fontVariantNumeric: "tabular-nums",
    display: "flex",
    alignItems: "baseline",
  },
  pulseUnit: { fontWeight: 200, fontSize: 14, color: H_MUTED, marginLeft: 4 },
  pulseSub: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 10,
    letterSpacing: "0.15em",
    color: H_MUTED,
    marginTop: 10,
  },

  // ---------- contact dossier ----------
  contactDossier: {
    background: H_PAPER,
    border: `1px solid ${H_HAIR}`,
    borderLeft: `3px solid ${H_UM}`,
    padding: "22px 26px",
  },
  dossierHeader: {
    color: H_MUTED,
    fontWeight: 200,
    fontSize: 11,
    letterSpacing: "0.35em",
    paddingBottom: 12,
    marginBottom: 16,
    borderBottom: `1px solid ${H_HAIR}`,
  },
  contactRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    flexWrap: "wrap",
    gap: 16,
  },
  contactLeft: { display: "flex", flexDirection: "column", gap: 6 },
  contactEmail: {
    fontSize: 22,
    fontWeight: 300,
    letterSpacing: "-0.005em",
    color: H_INK,
  },
  contactSub: {
    fontFamily: "ui-monospace, Menlo, monospace",
    fontSize: 11,
    letterSpacing: "0.15em",
    color: H_MUTED,
  },
  contactSocial: { display: "flex", gap: 18 },
  socialA: { color: H_INK, textDecoration: "none", fontSize: 18 },

  // ---------- footer status line ----------
  footer: {
    display: "flex",
    justifyContent: "space-between",
    flexWrap: "wrap",
    gap: 16,
    paddingTop: 18,
    borderTop: `1px solid ${H_HAIR}`,
  },
};

window.HomePage = HomePage;