(function () {
/* Aibolone — yeniden kullanılabilir UI bileşenleri */

/**
 * Aibolone primary button — bio-tech green with slow-fading glow on hover.
 */
function Button({
  children,
  variant = "primary",
  size = "md",
  icon,
  iconRight,
  disabled = false,
  as = "button",
  style: styleProp,
  ...props
}) {
  const sizes = {
    sm: { padding: "10px 18px", fontSize: "11px" },
    md: { padding: "14px 28px", fontSize: "12px" },
    lg: { padding: "18px 38px", fontSize: "13px" },
  };

  const base = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "10px",
    fontFamily: "var(--font-body)",
    fontWeight: 700,
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    borderRadius: "var(--radius-md)",
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.45 : 1,
    border: "1px solid transparent",
    transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)",
    ...sizes[size],
  };

  const variants = {
    primary: {
      background: "var(--accent)",
      color: "var(--white)",
      boxShadow: "0 2px 8px rgba(30,41,59,0.06)",
    },
    secondary: {
      background: "var(--surface-card)",
      color: "var(--text-body)",
      borderColor: "var(--border-hairline)",
    },
    ghost: {
      background: "transparent",
      color: "var(--text-muted)",
      borderColor: "var(--border-soft)",
    },
  };

  const hover = {
    primary: {
      background: "var(--accent-hover)",
      boxShadow: "0 0 28px var(--accent-glow)",
      transform: "translateY(-1px)",
    },
    secondary: {
      borderColor: "var(--border-strong)",
      color: "var(--accent)",
      boxShadow: "0 0 20px var(--accent-glow)",
    },
    ghost: {
      borderColor: "var(--border-strong)",
      color: "var(--accent)",
    },
  };

  const [h, setH] = React.useState(false);
  const Tag = as;
  const style = { ...base, ...variants[variant], ...(h && !disabled ? hover[variant] : {}), ...styleProp };

  return (
    <Tag
      style={style}
      disabled={as === "button" ? disabled : undefined}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      {...props}
    >
      {icon}
      {children}
      {iconRight}
    </Tag>
  );
}

/**
 * Clinical card — crisp white (or glass) surface, soft shadow, ultra-thin green hairline border.
 */
function Card({
  children,
  variant = "solid",
  hover = true,
  glow = false,
  style = {},
  ...props
}) {
  const variants = {
    solid: { background: "var(--surface-card)" },
    glass: {
      background: "var(--surface-glass)",
      backdropFilter: "blur(16px)",
      WebkitBackdropFilter: "blur(16px)",
    },
    inset: { background: "var(--surface-inset)" },
  };

  const [h, setH] = React.useState(false);

  const base = {
    border: "1px solid var(--border-hairline)",
    borderRadius: "var(--radius-lg)",
    padding: "var(--space-6)",
    boxShadow: glow ? "var(--shadow-glow-lg)" : "var(--shadow-sm)",
    transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)",
    ...variants[variant],
    ...(h && hover
      ? {
          borderColor: "var(--border-strong)",
          boxShadow: "var(--shadow-md), 0 0 24px var(--accent-glow)",
          transform: "translateY(-2px)",
        }
      : {}),
    ...style,
  };

  return (
    <div
      style={base}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      {...props}
    >
      {children}
    </div>
  );
}

/** Small pill label. Use for feature tags and status chips. */
function Badge({ children, variant = "soft", dot = false, ...props }) {
  const variants = {
    soft: {
      background: "var(--accent-soft)",
      color: "var(--accent-hover)",
      border: "1px solid var(--border-hairline)",
    },
    solid: {
      background: "var(--accent)",
      color: "var(--white)",
      border: "1px solid var(--accent)",
    },
    outline: {
      background: "transparent",
      color: "var(--text-muted)",
      border: "1px solid var(--border-soft)",
    },
  };

  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "7px",
        padding: "5px 12px",
        borderRadius: "var(--radius-pill)",
        fontFamily: "var(--font-body)",
        fontSize: "10px",
        fontWeight: 600,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        whiteSpace: "nowrap",
        ...variants[variant],
        ...props.style,
      }}
      {...props}
    >
      {dot && (
        <span
          style={{
            width: "6px",
            height: "6px",
            borderRadius: "50%",
            background: variant === "solid" ? "var(--white)" : "var(--accent)",
            boxShadow: variant === "solid" ? "none" : "0 0 6px var(--accent-glow)",
          }}
        />
      )}
      {children}
    </span>
  );
}

/** Lab-styled text input with floating uppercase label and green focus ring. */
function Input({ label, type = "text", as = "input", rows = 4, ...props }) {
  const [focus, setFocus] = React.useState(false);
  const Tag = as === "textarea" ? "textarea" : "input";

  const fieldStyle = {
    width: "100%",
    background: "var(--surface-inset)",
    border: `1px solid ${focus ? "var(--border-strong)" : "var(--border-soft)"}`,
    borderRadius: "var(--radius-md)",
    padding: "14px 16px",
    fontFamily: "var(--font-body)",
    fontSize: "14px",
    color: "var(--text-body)",
    outline: "none",
    resize: as === "textarea" ? "vertical" : undefined,
    boxShadow: focus ? "0 0 0 4px var(--accent-soft)" : "none",
    transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)",
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
      {label && (
        <label
          style={{
            fontSize: "10px",
            fontWeight: 700,
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            color: "var(--text-subtle)",
            marginLeft: "2px",
          }}
        >
          {label}
        </label>
      )}
      <Tag
        type={as === "textarea" ? undefined : type}
        rows={as === "textarea" ? rows : undefined}
        style={fieldStyle}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        {...props}
      />
    </div>
  );
}

/** Big-number metric tile for results/dashboard sections. */
function StatCard({ value, label, change, icon, ...props }) {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        background: "var(--surface-card)",
        border: `1px solid ${h ? "var(--border-strong)" : "var(--border-hairline)"}`,
        borderRadius: "var(--radius-lg)",
        padding: "var(--space-6)",
        boxShadow: h ? "var(--shadow-md), 0 0 24px var(--accent-glow)" : "var(--shadow-sm)",
        transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)",
        ...props.style,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
        {icon && (
          <div style={{
            display: "flex", width: "40px", height: "40px", borderRadius: "var(--radius-sm)",
            alignItems: "center", justifyContent: "center",
            background: "var(--accent-soft)", color: "var(--accent)",
          }}>{icon}</div>
        )}
        {change && (
          <span style={{
            fontSize: "11px", fontWeight: 700, color: "var(--accent-hover)",
            background: "var(--accent-soft)", padding: "4px 10px",
            borderRadius: "var(--radius-pill)", letterSpacing: "0.04em",
          }}>{change}</span>
        )}
      </div>
      <div style={{
        fontFamily: "var(--font-heading)", fontSize: "56px", fontWeight: 800,
        letterSpacing: "-0.02em", color: "var(--text-strong)", lineHeight: 1,
      }}>{value}</div>
      <div style={{
        marginTop: "12px", fontSize: "12px", fontWeight: 700, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "var(--text-subtle)",
      }}>{label}</div>
    </div>
  );
}

/** Centered section header: eyebrow kicker + green title + optional sub. */
function SectionHeading({ eyebrow, title, accent, subtitle, align = "center" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? "760px" : "none", margin: align === "center" ? "0 auto" : "0" }}>
      {eyebrow && (
        <div style={{
          display: "inline-flex", alignItems: "center", gap: "10px", marginBottom: "20px",
          justifyContent: align === "center" ? "center" : "flex-start",
        }}>
          <span className="ds-status-dot" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 8px var(--accent-glow)" }} />
          <span style={{
            fontSize: "12px", fontWeight: 700, letterSpacing: "0.3em",
            textTransform: "uppercase", color: "var(--text-subtle)",
          }}>{eyebrow}</span>
        </div>
      )}
      <h2 style={{
        fontFamily: "var(--font-heading)", fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
        letterSpacing: "-0.02em", lineHeight: 1.08, color: "var(--text-heading)", margin: 0,
      }}>
        {title}{" "}
        {accent && <span style={{ color: "var(--text-strong)" }}>{accent}</span>}
      </h2>
      {subtitle && (
        <p style={{
          marginTop: "22px", fontSize: "21px", fontWeight: 400, lineHeight: 1.55,
          color: "var(--text-muted)",
        }}>{subtitle}</p>
      )}
    </div>
  );
}

window.Aibolone = { Button, Card, Badge, Input, StatCard, SectionHeading };
})();