/* Shared photo-integration system — loaded on every marketing page (after
   theme.jsx). Three ways to bring property imagery into a page:

   1. <Cine img scrim={CINE.HERO}>            full-bleed hero; header reveals on scroll
   2. <Cine img scrim={CINE.SOFT} blend="var(--bone)">  integrated background behind
        real content, softly darkened, FADING to the page colour at top + bottom so
        there is no hard "band" edge. White text sits over it.
   3. <PhotoSplit img side="right">           photo covers PART of the section (one
        side, masked/faded into the page) with text on the clean side — no text over
        photo, so it reads as an accent rather than a full background.

   A single global scroll handler drives a gentle parallax on every .cine-bg.
   Image assets live in /assets. Tower photos are reserved for the Our Team page. */

const CINE = {
  /* Full hero — directional + vertical scrim, white text fully legible. */
  HERO:
    "linear-gradient(100deg, rgba(6,12,24,0.82) 0%, rgba(6,12,24,0.50) 50%, rgba(6,12,24,0.26) 100%)," +
    "linear-gradient(180deg, rgba(6,12,24,0.30) 0%, rgba(6,12,24,0.62) 100%)",
  /* Soft integrated background (use with blend=) — lighter, photo stays present. */
  SOFT:
    "linear-gradient(100deg, rgba(7,12,22,0.80) 0%, rgba(7,12,22,0.52) 52%, rgba(7,12,22,0.30) 100%)",
  /* Towers (Our Team only). */
  TOWER:
    "linear-gradient(180deg, rgba(5,11,22,0.50) 0%, rgba(5,11,22,0.66) 60%, rgba(5,11,22,0.82) 100%)",
  TOWER2:
    "linear-gradient(180deg, rgba(5,11,22,0.60) 0%, rgba(5,11,22,0.74) 100%)",
  /* Centred closing CTA. */
  CTA:
    "linear-gradient(180deg, rgba(6,12,24,0.68) 0%, rgba(6,12,24,0.82) 100%)",
};
window.CINE = CINE;

/* Full-bleed / integrated photo section.
   - omit `blend` for a hero (full background to the section edges)
   - pass `blend="var(--bone)"` (or pearl) for an integrated mid-page background
     that fades to that colour at the top and bottom (no hard band edge). */
function Cine({ id, img, scrim = CINE.SOFT, minH = "92vh", align = "center", blend, padY = 88, children }) {
  return (
    <section id={id} className="cine" style={{ minHeight: minH, display: "flex", alignItems: align === "bottom" ? "flex-end" : "center" }}>
      <div className="cine-bg" style={{ backgroundImage: `url(${img})` }} aria-hidden="true" />
      <div className="cine-scrim" style={{ background: scrim }} aria-hidden="true" />
      {blend && <div className="cine-blend" style={{ background: `radial-gradient(210% 80% at 50% 48%, transparent 58%, ${blend} 94%)` }} aria-hidden="true" />}
      <div className="container cine-content" style={{ width: "100%", paddingTop: padY, paddingBottom: padY }}>
        {children}
      </div>
    </section>
  );
}
window.Cine = Cine;

/* Eyebrow label — steel on paper, translucent white on dark cinematic. */
function Eyebrow({ children, dark }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
      <span style={{ width: 28, height: 1, background: dark ? "rgba(255,255,255,0.5)" : "var(--steel)" }} />
      <span className="tag" style={{ color: dark ? "rgba(255,255,255,0.72)" : "var(--steel)", letterSpacing: "0.02em" }}>{children}</span>
    </span>
  );
}
window.Eyebrow = Eyebrow;

/* Photo covers PART of a section. Text on the clean side (normal dark text),
   photo bleeds to the page edge on the other side and fades into `bg`. */
function PhotoSplit({ id, img, side = "right", bg = "var(--bone)", minH = "66vh", children }) {
  const isRight = side !== "left";
  const fadeDir = isRight ? "to left" : "to right";
  return (
    <section id={id} className={`psplit ${isRight ? "psplit--right" : "psplit--left"}`} style={{ position: "relative", background: bg, minHeight: minH, display: "flex", alignItems: "center", overflow: "hidden" }}>
      <div
        className="psplit-photo"
        aria-hidden="true"
        style={{
          position: "absolute", top: 0, bottom: 0, [isRight ? "right" : "left"]: 0, width: "50%",
          /* faint white wash lifts a dark image toward the page colour so the blend isn't stark */
          backgroundImage: `linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)), url(${img})`,
          backgroundSize: "cover", backgroundPosition: "center",
          /* soft radial fade — no straight seam, varies across the edge, fades out quickly toward the text */
          WebkitMaskImage: `radial-gradient(125% 125% at ${isRight ? "100%" : "0%"} 42%, #000 26%, rgba(0,0,0,0.5) 52%, transparent 74%)`,
          maskImage: `radial-gradient(125% 125% at ${isRight ? "100%" : "0%"} 42%, #000 26%, rgba(0,0,0,0.5) 52%, transparent 74%)`,
        }}
      />
      <div className="container" style={{ position: "relative", zIndex: 2, width: "100%" }}>
        <div className="psplit-content" style={{ maxWidth: "min(540px, 44vw)", marginLeft: isRight ? 0 : "auto", marginRight: isRight ? "auto" : 0 }}>
          {children}
        </div>
      </div>
    </section>
  );
}
window.PhotoSplit = PhotoSplit;

/* Inject the CSS once. */
(function injectCineCSS() {
  if (document.getElementById("dpf-cine-css")) return;
  const s = document.createElement("style");
  s.id = "dpf-cine-css";
  s.textContent = `
    .cine { position: relative; overflow: hidden; color: #fff; }
    .cine-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.16); will-change: transform; z-index: 0; }
    .cine-scrim { position: absolute; inset: 0; z-index: 1; }
    .cine-blend { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .cine-content { position: relative; z-index: 2; }
    .cine-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }
    .psplit-photo { transition: opacity .3s ease; }
    @media (max-width: 860px) {
      .psplit { flex-direction: column; padding-top: 88px; }
      .psplit-photo { position: relative !important; width: 100% !important; left: auto !important; right: auto !important; height: 240px; order: -1; margin-bottom: 28px;
        -webkit-mask-image: linear-gradient(to top, #000 62%, transparent 100%); mask-image: linear-gradient(to top, #000 62%, transparent 100%); }
      .psplit-content { max-width: 100% !important; }
    }
    @media (prefers-reduced-motion: reduce) { .cine-bg { transform: scale(1.04) !important; } }
  `;
  document.head.appendChild(s);
})();

/* One global parallax driver for every .cine-bg (re-queried each frame so it
   picks up bands React mounts after load). */
(function initCineParallax() {
  if (window.__dpfCineParallax) return;
  window.__dpfCineParallax = true;
  if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  let ticking = false;
  const update = () => {
    const vh = window.innerHeight;
    document.querySelectorAll(".cine-bg").forEach((bg) => {
      const sec = bg.parentElement;
      if (!sec) return;
      const r = sec.getBoundingClientRect();
      const offset = ((r.top + r.height / 2) - vh / 2) / vh;
      const shift = Math.max(-1.2, Math.min(1.2, offset)) * 44;
      bg.style.transform = `translate3d(0, ${shift.toFixed(1)}px, 0) scale(1.16)`;
    });
    ticking = false;
  };
  const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } };
  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", onScroll);
  setTimeout(update, 300);
  setTimeout(update, 1200);
})();