// Primitives.jsx — shared building blocks for the Terraforno kit.
(function () {
  const { useEffect, useRef } = React;

  function Button({ children, variant = 'primary', size, arrow, onClick, block, type, style }) {
    const cls = ['tf-btn', `tf-btn--${variant}`];
    if (size === 'lg') cls.push('tf-btn--lg');
    if (block) cls.push('tf-btn--block');
    return (
      <button type={type || 'button'} className={cls.join(' ')} onClick={onClick} style={style}>
        {children}
        {arrow && <Icon name="arrowRight" size={17} className="tf-arr" />}
      </button>
    );
  }

  function Eyebrow({ children, style }) {
    return (
      <div className="tf-eyebrow-row" style={style}>
        <span className="tf-eyebrow">{children}</span>
      </div>
    );
  }

  function Pill({ children, accent }) {
    return <span className={'tf-pill' + (accent ? ' tf-pill--accent' : '')}>{children}</span>;
  }

  function Photo({ tone = 'ember', label = 'Photography', icon = 'flame', style, className = '', grain = true }) {
    return (
      <div className={`tf-photo tf-photo--${tone} ${className}`} style={style}>
        {grain && <div className="tf-grain" />}
        <div className="tf-photo__label">
          <Icon name={icon} size={26} stroke={1.4} />
          <span>{label}</span>
        </div>
      </div>
    );
  }

  function LogoMark({ size = 34, fg = 'currentColor', flame = 'var(--accent)' }) {
    return (
      <svg className="tf-logo__mark" width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true" style={{ width: size, height: size }}>
        <path d="M5 34V20a15 15 0 0 1 30 0v14" stroke={fg} strokeWidth="2.2" strokeLinecap="round" />
        <path d="M5 34h30" stroke={fg} strokeWidth="2.2" strokeLinecap="round" />
        <path d="M12 34V21a8 8 0 0 1 16 0v13" stroke={fg} strokeWidth="1.4" opacity="0.4" />
        <path d="M20 31c-2.6 0-4.4-1.8-4.4-4.2 0-1.6 1-2.9 1.7-3.8.3 1 1.1 1.6 1.9 1.9-.3-2 .4-4 2.2-5.4-.2 1.7.6 2.9 1.6 3.9 1 1 1.8 2 1.8 3.4 0 2.4-2 4.2-4.8 4.2Z" fill={flame} />
      </svg>
    );
  }

  function Logo({ onClick, light }) {
    return (
      <div className="tf-logo" onClick={onClick}>
        <LogoMark fg={light ? '#F6ECDD' : 'var(--fg-1)'} />
        <div className="tf-logo__word" style={{ color: light ? '#F6ECDD' : 'var(--fg-1)' }}>
          Terraforno
          <small>Wood-Fired Ovens</small>
        </div>
      </div>
    );
  }

  function useReveal() {
    const root = useRef(null);
    useEffect(() => {
      const els = root.current ? root.current.querySelectorAll('.tf-reveal') : [];
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      els.forEach((el) => io.observe(el));
      return () => io.disconnect();
    });
    return root;
  }

  Object.assign(window, { TFButton: Button, Eyebrow, Pill, Photo, Logo, LogoMark, useReveal });
})();