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

// ============================================================================
// CONTACT — inn signpost / save point
// ============================================================================

function Contact() {
  return (
    <section id="contact" className="tile-bg" style={{ paddingTop: 80, paddingBottom: 100, position: "relative" }}>
      <div className="wrap">
        <Chapter
          tag="◆ CHAPTER 05"
          title="GET IN TOUCH"
          sub="Looking for tools/tech engineers, indie collaborators, or just want to talk pipelines?"
        />

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32 }} className="contact-grid">
          {/* Left: dark CRT terminal */}
          <Panel variant="dark">
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 14 }}>
              <span style={{ width: 12, height: 12, background: "var(--heart)" }}></span>
              <span style={{ width: 12, height: 12, background: "var(--gold)" }}></span>
              <span style={{ width: 12, height: 12, background: "var(--grass)" }}></span>
              <span className="px-tiny" style={{ color: "var(--parchment-2)", marginLeft: 8 }}>davo@portfolio:~$</span>
            </div>

            <div className="pixel-screen">
              <Typewriter
                lines={[
                  "> ./hire-me.sh --role tools-engineer",
                  "",
                  "  HELLO, TRAVELER.",
                  "",
                  "  I'm David — a tools engineer who",
                  "  spends most days writing code that",
                  "  helps other people write less code.",
                  "",
                  "  Open to:",
                  "    - Tools / tech engineering roles",
                  "    - Indie collaboration",
                  "",
                  "  Let's talk. Pick a channel →",
                ]}
                speed={22}
                startDelay={300}
              />
            </div>
          </Panel>

          {/* Right: contact methods */}
          <div className="stack">
            <Panel>
              <div className="px-sm" style={{ marginBottom: 14 }}>▸ CHANNELS</div>
              <div className="stack" style={{ gap: 10 }}>
                <ContactRow icon="✉" label="EMAIL" value="nerdatron.end@gmail.com" href="mailto:nerdatron.end@gmail.com" />
                <ContactRow icon="◆" label="LINKEDIN" value="david-haverland" href="https://www.linkedin.com/in/david-haverland/" />
                <ContactRow icon="◢" label="STEAM (MINES)" value="View store page" href="https://store.steampowered.com/app/2792840/The_Mines_of_White_Label/" />
              </div>
            </Panel>

            <Panel variant="simple">
              <div className="px-sm" style={{ marginBottom: 12 }}>▸ AVAILABILITY</div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "2px dashed var(--ink-soft)" }}>
                <span style={{ fontSize: 20 }}>Full-time roles</span>
                <Badge kind="shipped">OPEN</Badge>
              </div>
            </Panel>
          </div>
        </div>

        {/* Footer ribbon */}
        <div style={{ marginTop: 60, textAlign: "center" }}>
          <div className="px-tiny" style={{ color: "var(--parchment)", textShadow: "2px 2px 0 var(--ink)", marginBottom: 12 }}>
            ◆◆◆  THANKS FOR PLAYING  ◆◆◆
          </div>
          <div style={{ fontSize: 20, color: "var(--parchment)", textShadow: "2px 2px 0 var(--ink)" }}>
            Crafted in pixels by David Haverland · MMXXVI
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({ icon, label, value, href }) {
  return (
    <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel="noopener noreferrer" style={{
      display: "flex",
      alignItems: "center",
      gap: 14,
      padding: "12px 14px",
      background: "var(--parchment-3)",
      boxShadow: "0 0 0 3px var(--ink)",
      color: "var(--ink)",
      textDecoration: "none",
      transition: "transform 0.06s steps(2)",
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = "translate(-2px, -2px)"}
    onMouseLeave={(e) => e.currentTarget.style.transform = "translate(0, 0)"}
    >
      <span className="px-md" style={{ width: 28, textAlign: "center" }}>{icon}</span>
      <div style={{ flex: 1 }}>
        <div className="px-tiny" style={{ opacity: 0.6, marginBottom: 2 }}>{label}</div>
        <div style={{ fontSize: 22 }}>{value}</div>
      </div>
      <span className="px-sm">→</span>
    </a>
  );
}

// ============================================================================
// MINIMAP NAV
// ============================================================================

function Minimap() {
  const items = [
    { href: "#hero", label: "INTRO" },
    { href: "#about", label: "ABOUT ME" },
    { href: "#mines", label: "FEATURED" },
    { href: "#tools", label: "TOOLS" },
    { href: "#pharma", label: "ENTERPRISE VR" },
    { href: "#games", label: "GAMES" },
    { href: "#timeline", label: "EXPERIENCE" },
    { href: "#contact", label: "CONTACT" },
  ];
  return (
    <nav className="minimap-nav" aria-label="Page sections">
      <div style={{ marginBottom: 8, color: "var(--ink-soft)" }}>◆ MAP</div>
      <ul>
        {items.map((it, i) => (
          <li key={i}><a href={it.href}><span className="pin"></span>{it.label}</a></li>
        ))}
      </ul>
    </nav>
  );
}

Object.assign(window, { Contact, Minimap });