// Shared helpers: scroll-reveal wrapper, count-up hook, lightbox modal.

function Reveal({ as = 'div', className = '', style, children, delay = 0 }) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setInView(true);
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return React.createElement(
    as,
    {
      ref,
      className: `reveal ${inView ? 'in-view' : ''} ${className}`.trim(),
      style: { transitionDelay: `${delay}ms`, ...style },
    },
    children
  );
}

function useCountUp(target, active, duration = 1400) {
  const [value, setValue] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setValue(target); return; }
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setValue(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, target, duration]);
  return value;
}

function Lightbox({ item, onClose }) {
  if (!item) return null;
  const { IconButton } = window.ArnelBiscarraDesignSystem_2766cb;
  return (
    <div className="lightbox-backdrop" onClick={onClose}>
      <div className="lightbox-panel" style={{ position: 'relative' }} onClick={(e) => e.stopPropagation()}>
        <div style={{ position: 'absolute', top: 16, right: 16, zIndex: 2 }}>
          <IconButton ariaLabel="Close" onClick={onClose}>&times;</IconButton>
        </div>
        <div className="lightbox-media">
          {item.img
            ? <img src={item.img} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center', display: 'block' }} />
            : <image-slot id={`lightbox-${item.id}`} shape="rect" placeholder={item.title}></image-slot>}
        </div>
        <div className="lightbox-body">
          {item.badge && <div style={{ marginBottom: 10 }}>
            <window.ArnelBiscarraDesignSystem_2766cb.Badge variant="neutral">{item.badge}</window.ArnelBiscarraDesignSystem_2766cb.Badge>
          </div>}
          <div className="work-title" style={{ fontSize: 22, marginBottom: 8 }}>{item.title}</div>
          <div className="work-desc" dangerouslySetInnerHTML={{ __html: item.desc }}></div>
          {item.study && (
            <div className="case-study">
              <div className="case-block">
                <span className="case-label">Challenge</span>
                <p>{item.study.challenge}</p>
              </div>
              <div className="case-block">
                <span className="case-label">Approach</span>
                <p>{item.study.approach}</p>
              </div>
              <div className="case-block">
                <span className="case-label">Deliverables</span>
                <div className="case-tags">
                  {item.study.deliverables.map((d) => <span className="case-tag" key={d}>{d}</span>)}
                </div>
              </div>
              {item.study.results && (
                <div className="case-block">
                  <span className="case-label">Results</span>
                  <p className="case-results">{item.study.results}</p>
                </div>
              )}
            </div>
          )}
          {item.cta && (
            <div style={{ marginTop: 20 }}>
              <window.ArnelBiscarraDesignSystem_2766cb.Button variant="dark" arrow onClick={() => window.open(item.href || '#', '_blank')}>{item.cta}</window.ArnelBiscarraDesignSystem_2766cb.Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Brand logo glyphs (monochrome, drawn in currentColor)
const SOCIAL_GLYPH_PATHS = {
  facebook: 'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z',
  messenger: 'M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.522 3.769 8.61a.96.96 0 0 1 .323.683l.065 2.135a.96.96 0 0 0 1.347.848l2.381-1.051a.96.96 0 0 1 .641-.047A13.077 13.077 0 0 0 12 23.28c6.76 0 12-4.952 12-11.64S18.76 0 12 0zm7.207 8.955-3.525 5.593a1.8 1.8 0 0 1-2.604.48l-2.804-2.102a.72.72 0 0 0-.867.002l-3.786 2.874c-.505.383-1.165-.222-.826-.759l3.525-5.592a1.8 1.8 0 0 1 2.604-.48l2.803 2.102a.72.72 0 0 0 .868-.002l3.786-2.875c.505-.383 1.165.222.826.759z',
  whatsapp: 'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z',
};

function SocialGlyph({ name, size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ display: 'block' }}>
      <path d={SOCIAL_GLYPH_PATHS[name]}></path>
    </svg>
  );
}

window.Reveal = Reveal;
window.useCountUp = useCountUp;
window.Lightbox = Lightbox;
window.SocialGlyph = SocialGlyph;