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

// NoodleSeed logo mark (just the seed + swoosh dot)
function NoodleSeedMark({ size = 28, className = "" }) {
  const style = size === "100%" ? { width: "100%", height: "100%", display: "block" } : { display: "block" };
  const w = size === "100%" ? undefined : size;
  const h = size === "100%" ? undefined : size;
  return (
    <svg width={w} height={h} style={style} viewBox="0 0 40 40" className={className} fill="none" aria-hidden preserveAspectRatio="xMidYMid meet">
      {/* tiny dot */}
      <circle cx="3" cy="3" r="2.7" fill="currentColor"/>
      {/* curved stem */}
      <path d="M21.7 38.4c-9 0-16.2-7.2-16.2-16l.1-16.1 16.5 0c9 0 16.2 7.1 16.2 16 0 8.9-7.4 16.1-16.5 16.1Z" fill="currentColor"/>
      <path d="M22.7 6.9c9 0 16.2 7.1 16.2 16l0 16.1-16.5 0c-9 0-16.2-7.2-16.2-16 0-8.9 7.4-16.1 16.5-16.1Z" fill="currentColor"/>
    </svg>
  );
}

// Halo wing glyph, optionally with animated stroke
function Halo({ size = 64, animate = false, tone = "accent" }) {
  const gradientId = useMemo(() => "haloGrad_" + Math.random().toString(36).slice(2, 8), []);
  const strokeUrl = tone === "accent" ? `url(#${gradientId})` : "currentColor";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden
      style={animate ? { animation: "breathe 2.4s ease-in-out infinite" } : {}}>
      <defs>
        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#FB923C"/>
          <stop offset="50%" stopColor="#F472B6"/>
          <stop offset="100%" stopColor="#FDBA74"/>
        </linearGradient>
      </defs>
      <path d="M5.89 15.15 17.64 15.07c3 0 4.12-1.53 4.12-3.43 0-1.9-1.2-3.34-4.19-3.34L5.82 8.35c-3 0-4.12 1.53-4.12 3.43 0 1.9 1.2 3.34 4.19 3.37Z"
        stroke={strokeUrl} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Pill button — primary uses the signature inset-shadow treatment
function PillButton({ variant = "primary", size = "lg", children, onClick, disabled, className = "", style = {} }) {
  const sizes = {
    sm: { h: 40, px: 18, fs: 14 },
    md: { h: 52, px: 26, fs: 15 },
    lg: { h: 64, px: 36, fs: 17 },
    xl: { h: 76, px: 44, fs: 19 }
  };
  const s = sizes[size];
  const base = {
    height: s.h, paddingLeft: s.px, paddingRight: s.px, fontSize: s.fs,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    gap: 10, borderRadius: 9999, cursor: disabled ? "default" : "pointer",
    transition: "transform .2s var(--ease-apple), background .2s, border-color .2s, opacity .2s",
    border: "none", position: "relative", overflow: "hidden",
    opacity: disabled ? 0.45 : 1, fontWeight: 500, letterSpacing: "-0.005em",
    ...style
  };
  if (variant === "primary") {
    return (
      <button onClick={onClick} disabled={disabled} className={className}
        style={{ ...base, background: "var(--stone-950)", color: "#fff",
          boxShadow: "inset 0 -6px 12px -4px rgba(200,200,200,0.4), 0 2px 4px rgba(12,10,9,0.15)" }}
        onPointerDown={e => !disabled && (e.currentTarget.style.transform = "scale(0.98)")}
        onPointerUp={e => (e.currentTarget.style.transform = "scale(1)")}
        onPointerLeave={e => (e.currentTarget.style.transform = "scale(1)")}>
        <span aria-hidden style={{ position: "absolute", inset: 2, borderRadius: 9999,
          border: "1px solid rgba(168,162,158,0.5)", pointerEvents: "none" }}/>
        <span style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 10 }}>{children}</span>
      </button>
    );
  }
  return (
    <button onClick={onClick} disabled={disabled} className={className}
      style={{ ...base, background: "transparent", color: "var(--fg-1)",
        border: "1px solid var(--border)" }}>
      {children}
    </button>
  );
}

// Badge (pill)
function Badge({ children, tone = "outline" }) {
  const tones = {
    outline: { bg: "transparent", fg: "var(--fg-1)", bd: "var(--fg-1)" },
    soft:    { bg: "var(--stone-100)", fg: "var(--fg-2)", bd: "transparent" },
    dark:    { bg: "var(--stone-950)", fg: "#fff", bd: "transparent" }
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontSize: 12, fontWeight: 500, letterSpacing: "0.04em",
      textTransform: "uppercase", padding: "6px 12px", borderRadius: 9999,
      background: t.bg, color: t.fg,
      border: t.bd === "transparent" ? "none" : `1px solid ${t.bd}`
    }}>{children}</span>
  );
}

// Top chrome (logo + event line)
function Chrome({ eventLine, onReset, showReset }) {
  return (
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "22px 28px", pointerEvents: "none"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, pointerEvents: "auto" }}>
        <NoodleSeedMark size={22} />
        <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: "-0.01em" }}>Noodle Seed</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, pointerEvents: "auto" }}>
        <span className="caption" style={{ letterSpacing: "0.06em", textTransform: "uppercase" }}>{eventLine}</span>
        {showReset && (
          <button onClick={onReset}
            style={{ fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase",
              padding: "6px 12px", borderRadius: 9999, border: "1px solid var(--border)",
              background: "transparent", color: "var(--fg-2)", cursor: "pointer" }}>
            Next person ↻
          </button>
        )}
      </div>
    </div>
  );
}

// Rotating serif-italic word (hero pattern)
function RotatingSerif({ words, interval = 1800 }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % words.length), interval);
    return () => clearInterval(t);
  }, [words, interval]);
  return (
    <span key={i} className="serif-accent"
      style={{ display: "inline-block", animation: "fadeSlide .5s var(--ease-apple)",
        fontStyle: "italic", fontFamily: "var(--font-serif)", color: "var(--fg-1)" }}>
      {words[i]}
    </span>
  );
}

Object.assign(window, { NoodleSeedMark, Halo, PillButton, Badge, Chrome, RotatingSerif, useState, useEffect, useRef, useCallback, useMemo });