// Shared content + helpers for all three homepage directions.
// Content is drawn from the real shaypalachy.com pages.

const SITE = {
  name: "Shay Palachy-Affek",
  role: "Head of AI at The Adanim Institute; Executive Director at Datahack; Lecturer at Tel Aviv University",
  updated: "Updated April 2026",
  // One confident sentence on the breadth.
  statement:
    "I build, lead, teach, and write at the intersection of AI, data science, and social impact — and help grow the community around it.",
  sections: [
    { n: "01", id: "about", title: "About", href: "about.html",
      blurb: "Who I am and the work I do, in one place." },
    { n: "02", id: "community", title: "Community", href: "https://www.shaypalachy.com/community.html",
      blurb: "Datahack, NLPH, and the programs I help run." },
    { n: "03", id: "code", title: "Code", href: "https://www.shaypalachy.com/code.html",
      blurb: "Open-source Python tools, maintained over years." },
    { n: "04", id: "data", title: "Data", href: "https://www.shaypalachy.com/data.html",
      blurb: "Datasets and data resources I curate and share." },
    { n: "05", id: "blog", title: "Blog", href: "https://www.shaypalachy.com/blog.html",
      blurb: "Writing on data science practice, AI, and MLOps." },
    { n: "06", id: "talks", title: "Talks", href: "https://www.shaypalachy.com/talks.html",
      blurb: "Speaking on applied ML, NLP, and data leadership." },
    { n: "07", id: "teaching", title: "Teaching", href: "https://www.shaypalachy.com/teaching.html",
      blurb: "Courses at Tel Aviv University and beyond." },
    { n: "08", id: "tools", title: "Tools", href: "https://www.shaypalachy.com/tools.html",
      blurb: "Apps and utilities I built to use myself." },
    { n: "09", id: "contact", title: "Contact", href: "contact.html",
      blurb: "Email and the public places where the work is easiest to follow." },
  ],
  highlights: [
    {
      lead: "Head of AI & Data",
      tail: (
        <React.Fragment>
          at <a href="https://adanim.org.il/" target="_blank" rel="noopener noreferrer">the Adanim Institute</a> — applying AI, data, and operational methods to social-welfare systems.
        </React.Fragment>
      ),
    },
    { lead: "Datahack co-founder", tail: "and executive director — Promoting diversity in data science and AI for social good in Israel." },
    { lead: "Lecturer", tail: "in Deep Learning, Natural Language Processing & Intro to Machine Learning at Tel Aviv University and the Academic College of Tel Aviv-Yaffo." },
    { lead: "Open-source maintainer", tail: "of pulearn, cachier, pdpipe and other projects." },
  ],
  footnotes: [
    "Previously VP Data Science at LeO; led data science at Neura and ZenCity; developer at Intel and Ravello (now Oracle Cloud).",
    "MBA, Tel Aviv University. Computer Science & Philosophy, The Hebrew University of Jerusalem.",
  ],
  social: [
    { label: "GitHub", href: "https://github.com/shaypal5", handle: "shaypal5" },
    { label: "Twitter", href: "https://twitter.com/shaypal5", handle: "@shaypal5" },
    { label: "LinkedIn", href: "https://linkedin.com/in/shaypalachy", handle: "shaypalachy" },
    { label: "Email", href: "contact.html", handle: "shay.palachy@gmail.com" },
  ],
};

// Understated portrait placeholder — subtle diagonal hatch + mono caption.
// `tone` controls the stripe/ink to match each direction's palette.
function Portrait({ size = 92, tone = {}, round = false, caption = true }) {
  const ink = tone.ink || "#141414";
  const stripe = tone.stripe || "rgba(20,20,20,0.07)";
  const bg = tone.bg || "#efece5";
  const id = "ph-" + Math.random().toString(36).slice(2, 8);
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", gap: 7, alignItems: "flex-start" }}>
      <div style={{
        width: size, height: size, position: "relative", overflow: "hidden",
        borderRadius: round ? "50%" : 2, background: bg,
        boxShadow: `inset 0 0 0 1px ${tone.line || "rgba(20,20,20,0.12)"}`,
      }}>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden="true">
          <defs>
            <pattern id={id} width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="7" stroke={stripe} strokeWidth="2.5" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill={`url(#${id})`} />
        </svg>
      </div>
      {caption && (
        <span className="mono-label" style={{ fontSize: 8.5, color: tone.muted || "#9a958b", letterSpacing: ".14em" }}>
          portrait
        </span>
      )}
    </div>
  );
}

// Real portrait. `variant`:
//   "framed"  → square/round photo with hairline ring (good on mono)
//   "cutout"  → transparent-bg head floating on the paper (editorial)
function Photo({ src, size = 104, round = false, grayscale = false, tone = {}, variant = "framed" }) {
  const filt = grayscale ? "grayscale(1) contrast(1.02)" : "none";
  if (variant === "cutout") {
    return (
      <img src={src} alt="Shay Palachy-Affek" style={{
        width: size, height: size, objectFit: "contain", objectPosition: "bottom",
        filter: filt, display: "block", mixBlendMode: "multiply",
      }} />
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: round ? "50%" : 2, overflow: "hidden",
      background: tone.bg || "#efece5",
      boxShadow: `inset 0 0 0 1px ${tone.line || "rgba(20,20,20,0.14)"}`,
    }}>
      <img src={src} alt="Shay Palachy-Affek" style={{
        width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%",
        filter: filt, display: "block",
      }} />
    </div>
  );
}

Object.assign(window, { SITE, Portrait, Photo });