// 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, disabled }) {
    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} disabled={disabled}
        style={disabled ? { opacity: 0.6, pointerEvents: 'none', ...style } : style}>
        {children}
        {arrow && <Icon name="arrowRight" size={17} className="tf-arr" />}
      </button>
    );
  }

  function Eyebrow({ children, style, center }) {
    // Support both an explicit `center` prop and the legacy
    // style={{ justifyContent: 'center' }} call sites.
    const isCenter = center || (style && style.justifyContent === 'center');
    return (
      <div className={'tf-eyebrow-row' + (isCenter ? ' tf-eyebrow-row--center' : '')} 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>
    );
  }

  // Terraforno "tf" monogram (interlocking t+f). Real brand mark, recolored to
  // inherit the current text color so it sits warm on light and cream on dark.
  function LogoMark({ size = 34, fg = 'currentColor' }) {
    // viewBox 0 0 49 63 with the source translate baked in; strokeWidth gives the "bold" weight.
    const h = size * (63 / 49);
    return (
      <svg className="tf-logo__mark" width={size} height={h} viewBox="0 0 49 63" fill="none" aria-hidden="true" style={{ width: size, height: h }}>
        <g transform="translate(-674, -424)" fill={fg} stroke={fg} strokeWidth="4">
          <path d="M704.039568,450.402797 L704.039568,442.003198 C704.039568,437.421802 705.634555,433.66078 708.824578,430.72002 C712.0146,427.779259 715.874468,426.308901 720.4043,426.308901 L720.4043,428.909139 C716.703874,428.909139 713.56175,430.147336 710.977832,432.623766 C708.393914,435.100196 707.101974,438.226642 707.101974,442.003198 L707.101974,450.402797 L720.5,450.402797 L720.5,452.996204 L707.101974,452.996204 L707.101974,485 L704.039568,485 L704.039568,452.996204 L679.527643,452.996204 L679.527643,469.346939 C679.527643,473.113572 680.804918,476.231803 683.359505,478.701727 C685.914092,481.17165 689.020549,482.406593 692.67897,482.406593 L692.67897,485 C688.200558,485 684.384504,483.533505 681.230693,480.600471 C678.076882,477.667437 676.5,473.916297 676.5,469.346939 L676.5,426 L679.527643,426 L679.527643,450.402797 L704.039568,450.402797 Z" />
        </g>
      </svg>
    );
  }

  function Logo({ onClick, light }) {
    // Monogram mark + terra/forno wordmark artwork. The PNG is navy on transparent,
    // so we tint it per background: warm ink on light, cream on the dark hero/footer.
    return (
      <div className="tf-logo" onClick={onClick}>
        <LogoMark fg={light ? '#F6ECDD' : 'var(--fg-1)'} />
        <img
          className={'tf-logo__wordmark' + (light ? ' tf-logo__wordmark--light' : '')}
          src="assets/terraforno-wordmark.png"
          alt="Terraforno"
          draggable="false"
        />
      </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 });
})();