/* ============================================================
   TRYONME Landing — Shared components
   ============================================================ */

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

function Eyebrow({ children, color }) {
  return <div className="eyebrow" style={color ? { color } : null}>{children}</div>;
}

function Stamp({ text, size = 100, rotate = -1.5, color, under }) {
  return (
    <span className="wordmark" style={{ transform: `rotate(${rotate}deg)` }}>
      <span className="wordmark__under" style={under ? { background: under } : null}></span>
      <span
        className="wordmark__block"
        style={{
          fontSize: size,
          background: color || "var(--primary)",
        }}
      >{text}</span>
    </span>
  );
}

function Misreg({ text, className = "", style, color = "blue" }) {
  return (
    <span className={`misreg ${color === "pink" ? "pink" : ""} ${className}`} data-text={text} style={style}>
      {text}
    </span>
  );
}

/* Halftone portrait — canvas-rendered placeholder for the phone screen */
function HalftonePortrait({ w = 300, h = 380, highlight, shadow, seed = 7 }) {
  const ref = useRef(null);
  useEffect(() => {
    const c = ref.current;
    if (!c) return;
    const dpr = window.devicePixelRatio || 1;
    c.width = w * dpr;
    c.height = h * dpr;
    c.style.width = w + "px";
    c.style.height = h + "px";
    const ctx = c.getContext("2d");
    ctx.scale(dpr, dpr);
    ctx.clearRect(0, 0, w, h);
    const cellSize = 6;
    const cols = Math.floor(w / cellSize);
    const rows = Math.floor(h / cellSize);
    let s = seed;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    for (let r = 0; r < rows; r++) {
      for (let c2 = 0; c2 < cols; c2++) {
        const cx = c2 * cellSize + cellSize / 2;
        const cy = r * cellSize + cellSize / 2;
        const dx = (cx - w / 2) / w;
        const dy = (cy - h * 0.42) / h;
        const bodyY = (cy - h * 0.55) / h;
        const headDist = Math.sqrt(dx * dx + (dy * 1.3) ** 2);
        const head = Math.max(0, 1 - headDist * 3.4);
        const torso = Math.max(0, 1 - Math.sqrt((dx * 1.4) ** 2 + (bodyY * 0.9) ** 2) * 2.4) * (cy > h * 0.45 ? 1 : 0.0);
        const density = Math.min(1, head + torso * 0.85);
        const radius = density * cellSize * 0.46;
        if (radius > 0.4) {
          const useShadow = rand() < density * 0.55;
          ctx.fillStyle = useShadow ? shadow : highlight;
          ctx.beginPath();
          ctx.arc(cx, cy, radius, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    }
  }, [w, h, highlight, shadow, seed]);
  return <canvas ref={ref} style={{ display: "block" }} />;
}

window.Eyebrow = Eyebrow;
window.Stamp = Stamp;
window.Misreg = Misreg;
window.HalftonePortrait = HalftonePortrait;