// Composants UI partagés

const { useEffect, useRef, useState } = React;

// Reveal-on-scroll wrapper
const Reveal = ({ children, delay = 0, className = '' }) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {setShown(true);io.disconnect();}
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={`reveal ${shown ? 'in' : ''} ${delay ? 'd' + delay : ''} ${className}`}>
      {children}
    </div>);

};

// Eyebrow label
const Eyebrow = ({ children, onInk, solo, style }) => (
  <div className={`eyebrow${onInk ? ' on-ink' : ''}${solo ? ' solo' : ''}`} style={style}>
    {children}
  </div>
);


// Button
const Btn = ({ kind = 'primary', children, onClick, onInk }) =>
<button className={`btn btn-${kind} ${onInk ? 'on-ink' : ''}`} onClick={onClick}>
    {children}<Arrow />
  </button>;


// Inline link
const InlineLink = ({ children, onClick }) =>
<button className="link-inline" onClick={onClick}>{children}<Arrow size={12} /></button>;


// Stats ribbon
const Stats = () =>
<section className="stats">
    <div className="shell">
      <div className="stats-grid">
        {[
      { num: '+38', sup: '%', lbl: 'Valorisation moyenne du foncier' },
      { num: '120', sup: '+', lbl: 'Lots aménagés en Morbihan' },
      { num: '15', sup: 'j', lbl: 'Pour une étude de potentiel' },
      { num: '100', sup: '%', lbl: "D'accompagnement clé en main" }].
      map((s, i) =>
      <Reveal key={i} delay={i + 1}>
            <div className="stat">
              <div className="stat-num">{s.num}<sup>{s.sup}</sup></div>
              <div className="stat-label">{s.lbl}</div>
            </div>
          </Reveal>
      )}
      </div>
    </div>
  </section>;


// Avant / Après slider
const BeforeAfter = ({ beforeSrc, afterSrc }) => {
  const wrap = useRef(null);
  const [pos, setPos] = useState(50);
  const dragging = useRef(false);

  const handle = (clientX) => {
    if (!wrap.current) return;
    const r = wrap.current.getBoundingClientRect();
    const x = clientX - r.left;
    const p = Math.max(0, Math.min(100, x / r.width * 100));
    setPos(p);
  };

  useEffect(() => {
    const move = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      handle(x);
    };
    const up = () => {dragging.current = false;};
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, []);

  return (
    <div
      ref={wrap}
      className="case-visual case-slider"
      onMouseDown={(e) => {dragging.current = true;handle(e.clientX);}}
      onTouchStart={(e) => {dragging.current = true;handle(e.touches[0].clientX);}}>
      
      <img src={beforeSrc} alt="Avant" />
      <div className="case-after-wrap" style={{ width: pos + '%' }}>
        <img src={afterSrc} alt="Après" style={{ width: 100 / Math.max(pos, 0.01) * 100 + '%' }} />
      </div>
      <span className="case-label before">Avant</span>
      <span className="case-label after">Après</span>
      <div className="case-handle" style={{ left: pos + '%' }} />
    </div>);

};

// Section heading bloc à 2 colonnes
const SectionHead = ({ eyebrow, title, lede, onInk }) =>
<div className="section-head">
    <div>
      <Reveal>
        {eyebrow && <Eyebrow onInk={onInk}>{eyebrow}</Eyebrow>}
        <h2 className={`display ${onInk ? 'on-ink' : ''}`} style={{ marginTop: 16 }} dangerouslySetInnerHTML={{ __html: title }} />
      </Reveal>
    </div>
    {lede &&
  <Reveal delay={2}>
        <p className="lede">{lede}</p>
      </Reveal>
  }
  </div>;


Object.assign(window, { Reveal, Eyebrow, Btn, InlineLink, Stats, BeforeAfter, SectionHead });