/* ============================================================
   theme.jsx — shared atoms, icons, hooks
   Exposed on window for the section files to use.
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---- scroll reveal ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e, i) => { e.style.transitionDelay = Math.min(i % 4, 3) * 70 + 'ms'; io.observe(e); });
    return () => io.disconnect();
  });
}

/* ---- little inline icons (stroke, currentColor) ---- */
const Ico = {
  phone: "M6.6 2.5 3.8 3.2c-.7.2-1.1.9-1 1.6.7 5 4.9 9.2 9.9 9.9.7.1 1.4-.3 1.6-1l.7-2.8c.1-.6-.2-1.2-.8-1.4l-2.7-1c-.5-.2-1-.1-1.4.3l-.9.9C7.9 9 7 8.1 6.3 6.9l.9-.9c.4-.4.5-.9.3-1.4l-1-2.7c-.2-.6-.8-.9-1.4-.8Z",
  mail: "M2.5 5.5h13v9h-13zM2.8 6 9 10.2 15.2 6",
  pin: "M9 16s5.5-4.7 5.5-8.5a5.5 5.5 0 1 0-11 0C3.5 11.3 9 16 9 16Z M9 7.5v.01",
  clock: "M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM9 6v3l2 1.3",
  arrow: "M3.5 9h11M10 4.5 14.5 9 10 13.5",
  star: "M9 2.5l1.9 3.9 4.3.6-3.1 3 .7 4.3L9 12.3 5.2 14.3l.7-4.3-3.1-3 4.3-.6z",
  heart: "M9 15S2.5 11 2.5 6.6A3.1 3.1 0 0 1 9 5a3.1 3.1 0 0 1 6.5 1.6C15.5 11 9 15 9 15Z",
};
function I({ d, size = 18, sw = 1.7, fill = false, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill={fill ? "currentColor" : "none"}
         stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg} />)}
    </svg>
  );
}

/* ---- decorative ice-cream scoop (simple circles + cone) ---- */
function Scoop({ flavors = ['var(--rose)', 'var(--peach)', 'var(--mint)'], size = 64 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <path d="M22 30 L42 30 L32 60 Z" fill="var(--peach)" stroke="var(--gold-deep)" strokeWidth="1.4" />
      <path d="M25 36 L39 36 M27 42 L37 42 M30 48 L34 48" stroke="var(--gold-deep)" strokeWidth="1.2" opacity=".5" />
      <circle cx="24" cy="26" r="11" fill={flavors[0]} />
      <circle cx="40" cy="26" r="11" fill={flavors[1]} />
      <circle cx="32" cy="18" r="11" fill={flavors[2]} />
      <circle cx="32" cy="7" r="3.4" fill="var(--gold)" />
    </svg>
  );
}

/* small flavor "scoop dot" used as bullet */
function Dot({ c }) { return <span className="dot" style={{ background: c }}>✓</span>; }

/* heart sprinkle cluster — pure decorative, simple */
function Sprinkle({ top, left, right, c = 'var(--rose)', s = 14, delay = 0 }) {
  return <span className="float" style={{ position: 'absolute', top, left, right, color: c, opacity: .8, animationDelay: delay + 's', pointerEvents: 'none' }}>
    <I d={Ico.heart} size={s} fill />
  </span>;
}

Object.assign(window, { useReveal, Ico, I, Scoop, Dot, Sprinkle, useState, useEffect, useRef });