// Reusable atoms: Button, MonoTag, EyebrowLabel, Hairline, ArrowGlyph, AccentDot, Reveal.

function Button({ children, variant = "primary", as = "button", href, onClick, type, ...rest }) {
  const base = {
    fontFamily: "var(--font-sans)",
    fontSize: 14,
    fontWeight: 500,
    padding: "12px 20px",
    borderRadius: 6,
    border: "1px solid transparent",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    textDecoration: "none",
    transition: "background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)",
    lineHeight: 1,
    position: "relative"
  };
  const variants = {
    primary: { background: "var(--ink)", color: "var(--paper)" },
    flame: { background: "var(--site-accent, var(--flame))", color: "var(--site-accent-fg, var(--paper))" },
    secondary: { background: "transparent", color: "var(--fg-1)", borderColor: "var(--border-2)" },
    ghost: { background: "transparent", color: "var(--fg-1)" },
    invert: { background: "var(--paper)", color: "var(--ink)" },
    outline: { background: "transparent", color: "var(--paper)", borderColor: "rgba(245,243,238,0.28)" }
  };
  const Tag = href ? "a" : as;
  return (
    <Tag
      href={href}
      onClick={onClick}
      type={type}
      style={{ ...base, ...variants[variant] }}
      onMouseEnter={(e) => {
        if (variant === "primary") e.currentTarget.style.background = "var(--n-700)";
        if (variant === "flame") e.currentTarget.style.background = "var(--flame-hover)";
        if (variant === "secondary") e.currentTarget.style.borderColor = "var(--border-3)";
        if (variant === "outline") e.currentTarget.style.borderColor = "var(--site-accent, var(--flame))";
      }}
      onMouseLeave={(e) => {
        if (variant === "primary") e.currentTarget.style.background = "var(--ink)";
        if (variant === "flame") e.currentTarget.style.background = "var(--site-accent, var(--flame))";
        if (variant === "secondary") e.currentTarget.style.borderColor = "var(--border-2)";
        if (variant === "outline") e.currentTarget.style.borderColor = "rgba(245,243,238,0.28)";
      }}
      {...rest}>
      
      {children}
    </Tag>);

}

function MonoTag({ children, tone = "default" }) {
  const tones = {
    default: { background: "transparent", color: "var(--fg-1)", borderColor: "var(--border-2)" },
    ink: { background: "var(--ink)", color: "var(--paper)", borderColor: "transparent" },
    flame: { background: "var(--site-accent, var(--flame))", color: "var(--site-accent-fg, var(--paper))", borderColor: "transparent" },
    invert: { background: "transparent", color: "var(--paper)", borderColor: "rgba(245,243,238,0.2)" }
  };
  return (
    <span style={{
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      fontWeight: 500,
      letterSpacing: "0.10em",
      textTransform: "uppercase",
      padding: "5px 9px",
      borderRadius: 3,
      border: "1px solid",
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      lineHeight: 1,
      ...tones[tone]
    }}>{children}</span>);

}

function EyebrowLabel({ children, prefix = "//", style, color }) {
  return (
    <span style={{
      fontFamily: "var(--font-mono)",
      fontSize: 12,
      fontWeight: 500,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
      color: color || "var(--fg-2)",
      display: "inline-flex",
      gap: 8,
      ...style
    }}>
      {prefix && <span style={{ color: "var(--site-accent, var(--flame))" }}>{prefix}</span>}
      {children}
    </span>);

}

function Hairline({ orientation = "horizontal", color = "var(--border-1)", flex, style }) {
  if (orientation === "vertical") {
    return <span style={{ width: 1, alignSelf: "stretch", background: color, flex, ...style }} />;
  }
  return <span style={{ height: 1, alignSelf: "stretch", background: color, flex, ...style }} />;
}

function ArrowGlyph({ direction = "right", size = 14 }) {
  const map = { right: "→", up: "↗", down: "↘", left: "←" };
  return (
    <span style={{
      fontFamily: "var(--font-mono)",
      fontSize: size,
      display: "inline-block",
      transform: "translateY(-1px)"
    }}>{map[direction] || "→"}</span>);

}

function AccentDot() {
  return <span style={{ color: "var(--site-accent, var(--flame))" }}></span>;
}

// DirectLink — mailto/tel links that reliably open the system handler.
function DirectLink({ href, children, style, ...rest }) {
  const open = (e) => {
    e.preventDefault();
    window.location.assign(href);
  };

  return (
    <a
      href={href}
      onClick={open}
      style={{ cursor: "pointer", ...style }}
      {...rest}
    >
      {children}
    </a>
  );
}

// Reveal wrapper — adds .in via IntersectionObserver.
// Usage: <Reveal className="reveal-up" delay={120}>...children...</Reveal>
function Reveal({ children, className = "reveal-up", delay = 0, as = "div", style, threshold = 0.15, once = true, ...rest }) {
  const [ref] = useReveal({ threshold, once });
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={className}
      style={{ ...(style || {}), "--reveal-delay": `${delay}ms` }}
      {...rest}>
      
      {children}
    </Tag>);

}

// SectionHeader — eyebrow + headline with hairline draw.
function SectionHeader({ eyebrow, title, sub, alignRight, accent, dark }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(0, 7fr) minmax(0, 5fr)",
      gap: 48,
      alignItems: "end"
    }} className="grid-2">
      <Reveal className="reveal-up col gap-4">
        <EyebrowLabel color={dark ? "var(--n-400)" : undefined}>{eyebrow}</EyebrowLabel>
        <h2 className="section-headline" style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(40px, 5.5vw, 72px)",
          fontWeight: 500,
          lineHeight: 1.0,
          letterSpacing: "-0.025em",
          margin: 0,
          maxWidth: "18ch",
          color: dark ? "var(--paper)" : "var(--fg-1)"
        }}>
          {title} {accent && <AccentDot />}
        </h2>
      </Reveal>
      {sub &&
      <Reveal className="reveal-up" delay={200} style={{
        fontFamily: "var(--font-sans)",
        fontSize: 16,
        lineHeight: 1.65,
        color: dark ? "var(--n-300)" : "var(--fg-2)",
        maxWidth: "46ch",
        margin: 0,
        paddingBottom: 12
      }}>{sub}</Reveal>
      }
    </div>);

}

Object.assign(window, { Button, MonoTag, EyebrowLabel, Hairline, ArrowGlyph, AccentDot, DirectLink, Reveal, SectionHeader });