// Shared components for MindMe presentation

const { useEffect, useRef, useState, useMemo, useCallback } = React;

// Intersection-driven reveal wrapper
function Reveal({ children, delay = 0, as = 'div', className = '', style = {}, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.classList.add('in');
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${className}`} style={{ '--reveal-delay': `${delay}ms`, ...style }} {...rest}>
      {children}
    </Tag>
  );
}

// Section header with number + label
function SectionMeta({ num, label, show = true, counter = null }) {
  if (!show) return null;
  return (
    <div className="shell">
      <div className="sec-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="sec-num" style={{ color: 'var(--accent)', fontWeight: 800 }}>{num}</span>
          <span style={{ width: 24, height: 1.5, background: 'var(--line)', display: 'inline-block', flexShrink: 0 }} />
          <span style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</span>
        </span>
        {counter && <span className="slide-counter" style={{ fontSize: 12, color: 'var(--ink-mute)', letterSpacing: '0.08em', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{counter}</span>}
      </div>
    </div>
  );
}

// MindMe wordmark in HTML (not the image)
function Wordmark({ size = 1, withR = true }) {
  return (
    <span style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 800,
      letterSpacing: '-0.04em',
      fontSize: `${size}em`,
      display: 'inline-flex',
      alignItems: 'baseline',
    }}>
      MindMe{withR && <sup style={{ fontSize: '0.4em', verticalAlign: 'top', marginLeft: '2px' }}>®</sup>}
    </span>
  );
}

// Color-block stamp — used as the visual signature inspired by packaging grid
function BlockStamp({ color, accent, label, sub, icon, size = 'md' }) {
  const sizes = {
    sm: { w: 120, h: 160 },
    md: { w: 200, h: 280 },
    lg: { w: 280, h: 380 },
  };
  const s = sizes[size];
  return (
    <div style={{
      width: s.w,
      height: s.h,
      background: color,
      color: '#0A0A0A',
      display: 'grid',
      gridTemplateRows: '1fr auto auto',
      padding: 14,
      fontFamily: 'var(--font-display)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: `linear-gradient(to right, rgba(10,10,10,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,10,10,0.18) 1px, transparent 1px)`,
        backgroundSize: '50% 33%',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        MindMe®
      </div>
      <div style={{ position: 'relative', fontSize: 22, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.02em' }}>
        {label}
      </div>
      <div style={{ position: 'relative', fontSize: 11, fontWeight: 500, opacity: 0.75 }}>{sub}</div>
    </div>
  );
}

// Product card — clean editorial card with color background, packaging photo, name, role, price
function ProductCard({ p, layout = 'cards', onClick }) {
  if (!p) return null;
  if (layout === 'minimal') {
    return (
      <div onClick={onClick} style={{
        display: 'grid',
        gridTemplateColumns: '80px 1fr auto',
        gap: 16,
        alignItems: 'center',
        padding: '20px 0',
        borderBottom: '1px solid var(--line)',
        cursor: onClick ? 'pointer' : 'default',
      }}>
        <img src={p.image} alt={p.name} data-zoomable="true" style={{ height: 80, objectFit: 'contain' }} />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>{p.name}</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 4 }}>{p.role} · {p.format} · {p.portions}</div>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700 }}>
          {p.priceMax ? `${p.price}–${p.priceMax}` : p.price}<span style={{ fontSize: 13, marginLeft: 4, color: 'var(--ink-mute)' }}>грн</span>
        </div>
      </div>
    );
  }
  return (
    <div onClick={onClick} style={{
      background: 'var(--bg)',
      color: '#0A0A0A',
      borderRadius: 0,
      padding: 0,
      position: 'relative',
      overflow: 'hidden',
      cursor: onClick ? 'pointer' : 'default',
      display: 'grid',
      gridTemplateRows: 'auto 1fr auto',
      minHeight: 420,
      border: '1px solid var(--line)',
      transition: 'transform var(--t-fast)',
    }}
    onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
      {/* Color header strip */}
      <div style={{ position: 'relative', background: p.color, padding: '14px 20px', display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#0A0A0A' }}>
        <span>MindMe®</span>
        <span>{p.category}</span>
      </div>

      {/* Product image — large central on neutral bg */}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 16px', background: '#FFFFFF' }}>
        <img src={p.image} alt={p.name} data-zoomable="true" style={{
          maxHeight: 260,
          width: 'auto',
          objectFit: 'contain',
          filter: 'drop-shadow(0 16px 32px rgba(10,10,10,0.15))',
        }} />
      </div>

      {/* Footer */}
      <div style={{ position: 'relative', padding: '20px', background: 'rgba(10,10,10,0.92)', color: p.colorSecondary }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.02em', color: '#F5F1EA' }}>{p.name}</div>
        <div style={{ marginTop: 6, fontSize: 12, fontWeight: 500, letterSpacing: '0.04em', opacity: 0.8, color: '#F5F1EA' }}>{p.role.toUpperCase()}</div>
        <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid rgba(245,241,234,0.18)', paddingTop: 12 }}>
          <span style={{ fontSize: 12, opacity: 0.7, color: '#F5F1EA' }}>{p.format} · {p.portions}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: '#F5F1EA' }}>
            {p.priceMax ? `${p.price}–${p.priceMax}` : p.price}<span style={{ fontSize: 11, marginLeft: 3, opacity: 0.7 }}>грн</span>
          </span>
        </div>
      </div>
    </div>
  );
}

// Export to window for cross-file use
Object.assign(window, { Reveal, SectionMeta, Wordmark, BlockStamp, ProductCard });