/* global React */
const { useState, useEffect } = React;

// ============================================================
// About — image + cream card with biographical block
// ============================================================
function About() {
  return (
    <section id="about" className="section about-section">
      <div className="shell">
        <div className="section-tag mono">01 / about</div>
        <div className="section-head">
          <h2>Curious by default,<br /><em className="serif">engineer</em> by trade.</h2>
          <div className="meta">// PEC · Chandigarh<br />// CS · 2023 → 2027</div>
        </div>

        <div className="about-grid">
          <div className="about-portrait reveal">
            <div className="portrait-frame">
              <img src="assets/me.jpg" alt="Arman Chaudhary" />
              <div className="portrait-tag mono">SUBJECT · ARMAN_CHAUDHARY · 2026</div>
              <div className="portrait-corners"><i/><i/><i/><i/></div>
            </div>
            <div className="portrait-meta mono">
              <Row k="based"  v="chandigarh / in" />
              <Row k="dob"    v="2006·03·11" />
              <Row k="status" v="shipping" />
            </div>
          </div>

          <div className="about-copy">
            <p className="about-lead reveal">
              I'm <strong>Arman Chaudhary</strong> — an AI/ML & full-stack
              builder studying CS at Punjab Engineering College.
              I work at the seam where research meets product: deep learning
              models, AI agents, the occasional from-scratch transformer,
              and web apps that put them in front of real users.
            </p>

            <div className="about-pillars">
              <Pillar n="01" t="Product" d="Built ML features and data pipelines for Cvent's hotel and venue data, including clustering and cross-sell models." />
              <Pillar n="02" t="Service" d="AI agents in production at Powersmy.biz — building automation that businesses actually depend on." />
              <Pillar n="03" t="Research" d="CDR analysis, behavioral pattern mining, supervised learning for telecom + urban planning." />
              <Pillar n="04" t="Build" d="Open-source projects, hackathons, and from-scratch reimplementations of the things I want to understand." />
            </div>

            <div className="about-quote reveal delay-1">
              <span className="quote-mark serif">“</span>
              <blockquote>
                Curious enough to dig in, stubborn enough to finish.
              </blockquote>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function Row({ k, v }) {
  return (
    <div className="kv-row">
      <span>{k}</span>
      <span className="kv-dots" />
      <span>{v}</span>
    </div>
  );
}
function Pillar({ n, t, d }) {
  return (
    <div className="pillar reveal">
      <div className="pillar-num mono">{n}</div>
      <div className="pillar-body">
        <h4>{t}</h4>
        <p>{d}</p>
      </div>
    </div>
  );
}

// ============================================================
// Skills — categorized with proficiency bars
// ============================================================
const SKILL_GROUPS = [
  {
    cat: "AI / ML",
    items: [
      { n: "PyTorch",         y: "1y", p: 80 },
      { n: "Scikit-Learn",    y: "2y", p: 86 },
      { n: "Hugging Face",    y: "2y", p: 84 },
      { n: "LangChain / LangGraph", y: "2y", p: 84 },
      { n: "OpenCV",          y: "2y", p: 80 },
      { n: "Excel",      y: "3y", p: 80 },
    ],
  },
  {
    cat: "Web / Backend",
    items: [
      { n: "FastAPI",            y: "3y", p: 90 },
      { n: "React",          y: "2y", p: 88 },
      { n: "Node.js",          y: "2y", p: 82 },
      { n: "SQL",              y: "2y", p: 80 },
      { n: "Computer Networking", y: "3y", p: 76 },
      { n: "OS",               y: "3y", p: 74 },
    ],
  },
  {
    cat: "MLOps / Systems",
    items: [
      { n: "Docker",           y: "2y", p: 78 },
      { n: "GitHub Actions",   y: "2y", p: 80 },
      { n: "GCP",              y: "2y", p: 82 },
      { n: "Prometheus",       y: "2y", p: 76 },
      { n: "Grafana",          y: "2y", p: 76 },
      { n: "Git",              y: "3y", p: 92 },
    ],
  },
];

function Skills() {
  return (
    <section id="skills" className="section skills-section">
      <div className="shell">
        <div className="section-tag mono">02 / stack</div>
        <div className="section-head">
          <h2>The toolkit, in detail.</h2>
          <div className="meta">// 24 tools<br />// last updated 2026.05</div>
        </div>

        <div className="skills-grid">
          {SKILL_GROUPS.map((g, gi) => (
            <div key={g.cat} className="skill-col reveal" style={{ transitionDelay: `${gi * 0.08}s` }}>
              <div className="skill-col-head mono">
                <span>[{String(gi).padStart(2, "0")}]</span>
                <span>{g.cat}</span>
                <span className="skill-count">{g.items.length} tools</span>
              </div>
              <div className="skill-list">
                {g.items.map((s) => (
                  <div key={s.n} className="skill-row hover-target">
                    <div className="skill-line">
                      <span className="skill-name">{s.n}</span>
                      <span className="skill-y mono">{s.y}</span>
                    </div>
                    <div className="skill-bar">
                      <div className="skill-fill" style={{ width: s.p + "%" }} />
                      <div className="skill-ticks"><i/><i/><i/><i/><i/><i/><i/><i/><i/></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="skills-foot mono reveal">
          <span>// also dabbling</span>
          <span>· Triton kernels</span>
          <span>· CUDA</span>
          <span>· Rust</span>
          <span>· vLLM</span>
          <span>· Modal</span>
          <span>· Weights & Biases</span>
        </div>
      </div>
    </section>
  );
}

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