/* global React, window */
// ============================================================
// PAGE CONTENT COMPONENTS  (composed by book.jsx into spreads)
// ============================================================

function Motes({ n = 14 }) {
  const motes = React.useMemo(() => Array.from({ length: n }, () => ({
    left: Math.random() * 100, bottom: Math.random() * 40,
    dur: 8 + Math.random() * 10, delay: -Math.random() * 12, s: 2 + Math.random() * 3,
  })), [n]);
  return (
    <div className="motes" aria-hidden="true">
      {motes.map((m, i) => (
        <span key={i} className="mote" style={{
          left: m.left + "%", bottom: m.bottom + "%", width: m.s, height: m.s,
          animationDuration: m.dur + "s", animationDelay: m.delay + "s",
        }} />
      ))}
    </div>
  );
}

// ---------- Skills wheel ----------
function SkillsWheel({ t }) {
  const skills = t.skills;
  const N = skills.length;
  const R = 41;
  return (
    <div className="wheel-wrap">
      <p className="eyebrow" style={{ textAlign: "center" }}>{t.skillsTitle} · <span style={{ fontStyle: "italic", textTransform: "none", letterSpacing: 0 }}>{t.skillsSub}</span></p>
      <div className="wheel">
        <svg viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" strokeOpacity=".25" strokeWidth="1" />
          <circle cx="100" cy="100" r="70" fill="none" stroke="currentColor" strokeOpacity=".2" strokeWidth="1" strokeDasharray="2 4" />
          {skills.map((_, i) => {
            const a = (i / N) * Math.PI * 2 - Math.PI / 2;
            return <line key={i} x1={100 + 36 * Math.cos(a)} y1={100 + 36 * Math.sin(a)}
              x2={100 + 90 * Math.cos(a)} y2={100 + 90 * Math.sin(a)}
              stroke="currentColor" strokeOpacity=".22" strokeWidth="1" />;
          })}
        </svg>
        {skills.map((s, i) => {
          const a = (i / N) * Math.PI * 2 - Math.PI / 2;
          const x = 50 + R * Math.cos(a), y = 50 + R * Math.sin(a);
          return (
            <span key={i} style={{
              position: "absolute", left: x + "%", top: y + "%", transform: "translate(-50%,-50%)",
              fontFamily: "var(--mono)", fontSize: "8.5px", lineHeight: 1.1, textAlign: "center",
              width: "64px", color: "var(--realm-ink)",
            }}>{s}</span>
          );
        })}
        <div className="hub">
          <b>{t.skillsHub[0]}</b>
          <b style={{ fontSize: 13 }}>{t.skillsHub[1]}</b>
          <small>EST. 2024</small>
        </div>
      </div>
    </div>
  );
}

// ---------- ANALOG pages ----------
function PgWelcome({ t, lang }) {
  const { PixelTuxedoCat } = window;
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <div className="masthead">
        <div className="kicker">{t.fieldBook} · {t.place}</div>
        <h1 style={{ textWrap: "balance" }}>{t.name}</h1>
        <div className="sub">{t.role}</div>
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 6 }}>
        <span id="welcome-cat-anchor" style={{ display: "inline-block" }}><PixelTuxedoCat size={150} /></span>
        <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 22, margin: "8px 0 0" }}>{t.welcome}</h3>
        <p style={{ fontStyle: "italic", fontSize: 13.5, lineHeight: 1.6, maxWidth: "34ch", opacity: .85 }}>{t.catSays}</p>
      </div>
      <Motes n={12} />
      <span className="folio">i</span>
    </div>
  );
}

function PgRealms({ t, lang, go }) {
  const { REALMS } = window;
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <p className="eyebrow">{t.chapterOf} — {t.realmsTitle}</p>
      <h2 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(24px,4.4vh,38px)", margin: "0 0 6px", lineHeight: 1 }}>{t.realmsTitle}</h2>
      <p style={{ fontSize: 13, lineHeight: 1.6, opacity: .82, margin: "0 0 12px", maxWidth: "40ch" }}>{t.realmsLede}</p>
      <div className="toc">
        {REALMS.map((r, i) => (
          <button key={r.key} className={"toc-item " + (r.live ? "live" : "soon")}
            onClick={() => r.live && go(r.key)} disabled={!r.live}>
            <span className="toc-swatch" style={{ background: r.sw }} />
            <span className="toc-num">{String(i + 1).padStart(2, "0")}</span>
            <span className="toc-name">{lang === "ar" ? r.ar : r.en}</span>
            <span className="toc-tag">{r.live ? (r.key === "analog" ? t.here : "") : t.soon} {r.live && r.key !== "analog" ? "→" : ""}</span>
          </button>
        ))}
      </div>
      <span className="folio">ii</span>
    </div>
  );
}

function PgObjective({ t }) {
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <p className="eyebrow">{t.objectiveKicker}</p>
      <h2 style={{ fontSize: "clamp(26px,5vh,44px)", margin: "0 0 4px", lineHeight: .98 }}>{t.objectiveTitle}</h2>
      <div className="rule" />
      <div className="cols dropcap" style={{ marginTop: 4 }}>
        <p>{t.objective}</p>
        <p style={{ fontStyle: "italic", opacity: .8 }}>— {t.name}, {t.place}</p>
      </div>
      <Motes n={10} />
      <span className="folio">iii</span>
    </div>
  );
}

function ExperienceList({ t, items, heading, sub, folio }) {
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <p className="eyebrow">{t.expTitle}{sub ? " · " + sub : ""}</p>
      <h2 style={{ fontSize: "clamp(22px,4vh,32px)", margin: "0 0 8px", lineHeight: 1 }}>{heading}</h2>
      <div className="timeline">
        {items.map((e, i) => (
          <div className="tl-item" key={i}>
            <span className="stamp">{e.date}</span>
            <h3>{e.co} <span style={{ fontFamily: "var(--mono)", fontSize: 11, opacity: .6 }}>· {e.loc}</span></h3>
            <div className="role">{e.role}</div>
            <ul>{e.pts.map((p, j) => <li key={j}>{p}</li>)}</ul>
          </div>
        ))}
      </div>
      <span className="folio">{folio}</span>
    </div>
  );
}

function PgExperience1({ t, lang }) {
  return <ExperienceList t={t} items={t.expItems.slice(0, 2)} heading={t.expTitle}
    sub={lang === "ar" ? "الآن" : "now"} folio="iv" />;
}

function PgExperience2({ t, lang }) {
  return <ExperienceList t={t} items={t.expItems.slice(2)} heading={lang === "ar" ? "قبل ذلك" : "Before that"}
    sub={lang === "ar" ? "الأساس" : "the groundwork"} folio="v" />;
}

function PgSkills({ t }) {
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <SkillsWheel t={t} />
      <Motes n={9} />
      <span className="folio">vi</span>
    </div>
  );
}

function PgEducation({ t }) {
  return (
    <div className="analog" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
      <p className="eyebrow">{t.eduTitle}</p>
      <h2 style={{ fontSize: "clamp(22px,4vh,32px)", margin: "0 0 2px", lineHeight: 1 }}>{t.eduTitle}</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, flex: 1, justifyContent: "center" }}>
        {t.edu.map((e, i) => (
          <div className="diploma" key={i}>
            <div className="seal">{e.seal}</div>
            <h3 style={{ textWrap: "balance" }}>{e.t}</h3>
            <div style={{ fontStyle: "italic", fontSize: 13, opacity: .85 }}>{e.o}</div>
            <span className="stamp round" style={{ marginTop: 8 }}>{e.d}</span>
          </div>
        ))}
      </div>
      <span className="folio">vii</span>
    </div>
  );
}

window.Pages = { Motes, SkillsWheel, PgWelcome, PgRealms, PgObjective, PgExperience1, PgExperience2, PgSkills, PgEducation };