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

function Star({ size = 24, fill = "#2f1d4b" }) {
  const id = `sg-${size}`;
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <defs>
        <radialGradient id={id} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#e6d4ff"/>
          <stop offset="60%" stopColor="#c3a8ff"/>
          <stop offset="100%" stopColor="#7e5dc7"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="11" fill={`url(#${id})`} opacity="0.55"/>
      <path d="M32 2 L34.4 28 L32 32 L29.6 28 Z M32 62 L34.4 36 L32 32 L29.6 36 Z" fill={fill}/>
      <path d="M2 32 L28 34.4 L32 32 L28 29.6 Z M62 32 L36 34.4 L32 32 L36 29.6 Z" fill={fill}/>
    </svg>
  );
}

function Wordmark({ size = "md", on = "light" }) {
  const sizes = {
    sm: { word: 22, sub: 8,  gap: 6,  sep: 3,  starSize: 11 },
    md: { word: 28, sub: 9,  gap: 8,  sep: 3,  starSize: 13 },
    lg: { word: 96, sub: 13, gap: 28, sep: 6,  starSize: 36 },
    xl: { word: 200, sub: 22, gap: 60, sep: 12, starSize: 70 },
  }[size];
  const fg  = on === "dark" ? "#faf5ec" : "#2f1d4b";
  const sub = on === "dark" ? "#c3a8ff" : "#758766";
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", lineHeight: 1 }}>
      <Star size={sizes.starSize} fill={fg}/>
      <div style={{ fontFamily: "Fraunces, Georgia, serif", fontSize: sizes.word, fontWeight: 500, color: fg, letterSpacing: "-0.04em", marginTop: -sizes.starSize * 0.25 }}>Nova</div>
      <div style={{ fontFamily: "'Open Sauce Sans', sans-serif", fontSize: sizes.sub, fontWeight: 600, letterSpacing: `${sizes.sep}px`, color: sub, marginTop: 4, paddingLeft: sizes.sep }}>ADMIN SOLUTIONS</div>
    </div>
  );
}

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

function Button({ variant = "primary", size, children, onClick, as = "button", href, className = "" }) {
  const cls = `btn btn-${variant}${size === "lg" ? " lg" : ""} ${className}`.trim();
  if (as === "a") return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  return <button className={cls} onClick={onClick}>{children}</button>;
}

function Pill({ children, tone = "purple" }) {
  const map = {
    purple: { bg: "#e7dcfb", fg: "#2f1d4b" },
    green:  { bg: "#effaef", fg: "#3f4d35", border: "#a9bd9a" },
    cream:  { bg: "#f5ecd9", fg: "#2f1d4b" },
    solid:  { bg: "#2f1d4b", fg: "#faf5ec" },
    accent: { bg: "#c3a8ff", fg: "#2f1d4b" },
  }[tone];
  return (
    <span style={{
      display: "inline-block", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em",
      padding: "6px 12px", borderRadius: 999,
      background: map.bg, color: map.fg,
      border: map.border ? `1px solid ${map.border}` : "1px solid transparent"
    }}>{children}</span>
  );
}

function StripeCorner({ position = "tr", color = "#c3a8ff", size = 220, opacity = 0.7 }) {
  const pos = {
    tr: { right: -size * 0.25, top: -size * 0.25 },
    br: { right: -size * 0.25, bottom: -size * 0.25 },
    bl: { left: -size * 0.25, bottom: -size * 0.25 },
    tl: { left: -size * 0.25, top: -size * 0.25 },
  }[position];
  return (
    <div aria-hidden="true" className="stripe-corner" style={{
      width: size, height: size, pointerEvents: "none",
      backgroundImage: `repeating-linear-gradient(45deg, ${color} 0 10px, transparent 10px 20px)`,
      opacity,
      ...pos
    }}/>
  );
}

function Icon({ d, size = 22, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      {d}
    </svg>
  );
}

Object.assign(window, { Star, Wordmark, Eyebrow, Button, Pill, StripeCorner, Icon });