// Shared visual primitives for the rellay landing page
// Passes-inspired: pure black canvas, cyan accents, bento cards, eyebrow + giant headline

const ACCENT = {
  // default cyan, swappable via tweaks
  primary: '#38bdf8',     // sky-400
  primaryDeep: '#0284c7', // sky-600
  primarySoft: 'rgba(56,189,248,0.12)',
  primaryLine: 'rgba(56,189,248,0.22)',
};

function BrandMark({ size = 26, alt = '' }) {
  return (
    <img
      src="assets/live-thread/agent-core.svg"
      alt={alt}
      style={{ width: size, height: size, display: 'block', flexShrink: 0 }}
    />
  );
}

// Section header: small caps cyan eyebrow + huge headline w/ gradient accent words + subhead
function SectionHeader({ eyebrow, headline, accent, subhead, align = 'center' }) {
  const Wrap = (typeof window !== 'undefined' && window.Reveal) ? window.Reveal : 'div';
  return (
    <Wrap y={20} duration={700}>
    <div style={{
      textAlign: align,
      maxWidth: 920,
      margin: align === 'center' ? '0 auto 64px' : '0 0 64px',
      padding: '0 24px',
    }}>
      {eyebrow && (
        <div style={{
          color: 'var(--accent)',
          fontSize: 13,
          fontWeight: 600,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          marginBottom: 24,
        }}>
          {eyebrow}
        </div>
      )}
      <h2 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(40px, 5.6vw, 72px)',
        fontWeight: 500,
        lineHeight: 1.02,
        letterSpacing: 0,
        margin: 0,
        color: '#fff',
      }}>
        {headline}{accent && ' '}
        {accent && (
          <span style={{
            background: `linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%)`,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>
            {accent}
          </span>
        )}
      </h2>
      {subhead && (
        <p style={{
          fontSize: 18,
          lineHeight: 1.5,
          color: 'rgba(255,255,255,0.55)',
          maxWidth: 580,
          margin: align === 'center' ? '24px auto 0' : '24px 0 0',
        }}>
          {subhead}
        </p>
      )}
    </div>
    </Wrap>
  );
}

// Bento card shell — supports flat-cyan (filled) or dark-translucent variants
function BentoCard({ variant = 'dark', children, style, hover = true, ...rest }) {
  const [hov, setHov] = React.useState(false);
  const reduced = typeof window !== 'undefined' && window.PREFERS_REDUCED;
  const styles = {
    dark: {
      background: '#0a0a0a',
      border: '1px solid rgba(255,255,255,0.06)',
    },
    cyan: {
      background: 'linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%)',
      border: '1px solid var(--accent)',
    },
    cyanSoft: {
      background: 'linear-gradient(180deg, rgba(56,189,248,0.18) 0%, rgba(2,132,199,0.10) 100%)',
      border: '1px solid var(--accent-line)',
    },
  };
  const lifted = hover && !reduced && hov;
  return (
    <div
      {...rest}
      onMouseEnter={() => hover && !reduced && setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        position: 'relative',
        borderRadius: 24,
        overflow: 'hidden',
        ...styles[variant],
        transform: lifted ? 'translate3d(0,-3px,0)' : 'translate3d(0,0,0)',
        boxShadow: lifted ? '0 24px 60px -20px rgba(56,189,248,0.22)' : 'none',
        transition: 'transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms cubic-bezier(.2,.7,.2,1), border-color 320ms ease',
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// Subtle vertical guide lines that frame each section (Passes-style)
function GuideRails() {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      display: 'flex', justifyContent: 'space-between',
      maxWidth: 1280, margin: '0 auto', padding: '0 24px',
    }}>
      <div style={{ width: 1, background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.04) 10%, rgba(255,255,255,0.04) 90%, transparent)' }} />
      <div style={{ width: 1, background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.04) 10%, rgba(255,255,255,0.04) 90%, transparent)' }} />
    </div>
  );
}

// Section wrapper — handles vertical rhythm + rails + max width
function Section({ children, pad = 120, id, label }) {
  return (
    <section
      id={id}
      data-screen-label={label}
      style={{
        position: 'relative',
        padding: `${pad}px 0`,
      }}
    >
      <GuideRails />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '0 24px' }}>
        {children}
      </div>
    </section>
  );
}

// Tiny pill (used for badges, "LIVE", etc.)
function Pill({ children, tone = 'dark' }) {
  const tones = {
    dark: { background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.7)', border: '1px solid rgba(255,255,255,0.08)' },
    cyan: { background: 'var(--accent-soft)', color: 'var(--accent)', border: '1px solid var(--accent-line)' },
    live: { background: '#ef4444', color: '#fff', border: '1px solid #ef4444' },
    success: { background: 'rgba(34,197,94,0.12)', color: '#4ade80', border: '1px solid rgba(34,197,94,0.25)' },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
      ...tones[tone],
    }}>
      {tone === 'live' && <span style={{ width: 6, height: 6, borderRadius: 999, background: '#fff' }} />}
      {children}
    </span>
  );
}

// Avatar circle with optional ring
function Avatar({ initials, color = '#1f2937', size = 32, ring = false }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: size * 0.36, fontWeight: 600,
      boxShadow: ring ? '0 0 0 2px var(--accent), 0 0 0 4px #000' : 'none',
      flexShrink: 0,
    }}>
      {initials}
    </div>
  );
}

// Inline icon (simple SVG paths; 16/20/24)
function Icon({ name, size = 18, color = 'currentColor' }) {
  const paths = {
    sparkle: <path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3z" fill={color} />,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill={color} />,
    chat: <path d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V5z" fill={color} />,
    calendar: <g fill="none" stroke={color} strokeWidth="1.6"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9h17M8 3v4M16 3v4"/></g>,
    folder: <path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill={color} />,
    dollar: <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M12 3v18M16 7H10a2.5 2.5 0 0 0 0 5h4a2.5 2.5 0 0 1 0 5H8"/></g>,
    mail: <g fill="none" stroke={color} strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></g>,
    chart: <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M3 20h18M6 16l4-5 3 3 5-7"/></g>,
    lock: <g fill="none" stroke={color} strokeWidth="1.6"><rect x="4.5" y="10" width="15" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></g>,
    play: <path d="M7 4l13 8-13 8V4z" fill={color} />,
    arrow: <path d="M5 12h14m-5-5l5 5-5 5" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />,
    check: <path d="M5 12l4 4 10-10" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />,
    mic: <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></g>,
    music: <g fill="none" stroke={color} strokeWidth="1.6"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></g>,
    globe: <g fill="none" stroke={color} strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></g>,
    sliders: <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M4 6h10M4 12h6M4 18h14"/><circle cx="17" cy="6" r="2"/><circle cx="13" cy="12" r="2"/><circle cx="20" cy="18" r="2"/></g>,
    bed: <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 18V8M3 13h18v5M21 18v-5a3 3 0 0 0-3-3h-7v3"/><circle cx="7" cy="11.5" r="1.6"/></g>,
    plane: <path d="M21 16l-7-4V5.5a1.5 1.5 0 0 0-3 0V12l-7 4v2l7-2v4l-2 1.5V22l3.5-1L13 22v-1.5L11 19v-4l7 2v-2z" fill={color} />,
    file: <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>
      {paths[name] || null}
    </svg>
  );
}

// Card title block (icon + title + body) used in bento/feature grids
function CardCopy({ icon, title, body, color = '#fff', muted = 'rgba(255,255,255,0.55)' }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        {icon && (
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: 'rgba(255,255,255,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color,
          }}>
            <Icon name={icon} size={16} />
          </div>
        )}
        <div style={{ fontSize: 18, fontWeight: 600, color, letterSpacing: '-0.01em' }}>{title}</div>
      </div>
      <div style={{ fontSize: 14.5, lineHeight: 1.55, color: muted, maxWidth: 380 }}>
        {body}
      </div>
    </div>
  );
}

Object.assign(window, { ACCENT, BrandMark, SectionHeader, BentoCard, GuideRails, Section, Pill, Avatar, Icon, CardCopy });