/* global React, HeartRow, Panel, Badge, Chapter, StatLine, CounterHUD, PixelBtn, QuestLog, PixelImagePlaceholder, PixelSprite, PixelCharacter, Typewriter, PixelDivider */

// ============================================================================
// HERO — name plate, status bar, primary actions
// ============================================================================

function Hero() {
  return (
    <section id="hero" style={{ paddingTop: 100, paddingBottom: 100, position: "relative", overflow: "hidden", backgroundImage: "url('assets/reference-pixel-art.png')", backgroundSize: "cover", backgroundPosition: "center" }}>
      {/* Dark overlay for legibility */}
      <div style={{
        position: "absolute",
        inset: 0,
        background: "linear-gradient(180deg, rgba(26,20,16,0.35) 0%, rgba(26,20,16,0.6) 100%)",
        pointerEvents: "none",
      }}></div>

      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center" }} className="hero-grid">
          {/* Left: name plate */}
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 12, background: "var(--ink)", padding: "8px 14px", marginBottom: 20, boxShadow: "0 0 0 3px var(--parchment)" }}>
              <span className="dot-blink"></span>
              <span className="px-xs" style={{ color: "var(--parchment)" }}>NOW PLAYING — OPEN TO WORK</span>
            </div>

            <h1 className="px-font" style={{
              fontSize: 56,
              lineHeight: 1.1,
              color: "var(--parchment)",
              textShadow: "6px 6px 0 var(--ink)",
              marginBottom: 18
            }}>
              DAVID<br />HAVERLAND
            </h1>

            <Panel variant="simple" style={{ maxWidth: 620, marginBottom: 24 }}>
              <p style={{ fontSize: 24, lineHeight: 1.4 }}>
                Game developer & tools engineer. I build editor extensions, pipelines, and runtime systems that let teams ship faster — without giving up creative control.
              </p>
              <div className="divider--dashed" style={{ margin: "20px 0 16px" }}></div>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto 1fr", gap: "10px 14px", alignItems: "center" }}>
                <span className="px-xs">Primary Language:</span>
                <span style={{ fontSize: 22 }}>Unity (C#)</span>
                <span className="px-xs">Best at:</span>
                <span style={{ fontSize: 22 }}>Tools Engineer</span>
              </div>
            </Panel>

            <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
              <PixelBtn href="#mines" kind="primary">▶ View Featured Project</PixelBtn>
              <PixelBtn href="#contact">✉ Hire Me</PixelBtn>
              <PixelBtn href="https://www.linkedin.com/in/david-haverland/" target="_blank" kind="ghost">LinkedIn ↗</PixelBtn>
            </div>
          </div>

          {/* Right: stats card with character */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 320 }}>
            <Panel style={{ width: 360 }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 14 }}>
                <div style={{
                  width: 96, height: 96,
                  flexShrink: 0,
                  background: "var(--parchment-3)",
                  boxShadow: "0 0 0 3px var(--ink), 4px 4px 0 3px var(--shadow)",
                  overflow: "hidden"
                }}>
                  <img src="assets/avatar.jpg" alt="David Haverland" style={{
                    width: "100%", height: "100%",
                    display: "block",
                    objectFit: "cover"
                  }} />
                </div>
                <div style={{ flex: 1 }}>
                  <div className="px-xs" style={{ marginBottom: 6, opacity: 0.7 }}>PARTY MEMBER</div>
                  <div className="px-sm" style={{ marginBottom: 8 }}>DAVO_LV.27</div>
                  <HeartRow filled={5} total={5} />
                  <div className="px-tiny" style={{ marginTop: 6, opacity: 0.7 }}>HP — FULL BARS</div>
                </div>
              </div>
              <div className="divider"></div>
              <StatLine label="UNITY" value={94} max={100} />
              <StatLine label="C#" value={92} max={100} />
              <StatLine label="EDITOR EXT" value={96} max={100} />
              <StatLine label="UI/UX" value={85} max={100} />
              <StatLine label="MULTIPLAYER" value={78} max={100} />
            </Panel>

            <div style={{ display: "flex", gap: 8, justifyContent: "start" }}>
              <CounterHUD icon="◆" label="GAMES" value="3" />
              <CounterHUD icon="★" label="YEARS" value="5" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================================
// ABOUT — character sheet
// ============================================================================

function About() {
  return (
    <section id="about" className="dirt-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="◆ CHAPTER 01"
          title="About Me"
          sub="Specialty: editor tooling that turns hours of busywork into a couple of clicks." />
        

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32 }} className="about-grid">
          <Panel>
            <div className="px-sm" style={{ marginBottom: 14 }}>BACKSTORY</div>
            <p style={{ fontSize: 22, marginBottom: 14 }}>
              I'm a game developer who specializes in <b>tooling that speeds up dev time</b>. Most of my work lives in the Unity Editor — custom inspectors, asset pipelines, no-code authoring layers, and live-collaboration systems that let designers iterate without waiting on engineers.
            </p>
            <p style={{ fontSize: 22, marginBottom: 14 }}>
              I shipped my first game years ago, but found my niche when I realized the tools we used to make games were as interesting as the games themselves. Since then I've built the <b>Content Creation Kit</b>, to allow designers to create complex gameplay experiences without writing code.
            </p>
            <p style={{ fontSize: 22 }}>
              I'm currently working on <b>The Mines of White Label</b> and looking for tools/tech roles where pipelines and developer experience matter.
            </p>
          </Panel>

          <div className="stack">
            <Panel variant="simple">
              <div className="px-sm" style={{ marginBottom: 12 }}>SKILLS</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                {[
                "Unity", "C#", "ScriptableObject Pipelines", "UI Toolkit", "IMGUI",
                "Editor Scripting", "Photon", "Visual Scripting", "Steamworks",
                "Git", "Shaders"].
                map((t, i) =>
                <span key={i} style={{
                  background: "var(--parchment-3)",
                  padding: "6px 10px",
                  fontFamily: "var(--font-pixel)",
                  fontSize: 9,
                  boxShadow: "0 0 0 2px var(--ink)"
                }}>{t}</span>
                )}
              </div>
            </Panel>

            <Panel variant="dark">
              <div className="px-sm" style={{ marginBottom: 10, color: "var(--gold)" }}>ROLES I PLAY</div>
              <div style={{ fontSize: 22, lineHeight: 1.5 }}>
                <div>- Tools Engineer</div>
                <div>- Generalist gameplay programmer</div>
                <div>- UI/UX Designer and implementer</div>
                <div>- Team lead</div>
                <div>- Anything else needed of me</div>
              </div>
            </Panel>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero, About });