/* global React, ARCHIVE */
const { useState: useStateA, useEffect: useEffectA } = React;

// ============================================================
// ARCHIVE VIEW — the "PDF" that citations point to.
// ============================================================

function ArchiveView({ jumpTo, onBack }) {
  useEffectA(() => {
    if (!jumpTo) return;
    const el = document.getElementById(`archive-${jumpTo.replace(/^archive-/, "")}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 100;
      window.scrollTo({ top, behavior: "smooth" });
    }
  }, [jumpTo]);

  const [currentPage, setCurrentPage] = useStateA(1);
  useEffectA(() => {
    const onScroll = () => {
      const sections = document.querySelectorAll("[data-page]");
      let cur = 1;
      sections.forEach((s) => {
        if (s.getBoundingClientRect().top < 200) cur = Number(s.dataset.page);
      });
      setCurrentPage(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="archive">
      {/* cover */}
      <section data-page="1" style={{ minHeight: "70vh", display: "flex", flexDirection: "column", justifyContent: "center", borderBottom: "0.75px solid var(--rule)", paddingBottom: 80, marginBottom: 80 }}>
        <div className="label" style={{ marginBottom: 40 }}>The Archive — MMXXVI</div>
        <h1 style={{ fontSize: "clamp(48px, 9vw, 120px)", fontWeight: 300, letterSpacing: "-0.045em", lineHeight: 0.9, margin: 0 }}>
          Atishay<br/>Jain.
        </h1>
        <div style={{ marginTop: 40, fontSize: 18, color: "var(--muted)", maxWidth: 520 }}>
          A record of four years of product design. Selected work, side projects, process, and a handful of beliefs.
        </div>
        <div className="mono" style={{ marginTop: 80, fontSize: 10, letterSpacing: "0.2em", color: "var(--muted)", textTransform: "uppercase" }}>
          {ARCHIVE.meta.location} · Edition 01 · Updated {ARCHIVE.meta.updated}
        </div>
      </section>

      {/* contents */}
      <section data-page="1" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 24 }}>Contents</div>
        {ARCHIVE.sections.map((s) => (
          <a
            key={s.id}
            href={`#archive-${s.id}`}
            onClick={(e) => {
              e.preventDefault();
              const el = document.getElementById(`archive-${s.id}`);
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
            }}
            style={{
              display: "grid",
              gridTemplateColumns: "60px 1fr 60px",
              padding: "18px 0",
              borderTop: "0.75px solid var(--rule)",
              alignItems: "baseline",
            }}
          >
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)" }}>{s.no}</span>
            <span style={{ fontSize: 22, fontWeight: 300, letterSpacing: "-0.015em" }}>{s.title}</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)", textAlign: "right" }}>p.{String(s.page).padStart(2, "0")}</span>
          </a>
        ))}
        <div style={{ borderBottom: "0.75px solid var(--rule)" }} />
      </section>

      {/* Selected Work */}
      <section id="archive-01-selected-work" data-page="2" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 01 — p.02</div>
        <h2>Selected Work</h2>
        <div style={{ color: "var(--muted)", fontSize: 15, marginTop: 8, marginBottom: 48, maxWidth: 520 }}>
          Four case studies. Each given its own pages.
        </div>

        {ARCHIVE.work.map((w) => (
          <article
            key={w.id}
            id={`archive-${w.id}`}
            data-page={w.page}
            style={{ borderTop: "0.75px solid var(--rule)", padding: "48px 0" }}
          >
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 20 }}>
              p.{String(w.page).padStart(2, "0")} — {w.company} · {w.period}
            </div>
            <h3 style={{ fontSize: "clamp(28px, 4.5vw, 46px)", fontWeight: 300, letterSpacing: "-0.03em", margin: "0 0 12px" }}>
              {w.title}
            </h3>
            <div style={{ fontSize: 19, color: "var(--muted)", marginBottom: 32, maxWidth: 560 }}>{w.subtitle}</div>

            <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 32, marginBottom: 32, fontSize: 15 }}>
              <div className="label">Role</div><div>{w.role}</div>
              <div className="label">Tags</div><div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>{w.tags.join(" · ")}</div>
            </div>

            <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: "62ch", margin: "0 0 24px" }}>{w.summary}</p>

            <div className="label" style={{ marginTop: 32, marginBottom: 12 }}>Problem</div>
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "62ch", margin: 0 }}>{w.problem}</p>

            <div className="label" style={{ marginTop: 32, marginBottom: 12 }}>Approach</div>
            <ol style={{ paddingLeft: 20, margin: 0, fontSize: 16, lineHeight: 1.6 }}>
              {w.approach.map((a, i) => <li key={i} style={{ marginBottom: 6 }}>{a}</li>)}
            </ol>

            <div className="label" style={{ marginTop: 32, marginBottom: 12 }}>Impact</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 16, lineHeight: 1.7 }}>
              {w.impact.map((im, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "24px 1fr", paddingTop: 8, borderTop: i === 0 ? "0.75px solid var(--rule)" : "0" }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{im}</span>
                </li>
              ))}
            </ul>

            {w.deckUrl && (
              <div style={{ marginTop: 32 }}>
                <a
                  href={w.deckUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="mono"
                  style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#2563eb", borderBottom: "0.75px solid #2563eb", paddingBottom: 2 }}
                >
                  ↗ View Detailed Deck
                </a>
              </div>
            )}
          </article>
        ))}
      </section>

      {/* Side Projects */}
      <section id="archive-02-side-projects" data-page="18" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 02 — p.18</div>
        <h2>Side Projects</h2>
        <div style={{ color: "var(--muted)", fontSize: 15, marginTop: 8, marginBottom: 48, maxWidth: 520 }}>
          Weekends. Mostly small, mostly strange.
        </div>
        {ARCHIVE.side.map((s) => (
          <article key={s.id} id={`archive-${s.id}`} data-page={s.page} style={{ borderTop: "0.75px solid var(--rule)", padding: "40px 0" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 16 }}>
              p.{String(s.page).padStart(2, "0")} — {s.period}
            </div>
            <h3 style={{ fontSize: 28, fontWeight: 400, letterSpacing: "-0.02em", margin: "0 0 8px" }}>{s.title}</h3>
            <div style={{ fontSize: 16, color: "var(--muted)", marginBottom: 20 }}>{s.subtitle}</div>
            {s.url && (
              <a href={`https://${s.url}`} target="_blank" rel="noreferrer" className="mono" style={{ display: "inline-block", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)", borderBottom: "0.75px solid var(--rule)", paddingBottom: 2, marginBottom: 20 }}>
                ↗ {s.url}
              </a>
            )}
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "62ch", margin: 0 }}>{s.summary}</p>
            {s.impact && (
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", fontSize: 14, color: "var(--muted)" }}>
                {s.impact.map((im, i) => <li key={i}>— {im}</li>)}
              </ul>
            )}
          </article>
        ))}
      </section>

      {/* About */}
      <section id="archive-03-about" data-page="22" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 03 — p.22</div>
        <h2>About</h2>
        <div style={{ borderTop: "0.75px solid var(--rule)", marginTop: 32, paddingTop: 32 }}>
          {ARCHIVE.about.body.map((b, i) => (
            <p key={i} style={{ fontSize: 17, lineHeight: 1.65, maxWidth: "62ch", margin: "0 0 16px" }}>{b}</p>
          ))}

          <div className="label" style={{ marginTop: 40, marginBottom: 16 }}>Career Arc</div>
          {ARCHIVE.about.phases.map((p, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "160px 1fr", borderTop: "0.75px solid var(--rule)", padding: "14px 0", fontSize: 15 }}>
              <span className="label" style={{ color: "var(--ink)" }}>{p.title}</span>
              <span>{p.detail}</span>
            </div>
          ))}

          <div className="label" style={{ marginTop: 40, marginBottom: 16 }}>What I Believe</div>
          {ARCHIVE.about.beliefs.map((b, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "40px 1fr", borderTop: "0.75px solid var(--rule)", padding: "14px 0", fontSize: 16 }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{String(i + 1).padStart(2, "0")}</span>
              <span>{b}</span>
            </div>
          ))}
        </div>
      </section>

      {/* How I Ship */}
      <section id="archive-04-how-i-ship" data-page="26" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 04 — p.26</div>
        <h2>How I Ship</h2>
        <p style={{ fontSize: 17, lineHeight: 1.65, maxWidth: "62ch", margin: "24px 0 40px", color: "var(--muted)" }}>
          The collaboration model developed at Tessell — a seven-phase loop across Product, UX, and Engineering.
        </p>
        <div style={{ borderTop: "0.75px solid var(--rule)" }}>
          {ARCHIVE.howIShip.phases.map((p, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "40px 1fr 200px", borderBottom: "0.75px solid var(--rule)", padding: "18px 0", fontSize: 16, alignItems: "baseline" }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{String(i + 1).padStart(2, "0")}</span>
              <div>
                <div style={{ fontSize: 18, fontWeight: 400, letterSpacing: "-0.015em" }}>{p.title}</div>
                <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 2 }}>{p.note}</div>
              </div>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)", textAlign: "right" }}>{p.who}</span>
            </div>
          ))}
        </div>

        <div className="label" style={{ marginTop: 56, marginBottom: 16 }}>Beyond the Screen</div>
        <p style={{ fontSize: 15, color: "var(--muted)", maxWidth: "62ch", margin: "0 0 24px" }}>
          Holistic CX — ways I contribute outside my own designs.
        </p>
        {ARCHIVE.howIShip.holisticCx.map((h, i) => (
          <div key={i} style={{ borderTop: "0.75px solid var(--rule)", padding: "18px 0" }}>
            <div style={{ fontSize: 17, fontWeight: 400, letterSpacing: "-0.015em", marginBottom: 4 }}>{h.title}</div>
            <div style={{ fontSize: 15, color: "var(--muted)", lineHeight: 1.55, maxWidth: "62ch" }}>{h.note}</div>
          </div>
        ))}
        <div style={{ borderBottom: "0.75px solid var(--rule)" }} />
      </section>

      {/* Leadership */}
      <section id="archive-05-leadership" data-page="30" style={{ marginBottom: 100 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 05 — p.30</div>
        <h2>Leadership</h2>
        <div style={{ marginTop: 32 }}>
          {ARCHIVE.leadership.body.map((b, i) => (
            <p key={i} style={{ fontSize: 17, lineHeight: 1.65, maxWidth: "62ch", margin: "0 0 16px" }}>{b}</p>
          ))}
          <div className="label" style={{ marginTop: 40, marginBottom: 16 }}>Pillars</div>
          {ARCHIVE.leadership.pillars.map((p, i) => (
            <div key={i} style={{ borderTop: "0.75px solid var(--rule)", padding: "20px 0" }}>
              <div style={{ display: "grid", gridTemplateColumns: "40px 1fr", alignItems: "baseline" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 400, letterSpacing: "-0.015em", marginBottom: 6 }}>{p.title}</div>
                  <div style={{ fontSize: 15, color: "var(--muted)", lineHeight: 1.6, maxWidth: "62ch" }}>{p.note}</div>
                </div>
              </div>
            </div>
          ))}
          <div style={{ borderBottom: "0.75px solid var(--rule)" }} />
        </div>
      </section>

      {/* Contact */}
      <section id="archive-06-contact" data-page="34" style={{ marginBottom: 80 }}>
        <div className="label" style={{ marginBottom: 12 }}>N° 06 — p.34</div>
        <h2>Contact</h2>
        <p style={{ fontSize: 17, lineHeight: 1.65, maxWidth: "62ch", margin: "24px 0 32px" }}>{ARCHIVE.contact.note}</p>
        <div style={{ borderTop: "0.75px solid var(--rule)" }}>
          {[
            ["Email", ARCHIVE.contact.email, `mailto:${ARCHIVE.contact.email}`],
            ["Twitter", ARCHIVE.contact.twitter, `https://x.com/${ARCHIVE.contact.twitter.replace("@", "")}`],
            ["LinkedIn", ARCHIVE.contact.linkedin, `https://${ARCHIVE.contact.linkedin}`],
          ].map(([k, v, href]) => (
            <div key={k} style={{ display: "grid", gridTemplateColumns: "140px 1fr", borderBottom: "0.75px solid var(--rule)", padding: "18px 0", fontSize: 16 }}>
              <span className="label">{k}</span>
              <a href={href} target={k === "Email" ? "_self" : "_blank"} rel="noreferrer" style={{ color: "var(--ink)", borderBottom: "0.75px solid var(--rule)", paddingBottom: 1, width: "fit-content" }}>{v}</a>
            </div>
          ))}
        </div>
      </section>

      <div style={{ textAlign: "center", marginTop: 120, marginBottom: 40 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase" }}>
          — End of Archive —
        </div>
      </div>

      {currentPage > 1 && (
        <div className="page-no">
          <span>p.{String(currentPage).padStart(2, "0")} / 34</span>
          <span style={{ marginLeft: 24 }}>
            <button className="btn-ghost" onClick={onBack}>← Back to Search</button>
          </span>
        </div>
      )}
      {currentPage === 1 && (
        <div className="page-no" style={{ bottom: 16, background: "var(--paper)", padding: "6px 12px" }}>
          <button className="btn-ghost" onClick={onBack}>← Back to Search</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ArchiveView });