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

// ============================================================
// Experience — vertical timeline with sticky markers
// ============================================================
const EXPERIENCE = [
  {
    period: "01/2026 — present",
    role: "Data Science Intern",
    org: "Cvent",
    loc: "Gurgaon · IN",
    bullets: [
      "Built ML features and data pipelines for Cvent's platform.",
      "Shipped clustering and cross-sell models on hotel and venue data.",
      "Used SQL and Python for feature engineering and deployment.",
    ],
    tags: ["machine learning", "sql", "pandas"],
  },
  {
    period: "07/2025 — 10/2025",
    role: "AI Engineer Intern",
    org: "Powersmy.biz",
    loc: "Remote · IN",
    bullets: [
      "Built AI-agent automation systems for business workflows.",
      "Automated radiology scan-to-report for a diagnostics company.",
      "Used AI APIs to flag low-quality scans for rescan.",
    ],
    tags: ["gen ai", "automation", "llms"],
  },
  {
    period: "2025 — present",
    role: "Research Fellow",
    org: "Punjab Engineering College (PEC)",
    loc: "Chandigarh · IN",
    bullets: [
      "Analyzing DOT-funded CDR data for communication anomalies.",
      "Parsing large-scale CDR records with timestamps and geolocation.",
      "Using clustering, isolation forests, and time-series models.",
    ],
    tags: ["cdr", "anomaly detection", "time series"],
  },
  {
    period: "2023 — 2025",
    role: "Open-source builder",
    org: "Independent",
    loc: "Everywhere",
    bullets: [
      "From-scratch reimplementations: ResNet, GPT, transformer encoders.",
      "10+ projects across vision, NLP, RL, and full-stack web.",
      "Contributions across Hugging Face, GitHub, and personal repos.",
    ],
    tags: ["pytorch", "open source", "fundamentals"],
  },
];

function Experience() {
  return (
    <section id="experience" className="section experience-section">
      <div className="shell">
        <div className="section-tag mono">04 / experience</div>
        <div className="section-head">
          <h2>Where I've shipped.</h2>
          <div className="meta">// 04 roles<br />// 2023 → present</div>
        </div>

        <div className="exp-track">
          <div className="exp-spine" />
          {EXPERIENCE.map((e, i) => (
            <div key={i} className="exp-item reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="exp-marker">
                <div className="exp-marker-dot" />
                <div className="exp-marker-line" />
              </div>
              <div className="exp-content">
                <div className="exp-row exp-period mono">
                  <span>{e.period}</span>
                  <span className="exp-loc">{e.loc}</span>
                </div>
                <div className="exp-role">
                  <h3>{e.role}</h3>
                  <span className="exp-org mono">@ {e.org}</span>
                </div>
                <ul className="exp-bullets">
                  {e.bullets.map((b, bi) => <li key={bi}>{b}</li>)}
                </ul>
                <div className="exp-tags mono">
                  {e.tags.map((t) => <span key={t} className="exp-tag">[{t}]</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Hackathons — marquee + grid
// ============================================================
const HACKATHONS = [
  { n: "Smart India Hackathon", y: "2024", a: "Best AI Model" },
  { n: "Goldman Sachs India",   y: "2025", a: "Top 300" },
  { n: "Electrothon 7.0",       y: "2025", a: "Finalist" },
  { n: "HackJMI",               y: "2025" },
  { n: "HackMol",               y: "2025" },
  { n: "NightSprint",           y: "2024" },
  { n: "HackToHatch",           y: "2023" },
];

function Hackathons() {
  return (
    <section id="hackathons" className="section hackathons-section">
      <div className="shell">
        <div className="section-tag mono">05 / hackathons</div>
        <div className="section-head">
          <h2>07 hackathons,<br /><em className="serif">2 awards</em>, no sleep.</h2>
          <div className="meta">// avg sleep: 04h<br />// caffeine ≫ recommended</div>
        </div>
      </div>

      {/* Marquee strip */}
      <div className="hack-marquee">
        <div className="hack-track mono">
          {[...HACKATHONS, ...HACKATHONS, ...HACKATHONS].map((h, i) => (
            <span key={i} className="hack-mq-item">
              <span className="hack-mq-y">{h.y}</span>
              <span className="hack-mq-n">{h.n}</span>
              {h.a && <span className="hack-mq-a">★ {h.a}</span>}
              <span className="hack-mq-sep">/</span>
            </span>
          ))}
        </div>
      </div>

      <div className="shell">
        <div className="hack-grid">
          {HACKATHONS.map((h, i) => (
            <div key={i} className="hack-card reveal hover-target" style={{ transitionDelay: `${i * 0.04}s` }}>
              <div className="hack-card-head mono">
                <span>[{String(i + 1).padStart(2, "0")}]</span>
                <span>{h.y}</span>
              </div>
              <h4 className="hack-name">{h.n}</h4>
              {h.a ? (
                <div className="hack-award mono"><span className="star">★</span> {h.a}</div>
              ) : (
                <div className="hack-award mono dim">— participated</div>
              )}
              <div className="hack-corner">↗</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Testimonials — split slab
// ============================================================
const TESTIMONIALS = [
  {
    quote: "Arman ships. He'll have a working demo before most people have finished thinking about the problem — and the demo is good.",
    name: "Rahul Kumar",
    role: "AI Engineer · Powersmy.biz",
    img: "assets/rahul.jpg",
  },
  {
    quote: "We've hacked together at three events now. He's the person you want when the deadline is in four hours and the model isn't training.",
    name: "Abhipsit Bhojpai",
    role: "Hackathon Teammate",
    img: "assets/abhipsit.jpg",
  },
];

function Testimonials() {
  const [idx, setIdx] = useState(0);
  const t = TESTIMONIALS[idx];
  return (
    <section id="testimonials" className="section testimonials-section">
      <div className="shell">
        <div className="section-tag mono">06 / words</div>
        <div className="section-head">
          <h2>What people I've shipped with say.</h2>
          <div className="meta">// 02 references<br />// more on request</div>
        </div>

        <div className="t-slab">
          <div className="t-quote">
            <span className="t-mark serif">“</span>
            <blockquote key={idx}>{t.quote}</blockquote>
            <div className="t-attr mono">
              — <strong>{t.name}</strong> · {t.role}
            </div>
          </div>
          <div className="t-portrait">
            <img key={t.img} src={t.img} alt={t.name} />
            <div className="t-portrait-tag mono">REFERENCE / {String(idx + 1).padStart(2, "0")}</div>
          </div>
        </div>

        <div className="t-controls mono">
          <button className="t-btn hover-target" onClick={() => setIdx((idx - 1 + TESTIMONIALS.length) % TESTIMONIALS.length)}>← prev</button>
          <div className="t-dots">
            {TESTIMONIALS.map((_, i) => (
              <button key={i} className={"t-dot " + (i === idx ? "on" : "")} onClick={() => setIdx(i)} aria-label={"testimonial " + (i + 1)} />
            ))}
          </div>
          <button className="t-btn hover-target" onClick={() => setIdx((idx + 1) % TESTIMONIALS.length)}>next →</button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Connect (footer)
// ============================================================
const SOCIALS = [
  { n: "Email",     v: "armanchaudhary176001@gmail.com", url: "mailto:armanchaudhary176001@gmail.com" },
  { n: "GitHub",    v: "github.com/Arman176001",          url: "https://github.com/Arman176001" },
  { n: "LinkedIn",  v: "/in/arman-chaudhary",             url: "https://www.linkedin.com/in/arman-chaudhary/" },
  { n: "X / Twitter", v: "@ArmanChaud30997",              url: "https://x.com/ArmanChaud30997" },
  { n: "LeetCode",  v: "/u/Arman176",                     url: "https://leetcode.com/u/Arman176/" },
  { n: "Codeforces", v: "/armanchaudhary17",               url: "https://codeforces.com/profile/armanchaudhary17" },
  { n: "Kaggle",    v: "/armanchaudhary",                 url: "https://www.kaggle.com/armanchaudhary" },
  { n: "Codolio",   v:"/Arman176",                        url: "https://codolio.com/profile/Arman176"},
];

function Connect() {
  return (
    <section id="contact" className="section contact-section">
      <div className="shell">
        <div className="section-tag mono">07 / connect</div>
        <div className="section-head">
          <h2>Let's <em className="serif">build</em> something.</h2>
          <div className="meta">// open to: research<br />// internships · contract</div>
        </div>

        <div className="contact-grid">
          <div className="contact-pitch">
            <p className="contact-lead">
              I'm looking for the next thing — research collaborations, full time opportunities,
              and contract work where I can actually <em className="serif">ship</em>
              {" "}intelligent systems.
            </p>
            <a className="btn contact-btn" href="mailto:armanchaudhary176001@gmail.com">
              Say hello <span className="arrow" />
            </a>
          </div>
          <ul className="contact-list">
            {SOCIALS.map((s, i) => (
              <li key={s.n} className="contact-row reveal hover-target" style={{ transitionDelay: `${i * 0.04}s` }}>
                <a href={s.url} target="_blank" rel="noopener">
                  <span className="cr-num mono">{String(i + 1).padStart(2, "0")}</span>
                  <span className="cr-name">{s.n}</span>
                  <span className="cr-val mono">{s.v}</span>
                  <span className="cr-arrow">↗</span>
                </a>
              </li>
            ))}
          </ul>
        </div>

        <footer className="page-footer mono">
          <div>© 2026 · Arman Chaudhary · all rights reserved</div>
          <div>Last deploy · 2026.05.11 · build 0024</div>
          <div>Made with React, AI, and a lot of coffee.</div>
        </footer>
      </div>
    </section>
  );
}

Object.assign(window, { Experience, Hackathons, Testimonials, Connect });