// Home — single-page dark-terminal portfolio (Claude Code style).

const T = {
  bg: "#1a1815",
  fg: "#e6e4dd",
  muted: "#8a867c",
  faint: "#5f5b53",
  accent: "#d97757", // coral
  green: "#9bb072",
  line: "#33302b",
};
const MONO = { fontFamily: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace' };

// Twinkling asterisk — morphs through star glyphs like Claude Code's spinner.
function Sparkle({ color = T.accent, size }) {
  const frames = ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % frames.length), 110);
    return () => clearInterval(id);
  }, []);
  return (
    <span aria-hidden="true" style={{ color, display: "inline-block", width: "1.1em", textAlign: "center", fontSize: size }}>
      {frames[i]}
    </span>
  );
}

// kalen@jordan:~$ <cmd>
function Prompt({ cmd, comment }) {
  return (
    <div style={{ ...MONO, fontSize: 14, marginTop: 44, lineHeight: 1.6 }}>
      <span style={{ color: T.green }}>kalen@jordan</span>
      <span style={{ color: T.muted }}>:</span>
      <span style={{ color: "#7aa2c4" }}>~</span>
      <span style={{ color: T.muted }}>$ </span>
      <span style={{ color: T.fg }}>{cmd}</span>
      {comment && <span style={{ color: T.faint }}>{"  # " + comment}</span>}
    </div>
  );
}

function ExtLink({ href, label }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer"
       className="term-link"
       style={{ ...MONO, color: T.accent, textDecoration: "none" }}>
      {label} <span style={{ color: T.faint }}>↗</span>
    </a>
  );
}

function projectLinks(p) {
  const out = [];
  if (p.links.site) out.push(["site", p.links.site]);
  if (p.links.github) out.push(["github", p.links.github]);
  if (p.links.x) out.push(["x", p.links.x]);
  if (p.links.tweet && !p.links.x) out.push(["x", p.links.tweet]);
  return out;
}

// Subtle "[ img ]" affordance that expands a screenshot inline — keeps the
// text-only feel until you ask for the picture.
function MediaReveal({ media }) {
  const [open, setOpen] = React.useState(false);
  const label = media.label || "image";
  return (
    <>
      <span style={{ color: T.line }}>|</span>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="term-link"
        aria-expanded={open}
        style={{ ...MONO, background: "none", border: "none", padding: 0, cursor: "pointer",
                 color: T.accent, fontSize: "inherit", letterSpacing: "0.02em" }}>
        <span style={{ display: "inline-block", width: "0.9em", color: T.faint,
                       transform: open ? "rotate(90deg)" : "none", transition: "transform 0.15s" }}>▸</span>
        {label}
      </button>
      {open && (
        <div style={{ flexBasis: "100%", width: "100%", marginTop: 10 }}>
          <a href={media.src} target="_blank" rel="noopener noreferrer"
             style={{ display: "block", border: `1px solid ${T.line}`, borderRadius: 6, overflow: "hidden" }}>
            <img src={media.src} alt={`${label} preview`} loading="lazy"
                 style={{ display: "block", width: "100%", height: "auto" }} />
          </a>
        </div>
      )}
    </>
  );
}

function Project({ p }) {
  const star = (p.status.match(/~?\d+★/) || [])[0];
  const links = projectLinks(p);
  return (
    <div style={{ marginTop: 22 }}>
      {/* ⏺ name ............ year */}
      <div className="term-proj-head" style={{ ...MONO, fontSize: 15, display: "flex", alignItems: "baseline", gap: 12 }}>
        <span style={{ color: T.accent }}>⏺</span>
        <span style={{ color: T.fg, fontWeight: 500 }}>{p.name}</span>
        {star && <span style={{ color: T.green, fontSize: 12 }}>{star}</span>}
        <span style={{ flex: 1, borderBottom: `1px dotted ${T.line}`, transform: "translateY(-4px)" }} />
        <span style={{ color: T.muted, fontSize: 12 }}>{p.year}</span>
      </div>
      {/* ⎿ description + meta */}
      <div className="term-proj-body" style={{ ...MONO, fontSize: 13.5, lineHeight: 1.65, color: T.muted, paddingLeft: 24, marginTop: 4 }}>
        <span style={{ color: T.faint }}>⎿ </span>
        <span style={{ color: "#c9c5bb" }}>{p.oneLiner}</span>
        <div style={{ marginTop: 6, display: "flex", flexWrap: "wrap", gap: 10, alignItems: "baseline" }}>
          <span style={{ color: T.faint }}>{p.stack.join(" · ")}</span>
          {links.map(([label, href]) => (
            <React.Fragment key={href}>
              <span style={{ color: T.line }}>|</span>
              <ExtLink href={href} label={label} />
            </React.Fragment>
          ))}
          {p.media && <MediaReveal media={p.media} />}
        </div>
      </div>
    </div>
  );
}

const EXPERIENCE = [
  { years: "2024 — now", company: "Kalen Jordan Consulting", role: "Senior Software Engineer", tag: "current",
    note: "Shopify Plus commerce engineering, integrations, automation, and AI — primarily for a Shopify Platinum Partner." },
  { years: "2023 — 24", company: "MESA (ShopPad)", role: "Platform Advocate",
    note: "Built hundreds of Shopify automations — merchant work, technical demos, and content." },
  { years: "2016 — 23", company: "Commerce Hero", role: "Founder",
    note: "Two-sided marketplace for hiring ecommerce developers — grew to mid-five-figures/mo recurring revenue." },
  { years: "2013 — 16", company: "MageMail", role: "Founder", tag: "acquired",
    note: "Lifecycle email-marketing SaaS for ecommerce merchants — built, grew, and exited via acquisition." },
  { years: "2000 — 13", company: "Earlier", role: "",
    note: "Lead Platform Engineer at Smile.io, agency & in-house web roles, and a NASA JPL internship (Java)." },
];

function Role({ r }) {
  const tagColor = r.tag === "acquired" ? T.accent : T.green;
  return (
    <div className="term-role" style={{ ...MONO, display: "flex", gap: 18, marginTop: 18 }}>
      <span style={{ color: T.accent, fontSize: 12.5, width: 86, flexShrink: 0, paddingTop: 2, lineHeight: 1.5 }}>{r.years}</span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14.5, display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: 8 }}>
          <span style={{ color: T.fg, fontWeight: 500 }}>{r.company}</span>
          {r.role && <span style={{ color: T.muted, fontSize: 13 }}>· {r.role}</span>}
          {r.tag && <span style={{ color: tagColor, fontSize: 11 }}>[ {r.tag} ]</span>}
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.6, color: T.muted, marginTop: 3 }}>
          <span style={{ color: T.faint }}>⎿ </span>{r.note}
        </div>
      </div>
    </div>
  );
}

function HomePage() {
  const projects = PROJECTS.filter((p) => p.era === "shopify");

  return (
    <div className="term">
      {/* Welcome box — Claude Code style */}
      <div style={{ border: `1px solid ${T.accent}`, borderRadius: 8, padding: "18px 22px", ...MONO }}>
        <div style={{ fontSize: 16, color: T.fg }}>
          <Sparkle />&nbsp;Kalen Jordan
        </div>
        <div style={{ fontSize: 13, color: T.muted, marginTop: 8, lineHeight: 1.6 }}>
          commerce engineer &middot; builds in public &middot; austin, tx
        </div>
      </div>

      {/* whoami */}
      <Prompt cmd="whoami" />
      <p style={{ ...MONO, fontSize: 14.5, lineHeight: 1.75, color: T.fg, margin: "10px 0 0", maxWidth: 660 }}>
        Commerce engineer focused on the Shopify ecosystem. I ship open-source
        tools, apps, and AI-assisted automation that real merchants and agencies
        use &mdash; out loud, almost daily.
      </p>

      {/* projects */}
      <Prompt cmd="ls ~/projects" comment={`${projects.length} shipped`} />
      <div style={{ marginTop: 10 }}>
        {projects.map((p) => <Project key={p.id} p={p} />)}
      </div>
      <p style={{ ...MONO, fontSize: 12.5, lineHeight: 1.7, color: T.faint, margin: "26px 0 0", paddingLeft: 24 }}>
        # earlier: years of open-source developer tooling in the Magento ecosystem
      </p>

      {/* experience */}
      <Prompt cmd="cat experience.txt" />
      <div style={{ marginTop: 10 }}>
        {EXPERIENCE.map((r) => <Role key={r.company} r={r} />)}
      </div>

      {/* writing */}
      <Prompt cmd="ls ~/writing" />
      <div style={{ ...MONO, fontSize: 14, lineHeight: 1.8, marginTop: 10 }}>
        <a href="/posts/" className="term-link" style={{ color: T.accent, textDecoration: "none" }}>
          Read my notes on AI, software, ecommerce, and building in public →
        </a>
      </div>

      {/* contact */}
      <Prompt cmd="cat contact.txt" />
      <div style={{ ...MONO, fontSize: 14, lineHeight: 2, marginTop: 10 }}>
        {[
          ["email", CONTENT.email, `mailto:${CONTENT.email}`, false],
          ["github", "github.com/kalenjordan", CONTENT.social.github, true],
          ["x", "x.com/kalenjordan", CONTENT.social.x, true],
          ["linkedin", "linkedin.com/in/kalen", CONTENT.social.linkedin, true],
        ].map(([k, label, href, ext]) => (
          <div key={k} style={{ display: "flex", gap: 16 }}>
            <span style={{ color: T.muted, width: 90, flexShrink: 0 }}>{k}</span>
            {ext
              ? <ExtLink href={href} label={label} />
              : <a href={href} className="term-link" style={{ color: T.accent, textDecoration: "none" }}>{label}</a>}
          </div>
        ))}
      </div>

      {/* contact form */}
      <Prompt cmd="./say-hi.sh" />
      <div className="term-form" style={{ marginTop: 14, maxWidth: 560, border: `1px solid ${T.line}`, borderRadius: 8, padding: "8px 22px 24px" }}>
        <ContactForm palette="dark" />
      </div>

      {/* blinking cursor footer */}
      <div style={{ ...MONO, fontSize: 14, marginTop: 48, color: T.muted }}>
        <span style={{ color: T.green }}>kalen@jordan</span>
        <span style={{ color: T.muted }}>:</span>
        <span style={{ color: "#7aa2c4" }}>~</span>
        <span style={{ color: T.muted }}>$ </span>
        <Cursor color={T.accent} />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);