/* ==================================================================
 * <SunsetSectionBackground />
 * Adapted from design bundle for this project's buildless Babel setup.
 * ------------------------------------------------------------------
 * Props (all optional):
 *   skyFraction  0..1   Share of container height taken by the sky. Default 0.7.
 *   alpha        0..1   Scene-wide opacity multiplier. Default 0.55.
 *   sunX         0..1   Horizontal sun position. Default 0.5.
 *   sunY         0..1   Sun position inside sky, 0=top 1=horizon. Default 0.18.
 *   tone         color  Color scene fades toward when alpha < 1. Default white.
 *   interactive  bool   Sun follows cursor when true (default). Fixed when false.
 *   className    str    Extra classes for the outer element.
 *   style        obj    Inline styles (use height to size the section).
 *   children     node   Rendered inside .ssb__content, above the scene.
 * ================================================================== */

const _ssbClamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));

let _ssbStyleInjected = false;
function _ssbInjectStyles() {
  if (_ssbStyleInjected || typeof document === 'undefined') return;
  _ssbStyleInjected = true;
  const tag = document.createElement('style');
  tag.setAttribute('data-ssb', '');
  tag.textContent = `
.ssb {
  --ssb-sky-h: 100%;
  --ssb-sea-h: 0%;
  --ssb-alpha: 0.55;
  --ssb-sun-x: 50%;
  --ssb-sun-y: 18%;
  --ssb-tone: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ssb-tone);
  width: 100%;
  min-height: 240px;
}
.ssb__scene {
  position: absolute;
  inset: 0;
  opacity: var(--ssb-alpha);
  pointer-events: none;
}
.ssb__scene > * {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
}
.ssb__sky,
.ssb__sun,
.ssb__sun-day,
.ssb__sun-set,
.ssb__horizon,
.ssb__horizon-night,
.ssb__moon,
.ssb__darkness-sky {
  top: 0;
  height: var(--ssb-sky-h);
}
.ssb__water,
.ssb__water-distance,
.ssb__darkness,
.ssb__ripple,
.ssb__reflection {
  bottom: 0;
  height: var(--ssb-sea-h);
}
.ssb__sun {
  background: radial-gradient(
    circle at var(--ssb-sun-x) var(--ssb-sun-y),
    rgba(242,248,247,1)  0%,
    rgba(249,249, 28,1)  3%,
    rgba(247,214, 46,1)  8%,
    rgba(248,200, 95,1) 12%,
    rgba(201,165,132,1) 30%,
    rgba(115,130,133,1) 51%,
    rgba( 46, 97,122,1) 85%,
    rgba( 24, 75,106,1) 100%
  );
  z-index: 10;
}
.ssb__sun-day {
  background: radial-gradient(
    circle at var(--ssb-sun-x) var(--ssb-sun-y),
    rgba(252,255,251,0.9)  0%,
    rgba(253,250,219,0.4) 30%,
    rgba(226,219,197,0.01) 70%,
    rgba(226,219,197,0)   70%,
    rgba(201,165,132,0)  100%
  );
  z-index: 999;
}
.ssb__sun-set {
  background: radial-gradient(
    circle at var(--ssb-sun-x) var(--ssb-sun-y),
    rgba(254,255,255,0.8)  5%,
    rgba(236,255,  0,1)   10%,
    rgba(253, 50, 41,1)   25%,
    rgba(243,  0,  0,1)   40%,
    rgba( 93,  0,  0,1)  100%
  );
  z-index: 999;
}
.ssb__moon {
  background: radial-gradient(
    circle at 40% 55%,
    rgba(249,249,250,1) -1%,
    rgba(189,255,254,1)  1%,
    rgba(  8, 49, 78,1)  1%,
    rgba(  8, 26, 56,1) 10%,
    rgba(  4, 16, 46,1) 40%,
    rgba(  2,  8, 13,1) 70%
  );
  z-index: 10001;
}
.ssb__sky {
  background: linear-gradient(
    to top,
    rgba(249,251,240,1) 10%,
    rgba(215,253,254,1) 20%,
    rgba(167,222,253,1) 40%,
    rgba(110,175,255,1) 100%
  );
  z-index: 5;
}
.ssb__horizon {
  background: linear-gradient(
    to top,
    rgba(212, 87, 43,0.9)   0%,
    rgba(246,149, 52,0.8)  20%,
    rgba( 24, 75,106,0)   100%
  );
  z-index: 5;
}
.ssb__horizon-night {
  background: linear-gradient(
    to top,
    rgba( 57,167,255,1)   0%,
    rgba( 13, 98,245,1)  20%,
    rgba(  0, 11, 22,0.1) 60%
  );
  z-index: 10000;
}
.ssb__darkness-sky { background: #000; z-index: 9999; }
.ssb__water {
  background: linear-gradient(
    to top,
    rgba(  0, 25, 45,1)   0%,
    rgba( 14, 71,117,1)  35%,
    rgba( 26,126,174,1)  70%,
    rgba( 62,168,220,1) 100%
  );
  z-index: 10;
  overflow: hidden;
}
.ssb__water-distance {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0)     10%,
    rgba(0,0,0,0.20)  44%,
    rgba(0,0,0,0.65)  95%,
    rgba(0,0,0,0.62) 100%
  );
  z-index: 20;
}
.ssb__reflection {
  perspective: 30px;
  perspective-origin: 50% -12%;
  overflow: hidden;
  left: -3%;
  width: 103%;
  z-index: 25;
}
.ssb__reflection-mid {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 55%;
  background: radial-gradient(
    circle at 50% 0,
    rgba(247,177, 72,1)    3%,
    rgba(248,175, 65,1)    6%,
    rgba(207, 62, 30,0.4) 35%,
    rgba(176, 91, 48,0.1) 45%,
    rgba(141, 88, 47,0)   60%,
    rgba(116, 82, 63,0)   70%,
    rgba( 44, 65, 68,0)   80%,
    rgba(  7, 19, 31,0)  100%
  );
  z-index: 999;
  transform: rotateX(45deg);
}
.ssb__ripple {
  background-image: repeating-linear-gradient(
    175deg,
    rgba(165,165,165,0.08) 43%,
    rgba(175,175,175,0.08) 45%,
    rgba(235,235,235,0.08) 49%,
    rgba(195,195,195,0.08) 50%,
    rgba(165,165,165,0.08) 54%
  );
  opacity: 0.5;
  z-index: 10;
}
.ssb__darkness { background: #000; z-index: 99; }
.ssb__content {
  position: relative;
  z-index: 100000;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ssb { --ssb-sun-y: 18%; }
}
`;
  document.head.appendChild(tag);
}

function _ssbComputeOpacities(sunY) {
  const ny = _ssbClamp(sunY, 0, 1) * 0.5;
  const upper = ny <= 0.5;
  return {
    sky:              Math.min(1 - ny, 0.99),
    sun:              upper ? Math.min(ny / 0.5, 0.5) : Math.min((1 - ny) / 0.5 + 0.2, 0.5),
    'sun-day':        1 - ny,
    'sun-set':        Math.max(0, ny - 0.2),
    horizon:          upper ? Math.min(ny / 0.5, 0.99) : (1 - ny) / 0.5 + 0.2,
    'horizon-night':  _ssbClamp((ny - 0.8) / 0.2, 0, 1),
    moon:             _ssbClamp((ny - 0.9) / 0.1, 0, 0.65),
    'darkness-sky':   _ssbClamp((ny - 0.7) / 0.3, 0, 1),
    darkness:         _ssbClamp((ny - 0.5) / 0.5, 0, 1),
    'water-distance': Math.max(0, Math.min(1, ny + 0.6)),
    'reflection-mid': Math.max(0, upper ? ny / 0.5 - 0.1 : (1 - ny) / 0.5 - 0.1),
  };
}

function SunsetSectionBackground({
  skyFraction = 0.7,
  alpha = 0.55,
  sunX = 0.5,
  sunY = 0.18,
  tone = '#ffffff',
  interactive = true,
  children,
  className = '',
  style,
  ...rest
}) {
  const elRef = React.useRef(null);

  React.useEffect(() => { _ssbInjectStyles(); }, []);

  React.useEffect(() => {
    const el = elRef.current;
    if (!el) return;
    el.style.setProperty('--ssb-sky-h', _ssbClamp(skyFraction, 0.05, 1.0) * 100 + '%');
    el.style.setProperty('--ssb-sea-h', (1 - _ssbClamp(skyFraction, 0.05, 1.0)) * 100 + '%');
    el.style.setProperty('--ssb-alpha', String(_ssbClamp(alpha, 0, 1)));
    el.style.setProperty('--ssb-tone', tone);
  }, [skyFraction, alpha, tone]);

  React.useEffect(() => {
    const el = elRef.current;
    if (!el) return;
    const sf = _ssbClamp(skyFraction, 0.05, 1.0);

    function paint(nx, ny) {
      const sy = _ssbClamp(ny / sf, 0, 1);
      el.style.setProperty('--ssb-sun-x', _ssbClamp(nx, 0, 1) * 100 + '%');
      el.style.setProperty('--ssb-sun-y', sy * 100 + '%');
      const refl = el.querySelector('.ssb__reflection');
      if (refl) refl.style.perspectiveOrigin = _ssbClamp(nx, 0, 1) * 100 + '% -15%';
      const rmid = el.querySelector('.ssb__reflection-mid');
      if (rmid) rmid.style.left = (_ssbClamp(nx, 0, 1) - 1 - 0.03) * 100 + '%';
      const ops = _ssbComputeOpacities(sy);
      for (const k in ops) {
        const node = el.querySelector('.ssb__' + k);
        if (node) node.style.opacity = ops[k];
      }
    }

    paint(_ssbClamp(sunX, 0, 1), _ssbClamp(sunY, 0, 1) * sf);

    if (!interactive) return;

    let pending = false;
    let nx = _ssbClamp(sunX, 0, 1);
    let ny = _ssbClamp(sunY, 0, 1) * sf;

    function flush() { pending = false; paint(nx, ny); }
    function onMove(e) {
      const rect = el.getBoundingClientRect();
      if (!rect.width || !rect.height) return;
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      nx = _ssbClamp((clientX - rect.left) / rect.width, 0, 1);
      ny = _ssbClamp((clientY - rect.top)  / rect.height, 0, 1);
      if (!pending) { pending = true; requestAnimationFrame(flush); }
    }
    window.addEventListener('pointermove', onMove, { passive: true });
    window.addEventListener('touchmove', onMove, { passive: true });
    return () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('touchmove', onMove);
    };
  }, [interactive, skyFraction, sunX, sunY]);

  return (
    <div
      ref={elRef}
      className={('ssb ' + className).trim()}
      style={style}
      {...rest}
    >
      <div className="ssb__scene" aria-hidden="true">
        <div className="ssb__sky" />
        <div className="ssb__sun" />
        <div className="ssb__sun-day" />
        <div className="ssb__sun-set" />
        <div className="ssb__horizon" />
        <div className="ssb__horizon-night" />
        <div className="ssb__moon" />
        <div className="ssb__darkness-sky" />
        {/* sea elements hidden — sky only
        <div className="ssb__water" />
        <div className="ssb__water-distance" />
        <div className="ssb__reflection">
          <div className="ssb__reflection-mid" />
        </div>
        <div className="ssb__darkness" />
        <div className="ssb__ripple" />
        */}
      </div>
      {children ? <div className="ssb__content">{children}</div> : null}
    </div>
  );
}

Object.assign(window, { SunsetSectionBackground });