/* views.jsx — the four views. Exported to window for app.jsx to compose. */
const { useState, useEffect, useRef, useCallback } = React;

/* Slow scroll-reveal. Honors reduced-motion (renders visible immediately). */
function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setShown(true); return; }
    const el = ref.current;
    if (!el) return;
    let done = false;
    const reveal = () => {
      if (done) return;
      done = true; setShown(true);
      window.removeEventListener("scroll", check, true);
      window.removeEventListener("resize", check);
    };
    const check = () => {
      if (done) return;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.94 && r.bottom > -40) reveal();
    };
    check();
    window.addEventListener("scroll", check, true);
    window.addEventListener("resize", check);
    const safety = setTimeout(reveal, 1500); // never leave content hidden
    return () => {
      window.removeEventListener("scroll", check, true);
      window.removeEventListener("resize", check);
      clearTimeout(safety);
    };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={className}
      style={{ ...style, opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : "translateY(14px)",
        transition: `opacity 1.1s cubic-bezier(.22,.61,.36,1) ${delay}ms, transform 1.1s cubic-bezier(.22,.61,.36,1) ${delay}ms` }}>
      {children}
    </Tag>
  );
}

/* ---------- Work: a calm timeline ---------- */
function WorkView({ work, profile }) {
  return (
    <div className="view work">
      <Reveal as="header" className="work-head">
        <h1 className="work-title">Work</h1>
        <p className="work-sub">A living record — roles, study, and writing, kept as a timeline rather than a grid.</p>
      </Reveal>

      {work.map((sec, si) => (
        <Reveal as="section" className="work-section" key={sec.section} delay={si === 0 ? 0 : 0}>
          <h2 className="work-section-label">{sec.section}</h2>
          <div className="work-items">
            {sec.items.map((it, i) => (
              <div className="work-item" key={i}>
                <div className="work-period">{it.period}</div>
                <div className="work-detail">
                  <h3 className="work-role">
                    {it.link
                      ? <a className="work-link" href={it.link} target="_blank" rel="noopener noreferrer">{it.title}<span className="work-arr"> ↗</span></a>
                      : it.title}
                  </h3>
                  {it.org && <p className="work-org">{it.org}</p>}
                  {it.note && <p className="work-note">{it.note}</p>}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      ))}

      <Reveal as="footer" className="work-foot">
        <span className="foot-mark">了</span>
      </Reveal>
    </div>
  );
}

/* ---------- About / colophon ---------- */
function AboutView({ profile }) {
  const lang = (typeof useSiteLang === "function" ? useSiteLang() : (window.SITE_LANG || "en"));
  const about = profile.about || {};
  const paras = about[lang] || about.en || about.ms || [];
  const labels = {
    en: { write: "Write", elsewhere: "Elsewhere", located: "Located" },
    ms: { write: "E-mel", elsewhere: "Di tempat lain", located: "Berlokasi" },
    ja: { write: "メール", elsewhere: "その他", located: "所在地" },
  };
  const lab = labels[lang] || labels.en;

  return (
    <div className="view about">
      <Reveal as="div" className="about-inner">
        <figure className="about-portrait">
          <img src="assets/avatar.png?v=2" alt={profile.name} />
        </figure>
        <h1 className="about-name">{profile.name}</h1>
        <div className="about-prose">
          {paras.map((p, i) => <p key={i} className="prose">{p}</p>)}
        </div>
        <div className="about-contact">
          <div className="about-row">
            <span className="about-key">{lab.write}</span>
            <a className="about-val" href={`mailto:${profile.email}`}>{profile.email}</a>
          </div>
          <div className="about-row">
            <span className="about-key">{lab.elsewhere}</span>
            <a className="about-val" href={`https://${profile.site}`} target="_blank" rel="noreferrer">{profile.site}</a>
          </div>
          <div className="about-row">
            <span className="about-key">{lab.located}</span>
            <span className="about-val plain">{profile.place}</span>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

Object.assign(window, { Reveal, WorkView, AboutView });