// site-parts-1.jsx — masthead, hero, about, work, photography

const { useState, useEffect, useRef, useCallback } = React;

// ── Masthead ──────────────────────────────────────────────────
const Masthead = () => {
  const [indexNo, setIndexNo] = useState(() => {
    const d = new Date();
    return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
  });
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      setIndexNo(`${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`);
    };
    tick();
    const id = setInterval(tick, 30000);
    return () => clearInterval(id);
  }, []);
  return (
    <header className="mast">
      <a href="#top" className="mast-mark">D<em>S</em>V</a>
      <div className="mast-meta">
        <span>Dharmpratap Singh Vaghela</span>
        <span>—</span>
        <span>Index № {indexNo}</span>
        <span>—</span>
        <span>Austin, TX</span>
      </div>
    </header>
  );
};

// ── Hero ──────────────────────────────────────────────────────
const Hero = () => (
  <section className="hero" id="top">
    <div className="hero-kicker">
      <span>¶ 000 — Frontmatter</span>
      <span className="rule"></span>
      <span>2018 → present</span>
    </div>
    <h1 className="hero-h1">
      Engineer of <em>quiet</em><br/>
      systems<span className="accword">,</span> maker of<br/>
      <em>loud</em> pictures.
    </h1>
    <div className="hero-foot">
      <p className="hero-lede">
        I'm <em>Dharmpratap</em> — an AI/ML engineer building production LLM
        infrastructure at Walacor. I write code I'd want to read, and I make
        paintings I'd want to live with. The site is split that way on purpose.
      </p>
      <div className="hero-actions">
        <a className="btn" href="#work">Read the index ↓</a>
        <a className="btn btn-ghost" href="assets/Vaghela_Resume.pdf" target="_blank" rel="noopener">Résumé · PDF</a>
      </div>
    </div>
    <div className="hero-tape" aria-hidden="true">
      <div className="hero-tape-track">
        {[...Array(2)].map((_, i) => (
          <React.Fragment key={i}>
            <span>Production LLM infra</span>
            <span>MCP servers</span>
            <span>Agentic systems</span>
            <span>Blockchain attestation</span>
            <span>Photography</span>
            <span>Painting</span>
            <span>Bayesian thinking</span>
            <span>Editorial type</span>
            <span>Slow software</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  </section>
);

// ── About / Index Card ────────────────────────────────────────
const About = () => (
  <section className="section" id="about">
    <div className="section-head">
      <span className="section-num">¶ 001</span>
      <h2 className="section-title">A short introduction.</h2>
      <span className="section-aside">on the record</span>
    </div>
    <div className="about">
      <div className="about-block">
        <span className="about-label">/ what I do</span>
        <div className="about-body">
          <p>
            I build the unglamorous parts of <em>AI infrastructure</em> — gateways,
            MCP servers, attestation pipelines, the plumbing nobody sees and
            everybody depends on. Currently at Walacor, shipping production
            systems on a blockchain platform.
          </p>
        </div>
      </div>
      <div className="about-block">
        <span className="about-label">/ what I make</span>
        <div className="about-body">
          <p>
            Outside the terminal, I take photographs and paint <em>digital pictures</em> —
            dense, vivid, sometimes frightening. I take both seriously, and try
            very hard not to be boring. The pictures help me see; the systems
            help me think.
          </p>
        </div>
      </div>
      <div className="about-block">
        <span className="about-label">/ where</span>
        <div className="about-body">
          <p>
            Northern Virginia, by way of <em>Ahmedabad</em>. M.S. Data Analytics
            Engineering from George Mason; B.Tech from Dharmsinh Desai. Coffee
            black, fonts serif, opinions firm but appealable.
          </p>
        </div>
      </div>
    </div>
  </section>
);

// ── Work — index list ─────────────────────────────────────────
const Work = () => {
  const [open, setOpen] = useState(null);
  const PROJECTS = window.SITE_DATA.PROJECTS;
  return (
    <section className="section" id="work">
      <div className="section-head">
        <span className="section-num">¶ 002</span>
        <h2 className="section-title">Index of work.</h2>
        <span className="section-aside">{PROJECTS.length} entries · selected</span>
      </div>
      <div className="work-list">
        {PROJECTS.map((p, i) => {
          const isOpen = open === i;
          return (
            <React.Fragment key={p.n}>
              <div
                className={`work-row ${isOpen ? 'is-open' : ''}`}
                onClick={() => setOpen(isOpen ? null : i)}
              >
                <span className="work-meta">{p.n}</span>
                <span className="work-meta">{p.y}</span>
                <span className="work-title">{p.t} <em>{p.em}</em></span>
                <span className="work-meta">{p.k}</span>
                <span className="work-meta">{p.metric}</span>
                <span className="work-arr">{isOpen ? '×' : '→'}</span>
              </div>
              <div className={`work-detail ${isOpen ? 'is-open' : ''}`}>
                <div className="work-detail-inner">
                  <div className="work-detail-grid">
                    <div className="work-detail-side">
                      <div className="row"><span>Role</span><strong>{p.role}</strong></div>
                      <div className="row"><span>When</span><strong>{p.when}</strong></div>
                      <div className="row"><span>Stack</span>
                        <div className="stack">
                          {p.stack.map(s => <span key={s} className="chip">{s}</span>)}
                        </div>
                      </div>
                    </div>
                    <div>
                      <h3>{p.t}</h3>
                      {p.body.map((para, j) => <p key={j}>{para}</p>)}
                    </div>
                  </div>
                </div>
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </section>
  );
};

// ── Photography filmstrip ─────────────────────────────────────
const Photography = ({ onOpen }) => {
  const PHOTOS = window.SITE_DATA.PHOTOS;
  return (
    <section className="section photo" id="photo">
      <div className="section-head">
        <span className="section-num">¶ 003</span>
        <h2 className="section-title">Photography <em>—&nbsp;a filmstrip.</em></h2>
        <span className="section-aside">scroll horizontally</span>
      </div>
      <div className="photo-strip">
        {PHOTOS.map((p, i) => (
          <figure
            key={p.n}
            className="frame"
            style={{ width: 'clamp(260px, 26vw, 420px)' }}
            onClick={() => onOpen({ kind: 'photo', i })}
          >
            <div className="frame-img" style={{ aspectRatio: '3/4' }}>
              <img src={p.src} alt={p.t} loading="lazy" />
            </div>
            <figcaption className="frame-cap">
              <span className="frame-num">№ {p.n}</span>
              <span className="place">{p.place}</span>
              <span>{p.d}</span>
            </figcaption>
          </figure>
        ))}
      </div>
      <div className="photo-foot">
        <span>← drag · or shift-scroll →</span>
        <span>{PHOTOS.length} frames</span>
      </div>
    </section>
  );
};

window.SiteParts1 = { Masthead, Hero, About, Work, Photography };