/* atoms.jsx, shared small components */

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

function ScriptWord({ children, size = 64, color, underline = true }) {
  return (
    <span style={{ position: "relative", display: "inline-block", lineHeight: 0.9 }}>
      <span className="script" style={{
        fontFamily: "var(--font-script)",
        color: color || "var(--scd-blush-700)",
        fontWeight: 500,
        fontSize: size,
        lineHeight: 0.9,
        display: "inline-block",
        verticalAlign: "baseline",
      }}>{children}</span>
      {underline && (
        <span className="script-underline" style={{
          position: "absolute",
          left: "3%", right: "3%",
          bottom: -Math.max(2, size * 0.02),
          height: Math.max(1.5, size * 0.025),
          background: "var(--scd-blush-500)",
          borderRadius: 2,
          pointerEvents: "none",
        }}/>
      )}
    </span>
  );
}

function Badge({ children, variant = "outline", style }) {
  const variants = {
    outline: { background: "transparent", color: "var(--scd-navy-800)", border: "1px solid var(--scd-navy-800)" },
    navy:    { background: "var(--scd-navy-800)", color: "var(--scd-cream-50)" },
    cream:   { background: "var(--scd-cream-300)", color: "var(--scd-navy-800)" },
    blush:   { background: "var(--scd-blush-100)", color: "var(--scd-blush-700)" },
    stock:   { background: "transparent", color: "var(--scd-success)", border: "1px solid rgba(75,107,62,0.35)" },
  };
  return (
    <span style={{
      fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 600,
      letterSpacing: "0.14em", textTransform: "uppercase",
      padding: "4px 9px", borderRadius: 2, display: "inline-flex", alignItems: "center", gap: 6,
      ...variants[variant], ...style,
    }}>{children}</span>
  );
}

function Arrow({ style }) {
  return <span style={{ display: "inline-block", transform: "translateY(-1px)", ...style }}>→</span>;
}

/* Small re-usable seal mark, SVG, derived from logo medallion. */
function Seal({ size = 120, tone = "navy", text = "EST · ORANGE COUNTY · 1980", textBot = "· FAMILY OWNED · NATIONAL SUPPLY ·" }) {
  const ink = tone === "cream" ? "#F5EFE4" : "#1C2A47";
  const bg = tone === "cream" ? "transparent" : "transparent";
  const accent = "#D9A6A6";
  const uid = React.useId().replace(/:/g, "");
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" aria-hidden="true">
      <defs>
        <path id={`arcTop-${uid}`} d="M 60,60 m -46,0 a 46,46 0 0,1 92,0" fill="none"/>
        <path id={`arcBot-${uid}`} d="M 60,60 m -46,0 a 46,46 0 0,0 92,0" fill="none"/>
      </defs>
      <circle cx="60" cy="60" r="57" fill={bg} stroke={ink} strokeWidth="1.25"/>
      <circle cx="60" cy="60" r="52" fill="none" stroke={ink} strokeWidth="0.6"/>
      <text fill={ink} fontFamily="Inter, sans-serif" fontSize="5.8" letterSpacing="1.8" fontWeight="500">
        <textPath href={`#arcTop-${uid}`} startOffset="50%" textAnchor="middle">{text}</textPath>
      </text>
      <text fill={ink} fontFamily="Inter, sans-serif" fontSize="5.8" letterSpacing="1.8" fontWeight="500">
        <textPath href={`#arcBot-${uid}`} startOffset="50%" textAnchor="middle">{textBot}</textPath>
      </text>
      <text x="60" y="72" textAnchor="middle" fontFamily="Playfair Display, Georgia, serif" fontSize="30" fill={ink} fontWeight="500" letterSpacing="-1">SCD</text>
      <line x1="44" y1="82" x2="76" y2="82" stroke={accent} strokeWidth="1.4"/>
    </svg>
  );
}

/* Image placeholder tile with an intent caption, honest about being a placeholder */
function Placeholder({ ratio = "4/3", caption, tone = "cream", minHeight }) {
  const bg = tone === "navy" ? "var(--scd-navy-800)"
    : tone === "deep" ? "var(--scd-cream-300)"
    : tone === "sunk" ? "var(--scd-cream-200)"
    : "var(--scd-cream-200)";
  const fg = tone === "navy" ? "var(--scd-cream-200)" : "var(--scd-ink-700)";
  return (
    <div className="placeholder" style={{
      aspectRatio: minHeight ? undefined : ratio,
      minHeight,
      background: bg,
      color: fg,
    }} role="img" aria-label={caption}>
      <div className="placeholder__grain"/>
      <span style={{
        position: "absolute", top: 14, left: 30,
        fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
        color: tone === "navy" ? "var(--scd-blush-300)" : "var(--scd-blush-700)",
        fontWeight: 600, fontFamily: "var(--font-body)",
      }}>Placeholder</span>
      <span className="placeholder__caption">{caption}</span>
    </div>
  );
}

Object.assign(window, { Eyebrow, ScriptWord, Seal, Badge, Arrow, Placeholder });