// site-parts-2.jsx — artwork, CV, footer (letter), lightbox, progress

const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// ── Artwork gallery ──────────────────────────────────────────
const Artwork = ({ onOpen }) => {
  const ARTWORKS = window.SITE_DATA.ARTWORKS;
  return (
    <section className="section art" id="art">
      <div className="section-head">
        <span className="section-num">¶ 004</span>
        <h2 className="section-title">Artwork.</h2>
        <span className="section-aside">vii plates · 2024</span>
      </div>

      <p className="art-pull">
        I paint the things <em>I can't say in code.</em> What follows is dense,
        loud, and intentionally so — the room you walk into after the index card.
      </p>

      <div className="plates">
        {ARTWORKS.map((a, i) => (
          <article
            key={a.n}
            className={`plate ${i % 2 === 1 ? 'flip' : ''}`}
            onClick={() => onOpen({ kind: 'art', i })}
          >
            <div className="plate-meta">
              <span className="plate-num">Plate {a.n} · of vii</span>
              <h3 className="plate-title">{a.t}</h3>
              <p className="plate-cap">{a.cap}</p>
              <div className="plate-spec">
                {a.spec.map(s => <span key={s}>{s}</span>)}
              </div>
            </div>
            <div className="plate-img">
              <img src={a.src} alt={a.t} loading="lazy" />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ── CV ────────────────────────────────────────────────────────
const CV = () => {
  const { EXPERIENCE, EDUCATION, SKILLS } = window.SITE_DATA;

  const Entry = ({ e }) => (
    <article className="cv-entry">
      <div className="cv-entry-head">
        <h4 className="cv-role">
          {e.role}
          {e.em ? (
            <>
              <br />
              <em>{e.em}</em>
            </>
          ) : null}
        </h4>
        <span className="cv-when">{e.when}</span>
      </div>
      <div className="cv-where">{e.where}</div>
      <ul className="cv-points">
        {e.points.map((pt, i) => <li key={i}>{pt}</li>)}
      </ul>
    </article>
  );

  return (
    <section className="section" id="cv">
      <div className="section-head">
        <span className="section-num">¶ 005</span>
        <h2 className="section-title">Curriculum.</h2>
        <span className="section-aside">long form · {new Date().getFullYear()}</span>
      </div>

      <div className="cv-grid">
        <div className="cv-col">
          <h3>/ experience</h3>
          {EXPERIENCE.map((e, i) => <Entry key={i} e={e} />)}
        </div>
        <div className="cv-col">
          <h3>/ education</h3>
          {EDUCATION.map((e, i) => <Entry key={i} e={e} />)}
        </div>
      </div>

      <div className="skills-grid">
        {SKILLS.map(s => (
          <div className="skill-group" key={s.h}>
            <h4>{s.h}</h4>
            <p>{s.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ── Footer / Letter ──────────────────────────────────────────
const Foot = () => {
  const [form, setForm] = useState2({ name: '', email: '', message: '' });
  const [sent, setSent] = useState2(false);
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const send = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    const subject = encodeURIComponent(`Hello from ${form.name}`);
    const body = encodeURIComponent(`${form.message}\n\n— ${form.name}\n${form.email}`);
    window.location.href = `mailto:dharmpratapv@gmail.com?subject=${subject}&body=${body}`;
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ name: '', email: '', message: '' }); }, 4000);
  };

  const ELSEWHERE = window.SITE_DATA.ELSEWHERE;
  const year = new Date().getFullYear();

  return (
    <footer className="foot" id="contact">
      <div className="letter-wrap">
        <div className="letter-head">
          <span className="num">¶ 006</span>
          <span className="kicker">Write a letter</span>
          <span className="num-r">to: dharmpratapv@gmail.com</span>
        </div>
        <form className="letter" onSubmit={send}>
          <p className="letter-line">
            <span className="letter-label">Dear Dharmpratap,</span>
          </p>
          <p className="letter-line">
            <span className="letter-label">my name is</span>
            <input
              className="letter-input name" type="text" required
              value={form.name} onChange={update('name')}
              placeholder="your name"
            />
            <span className="letter-label">and you can find me at</span>
            <input
              className="letter-input email" type="email" required
              value={form.email} onChange={update('email')}
              placeholder="email@somewhere.com"
            />
            <span className="letter-label">.</span>
          </p>
          <p className="letter-line msg">
            <span className="letter-label">I'm writing because</span>
          </p>
          <textarea
            className="letter-textarea" rows={4} required
            value={form.message} onChange={update('message')}
            placeholder="…tell me what's on your mind. a role, a project, a print you want from the gallery, a film you'd like developed in conversation."
          />
          <div className="letter-foot">
            <span className="letter-sig">— signed, with intent</span>
            <button type="submit" className="letter-send" disabled={sent}>
              {sent ? '✓ Letter sealed' : 'Send letter →'}
            </button>
          </div>
        </form>
      </div>

      <div className="elsewhere">
        {ELSEWHERE.map(e => (
          <a key={e.label} href={e.href} target={e.href.startsWith('http') ? '_blank' : undefined} rel="noopener">
            <span className="elsewhere-label">{e.label}</span>
            <span className="elsewhere-handle">{e.handle}</span>
          </a>
        ))}
      </div>

      <div className="foot-bar">
        <span>·</span><span>made by hand</span>
        <span>·</span><span>{year}</span>
        <span>·</span><span>set in Instrument Serif &amp; JetBrains Mono</span>
        <span>·</span><span>thanks for scrolling</span>
        <span>·</span><span>© DSV</span>
        <span>·</span>
      </div>
      <h3 className="mega">Dharmpratap<em>Singh</em>Vaghela.</h3>
    </footer>
  );
};

// ── Lightbox ──────────────────────────────────────────────────
const Lightbox = ({ open, onClose }) => {
  useEffect2(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  if (!open) return null;
  const { kind, i } = open;
  const list = kind === 'art' ? window.SITE_DATA.ARTWORKS : window.SITE_DATA.PHOTOS;
  const item = list[i];
  if (!item) return null;
  return (
    <div className="lb is-open" onClick={onClose}>
      <img src={item.src} alt={item.t} />
      <div className="lb-meta">
        <span>{kind === 'art' ? `Plate ${item.n} · ${item.t}` : `№ ${item.n} · ${item.t}`}</span>
        <span>{kind === 'art' ? item.spec.join(' · ') : `${item.place} · ${item.d}`}</span>
      </div>
    </div>
  );
};

// ── Scroll progress ──────────────────────────────────────────
const Progress = () => {
  const ref = useRef2(null);
  useEffect2(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? h.scrollTop / max : 0;
      if (ref.current) ref.current.style.transform = `scaleX(${p})`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div className="progress" ref={ref}></div>;
};

window.SiteParts2 = { Artwork, CV, Foot, Lightbox, Progress };