// Shared UI primitives — Voltana Vertriebspartner LP
const { useState, useEffect, useRef } = React;

// Diagonal up-right arrow inside a circle (matches Figma button glyph)
function ArrowGlyph({ size = 40, bg = "var(--ink)", stroke = "#fff" }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: size, background: bg,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flex: "0 0 auto",
    }}>
      <svg width={size * 0.42} height={size * 0.42} viewBox="0 0 16 16" fill="none">
        <path d="M4 12L12 4M12 4H5.5M12 4V10.5" stroke={stroke} strokeWidth="1.6"
          strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
  );
}

// The signature pill CTA: lime track, mono label, black circle w/ arrow
function PillButton({ children, onClick, variant = "primary", style = {}, mono = true }) {
  const themes = {
    primary: { track: "var(--accent)", text: "#fff", circle: "var(--ink)", arrow: "#fff" },
    dark:    { track: "var(--ink)",    text: "#fff",     circle: "var(--accent)", arrow: "#fff" },
    ghost:   { track: "transparent",   text: "var(--ink)", circle: "var(--ink)", arrow: "#fff", border: "1px solid var(--line-strong)" },
  };
  const th = themes[variant] || themes.primary;
  return (
    <button onClick={onClick} className="vt-pill" style={{
      display: "inline-flex", alignItems: "center", gap: 14,
      padding: "5px 5px 5px 22px", borderRadius: 999, border: th.border || "none",
      background: th.track, color: th.text, cursor: "pointer",
      fontFamily: mono ? "var(--font-mono)" : "var(--font-head)",
      fontSize: 13.5, letterSpacing: mono ? "0.1em" : "0.01em",
      textTransform: mono ? "uppercase" : "none", fontWeight: 500,
      lineHeight: 1, transition: "transform .18s ease, filter .18s ease",
      ...style,
    }}>
      <span style={{ paddingBottom: 1 }}>{children}</span>
      <ArrowGlyph size={40} bg={th.circle} stroke={th.arrow} />
    </button>
  );
}

// "• SECTION LABEL" eyebrow in mono
function Eyebrow({ children, dark = false, center = false }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.14em",
      textTransform: "uppercase", color: dark ? "rgba(255,255,255,.6)" : "var(--ink-soft)",
      justifyContent: center ? "center" : "flex-start",
    }}>
      <span style={{
        width: 7, height: 7, borderRadius: 7, background: "var(--accent-strong)",
        display: "inline-block",
      }} />
      {children}
    </div>
  );
}

// Section shell — consistent max width + vertical rhythm
function Section({ id, children, bg, pad = 120, style = {}, className }) {
  return (
    <section id={id} className={className} style={{ background: bg || undefined, padding: `${pad}px 0`, ...style }}>
      <div style={{ maxWidth: 1160, margin: "0 auto", padding: "0 32px" }}>{children}</div>
    </section>
  );
}

// Big section heading with accent word support
function Heading({ children, dark = false, center = false, max }) {
  return (
    <h2 style={{
      fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(30px, 4vw, 48px)",
      lineHeight: 1.06, letterSpacing: "-0.04em", margin: 0,
      color: dark ? "#fff" : "var(--ink)", textAlign: center ? "center" : "left",
      textWrap: "balance", maxWidth: max, marginInline: center ? "auto" : undefined,
    }}>{children}</h2>
  );
}

function Lede({ children, dark = false, center = false, max = 560 }) {
  return (
    <p style={{
      fontFamily: "var(--font-head)", fontWeight: 400, fontSize: 18, lineHeight: 1.55,
      letterSpacing: "-0.01em", color: dark ? "rgba(255,255,255,.7)" : "var(--ink-soft)",
      margin: 0, maxWidth: max, textAlign: center ? "center" : "left",
      marginInline: center ? "auto" : undefined, textWrap: "pretty",
    }}>{children}</p>
  );
}

Object.assign(window, { ArrowGlyph, PillButton, Eyebrow, Section, Heading, Lede });