/* scroll-sections.jsx — Cinematic desktop + clean mobile card layout */

const { useEffect: useEff, useRef: useRf, useState: useSt } = React;

/* ─── PAINTING PATH MAP ─── */
var PAINTINGS = {
  hussein:  'paintings/hussein.png',
  abbas:    'paintings/ali-akbar.png',
  aliAkbar: 'paintings/abbas.png',
  zainab:   'paintings/zainab.png',
};

/* ─── INJECT CSS ─── */
(function() {
  var css = `
/* ── DESKTOP PAINTING STAGE ── */
.ss-painting-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.ss-painting{
  position:absolute;inset:-7%;width:114%;height:114%;
  object-fit:cover;object-position:center;
  image-rendering:auto;
}

/* ── KEN BURNS — desktop only ── */
@keyframes kb-hussein{from{transform:scale(1.0) translate(0%,0%)}to{transform:scale(1.13) translate(-5%,2%)}}
@keyframes kb-abbas{from{transform:scale(1.0) translate(2%,2%)}to{transform:scale(1.10) translate(-1%,-2%)}}
@keyframes kb-aliAkbar{from{transform:scale(1.0) translate(0%,1%)}to{transform:scale(1.16) translate(-3%,-4%)}}
@keyframes kb-zainab{from{transform:scale(1.0) translate(0%,0%)}to{transform:scale(1.07) translate(1.5%,1%)}}
.kb-hussein {animation:kb-hussein 27s ease-in-out infinite alternate}
.kb-abbas   {animation:kb-abbas 34s ease-in-out infinite alternate}
.kb-aliAkbar{animation:kb-aliAkbar 23s ease-in-out infinite alternate}
.kb-zainab  {animation:kb-zainab 40s ease-in-out infinite alternate}

/* ── CINEMATIC OVERLAYS ── */
.ss-dust-overlay{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.21;mix-blend-mode:screen;
  background:radial-gradient(circle at 22% 78%, rgba(255,210,140,.20) 0%,transparent 30%),
    repeating-linear-gradient(8deg, transparent 0 17px, rgba(255,210,140,.03) 19px 22px);
  animation:dustDrift 14s linear infinite;
}
@keyframes dustDrift{from{transform:translateX(0) translateY(0)}to{transform:translateX(-5%) translateY(-2%)}}
.ss-grad-left{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,3,10,.87) 0%,rgba(5,3,10,.52) 28%,rgba(5,3,10,.12) 55%,rgba(5,3,10,.25) 100%)}
.ss-grad-right{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,3,10,.22) 0%,rgba(5,3,10,.12) 45%,rgba(5,3,10,.52) 72%,rgba(5,3,10,.87) 100%)}

/* ── DESKTOP SCROLL SECTION ── */
.ss-outer{position:relative}
.ss-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.ss-vignette{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,transparent 0 22%,rgba(0,0,0,.44) 70%,rgba(5,3,12,.92) 100%),
    linear-gradient(to bottom,rgba(5,3,12,.08) 0%,transparent 15%,transparent 80%,rgba(5,3,12,.96) 100%)}
.ss-ghost{position:absolute;right:.8vw;bottom:4%;font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(108px,19vw,286px);color:rgba(255,255,255,.026);pointer-events:none;line-height:1;z-index:7;user-select:none}
.ss-side-bar{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:2px;height:80px;
  background:rgba(255,255,255,.1);border-radius:2px;z-index:8;overflow:hidden}
.ss-side-fill{width:100%;border-radius:2px;transform-origin:top;transform:scaleY(0)}
.ss-content{position:absolute;inset:0;z-index:9;display:flex;align-items:center;padding:0 6vw;pointer-events:none}
.ss-text{max-width:500px;width:100%}
.ss-text.rgt{margin-left:auto}
.ss-chap{font-family:'Cinzel',serif;font-size:9px;letter-spacing:7px;text-transform:uppercase;color:rgba(210,185,120,.65);margin-bottom:8px}
.ss-ar{font-family:'Amiri',serif;direction:rtl;line-height:1.06;font-size:clamp(52px,7.2vw,100px);margin-bottom:14px}
.ss-rule{height:1px;width:52px;margin-bottom:18px;transform-origin:left}
.ss-head{font-family:'Cinzel',serif;font-weight:700;color:#fff8e8;font-size:clamp(34px,5.2vw,72px);line-height:.94;margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.ss-body{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,1.75vw,20px);line-height:1.82;color:#d4b87a;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* ── MOBILE CARD LAYOUT ── */
.ss-mobile-section{display:none}

@media(max-width:768px){
  /* Hide desktop sticky scroll entirely */
  .ss-outer{display:none!important}

  /* Show mobile cards */
  .ss-mobile-section{
    display:block;
    background:#07040c;
    padding:0 0 2px;
  }

  .ss-mobile-card{
    background:#07040c;
    margin-bottom:1px;
    overflow:visible;
  }

  /* Full painting — no crop, no max-height */
  .ss-mobile-painting-wrap{
    position:relative;
    width:100%;
    background:#07040c;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .ss-mobile-painting{
    display:block;
    width:100%;
    height:auto;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    animation:none!important;
  }
  .ss-mobile-glow{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(217,120,48,.08) 0%, transparent 70%);
  }
  .ss-mobile-fade-bottom{
    position:absolute;bottom:0;left:0;right:0;height:80px;pointer-events:none;
    background:linear-gradient(to bottom, transparent, #07040c);
  }

  /* Text block below painting */
  .ss-mobile-text{
    padding:28px 22px 40px;
    text-align:center;
    position:relative;
    z-index:2;
  }
  .ss-mobile-chap{
    font-family:'Cinzel',serif;font-size:8px;letter-spacing:6px;text-transform:uppercase;
    color:rgba(210,185,120,.55);margin-bottom:14px;
  }
  .ss-mobile-ar{
    font-family:'Amiri',serif;direction:rtl;line-height:1.1;
    font-size:clamp(42px,11vw,68px);margin-bottom:14px;
  }
  .ss-mobile-rule{height:1px;width:44px;margin:0 auto 16px;opacity:.6}
  .ss-mobile-head{
    font-family:'Cinzel',serif;font-weight:700;color:#fff8e8;
    font-size:clamp(22px,6.5vw,36px);line-height:1.05;margin-bottom:14px;
  }
  .ss-mobile-body{
    font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.78;
    color:#c8a86a;max-width:340px;margin:0 auto;
  }

  /* Cinematic fade+rise reveal */
  .ss-mobile-card{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.75s ease, transform 0.75s ease;
  }
  .ss-mobile-card.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* Glow pulse around painting wrap */
  .ss-mobile-painting-wrap{
    animation:paintGlowCard 6s ease-in-out infinite;
    border-radius:4px;
  }
  @keyframes paintGlowCard{
    0%,100%{ box-shadow:0 0 18px rgba(180,35,35,.18),0 0 4px rgba(217,168,75,.1); }
    50%    { box-shadow:0 0 38px rgba(217,168,75,.28),0 0 16px rgba(180,35,35,.2); }
  }

  /* Arabic title gold pulse */
  .ss-mobile-ar{
    animation:goldTextPulse 5s ease-in-out infinite;
  }
  @keyframes goldTextPulse{
    0%,100%{ text-shadow:0 0 30px currentColor; }
    50%    { text-shadow:0 0 60px currentColor, 0 0 100px currentColor; }
  }

  /* Text lines stagger via nth-child */
  .ss-mobile-card.visible .ss-mobile-chap{ transition-delay:.08s; }
  .ss-mobile-card.visible .ss-mobile-ar  { transition-delay:.18s; }
  .ss-mobile-card.visible .ss-mobile-rule{ transition-delay:.28s; }
  .ss-mobile-card.visible .ss-mobile-head{ transition-delay:.36s; }
  .ss-mobile-card.visible .ss-mobile-body{ transition-delay:.46s; }
}

@media(prefers-reduced-motion:reduce){
  .kb-hussein,.kb-abbas,.kb-aliAkbar,.kb-zainab{animation:none}
  .ss-dust-overlay{display:none}
  .ss-mobile-card{opacity:1!important;transform:none!important;transition:none!important}
  .ss-mobile-painting-wrap{animation:none!important}
  .ss-mobile-ar{animation:none!important}
}
`;
  var el = document.createElement('style');
  el.textContent = css;
  document.head.appendChild(el);
})();

/* ─── UTILS ─── */
function lerp(a,b,t){return a+(b-a)*t}
function clamp(v,lo,hi){return v<lo?lo:v>hi?hi:v}
function easeOut(t){return 1-Math.pow(1-t,3)}

/* ─── DESKTOP SCROLL SECTION (unchanged cinematic version) ─── */
function DesktopScrollSection({ data }) {
  var outerRef = useRf(null), paintRef = useRf(null), chapRef = useRf(null),
      arRef = useRf(null), ruleRef = useRf(null), headRef = useRf(null),
      bodyRef = useRf(null), ghostRef = useRf(null), fillRef = useRf(null);

  useEff(function() {
    var smoothP = 0, rawP = 0, raf;
    function tick() {
      var rect;
      if (outerRef.current) {
        rect = outerRef.current.getBoundingClientRect();
        var total = outerRef.current.offsetHeight - window.innerHeight;
        rawP = total > 0 ? clamp(-rect.top / total, 0, 1) : 0;
      }
      smoothP += (rawP - smoothP) * 0.062;
      var p = smoothP;

      /* Stop loop once section is fully scrolled past */
      if (rawP >= 1.0 && Math.abs(smoothP - rawP) < 0.002) {
        if (paintRef.current) paintRef.current.style.opacity = '0';
        if (chapRef.current)  chapRef.current.style.opacity  = '0';
        if (arRef.current)    arRef.current.style.opacity    = '0';
        if (ruleRef.current)  ruleRef.current.style.opacity  = '0';
        if (headRef.current)  headRef.current.style.opacity  = '0';
        if (bodyRef.current)  bodyRef.current.style.opacity  = '0';
        return;
      }

      /* Skip DOM writes when far off-screen */
      if (rect && (rect.bottom < -300 || rect.top > window.innerHeight + 300)) {
        raf = requestAnimationFrame(tick); return;
      }

      var pr = function(t,t0,t1){ return clamp((t-t0)/(t1-t0),0,1); };
      var eO = easeOut;
      var paintOp = eO(pr(p,0,.20)) * lerp(1,.72,pr(p,.88,1.0));
      var tInP = eO(pr(p,.10,.32)), tOutP = pr(p,.72,.88);
      var tOp = tInP*(1-tOutP), tX = lerp(data.textRight?32:-32,0,tInP);
      var chapOp = eO(pr(p,.06,.19))*tOp;
      var arY = lerp(24,0,eO(pr(p,.12,.28))), arOp = eO(pr(p,.12,.28))*tOp;
      var ruleS = eO(pr(p,.18,.30)), ruleOp = eO(pr(p,.16,.29))*tOp;
      var headY = lerp(18,0,eO(pr(p,.22,.36))), headOp = eO(pr(p,.22,.36))*tOp;
      var bodyOp = eO(pr(p,.30,.46))*tOp;
      var ghostY = lerp(0,-54,p), barS = p;

      if (paintRef.current) paintRef.current.style.opacity = paintOp;
      if (chapRef.current)  chapRef.current.style.opacity  = chapOp;
      if (arRef.current) { arRef.current.style.transform='translate3d('+tX+'px,'+arY+'px,0)'; arRef.current.style.opacity=arOp; }
      if (ruleRef.current) { ruleRef.current.style.transform='scaleX('+ruleS+')'; ruleRef.current.style.opacity=ruleOp; }
      if (headRef.current) { headRef.current.style.transform='translate3d('+tX+'px,'+headY+'px,0)'; headRef.current.style.opacity=headOp; }
      if (bodyRef.current)  bodyRef.current.style.opacity = bodyOp;
      if (ghostRef.current) ghostRef.current.style.transform='translateY('+ghostY+'px)';
      if (fillRef.current)  fillRef.current.style.transform='scaleY('+barS+')';
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return function() { cancelAnimationFrame(raf); };
  }, []);

  var acc = data.accent, paintSrc = PAINTINGS[data.id]||'', isRight = data.textRight;
  return (
    <div ref={outerRef} className="ss-outer" style={{height:'clamp(1100px,220vh,2800px)'}} data-screen-label={data.chapterNum+' '+data.heading}>
      <div className="ss-sticky">
        <div ref={paintRef} className="ss-painting-stage" style={{opacity:0,willChange:'opacity'}}>
          <img className={'ss-painting kb-'+data.id} src={paintSrc} alt="" draggable="false" />
          <div className="ss-dust-overlay" />
          <div className={isRight?'ss-grad-right':'ss-grad-left'} />
        </div>
        <div className="ss-vignette" />
        <div ref={ghostRef} className="ss-ghost">{data.chapterNum}</div>
        <div className="ss-side-bar"><div ref={fillRef} className="ss-side-fill" style={{background:acc}} /></div>
        <div className="ss-content">
          <div className={'ss-text'+(isRight?' rgt':'')}>
            <div ref={chapRef} className="ss-chap" style={{opacity:0}}>{data.chapterNum} / {data.chapter}</div>
            <div ref={arRef} className="ss-ar" style={{color:acc,opacity:0,transform:'translate3d('+(isRight?32:-32)+'px,24px,0)',textShadow:'0 0 52px '+acc+'88'}}>{data.arabic}</div>
            <div ref={ruleRef} className="ss-rule" style={{background:'linear-gradient(90deg,'+acc+',transparent)',transform:'scaleX(0)',opacity:0}} />
            <h2 ref={headRef} className="ss-head" style={{opacity:0,transform:'translate3d('+(isRight?32:-32)+'px,18px,0)'}}>{data.heading}</h2>
            <p ref={bodyRef} className="ss-body" style={{opacity:0}}>{data.copy}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── MOBILE CARD (simple, no rAF, full painting) ─── */
function MobileCard({ data }) {
  var ref = useRf(null);
  var acc = data.accent, paintSrc = PAINTINGS[data.id]||'';

  useEff(function() {
    var el = ref.current; if (!el) return;
    var obs = new IntersectionObserver(function(entries) {
      entries.forEach(function(e) { if (e.isIntersecting) { el.classList.add('visible'); obs.disconnect(); } });
    }, { threshold: 0.1 });
    obs.observe(el);
    return function() { obs.disconnect(); };
  }, []);

  return (
    <div ref={ref} className="ss-mobile-card">
      <div className="ss-mobile-painting-wrap">
        <img
          src={paintSrc}
          alt={data.heading}
          className="ss-mobile-painting"
          loading="lazy"
          decoding="async"
        />
        <div className="ss-mobile-glow" />
        <div className="ss-mobile-fade-bottom" />
      </div>
      <div className="ss-mobile-text">
        <div className="ss-mobile-chap">{data.chapterNum} · {data.chapter}</div>
        <div className="ss-mobile-ar" style={{color:acc,textShadow:'0 0 40px '+acc+'66'}}>{data.arabic}</div>
        <div className="ss-mobile-rule" style={{background:'linear-gradient(90deg,transparent,'+acc+',transparent)'}} />
        <h2 className="ss-mobile-head" style={{color:'#fff8e8'}}>{data.heading}</h2>
        <p className="ss-mobile-body">{data.copy}</p>
      </div>
    </div>
  );
}

/* ─── CONTAINER ─── */
function ScrollSections() {
  var figures = window.FACELESS_FIGURES || [];
  return (
    <div id="chapters" data-screen-label="Character Chapters">
      {/* Desktop cinematic sticky sections */}
      {figures.map(function(d) { return <DesktopScrollSection key={'d-'+d.id} data={d} />; })}
      {/* Mobile clean card stack */}
      <div className="ss-mobile-section">
        {figures.map(function(d) { return <MobileCard key={'m-'+d.id} data={d} />; })}
      </div>
    </div>
  );
}

Object.assign(window, { ScrollSections: ScrollSections, PAINTING_PATHS: PAINTINGS });