// DIRECTION A — "The Index" (parametric)
// Editorial. A numbered table-of-contents is the hero. Print devices:
// hairline rules, mono numbering, footnotes, understated real portrait.
//
// Props let us explore the axes Shay is torn between:
//   palette   : "mono" | "warm"        — monochrome vs Atlantic warm paper
//   nowFirst  : bool                   — Selected/Now above the Contents
//   heroFont  : "newsreader" | "instrument" — literary serif vs B's voice
//   photo     : { variant, grayscale } — portrait treatment
//   foldFit   : bool                   — masthead + hero + Now compose to fill
//                                        exactly one desktop window; the
//                                        Contents section begins at the fold,
//                                        with a scroll hint + bottom padding.
//   foldHeight: number|null            — when set, the fold region is locked to
//                                        this pixel height (used inside the
//                                        static canvas to simulate a maximized
//                                        window). When null the live page uses
//                                        100dvh, so it tracks the real viewport.
//   heroLayout: "framed" | "flip"       — small framed portrait (top-right) vs
//                                        the big duotone square (T8b/T8d). No
//                                        terracotta block in flip here.
//   heroSide  : "left" | "right"        — which side the big square sits on
//                                        (right = right-aligned). flip only.

const A_PALETTES = {
  mono: {
    paper: "#fbfbf9", ink: "#141414", muted: "#6b6b6b", line: "#e3e1da",
    accent: "#141414", label: "#141414", rowHover: "#f2efe8",
    photoTone: { bg: "#efece5", line: "rgba(20,20,20,0.14)" },
  },
  warm: {
    paper: "#f7f4ee", ink: "#1c1813", muted: "#6f6657", line: "#e6e0d4",
    accent: "#b5532a", label: "#b5532a", rowHover: "#efeadf",
    photoTone: { bg: "#ece5d8", line: "rgba(28,24,19,0.14)" },
  },
};

function DirectionA(props) {
  const {
    palette = "mono",
    nowFirst = false,
    heroFont = "newsreader",
    photo = {},
    foldFit = false,
    foldHeight = null,
    heroLayout = "framed",
    heroSide = "left",
  } = props || {};
  const S = window.SITE;
  const P = A_PALETTES[palette] || A_PALETTES.mono;
  const { paper, ink, muted, line, accent, label } = P;
  const PAD = 92;
  const uid = React.useMemo(() => Math.random().toString(36).slice(2, 7), []);
  const photoVariant = photo.variant || "framed";
  const photoGray = photo.grayscale != null ? photo.grayscale : palette === "mono";
  const headFamily = heroFont === "instrument" ? "var(--display)" : "var(--serif)";
  let headSize = heroFont === "instrument" ? "clamp(46px, 6vw, 88px)" : 76;
  if (heroLayout === "flip" && heroFont === "instrument") headSize = "clamp(42px, 4.6vw, 76px)";
  const headWeight = heroFont === "instrument" ? 400 : 400;
  const headLineHeight = heroFont === "instrument" ? 1.12 : 1.04;
  const sectionNumberWords = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
  const sectionCountWord = sectionNumberWords[S.sections.length] || String(S.sections.length);
  const sectionCountLabel = `${sectionCountWord} ${S.sections.length === 1 ? "section" : "sections"}`.toUpperCase();

  const sup = (n) => (
    <a href={`#fn-${n}`} id={`fnref-${n}`} className="a-fnref" style={{ color: "inherit" }}>
      <sup style={{ fontFamily: "var(--mono)", fontSize: 11, color: muted, padding: "0 2px" }}>{n}</sup>
    </a>
  );

  // ── blocks ───────────────────────────────────────────────
  const Masthead = (
    <React.Fragment>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: `26px ${PAD}px 0` }}>
        <span className="mono-label" style={{ fontSize: 11, color: ink, letterSpacing: ".2em" }}>SHAY&nbsp;PALACHY&#8209;AFFEK</span>
        <nav className="a-nav mono-label" style={{ display: "flex", gap: 22, fontSize: 10.5, color: muted }}>
          {S.sections.map((s) => (<a key={s.id} href={s.href}>{s.title}</a>))}
        </nav>
      </div>
      <div style={{ height: 1, background: ink, margin: `18px ${PAD}px 0` }} />
    </React.Fragment>
  );

  // duotone for the big-square (flip) hero — neutral warm ink→cream
  const DuoDefs = (
    <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
      <defs>
        <filter id={`a-duoink-${uid}`} colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0 0 0 1 0" />
          <feComponentTransfer>
            <feFuncR tableValues="0.10 0.96" />
            <feFuncG tableValues="0.09 0.94" />
            <feFuncB tableValues="0.07 0.90" />
          </feComponentTransfer>
        </filter>
      </defs>
    </svg>
  );

  const HeroText = (
    <div style={{ flex: 1 }}>
      <div className="mono-label" style={{ fontSize: 10.5, color: muted, marginBottom: 28 }}>
        {S.updated} &nbsp;·&nbsp; Tel&nbsp;Aviv, Israel
      </div>
      <h1 style={{ fontFamily: headFamily, fontWeight: headWeight, fontSize: headSize, lineHeight: headLineHeight, letterSpacing: "-0.02em", margin: 0 }}>
        Shay Palachy<span style={{ color: muted }}>&#8209;</span>Affek
      </h1>
      <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300, fontSize: 26, color: muted, margin: "18px 0 0", letterSpacing: "-0.01em" }}>
        {S.role}
      </p>
      <p style={{ fontSize: 19, lineHeight: 1.62, maxWidth: 620, margin: "30px 0 0", color: palette === "warm" ? "#3a352d" : "#2a2a2a" }}>
        I build, lead, teach, and write at the intersection of AI, data
        science, and social impact{sup(1)} — and help grow the community around it.{sup(2)}
      </p>
    </div>
  );

  const BigSquare = (
    <div style={{ flexShrink: 0, width: 264, height: 312, position: "relative", background: P.photoTone.bg }}>
      <img src="images/portrait.png" alt="Shay Palachy-Affek" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 22%", display: "block", filter: `url(#a-duoink-${uid})` }} />
    </div>
  );

  const SmallFramed = (
    <div style={{ paddingTop: heroFont === "instrument" ? 30 : 40 }}>
      <Photo src="images/portrait.png" size={108} variant={photoVariant} grayscale={photoGray} tone={P.photoTone} />
    </div>
  );

  const Hero = (
    <div style={{ padding: `60px ${PAD}px 64px`, display: "flex", gap: 56, alignItems: "flex-start" }}>
      {DuoDefs}
      {heroLayout === "flip"
        ? (heroSide === "right"
            ? <React.Fragment>{HeroText}{BigSquare}</React.Fragment>
            : <React.Fragment>{BigSquare}{HeroText}</React.Fragment>)
        : <React.Fragment>{HeroText}{SmallFramed}</React.Fragment>}
    </div>
  );

  const Contents = (
    <div style={{ padding: `0 ${PAD}px` }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
        <span className="mono-label" style={{ fontSize: 11, color: label, letterSpacing: ".22em" }}>Contents</span>
        <span className="mono-label" style={{ fontSize: 10.5, color: muted }}>{sectionCountLabel}</span>
      </div>
      <div style={{ height: 1, background: ink }} />
      {S.sections.map((s) => (
        <a key={s.id} href={s.href} className="a-row" style={{ display: "block", borderBottom: `1px solid ${line}` }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 26, padding: "22px 14px 22px 0" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: muted, width: 30, flexShrink: 0 }}>{s.n}</span>
            <span className="a-title" style={{ fontFamily: "var(--serif)", fontSize: 34, fontWeight: 400, letterSpacing: "-0.015em", width: 230, flexShrink: 0 }}>{s.title}</span>
            <span style={{ fontSize: 16, color: muted, flex: 1, lineHeight: 1.5 }}>{s.blurb}</span>
            <span className="a-arrow" style={{ fontFamily: "var(--serif)", fontSize: 26, color: accent, flexShrink: 0 }}>&rarr;</span>
          </div>
        </a>
      ))}
    </div>
  );

  const Now = (
    <div style={{ padding: `0 ${PAD}px`, display: "flex", gap: 56 }}>
      <div style={{ width: 230, flexShrink: 0 }}>
        <span className="mono-label" style={{ fontSize: 10.5, color: label, letterSpacing: ".2em" }}>Selected&nbsp;/&nbsp;now</span>
      </div>
      <div style={{ flex: 1, maxWidth: 660 }}>
        {S.highlights.map((h, i) => (
          <div key={i} style={{ display: "flex", gap: 18, padding: "13px 0", borderBottom: i < S.highlights.length - 1 ? `1px solid ${line}` : "none" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: accent, paddingTop: 4 }}>&#8212;</span>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55 }}>
              <span style={{ fontWeight: 600 }}>{h.lead}</span> <span style={{ color: muted }}>{h.tail}</span>
            </p>
          </div>
        ))}
      </div>
    </div>
  );

  // Scroll cue that lives at the bottom of the fold window.
  const ScrollHint = (
    <div style={{ padding: `0 ${PAD}px`, display: "flex", alignItems: "center", gap: 16 }}>
      <span className="mono-label" style={{ fontSize: 10.5, color: muted, letterSpacing: ".22em" }}>Contents</span>
      <span style={{ flex: 1, height: 1, background: line }} />
      <span className="a-scrollcue" style={{ fontFamily: "var(--serif)", fontSize: 20, color: accent, display: "inline-flex" }}>&darr;</span>
    </div>
  );

  const Footnotes = (
    <div className="a-fn" style={{ padding: `52px ${PAD}px 0`, display: "flex", gap: 56 }}>
      <div style={{ width: 230, flexShrink: 0 }} />
      <div style={{ flex: 1, maxWidth: 660 }}>
        {S.footnotes.map((f, i) => (
          <p key={i} id={`fn-${i + 1}`} className="a-fnitem" style={{ display: "flex", gap: 12, fontSize: 13.5, lineHeight: 1.55, color: muted, margin: "0 0 12px", scrollMarginTop: 24 }}>
            <a href={`#fnref-${i + 1}`} className="a-fnback" style={{ color: accent }}>
              <sup style={{ fontFamily: "var(--mono)", fontSize: 11, paddingTop: 2 }}>{i + 1}</sup>
            </a>
            <span>{f}</span>
          </p>
        ))}
      </div>
    </div>
  );

  const Footer = (
    <div style={{ marginTop: 60 }}>
      <div style={{ height: 1, background: ink, margin: `0 ${PAD}px` }} />
      <div className="a-fn" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: `20px ${PAD}px 40px` }}>
        <div style={{ display: "flex", gap: 22 }} className="mono-label">
          {S.social.map((s) => (
            <a key={s.label} href={s.href} style={{ fontSize: 10.5, color: muted, letterSpacing: ".14em" }}>{s.label}</a>
          ))}
        </div>
        <span className="mono-label" style={{ fontSize: 10.5, color: muted }}>© 2026 &nbsp;·&nbsp; shaypalachy.com</span>
      </div>
    </div>
  );

  // The masthead+hero+Now "window" — fills exactly one viewport (or a simulated
  // fold height in the canvas), pushing the scroll cue to the bottom edge.
  const FoldWindow = (
    <div
      className="a-fold"
      style={{
        display: "flex",
        flexDirection: "column",
        minHeight: foldHeight != null ? foldHeight : "100dvh",
        height: foldHeight != null ? foldHeight : undefined,
        position: "relative",
      }}>
      {Masthead}
      {Hero}
      <div style={{ marginTop: 8 }}>{Now}</div>
      {/* elastic gap absorbs whatever viewport height remains */}
      <div style={{ flex: "1 1 auto", minHeight: 40 }} />
      <div style={{ paddingBottom: 34 }}>{ScrollHint}</div>
      {foldHeight != null && (
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, borderBottom: `1px dashed ${accent}`, opacity: 0.5 }} />
      )}
    </div>
  );

  return (
    <div className="page" style={{ fontFamily: "var(--grotesque)", background: paper, color: ink, width: "100%", minHeight: "100%", position: "relative", "--row-hover": P.rowHover, "--accent": accent }}>
      {/* faint margin column rules */}
      <div style={{ position: "absolute", top: 0, bottom: 0, left: PAD - 24, width: 1, background: line, opacity: .6 }} />
      <div style={{ position: "absolute", top: 0, bottom: 0, right: PAD - 24, width: 1, background: line, opacity: .6 }} />

      {foldFit ? (
        <React.Fragment>
          {FoldWindow}
          <div style={{ paddingTop: 64 }}>{Contents}</div>
          {Footnotes}
          {Footer}
        </React.Fragment>
      ) : (
        <React.Fragment>
          {Masthead}
          {Hero}
          {nowFirst && <div style={{ paddingBottom: 60 }}>{Now}</div>}
          {Contents}
          {!nowFirst && <div style={{ paddingTop: 70 }}>{Now}</div>}
          {Footnotes}
          {Footer}
        </React.Fragment>
      )}
    </div>
  );
}

window.DirectionA = DirectionA;