/* Shared UI primitives for ARES Technology landing page */

const uiStyles = {
  btn: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '14px 20px',
    borderRadius: 12,
    border: '1px solid transparent',
    fontWeight: 500,
    fontSize: 16,
    cursor: 'pointer',
    transition: 'transform 80ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease',
    letterSpacing: '-0.005em',
    lineHeight: 1,
  },
};

function PrimaryBtn({ children, onClick, style, type = 'button', ...rest }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...uiStyles.btn,
        background: hover ? '#2A2825' : 'var(--ink)',
        color: 'white',
        borderRadius: 12,
        padding: '14px 22px',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        ...style,
      }}
      {...rest}
    >
      {children}
      <span style={{ display: 'inline-flex', marginLeft: 2 }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
    </button>
  );
}

function SecondaryBtn({ children, onClick, style, ...rest }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...uiStyles.btn,
        background: hover ? 'var(--paper-2)' : 'transparent',
        color: 'var(--ink)',
        border: '1px solid var(--ink)',
        borderRadius: 12,
        padding: '14px 22px',
        ...style,
      }}
      {...rest}
    >
      {children}
    </button>
  );
}

function AccentBtn({ children, onClick, style, type = 'button', ...rest }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...uiStyles.btn,
        background: hover ? 'var(--cta-ink)' : 'var(--cta)',
        color: 'white',
        borderRadius: 12,
        padding: '14px 22px',
        fontWeight: 500,
        boxShadow: hover
          ? '0 6px 18px -6px rgba(46,107,255,0.45), 0 1px 2px rgba(28,27,26,0.08)'
          : '0 2px 8px -2px rgba(46,107,255,0.32), 0 1px 2px rgba(28,27,26,0.06)',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        ...style,
      }}
      {...rest}
    >
      {children}
    </button>
  );
}

/* Eyebrow tag */
function Eyebrow({ children, accent = false, style }) {
  return (
    <span
      className="mono"
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        fontSize: 12,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        color: accent ? 'var(--accent-ink)' : 'var(--muted)',
        ...style,
      }}
    >
      <span
        aria-hidden
        style={{
          width: 6,
          height: 6,
          borderRadius: 99,
          background: accent ? 'var(--accent)' : 'var(--ink-2)',
          display: 'inline-block',
        }}
      />
      {children}
    </span>
  );
}

/* Section header */
function SectionHeader({ eyebrow, title, intro, align = 'left', accent = false }) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        alignItems: align === 'center' ? 'center' : 'flex-start',
        textAlign: align === 'center' ? 'center' : 'left',
        maxWidth: align === 'center' ? 760 : 820,
        margin: align === 'center' ? '0 auto' : '0',
      }}
    >
      {eyebrow && <Eyebrow accent={accent}>{eyebrow}</Eyebrow>}
      <h2 data-words style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.06, letterSpacing: '-0.025em' }}>
        {title}
      </h2>
      {intro && (
        <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 640 }}>
          {intro}
        </p>
      )}
    </div>
  );
}

/* Striped placeholder for imagery */
function StripedPlaceholder({ label = 'image', ratio = '4 / 3', radius = 14, dark = false, style }) {
  const fg = dark ? 'rgba(255,255,255,0.08)' : '#D8DEE8';
  const bg = dark ? '#131826' : '#F2F4F8';
  const textColor = dark ? 'rgba(255,255,255,0.7)' : 'var(--muted)';
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: ratio,
        background: bg,
        backgroundImage: `repeating-linear-gradient(135deg, ${fg} 0 1px, transparent 1px 12px)`,
        borderRadius: radius,
        border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'var(--line)'}`,
        overflow: 'hidden',
        ...style,
      }}
    >
      <div
        className="mono"
        style={{
          position: 'absolute',
          left: 12,
          bottom: 10,
          fontSize: 11,
          color: textColor,
          letterSpacing: '0.04em',
          background: dark ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.7)',
          padding: '3px 7px',
          borderRadius: 6,
          textTransform: 'lowercase',
        }}
      >
        {label}
      </div>
    </div>
  );
}

/* Icon set — small, line-based */
const Icon = {
  check: (props) => (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
      <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  x: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M3 3L11 11M11 3L3 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
  arrow: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  phone: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M2.5 3.5C2.5 2.95 2.95 2.5 3.5 2.5H5L6 5L4.75 5.75C5.25 7.25 6.75 8.75 8.25 9.25L9 8L11.5 9V10.5C11.5 11.05 11.05 11.5 10.5 11.5C6.08 11.5 2.5 7.92 2.5 3.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
    </svg>
  ),
  pin: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M7 12.5C7 12.5 11.5 9 11.5 5.5C11.5 3.01 9.49 1 7 1C4.51 1 2.5 3.01 2.5 5.5C2.5 9 7 12.5 7 12.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
      <circle cx="7" cy="5.5" r="1.6" stroke="currentColor" strokeWidth="1.3" />
    </svg>
  ),
  globe: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.3" />
      <path d="M1.5 7H12.5M7 1.5C8.5 3.5 9 5.5 9 7C9 8.5 8.5 10.5 7 12.5M7 1.5C5.5 3.5 5 5.5 5 7C5 8.5 5.5 10.5 7 12.5" stroke="currentColor" strokeWidth="1.3" />
    </svg>
  ),
  plus: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M7 3V11M3 7H11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
  minus: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M3 7H11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
  spark: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M7 1V4M7 10V13M1 7H4M10 7H13M2.8 2.8L4.9 4.9M9.1 9.1L11.2 11.2M2.8 11.2L4.9 9.1M9.1 4.9L11.2 2.8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
    </svg>
  ),
};

Object.assign(window, {
  PrimaryBtn, SecondaryBtn, AccentBtn, Eyebrow, SectionHeader, StripedPlaceholder, Icon,
});