/* Cantinho Kids — helpers compartilhados */

const CFG = window.CK_CONFIG;

const NAV = [
  { id: 'inicio',         label: 'Início',        icon: 'smile' },
  { id: 'moda-circular',  label: 'Moda Circular', icon: 'recycle' },
  { id: 'eventos',        label: 'Eventos',       icon: 'calendar' },
  { id: 'solicitacoes',   label: 'Solicitações',  icon: 'tag' },
  { id: 'onde',           label: 'Onde estamos',  icon: 'mapPin' },
];

/* monta link do WhatsApp com mensagem pré-preenchida */
function waLink(text) {
  const base = `https://wa.me/${CFG.whatsappNumero}`;
  return text ? `${base}?text=${encodeURIComponent(text)}` : base;
}
const instaLink = `https://instagram.com/${CFG.instagram}`;

/* Logo redondo; se o arquivo faltar, mostra a marca cabide-coração em SVG */
function BrandLogo({ size = 46 }) {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return (
      <span className="brand__logo" style={{ display: 'grid', placeItems: 'center' }} aria-hidden="true">
        <HangerHeart style={{ width: '72%' }} />
      </span>
    );
  }
  return <img className="brand__logo" src="assets/logo-circle.png" alt="" width={size} height={size} onError={() => setFailed(true)} />;
}

/* Foto com fallback ilustrado (quadro "trocar foto") */
function Photo({ photo, showBadge = false, caption }) {
  const [failed, setFailed] = React.useState(false);
  const tint = photo.tint || 'green';
  const hasImg = photo.src && !failed;
  return (
    <div className="slide__inner">
      {hasImg ? (
        <img src={photo.src} alt={photo.alt || ''} loading="lazy" onError={() => setFailed(true)} />
      ) : (
        <div className={`ph ph--${tint}`} role="img" aria-label={photo.alt || 'Foto da loja'}>
          <HangerHeart className="mark" />
        </div>
      )}
      {showBadge && (
        <span className="photo-badge"><Icon name="camera" /> trocar foto</span>
      )}
      {caption && <span className="slide__cap">{caption}</span>}
    </div>
  );
}

/* Anima os blocos com um fade suave. CONTEÚDO É VISÍVEL POR PADRÃO:
   a animação só é "armada" quando este código adiciona data-anim="on" na
   raiz. Assim, se algo falhar ao carregar, nada fica invisível. */
function useReveal() {
  React.useEffect(() => {
    const root = document.querySelector('.lp');
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const revealAll = () => document.querySelectorAll('.reveal:not(.in)').forEach((el) => el.classList.add('in'));
    if (reduce) { revealAll(); return; }

    if (root) root.setAttribute('data-anim', 'on'); // arma a animação (esconde .reveal)
    const check = () => {
      const h = window.innerHeight || document.documentElement.clientHeight || 800;
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => {
        if (el.getBoundingClientRect().top < h * 0.92) el.classList.add('in');
      });
    };
    check();
    const raf = requestAnimationFrame(check);
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    const t = setTimeout(revealAll, 1100); // failsafe: nada fica invisível
    return () => {
      cancelAnimationFrame(raf); clearTimeout(t);
      window.removeEventListener('scroll', check);
      window.removeEventListener('resize', check);
    };
  }, []);
}

/* scroll suave até uma âncora respeitando o header fixo */
function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  window.scrollTo({
    top: el.getBoundingClientRect().top + window.scrollY - 76,
    behavior: reduce ? 'auto' : 'smooth',
  });
}

Object.assign(window, { CFG, NAV, waLink, instaLink, BrandLogo, Photo, useReveal, scrollToId });