/* Auto-generated from mockups/10-doctrine.html */
(function(){

const { useEffect, useRef } = React;

    function useReveal(delayMs = 0, className = 'reveal') {
      const ref = useRef(null);
      useEffect(() => {
        if (!ref.current) return;
        const el = ref.current;
        const trigger = () => setTimeout(() => el.classList.add('in'), delayMs);
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { trigger(); return; }
        const io = new IntersectionObserver(([e]) => {
          if (e.isIntersecting) { trigger(); io.disconnect(); }
        }, { threshold: 0.15 });
        io.observe(el);
        return () => io.disconnect();
      }, [delayMs]);
      return ref;
    }

    function Eyebrow() {
      const ref = useReveal(0);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 14,
          color: '#6b8eff',
          letterSpacing: '0.16em', textTransform: 'uppercase',
          marginBottom: 24,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 9999,
            background: '#0047ff', boxShadow: '0 0 8px #0047ff',
          }}/>
          {t.doctrine.badge}
        </div>
      );
    }

    function Headline() {
      const ref = useReveal(80);
      const t = window.useCopy();
      return (
        <h2 ref={ref} className="reveal section-h2" style={{
          margin: '0 0 18px',
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.035em',
          color: 'var(--text-primary)', textWrap: 'balance',
        }}>
          {t.doctrine.h1}
        </h2>
      );
    }

    function SubLine() {
      const ref = useReveal(160);
      const t = window.useCopy();
      return (
        <p ref={ref} className="reveal" style={{
          margin: '0 0 0',
          maxWidth: 620,
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)',
        }}>
          {t.doctrine.sub}
        </p>
      );
    }

    function Pillar({ num, title, body, delay, first }) {
      const wrapRef = useReveal(delay);
      const ghostRef = useReveal(delay + 140, 'ghost-num');
      return (
        <div ref={wrapRef} className={`reveal pillar${first ? ' first' : ''}`} style={{
          position: 'relative',
          paddingTop: 72,
        }}>
          <span ref={ghostRef} className="ghost-num">{num}</span>

          <h3 style={{
            position: 'relative',
            margin: '0 0 16px',
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 26, lineHeight: 1.2, letterSpacing: '-0.02em',
            color: 'var(--text-primary)',
          }}>
            {title}
          </h3>

          <p style={{
            position: 'relative',
            margin: 0,
            fontFamily: 'var(--font-arabic)',
            /* Tajawal regular gives a subtly different rhythm from display Clash */
            fontWeight: 400,
            fontSize: 16, lineHeight: 1.65,
            color: 'var(--text-muted)',
            maxWidth: 360,
            textWrap: 'pretty',
          }}>
            {body}
          </p>
        </div>
      );
    }

    function Pillars() {
      const t = window.useCopy();
      const delays = [220, 370, 520];
      return (
        <div className="doctrine-grid" style={{
          margin: '96px 0 0',
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 64,
          alignItems: 'flex-start',
        }}>
          {t.doctrine.pillars.map((p, i) => (
            <Pillar
              key={i}
              first={i === 0}
              num={String(i + 1).padStart(2, '0')}
              title={p.title}
              body={p.body}
              delay={delays[i]}
            />
          ))}
        </div>
      );
    }

    function Transition() {
      const ref = useReveal(750);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{
          marginTop: 88,
          textAlign: 'center',
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 17,
          color: 'var(--text-muted)',
          letterSpacing: '-0.005em',
        }}>
          {t.doctrine.transition}
        </div>
      );
    }

    function Section() {
      return (
        <section style={{
          position: 'relative',
          background: 'var(--bg-base)',
          padding: '128px 48px',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'relative',
            maxWidth: 1200,
            margin: '0 auto',
          }}>
            <Eyebrow/>
            <Headline/>
            <SubLine/>
            <Pillars/>
            <Transition/>
          </div>
        </section>
      );
    }

window.DoctrineSection = Section;
})();