// Shared interactive pieces used by both directions.

// Magnetic button: nudges toward the cursor while hovered, snaps back on leave.
// Wrap any element. Accepts `strength` (px), `as`, `className`, `style`, etc.
function Magnetic({ children, strength = 18, className, style, onClick, ariaLabel }) {
  const ref = React.useRef(null);
  const inner = React.useRef(null);
  const raf = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const dx = (e.clientX - cx) / (r.width / 2);
    const dy = (e.clientY - cy) / (r.height / 2);
    const tx = Math.max(-1, Math.min(1, dx)) * strength;
    const ty = Math.max(-1, Math.min(1, dy)) * strength;
    cancelAnimationFrame(raf.current);
    raf.current = requestAnimationFrame(() => {
      if (inner.current) inner.current.style.transform = `translate(${tx}px, ${ty}px)`;
    });
  };
  const onLeave = () => {
    cancelAnimationFrame(raf.current);
    if (inner.current) inner.current.style.transform = 'translate(0,0)';
  };
  return (
    <span
      ref={ref}
      className={className}
      style={{ display: 'inline-block', ...style }}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      onClick={onClick}
      aria-label={ariaLabel}
    >
      <span ref={inner} style={{ display: 'inline-block', transition: 'transform .35s cubic-bezier(.2,.7,.3,1)', willChange: 'transform' }}>
        {children}
      </span>
    </span>
  );
}

// Office portrait placeholder. Striped, professional, with a small monospace caption
// telling the user what to drop in. Used for hero + about.
function PortraitSlot({ caption = "professional portrait", aspect = "3 / 4", style, dark = false, tone = "warm" }) {
  const stripes = dark
    ? "repeating-linear-gradient(135deg, #1a1714 0 14px, #211d18 14px 28px)"
    : tone === "cool"
    ? "repeating-linear-gradient(135deg, #e8e5dc 0 14px, #ddd9cf 14px 28px)"
    : "repeating-linear-gradient(135deg, #eae5d8 0 14px, #ddd6c5 14px 28px)";
  return (
    <div style={{
      aspectRatio: aspect,
      background: stripes,
      position: 'relative',
      overflow: 'hidden',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 14,
        border: dark ? '1px solid rgba(255,255,255,.12)' : '1px solid rgba(0,0,0,.08)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        padding: 14, pointerEvents: 'none',
      }}>
        <div style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.45)' }}>
          ⌐ image slot
        </div>
        <div style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 11, color: dark ? 'rgba(255,255,255,.65)' : 'rgba(0,0,0,.55)' }}>
          {caption}
        </div>
      </div>
    </div>
  );
}

// Lang toggle: small segmented control. Used by both directions.
function LangToggle({ lang, setLang, theme = "light" }) {
  const dark = theme === "dark";
  const items = ["EN", "TR"];
  return (
    <div style={{
      display: 'inline-flex',
      border: dark ? '1px solid rgba(255,255,255,.18)' : '1px solid rgba(0,0,0,.14)',
      borderRadius: 999,
      padding: 2,
      fontFamily: 'JetBrains Mono, ui-monospace, monospace',
      fontSize: 11,
      letterSpacing: '0.08em',
    }}>
      {items.map((k) => {
        const v = k.toLowerCase();
        const active = lang === v;
        return (
          <button key={k} onClick={() => setLang(v)} style={{
            border: 'none', cursor: 'pointer',
            padding: '4px 10px', borderRadius: 999,
            background: active ? (dark ? '#fff' : '#1a1714') : 'transparent',
            color: active ? (dark ? '#000' : '#f5f2ec') : (dark ? 'rgba(255,255,255,.7)' : 'rgba(0,0,0,.65)'),
            fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
            transition: 'background .2s, color .2s',
          }}>{k}</button>
        );
      })}
    </div>
  );
}

// LangToggle for the brutalist style — square, hard, mono.
function LangToggleBrut({ lang, setLang }) {
  const items = ["EN", "TR"];
  return (
    <div style={{ display: 'inline-flex', border: '1.5px solid #000', fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 11, fontWeight: 600 }}>
      {items.map((k, i) => {
        const v = k.toLowerCase();
        const active = lang === v;
        return (
          <button key={k} onClick={() => setLang(v)} style={{
            border: 'none', borderLeft: i ? '1.5px solid #000' : 'none', cursor: 'pointer',
            padding: '6px 10px',
            background: active ? '#000' : '#fff',
            color: active ? '#fff' : '#000',
            fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit',
          }}>{k}</button>
        );
      })}
    </div>
  );
}

Object.assign(window, { Magnetic, PortraitSlot, LangToggle, LangToggleBrut });