/* ============================================================
   components.jsx — visual sections
   ============================================================ */
const { useState, useEffect, useRef } = React;
const D = window.PORTFOLIO;

/* ---------- scramble text hook ---------- */
const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&*+=<>/\\|".split("");
function ScrambleText({ text, className, speed = 1, start = true }) {
  const [out, setOut] = useState(start ? text.replace(/[^\s]/g, " ") : text);
  const raf = useRef(null);
  useEffect(() => {
    if (!start) { setOut(text); return; }
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setOut(text); return; }
    let frame = 0;
    const reveal = new Array(text.length).fill(0).map((_, i) => i * (2 / speed) + Math.random() * 8);
    const tick = () => {
      let done = true;
      const next = text.split("").map((ch, i) => {
        if (ch === " ") return " ";
        if (frame >= reveal[i]) return ch;
        done = false;
        return GLYPHS[(Math.random() * GLYPHS.length) | 0];
      }).join("");
      setOut(next);
      frame++;
      if (!done) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [text, start, speed]);
  return <span className={"scramble " + (className || "")}>{out}</span>;
}

/* ---------- reveal-on-scroll ---------- */
function Reveal({ children, className = "", as: Tag = "div", style }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <Tag ref={ref} className={"reveal " + className} style={style}>{children}</Tag>;
}

/* ---------- status bar ---------- */
function StatusBar() {
  const [clock, setClock] = useState("");
  useEffect(() => {
    const fmt = () => {
      const d = new Date();
      const p = (n) => String(n).padStart(2, "0");
      setClock(`${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`);
    };
    fmt(); const id = setInterval(fmt, 1000); return () => clearInterval(id);
  }, []);
  const go = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  return (
    <div className="statusbar">
      <div className="seg accent">{D.identity.handle}@{D.identity.host}</div>
      <div className="seg dim hide-sm">~/portfolio</div>
      <div className="seg navlink" onClick={() => go("work")}>work</div>
      <div className="seg navlink hide-sm" onClick={() => go("projects")}>lab</div>
      <div className="seg navlink hide-sm" onClick={() => go("operating-style")}>style</div>
      <div className="seg navlink" onClick={() => go("terminal")}>shell</div>
      <div className="spacer"></div>
      <div className="seg dim right hide-sm"><span className="status-dot"></span> online</div>
      <div className="seg dim right hide-sm">{D.identity.years}y uptime</div>
      <div className="seg right" style={{ color: "var(--accent)" }}>{clock}</div>
    </div>
  );
}

/* ---------- neofetch card ---------- */
const ASCII = `   ██████╗ ███╗  ██╗
   ██╔══██╗████╗ ██║
   ██████╔╝██╔██╗██║
   ██╔═══╝ ██║╚████║
   ██║     ██║ ╚███║
   ╚═╝     ╚═╝  ╚══╝`;

function Neofetch() {
  const i = D.identity;
  return (
    <div className="neofetch">
      <div className="nf-bar">
        <span className="tl"><i></i><i></i><i></i></span>
        <span className="ttl">— {i.handle}@{i.host}: ~ — neofetch</span>
      </div>
      <div className="nf-body">
        <pre className="nf-ascii">{ASCII}</pre>
        <div className="nf-info">
          <span className="k">{i.handle}</span><span className="v">@{i.host}</span>
          <div className="hr"></div>
          <span className="k">Role</span><span className="v">{i.role}</span>
          <span className="k">Stack</span><span className="v">Go · Python · C</span>
          <span className="k">Infra</span><span className="v">Solr · AWS · Airflow</span>
          <span className="k">Tools</span><span className="v">Agents · LLM compat · Devtools</span>
          <span className="k">Status</span><span className="v" style={{ color: "var(--accent)" }}>available for work</span>
          <div className="nf-swatch">
            <i style={{ background: "var(--bg-3)" }}></i>
            <i style={{ background: "var(--fg-faint)" }}></i>
            <i style={{ background: "var(--cyan)" }}></i>
            <i style={{ background: "var(--amber)" }}></i>
            <i style={{ background: "var(--red)" }}></i>
            <i style={{ background: "var(--accent)" }}></i>
            <i style={{ background: "var(--fg)" }}></i>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- hero ---------- */
function Hero({ booted }) {
  const i = D.identity;
  return (
    <section className="hero wrap" id="top">
      <div className="hero-grid">
        <div>
          <div className="kicker"><span className="dot"></span> SENIOR SOFTWARE ENGINEER · {i.location.toUpperCase()}</div>
          <h1 className="hero-name" style={{ marginTop: 20 }}>
            <div><ScrambleText text={i.first} start={booted} speed={1.1} /></div>
            <div className="l2"><ScrambleText text={i.last} start={booted} speed={0.85} /><span className="caret"></span></div>
          </h1>
          <p className="hero-role">I turn messy production search systems into <b>measured, cheaper, faster platforms</b>.</p>
          <p className="hero-summary"><b>5 years at the systems level.</b> Most recently: rebuilt Solr infra for a 100Cr+ record platform, made search quality measurable, and built LLM/devtool experiments around coding agents and API compatibility.</p>
          <div className="hero-cta">
            <a className="btn" href="#work">view case studies →</a>
            <a className="btn ghost" href="#projects">engineering lab</a>
            <a className="btn ghost" href={"mailto:" + D.contact.email}>get in touch</a>
          </div>
        </div>
        <Neofetch />
      </div>
    </section>
  );
}

/* ---------- metrics band (folded into Work) ---------- */
function MetricsBand() {
  return (
    <Reveal className="metrics" style={{ marginBottom: 22 }}>
      {D.metrics.map((m, k) => (
        <div className="metric" key={k}>
          <span className="mtag">{m.tag}</span>
          <div className="mnum">{m.num}<small>{m.suffix}</small></div>
          <div className="mlbl">{m.label.split("\n").map((l, j) => <div key={j}>{l}</div>)}</div>
        </div>
      ))}
    </Reveal>
  );
}

/* ---------- cases / work ---------- */
function Case({ c }) {
  return (
    <Reveal className="case">
      <div className="case-head">
        <div>
          <div className="case-co">{c.co}</div>
          <div className="case-name"><span className="accent">{c.name}</span></div>
          <p className="case-blurb">{c.blurb}</p>
        </div>
        <div className="case-meta">
          <div className="role">{c.role}</div>
          <div>{c.dates}</div>
        </div>
      </div>
      <div className="case-body">
        <div className="case-points">
          {c.points.map((p, k) => (
            <div className="cpoint" key={k}>
              <span className="arrow">→</span>
              <span className="ctext" dangerouslySetInnerHTML={{ __html: p.t }}></span>
            </div>
          ))}
        </div>
        <div className="case-side">
          <div className="sh">// key results</div>
          {c.bigstats.map((b, k) => (
            <div className="bigstat" key={k}><span className="bn">{b.n}</span><span className="bl">{b.l}</span></div>
          ))}
          <div className="sh" style={{ marginTop: 22 }}>// stack</div>
          <div className="stack-chips">
            {c.stack.map((s, k) => <span className="chip" key={k}>{s}</span>)}
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function Work() {
  return (
    <section className="section" id="work">
      <div className="wrap section-pad">
        <Reveal className="section-head">
          <div>
            <div className="kicker"><span className="idx">01</span> / CASE STUDIES</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>Systems I made <span className="accent">measurable</span>.</h2>
          </div>
          <div className="mlabel">$ ls -la ./work</div>
        </Reveal>
        <MetricsBand />
        {D.cases.map((c, k) => <Case c={c} key={k} />)}
      </div>
    </section>
  );
}

/* ---------- git log experience ---------- */
function GitLog() {
  return (
    <section className="section" id="experience">
      <div className="wrap section-pad">
        <Reveal className="section-head">
          <div>
            <div className="kicker"><span className="idx">05</span> / CAREER SNAPSHOT</div>
            <h2 className="section-title" style={{ marginTop: 14 }}><span className="accent">git</span> log --career</h2>
          </div>
          <div className="mlabel">condensed, not the headline</div>
        </Reveal>
        <Reveal className="gitlog">
          <div className="gl-bar">$ git log --oneline --graph --author=<b>pulkit</b></div>
          {D.experience.map((e, k) => (
            <div className={"commit" + (e.head ? " head" : "")} key={k}>
              <div className="graph"><div className="node"></div></div>
              <div className="gc">
                <div className="hashrow">
                  <span className="hash">{e.hash}</span>
                  <span className="deco">{e.tags.map((t, j) => <span className={"tag" + (t === "HEAD" ? " head" : "")} key={j}>{t}</span>)}</span>
                </div>
                <div className="msg">{e.msg.includes("@") ? (<>{e.msg.split("@")[0]}<span className="at">@</span>{e.msg.split("@")[1]}</>) : e.msg}</div>
                <div className="author">Author: {e.author}</div>
                <div className="body">{e.body.map((b, j) => <div key={j}>{b}</div>)}</div>
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- projects ---------- */
function Projects() {
  return (
    <section className="section" id="projects">
      <div className="wrap section-pad">
        <Reveal className="section-head">
          <div>
            <div className="kicker"><span className="idx">02</span> / ENGINEERING LAB</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>Built to <span className="accent">understand</span>.</h2>
          </div>
          <div className="mlabel">$ ./projects --from-first-principles</div>
        </Reveal>
        <Reveal className="projects">
          {D.projects.map((p, k) => (
            <a className="proj" key={k} href={D.contact.githubUrl} target="_blank" rel="noreferrer">
              <div className="pcmd"><span className="prompt">$ </span>{p.cmd}</div>
              <div className="pname">{p.name}</div>
              <div className="pdesc">{p.desc}</div>
              <div className="pfoot">
                <span className="plang"><i style={{ background: p.color }}></i>{p.lang}</span>
                <span className="parrow">→</span>
              </div>
            </a>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- operating style ---------- */
function OperatingStyle() {
  return (
    <section className="section" id="operating-style">
      <div className="wrap section-pad">
        <Reveal className="section-head">
          <div>
            <div className="kicker"><span className="idx">03</span> / OPERATING STYLE</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>How I <span className="accent">work</span>.</h2>
          </div>
          <div className="mlabel">// less resume, more signal</div>
        </Reveal>
        <Reveal className="principles">
          {D.principles.map((p, k) => (
            <div className="principle" key={k}>
              <div className="pkey">[{p.k}]</div>
              <div className="pval">{p.v}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- skills manifest ---------- */
function Skills() {
  return (
    <section className="section" id="skills">
      <div className="wrap section-pad">
        <Reveal className="section-head">
          <div>
            <div className="kicker"><span className="idx">06</span> / STACK</div>
            <h2 className="section-title" style={{ marginTop: 14 }}><span className="accent">cat</span> skills.toml</h2>
          </div>
          <div className="mlabel">// the toolbox</div>
        </Reveal>
        <Reveal className="manifest">
          <div className="m-bar"><span>~/skills.toml</span><span>{D.skills.reduce((a, s) => a + s.vals.length, 0)} entries</span></div>
          {D.skills.map((s, k) => (
            <div className="mrow" key={k}>
              <div className="mkey"><span className="c">[</span>{s.key}<span className="c">]</span></div>
              <div className="mvals">{s.vals.map((v, j) => <span className="mval" key={j}>{v}</span>)}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- contact ---------- */
function Contact() {
  const c = D.contact;
  return (
    <section className="section" id="contact">
      <div className="wrap section-pad">
        <Reveal className="contact">
          <div className="contact-left">
            <div className="ssh"><span className="a">$</span> ssh {D.identity.handle}@available.now</div>
            <h2 className="contact-headline">Let's build<br />something fast.</h2>
            <p className="hero-summary" style={{ marginTop: 0 }}>Open to senior backend / systems / infra roles, and interesting LLM-tooling work. Connection's open.</p>
          </div>
          <div className="contact-links">
            <a className="clink" href={"mailto:" + c.email}><span className="ck">email</span><span className="cv">{c.email}</span><span className="cx">↗</span></a>
            <a className="clink" href={c.githubUrl} target="_blank" rel="noreferrer"><span className="ck">github</span><span className="cv">{c.github}</span><span className="cx">↗</span></a>
            <a className="clink" href={c.linkedinUrl} target="_blank" rel="noreferrer"><span className="ck">linkedin</span><span className="cv">{c.linkedin}</span><span className="cx">↗</span></a>
            <a className="clink" href={"tel:" + c.phone.replace(/\s/g, "")}><span className="ck">phone</span><span className="cv">{c.phone}</span><span className="cx">↗</span></a>
          </div>
        </Reveal>
        <div className="footer">
          <span>© {new Date().getFullYear()} {D.identity.name} — <span className="a">built from scratch, like everything else</span></span>
          <span>made with <span style={{ color: "var(--accent)" }}>&lt;/&gt;</span> · no template</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  ScrambleText, Reveal, StatusBar, Neofetch, Hero, MetricsBand, Work, GitLog, Projects, Skills, Contact,
  OperatingStyle,
});