// File icons
function FileIcon({ kind }) {
  const colors = {
    md: "var(--num)", ts: "var(--fn)", tsx: "var(--fn)", json: "var(--str)",
    log: "var(--accent)", sh: "var(--kw)", yml: "var(--warn)", folder: "var(--fg-2)"
  };
  const label = { md: "M↓", ts: "TS", tsx: "TS", json: "{}", log: "≡", sh: "$_", yml: "Y" }[kind] || "•";
  return (
    <span className="icon" style={{
      width: 16, height: 16, display: "inline-grid", placeItems: "center",
      fontSize: 8.5, fontWeight: 700, color: colors[kind], fontFamily: "var(--mono)",
      border: "1px solid color-mix(in oklch, currentColor 28%, transparent)", borderRadius: 3,
      letterSpacing: "-0.05em"
    }}>{label}</span>
  );
}

// Hero / README
function ReadmeSection() {
  const [typedRoles, setTypedRoles] = React.useState("");
  const roles = ["Frontend Engineer", "UI Engineer", "TypeScript dev", "Design-system contributor"];
  const [roleIdx, setRoleIdx] = React.useState(0);
  const [phase, setPhase] = React.useState("typing");

  React.useEffect(() => {
    const current = roles[roleIdx];
    let t;
    if (phase === "typing") {
      if (typedRoles.length < current.length) {
        t = setTimeout(() => setTypedRoles(current.slice(0, typedRoles.length + 1)), 60);
      } else {
        t = setTimeout(() => setPhase("hold"), 1400);
      }
    } else if (phase === "hold") {
      t = setTimeout(() => setPhase("deleting"), 600);
    } else if (phase === "deleting") {
      if (typedRoles.length > 0) {
        t = setTimeout(() => setTypedRoles(current.slice(0, typedRoles.length - 1)), 28);
      } else {
        setPhase("typing");
        setRoleIdx((roleIdx + 1) % roles.length);
      }
    }
    return () => clearTimeout(t);
  }, [typedRoles, phase, roleIdx]);

  return (
    <div className="section" id="sec-readme">
      <h2 className="section-title"><span className="hash">#</span> README.md</h2>
      <div className="hero">
        <div className="prompt-line">
          <span className="tk-c">// last login: Sat 17 May, 09:14 — system ready</span>
        </div>
        <div className="prompt-line">
          <span className="at">zohaib</span>@<span className="host">portfolio</span>
          <span className="arrow">~ $</span>
          <span className="tk-c">whoami</span>
        </div>
        <h1>
          <span className="punc">&lt;</span>
          <span className="accent">Zohaib</span>
          <span>.Arshad</span>
          <span className="punc"> /&gt;</span>
        </h1>
        <div className="typed">
          <span className="tk-c">// role:</span>{" "}
          <span className="tk-a">{typedRoles}</span>
          <span className="caret thin" />
        </div>
        <div className="typed">
          <span className="tk-c">// based in:</span> <span className="tk-s">"Chemnitz, Germany"</span>
        </div>
        <div className="typed">
          <span className="tk-c">// experience:</span> <span className="tk-n">5</span><span className="tk-p">+</span>
          <span className="tk-c"> years · open to senior roles</span>
        </div>

        <div className="hero-summary">
          <span className="tk-c">/**</span><br/>
          <span className="tk-c"> * I build accessible, performant web interfaces.</span><br/>
          <span className="tk-c"> * Currently at Staffbase — design systems, real-time</span><br/>
          <span className="tk-c"> * features, performance &amp; WCAG 2.1 across surfaces.</span><br/>
          <span className="tk-c"> */</span>
        </div>

        <div className="meta">
          <span><span className="dot" /> available · {PROFILE.status}</span>
          <span><span className="tk-c">$</span> 5+ yrs · React · TS · Next</span>
          <span><span className="tk-c">$</span> Berlin / remote / hybrid</span>
        </div>
      </div>
    </div>
  );
}

// About
function AboutSection() {
  return (
    <div className="section" id="sec-about">
      <h2 className="section-title"><span className="hash">#</span> about.ts</h2>
      <div className="codeblock">
        <div><span className="tk-k">export const</span> <span className="tk-v">profile</span> <span className="tk-p">=</span> <span className="tk-p">{"{"}</span></div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">name</span><span className="tk-p">:</span> <span className="tk-s">"Zohaib Arshad"</span><span className="tk-p">,</span>
        </div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">role</span><span className="tk-p">:</span> <span className="tk-s">"Frontend Engineer"</span><span className="tk-p">,</span>
        </div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">location</span><span className="tk-p">:</span> <span className="tk-s">"Chemnitz, Germany"</span><span className="tk-p">,</span>
        </div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">yearsOfExperience</span><span className="tk-p">:</span> <span className="tk-n">5</span><span className="tk-p">,</span>
        </div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">focus</span><span className="tk-p">:</span> <span className="tk-p">[</span>
        </div>
        {[
          "scalable, accessible UI systems",
          "design-system contribution & ownership",
          "real-time features (WebSockets, optimistic UI)",
          "performance + WCAG 2.1 across product surfaces",
          "responsible use of AI in everyday dev",
        ].map((f, i) => (
          <div key={i} style={{ paddingLeft: 36 }}>
            <span className="tk-s">"{f}"</span><span className="tk-p">,</span>
          </div>
        ))}
        <div style={{ paddingLeft: 18 }}><span className="tk-p">],</span></div>

        <div style={{ paddingLeft: 18, marginTop: 6 }}>
          <span className="tk-c">/* short version */</span>
        </div>
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-f">summary</span><span className="tk-p">:</span> <span className="tk-s">`</span>
        </div>
        {PROFILE.summary.map((s, i) => (
          <div key={i} style={{ paddingLeft: 36, color: "var(--fg-1)", lineHeight: 1.7 }}>
            {s}
          </div>
        ))}
        <div style={{ paddingLeft: 18 }}>
          <span className="tk-s">`</span><span className="tk-p">,</span>
        </div>

        <div><span className="tk-p">{"}"}</span> <span className="tk-k">as const</span><span className="tk-p">;</span></div>
      </div>
    </div>
  );
}

// Experience as git log
function ExperienceSection() {
  return (
    <div className="section" id="sec-experience">
      <h2 className="section-title"><span className="hash">#</span> experience.log <span className="tk-c">— $ git log --oneline --graph</span></h2>
      <div className="gitlog">
        {EXPERIENCE.map((c) => (
          <div key={c.hash} className="commit">
            <div className="node" />
            <div>
              <div className="meta">
                <span className="hash">commit {c.hash}</span>
                <span className="branch">{c.branch}</span>
                <span>·</span>
                <span>{c.period}</span>
              </div>
              <div className="role">
                {c.role} <span className="tk-p">@</span> <span className="org">{c.company}</span>
                <span className="where"> · {c.where}</span>
              </div>
              <ul>
                {c.bullets.map((bl, i) => (
                  <li key={i}><b>{bl.b}</b>{bl.t}</li>
                ))}
              </ul>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }}>
                {c.tags.map((t) => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
          </div>
        ))}
        <div className="commit">
          <div className="node" style={{ borderColor: "var(--fg-2)" }} />
          <div>
            <div className="meta">
              <span className="hash" style={{ color: "var(--fg-2)" }}>commit 0000000</span>
              <span>·</span>
              <span>2018</span>
            </div>
            <div className="role" style={{ color: "var(--fg-2)" }}>
              <span className="tk-c">initial commit — career start</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Skills as JSON
function SkillsSection() {
  return (
    <div className="section" id="sec-skills">
      <h2 className="section-title"><span className="hash">#</span> skills.json</h2>
      <div className="codeblock">
        <div><span className="tk-p">{"{"}</span></div>
        <div className="skills-grid">
          {SKILLS.map((g, gi) => (
            <div key={g.key} className="skill-group" style={{ paddingLeft: 18 }}>
              <span className="key">"{g.key}"</span>
              <span className="tk-p">: </span>
              <span className="tk-p">[</span>
              <div className="chips">
                {g.items.map((it) => (
                  <span key={it} className="chip">{it}</span>
                ))}
              </div>
              <div style={{ marginTop: 4 }}>
                <span className="tk-p">]</span>{gi < SKILLS.length - 1 ? <span className="tk-p">,</span> : null}
              </div>
            </div>
          ))}
        </div>
        <div><span className="tk-p">{"}"}</span></div>
      </div>
    </div>
  );
}

// Projects
function ProjectsSection({ onTerm }) {
  return (
    <div className="section" id="sec-projects">
      <h2 className="section-title"><span className="hash">#</span> projects.tsx</h2>
      <div style={{ color: "var(--comment)", fontSize: 13, marginBottom: 14 }}>
        <span className="tk-c">// selected work — production features I led or contributed to</span>
      </div>
      <div className="projects">
        {PROJECTS.map((p) => (
          <div className="project" key={p.name} onClick={() => onTerm && onTerm(`cat projects/${p.name}.md`)}>
            <div className="ph">$ ./{p.name} <span className="tk-c">// {p.label}</span></div>
            <div className="name">
              <span className="tk-k">const</span>{p.name} <span className="tk-p">=</span> <span className="tk-k">function</span><span className="tk-p">()</span>
            </div>
            <div className="desc">{p.desc}</div>
            <div className="tags">{p.tags.map((t) => <span key={t}>{t}</span>)}</div>
            <div className="stats">
              {p.stats.map((s) => (
                <span key={s.k}>
                  <span className="tk-c">{s.k}:</span> <b>{s.v}</b>
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Education + Languages combined
function EducationSection() {
  return (
    <div className="section" id="sec-education">
      <h2 className="section-title"><span className="hash">#</span> education.yml</h2>
      <div className="codeblock">
        <div><span className="tk-k">education</span><span className="tk-p">:</span></div>
        {EDUCATION.map((e, i) => (
          <React.Fragment key={i}>
            <div style={{ paddingLeft: 18 }}>
              <span className="tk-p">- </span>
              <span className="tk-f">degree</span><span className="tk-p">:</span> <span className="tk-s">"{e.degree}"</span>
            </div>
            <div style={{ paddingLeft: 36 }}>
              <span className="tk-f">school</span><span className="tk-p">:</span> <span className="tk-s">"{e.school}"</span>
            </div>
            <div style={{ paddingLeft: 36 }}>
              <span className="tk-f">where</span><span className="tk-p">:</span> <span className="tk-s">"{e.where}"</span>
            </div>
            <div style={{ paddingLeft: 36 }}>
              <span className="tk-f">period</span><span className="tk-p">:</span> <span className="tk-n">{e.period}</span>
            </div>
          </React.Fragment>
        ))}
        <div style={{ marginTop: 12 }}>
          <span className="tk-k">languages</span><span className="tk-p">:</span>
        </div>
        {LANGUAGES.map((l, i) => (
          <div key={i} className="lang-row">
            <span className="tk-p">- </span>
            <span className="tk-s lang-name">"{l.name}"</span>
            <span className="tk-p">:</span>
            <span className="lang-bar">
              <span style={{ position: "absolute", inset: 0, width: `${l.pct}%`, background: "var(--accent)", borderRadius: 4 }} />
            </span>
            <span className="tk-c lang-level"># {l.level}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Contact
function ContactSection() {
  return (
    <div className="section" id="sec-contact">
      <h2 className="section-title"><span className="hash">#</span> contact.sh</h2>
      <div className="codeblock" style={{ marginBottom: 16 }}>
        <div><span className="tk-c">#!/usr/bin/env bash</span></div>
        <div><span className="tk-c"># reach me — i reply within ~24h</span></div>
        <div>
          <span className="tk-k">echo</span> <span className="tk-s">"hello@zohaib"</span> <span className="tk-p">|</span>{" "}
          <span className="tk-f">mail</span> <span className="tk-p">-s</span> <span className="tk-s">"let's build something"</span>{" "}
          <span className="tk-s">zohaibarshaddev@gmail.com</span>
        </div>
      </div>
      <div className="contact-grid">
        {CONTACT.map((c) => (
          <a key={c.lbl} className="contact-row" href={c.href} target="_blank" rel="noreferrer">
            <span className="ico">{c.icon}</span>
            <span style={{ display: "flex", flexDirection: "column" }}>
              <span className="lbl">// {c.lbl}</span>
              <span className="val">{c.val}</span>
            </span>
          </a>
        ))}
      </div>
      <div style={{ marginTop: 18, color: "var(--comment)", fontSize: 12 }}>
        <span className="tk-c">// process exited with code 0 — thanks for reading</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  FileIcon, ReadmeSection, AboutSection, ExperienceSection,
  SkillsSection, ProjectsSection, EducationSection, ContactSection,
});