/* eslint-disable */
/* global React */

function Skills() {
  const cats = [
    { name: "Backend",   list: ["NestJS", "Node.js", "TypeScript", "REST APIs", "JWT", "OAuth2", "PassportJS", "Redis", "BullMQ", "Prisma", "TypeORM", "Socket.IO"] },
    { name: "Frontend",  list: ["React", "Next.js", "React Native", "Electron.js", "Tailwind CSS", "Three.js", "TanStack Query", "Zustand"] },
    { name: "Databases", list: ["PostgreSQL", "MongoDB", "MySQL", "Schema design", "ER diagrams", "Query optimisation"] },
    { name: "Cloud · DevOps", list: ["AWS ECS", "RDS", "S3", "CloudFront", "Elastic Beanstalk", "SNS", "SQS", "Azure Blob", "Azure App Service", "Docker", "Nginx", "PM2", "Git", "Retool", "Elasticsearch", "Kibana"] },
    { name: "Languages", list: ["Python", "Java", "C++", "TypeScript", "JavaScript"] },
    { name: "Integrations", list: ["OpenAI GPT-4o", "Microsoft Graph API", "BigBlueButton", "Microsoft Teams", "Shopify", "Meta", "TikTok Business", "Google Analytics", "Fyers Trading", "Auth0"] },
  ];
  return (
    <section id="stack" className="section" style={{paddingTop: 96, paddingBottom: 96}}>
      <div className="wrap">
        <div className="section-open">
          <div className="marker">06 — Toolbox</div>
          <h2 className="heading">What I reach for.</h2>
        </div>
        <div>
          {cats.map((c, i) => (
            <div key={i} className="skills-grid">
              <div>
                <div className="cat-name">{c.name}</div>
              </div>
              <div className="skills-list">
                {c.list.map((s, j) => <span key={j} className="skill-chip">{s}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Education() {
  return (
    <section className="section" style={{paddingTop: 88, paddingBottom: 88}}>
      <div className="wrap">
        <div className="section-open">
          <div className="marker">07 — Education</div>
          <div>
            <h2 className="heading"><em>IIIT</em> Delhi.</h2>
            <p className="lede">B.Tech in Computer Science &amp; Applied Mathematics · 2018 → 2022.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <div className="label-mono" style={{color: "color-mix(in oklab, var(--bg) 60%, transparent)"}}>08 — Let's talk</div>
        <h2 className="footer-headline" style={{marginTop: 24}}>
          I build the <em>backend</em> nobody else wants to.
        </h2>
        <div className="footer-grid">
          <div className="footer-col">
            <div className="lbl">Email</div>
            <div className="val"><a href="mailto:singharshdeep46@gmail.com">singharshdeep46@gmail.com</a></div>
          </div>
          <div className="footer-col">
            <div className="lbl">Phone</div>
            <div className="val">+91 8178 315 729</div>
          </div>
          <div className="footer-col">
            <div className="lbl">Live products</div>
            <div className="val" style={{fontSize: 20, lineHeight: 1.4}}>
              <a href="https://www.nightmarexi.com/" target="_blank" rel="noopener">nightmarexi.com ↗</a><br/>
              <a href="https://kitabey.com/" target="_blank" rel="noopener">kitabey.com ↗</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>ARSHDEEP SINGH · DELHI · IN</span>
          <span>PORTFOLIO · MMXXVI</span>
          <span>SET IN INSTRUMENT SERIF · GEIST · JETBRAINS MONO</span>
        </div>
      </div>
    </footer>
  );
}

window.Skills = Skills;
window.Education = Education;
window.Footer = Footer;