/* global React */
const { useState: _atomUseState } = React;

// ─── Buttons ───────────────────────────────────────────────────────────────

function Button({ children, variant = "primary", size = "md", icon, iconLeft, onClick, type = "button", style: extraStyle = {}, className }) {
  const base = {
    fontFamily: "var(--font-body)",
    fontWeight: 600,
    border: 0,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    lineHeight: 1,
    transition: "all 180ms cubic-bezier(0.22,1,0.36,1)",
    borderRadius: 999,
    whiteSpace: "nowrap",
  };
  const sizes = {
    sm: { fontSize: 13, padding: "8px 14px" },
    md: { fontSize: 14.5, padding: "12px 20px" },
    lg: { fontSize: 16, padding: "16px 28px" },
  };
  const variants = {
    primary:   { background: "var(--ink)", color: "var(--cream)" },
    marigold:  { background: "var(--marigold-400)", color: "var(--marigold-900)" },
    secondary: { background: "transparent", color: "var(--ink)", boxShadow: "inset 0 0 0 1.5px var(--ink)" },
    ghost:     { background: "transparent", color: "var(--ink-soft)" },
    cream:     { background: "var(--cream)", color: "var(--ink)" },
  };
  return (
    <button
      type={type}
      onClick={onClick}
      className={className}
      style={{ ...base, ...sizes[size], ...variants[variant], ...extraStyle }}
      onMouseDown={(e) => e.currentTarget.style.transform = "scale(0.98)"}
      onMouseUp={(e) => e.currentTarget.style.transform = "scale(1)"}
      onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
    >
      {iconLeft && <i data-lucide={iconLeft} style={{ width: 16, height: 16, strokeWidth: 2 }}></i>}
      {children}
      {icon && <i data-lucide={icon} style={{ width: 16, height: 16, strokeWidth: 2 }}></i>}
    </button>
  );
}

// ─── Tag (pill) ───────────────────────────────────────────────────────────

function Tag({ children, tone = "outline", dot = false, active = false, onClick }) {
  const tones = {
    ink:      { background: "var(--ink)", color: "var(--cream)" },
    marigold: { background: "var(--marigold-200)", color: "var(--marigold-900)" },
    tide:     { background: "var(--tide-100)", color: "var(--tide-700)" },
    blush:    { background: "var(--blush)", color: "var(--marigold-800)" },
    outline:  { background: "transparent", color: "var(--ink)", boxShadow: "inset 0 0 0 1.25px rgba(42,33,24,0.32)" },
    success:  { background: "rgba(79,138,85,0.18)", color: "#2A5530" },
  };
  const style = {
    fontFamily: "var(--font-body)",
    fontSize: 13,
    fontWeight: 600,
    padding: "6px 12px",
    borderRadius: 999,
    lineHeight: 1,
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    cursor: onClick ? "pointer" : "default",
    transition: "all 120ms cubic-bezier(0.22,1,0.36,1)",
    ...(active ? tones.ink : tones[tone]),
  };
  return (
    <span style={style} onClick={onClick}>
      {dot && (
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor", opacity: 0.7 }} />
      )}
      {children}
    </span>
  );
}

function Eyebrow({ children, color = "var(--ink-muted)" }) {
  return (
    <div style={{
      fontFamily: "var(--font-body)",
      fontSize: 12,
      color,
      letterSpacing: "0.16em",
      textTransform: "uppercase",
      fontWeight: 700,
    }}>{children}</div>
  );
}

function Stars({ count = 3, color = "var(--marigold-500)", style = {} }) {
  const glyphs = ["✦", "✧", "✶"];
  return (
    <span style={{ display: "inline-flex", gap: 6, color, fontFamily: "var(--font-display)", ...style }}>
      {Array.from({ length: count }).map((_, i) => <span key={i}>{glyphs[i % 3]}</span>)}
    </span>
  );
}

// ─── Marginalia: tape, notes, arrows ───────────────────────────────────────

function Tape({ tone = "marigold", rotate = -4, width = 90, top = 0, left = 0, right, bottom, style: extra = {}, opacity = 0.62 }) {
  const tones = {
    marigold: "linear-gradient(180deg, rgba(245,165,36,0.55), rgba(232,128,31,0.65))",
    tide:     "linear-gradient(180deg, rgba(183,210,230,0.78), rgba(91,134,179,0.55))",
    blush:    "linear-gradient(180deg, rgba(251,224,204,0.85), rgba(244,201,176,0.78))",
    cream:    "linear-gradient(180deg, rgba(247,241,232,0.92), rgba(232,225,210,0.86))",
  };
  return (
    <div style={{
      position: "absolute",
      top, left, right, bottom,
      width,
      height: 22,
      background: tones[tone] || tones.marigold,
      transform: `rotate(${rotate}deg)`,
      opacity,
      boxShadow: "0 2px 6px rgba(42,33,24,0.10)",
      pointerEvents: "none",
      zIndex: 3,
      ...extra,
    }} />
  );
}

// Handwritten note with optional arrow/underline. Position with absolute or use inline.
function MarginNote({ children, rotate = -3, color = "var(--marigold-700)", size = 22, style: extra = {}, arrow = null, underline = false }) {
  return (
    <div style={{
      fontFamily: "var(--font-hand)",
      fontSize: size,
      color,
      lineHeight: 1.1,
      transform: `rotate(${rotate}deg)`,
      transformOrigin: "left center",
      display: "inline-block",
      position: "relative",
      ...extra,
    }}>
      {children}
      {underline && (
        <svg width="120" height="10" viewBox="0 0 120 10" style={{ position: "absolute", left: 0, bottom: -6, display: "block", overflow: "visible" }}>
          <path d="M2 6 C 30 1, 70 9, 118 4" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.7" />
        </svg>
      )}
      {arrow && (
        <Arrow direction={arrow} color={color} style={{ position: "absolute", ...arrow.style }} />
      )}
    </div>
  );
}

// Squiggly hand-drawn arrow
function Arrow({ direction = "down-right", color = "var(--marigold-700)", size = 48, style: extra = {} }) {
  const paths = {
    "down-right": "M4 4 C 18 4, 22 24, 14 30 C 10 33, 6 36, 2 38 M2 38 L 8 32 M2 38 L 9 40",
    "down-left":  "M44 4 C 30 4, 26 24, 34 30 C 38 33, 42 36, 46 38 M46 38 L 40 32 M46 38 L 39 40",
    "right":      "M2 24 C 14 22, 30 24, 44 24 M44 24 L 38 18 M44 24 L 38 30",
    "left":       "M46 24 C 34 22, 18 24, 4 24 M4 24 L 10 18 M4 24 L 10 30",
    "up":         "M24 46 C 22 30, 24 14, 24 4 M24 4 L 18 12 M24 4 L 30 12",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{ pointerEvents: "none", ...extra }}>
      <path d={paths[direction] || paths["down-right"]} stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Doodle ornaments — small marks that look hand-drawn
function Doodle({ kind = "sparkle", size = 36, color = "var(--marigold-500)", style: extra = {} }) {
  const paths = {
    sparkle: <path d="M18 4 L20 16 L32 18 L20 20 L18 32 L16 20 L4 18 L16 16 Z" fill={color} opacity="0.85" />,
    sun: (
      <g stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round">
        <circle cx="18" cy="18" r="6" />
        <path d="M18 4 V8 M18 28 V32 M4 18 H8 M28 18 H32 M8 8 L11 11 M25 25 L28 28 M28 8 L25 11 M8 28 L11 25" />
      </g>
    ),
    moon: <path d="M22 6 A 12 12 0 1 0 22 30 A 9 9 0 1 1 22 6 Z" fill={color} opacity="0.75" />,
    heart: <path d="M18 30 C 4 22, 4 10, 12 8 C 15 8, 17 10, 18 12 C 19 10, 21 8, 24 8 C 32 10, 32 22, 18 30 Z" fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round" />,
    star: <path d="M18 4 L21 14 L31 14 L23 20 L26 30 L18 24 L10 30 L13 20 L5 14 L15 14 Z" fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="round" />,
    asterisk: (
      <g stroke={color} strokeWidth="1.6" strokeLinecap="round">
        <line x1="18" y1="6" x2="18" y2="30" />
        <line x1="6" y1="18" x2="30" y2="18" />
        <line x1="9" y1="9" x2="27" y2="27" />
        <line x1="27" y1="9" x2="9" y2="27" />
      </g>
    ),
    swirl: <path d="M6 18 C 6 10, 30 10, 30 18 C 30 26, 12 26, 12 18 C 12 14, 24 14, 24 18" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" style={{ pointerEvents: "none", ...extra }}>
      {paths[kind] || paths.sparkle}
    </svg>
  );
}

window.Button = Button;
window.Tag = Tag;
window.Eyebrow = Eyebrow;
window.Stars = Stars;
window.Tape = Tape;
window.MarginNote = MarginNote;
window.Arrow = Arrow;
window.Doodle = Doodle;