/* Primitives.jsx — shared building blocks (adapted from the Patrimmofi DS website kit) */
const { useState, useEffect, useRef, useCallback } = React;

/* Scroll-reveal: opacity/transform driven by INLINE style, flipped to shown by several
   redundant triggers so content can never stay hidden. */
function Reveal({ children, as = 'div', delay = 0, y = 28, className = '', style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  const [instant, setInstant] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setInstant(true);
      setShown(true);
      return;
    }
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight * 0.96 && r.bottom > 0) { setInstant(true); setShown(true); return; }
    let done = false;
    const show = () => { if (!done) { done = true; setShown(true); } };
    const check = () => { const b = el.getBoundingClientRect(); if (b.top < window.innerHeight * 0.94 && b.bottom > 0) show(); };
    const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) show(); }), { threshold: 0.1, rootMargin: '0px 0px -5% 0px' });
    io.observe(el);
    window.addEventListener('scroll', check, { passive: true });
    const timers = [600, 1400, 2600].map(t => setTimeout(check, t));
    return () => { io.disconnect(); window.removeEventListener('scroll', check); timers.forEach(clearTimeout); };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={className} style={{
      ...style,
      opacity: shown ? 1 : 0,
      transform: shown ? 'none' : `translateY(${y}px)`,
      transition: instant ? 'none' : `opacity .9s cubic-bezier(.22,.61,.36,1) ${delay}ms, transform .9s cubic-bezier(.22,.61,.36,1) ${delay}ms`,
    }}>{children}</Tag>
  );
}

/* Eyebrow / kicker */
function Eyebrow({ children, style = {} }) {
  return <div className="pf-eyebrow" style={style}>{children}</div>;
}

/* Sillage — faint radiating ornament (echoes site's sillage.svg) */
function Sillage({ color = 'rgba(242,238,232,.34)', size = 520, style = {} }) {
  const lines = Array.from({ length: 13 });
  return (
    <svg width={size} height={size/2.2} viewBox="0 0 520 236" fill="none" style={style} aria-hidden="true">
      {lines.map((_, i) => {
        const a = (Math.PI) * (i / (lines.length - 1));
        const x = 260 - Math.cos(a) * 250;
        const y = 236 - Math.sin(a) * 220;
        return <line key={i} x1="260" y1="236" x2={x} y2={y} stroke={color} strokeWidth="1" opacity={0.25 + 0.5*Math.sin(a)} />;
      })}
    </svg>
  );
}

/* Warm imagery placeholder — evokes the brand's golden bokeh photography. */
function Photo({ variant = 'gold', label, ratio = '4 / 3', radius = 0, style = {}, className = '' }) {
  const grads = {
    gold:   'radial-gradient(120% 120% at 30% 20%, #C9A24B 0%, #8A6A2A 32%, #2A211A 78%)',
    seed:   'radial-gradient(120% 120% at 70% 30%, #E8D7A6 0%, #B79A5C 30%, #3A2E22 80%)',
    halo:   'radial-gradient(80% 80% at 50% 45%, #F2D78A 0%, #B98E3E 26%, #1C160F 72%)',
    night:  'radial-gradient(120% 110% at 50% 8%, #2A211A 0%, #1C1714 34%, #161616 78%)',
    ember:  'radial-gradient(120% 120% at 35% 70%, #8A2A1E 0%, #531512 40%, #1A0E0C 82%)',
    stone:  'radial-gradient(120% 120% at 40% 30%, #6E6256 0%, #423A31 45%, #211C17 85%)',
    paper:  'linear-gradient(150deg, #F7F3EC 0%, #E7DECB 100%)',
  };
  return (
    <div className={className} style={{
      position: 'relative', aspectRatio: ratio, borderRadius: radius, overflow: 'hidden',
      background: grads[variant] || grads.gold, ...style,
    }}>
      <div style={{ position:'absolute', inset:0, mixBlendMode:'overlay', opacity:.22,
        backgroundImage:'radial-gradient(rgba(255,255,255,.4) 0.5px, transparent 1px)', backgroundSize:'4px 4px' }} />
      <div style={{ position:'absolute', inset:0, boxShadow:'inset 0 0 120px rgba(0,0,0,.45)' }} />
      {label && <span style={{ position:'absolute', left:12, bottom:10, fontFamily:'ui-monospace,Menlo,monospace',
        fontSize:'var(--micro-size)', letterSpacing:'.08em', color:'rgba(255,255,255,.55)', textTransform:'uppercase' }}>{label}</span>}
    </div>
  );
}

/* Full-bleed background photo (real imagery from patrimmofi.fr) */
function Bg({ src, position = 'center', opacity = 1, eager = false, style = {} }) {
  return <img src={src} alt="" aria-hidden="true" loading={eager ? 'eager' : 'lazy'} fetchpriority={eager ? 'high' : 'auto'}
    style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:position, opacity, ...style }} />;
}

/* Real image block with optional overlay (replaces the gold Photo placeholder) */
function Img({ src, alt = '', ratio = '4 / 3', position = 'center', radius = 0, overlay = null, style = {}, className = '' }) {
  return (
    <div className={className} style={{ position:'relative', aspectRatio:ratio, borderRadius:radius, overflow:'hidden', background:'#211F1D', ...style }}>
      <img src={src} alt={alt} loading="lazy" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:position }} />
      {overlay && <div style={{ position:'absolute', inset:0, background:overlay }} />}
    </div>
  );
}

/* Brand line icon (rouge on light, recolourable on dark via filter) */
function PfIcon({ name, size = 40, tone = 'rouge', style = {} }) {
  const filter = tone === 'creme'
    ? 'brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(420%) hue-rotate(2deg) brightness(99%)'
    : 'none';
  return <img src={`assets/icons/groupe/${encodeURIComponent(name)}.svg`} alt="" aria-hidden="true" width={size} height={size}
    style={{ display:'block', objectFit:'contain', filter, ...style }} />;
}

Object.assign(window, { Reveal, Eyebrow, Sillage, Photo, Bg, Img, PfIcon, useState, useEffect, useRef, useCallback });