// Shared atoms / icons / primitives

const FlameIcon = ({ size = 20, color = "#1AA5F5" }) =>
<svg width={size} height={size * 1.25} viewBox="0 0 40 50" fill="none" aria-hidden="true">
    <path d="M20 4 C 22 12, 30 16, 30 26 C 30 34, 26 40, 20 40 C 14 40, 10 34, 10 26 C 10 18, 16 14, 16 8 C 18 10, 18 12, 20 4 Z" fill={color} />
    <path d="M22 14 C 24 16, 25 19, 22 22" stroke="#0A0A0F" strokeWidth="1.5" fill="none" strokeLinecap="round" />
  </svg>;


const ArrowRight = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const ArrowUpRight = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Plus = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>;


const Asterisk = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 4v16M5.6 7.2l12.8 9.6M5.6 16.8l12.8-9.6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>;


const Logo = ({ inverted = false, compact = false, horizontal = false }) => {
  const src = horizontal ? "assets/ignited-horizontal.png" : "assets/ignited-mark.png";
  const height = horizontal ? (compact ? 44 : 64) : (compact ? 48 : 64);
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <img
        src={src}
        alt="Ignited — Lighting the Way"
        style={{
          height,
          width: "auto",
          display: "block",
          filter: inverted ? "invert(1) brightness(2)" : "none",
        }}
      />
    </div>
  );
};

// Pill button (inline blue)
const PillButton = ({ children, variant = "blue", size = "md", as: As = "button", ...rest }) => {
  const sizes = {
    sm: { padding: "10px 16px", fontSize: 12, gap: 8 },
    md: { padding: "14px 22px", fontSize: 13, gap: 10 },
    lg: { padding: "18px 28px", fontSize: 14, gap: 12 }
  };
  const variants = {
    blue: { background: "var(--blue)", color: "#fff", border: "1px solid var(--blue)" },
    dark: { background: "var(--ink)", color: "#fff", border: "1px solid var(--ink)" },
    ghost: { background: "transparent", color: "var(--ink)", border: "1px solid var(--rule-strong)" },
    "ghost-dark": { background: "transparent", color: "#fff", border: "1px solid var(--rule-on-dark)" },
    paper: { background: "var(--paper)", color: "var(--ink)", border: "1px solid var(--paper)" }
  };
  return (
    <As
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: sizes[size].gap,
        padding: sizes[size].padding,
        borderRadius: 999,
        fontFamily: "var(--body)",
        fontWeight: 500,
        fontSize: sizes[size].fontSize,
        letterSpacing: "-0.005em",
        cursor: "pointer",
        transition: "transform .2s ease, opacity .2s ease, background .2s ease",
        ...variants[variant]
      }}
      onMouseEnter={(e) => e.currentTarget.style.opacity = "0.88"}
      onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}
      {...rest}>
      
      {children}
    </As>);

};

// Section eyebrow with index + label, monospace
const SectionEyebrow = ({ index, label, color }) =>
<div className="mono" style={{ display: "flex", alignItems: "baseline", gap: 14, color: color || "var(--muted)" }}>
    <span>{index}</span>
    <span style={{ flex: 1, height: 1, background: "currentColor", opacity: 0.35, alignSelf: "center" }}></span>
    <span>{label}</span>
  </div>;


// Image placeholder with subtle stripes + monospace caption
const ImagePlaceholder = ({ ratio = "4/3", label = "[ Image ]", tone = "ink" }) => {
  const isDark = tone === "ink";
  return (
    <div
      style={{
        position: "relative",
        aspectRatio: ratio,
        width: "100%",
        background: isDark ? "var(--ink-soft)" : "var(--paper-2)",
        backgroundImage: `repeating-linear-gradient(135deg, transparent 0 8px, ${isDark ? "rgba(255,255,255,0.03)" : "rgba(10,10,15,0.04)"} 8px 9px)`,
        color: isDark ? "rgba(255,255,255,0.5)" : "rgba(10,10,15,0.5)",
        display: "grid",
        placeItems: "center",
        overflow: "hidden"
      }}>
      
      <div className="mono" style={{ fontSize: 10 }}>{label}</div>
    </div>);

};

// Make available globally
Object.assign(window, {
  FlameIcon, ArrowRight, ArrowUpRight, Plus, Asterisk,
  Logo, PillButton, SectionEyebrow, ImagePlaceholder
});