// shared.jsx — Calendify.ai design tokens + reusable chrome

const CAL = {
  // Palette — from brand screenshots
  bg: '#ffffff',
  bgTint: '#f6f9ff',        // soft blue tint backgrounds
  surface: '#ffffff',
  ink: '#0b1220',           // logo near-black
  inkSoft: '#6b7280',
  inkMuted: '#9aa3b2',
  line: '#e8ecf3',
  lineSoft: '#f0f3f8',
  // Primary brand blue (from "10:00" selected tile & "12" circle)
  blue: '#2F6BFF',
  blueDeep: '#1E4FD6',
  blueSoft: '#eaf0ff',
  // Cyan for ".ai" in wordmark
  cyan: '#22C3FF',
  // Success / other
  green: 'oklch(66% 0.12 155)',
  greenSoft: 'oklch(94% 0.04 155)',
  // Halo glow
  haloA: 'rgba(47,107,255,0.16)',
  haloB: 'rgba(34,195,255,0.10)',
  // Type
  font: '"Space Grotesk", system-ui, -apple-system, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Browser chrome — light, minimal, with soft blue halo underneath
function BrowserChrome({ x, y, width, height, url = 'jouw-site.nl/contact', children, halo = true }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      fontFamily: CAL.font,
    }}>
      {halo && (
        <div aria-hidden style={{
          position: 'absolute',
          left: -80, right: -80, bottom: -100, top: 80,
          background: `radial-gradient(ellipse at 50% 80%, ${CAL.haloA} 0%, ${CAL.haloB} 40%, transparent 70%)`,
          filter: 'blur(20px)',
          zIndex: 0,
        }}/>
      )}
      <div style={{
        position: 'relative', zIndex: 1,
        width: '100%', height: '100%',
        background: CAL.surface,
        borderRadius: 14,
        border: `1px solid ${CAL.line}`,
        boxShadow: '0 20px 50px -20px rgba(20,22,40,0.12), 0 6px 16px -6px rgba(20,22,40,0.06)',
        overflow: 'hidden',
      }}>
        {/* titlebar */}
        <div style={{
          height: 40,
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '0 14px',
          borderBottom: `1px solid ${CAL.lineSoft}`,
          background: '#fff',
        }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <Dot color="#ff5f57" /><Dot color="#febc2e" /><Dot color="#28c840" />
          </div>
          <div style={{
            flex: 1,
            textAlign: 'center',
            fontFamily: CAL.font,
            fontSize: 12,
            color: CAL.inkMuted,
            letterSpacing: '0.01em',
          }}>
            {url}
          </div>
          <div style={{ width: 44 }}/>
        </div>
        <div style={{ position: 'relative', width: '100%', height: 'calc(100% - 40px)' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function Dot({ color }) {
  return <div style={{ width: 11, height: 11, borderRadius: 6, background: color }}/>;
}

// Animated cursor
function Cursor({ x, y, scale = 1, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: 24, height: 24,
      transform: `scale(${scale})`,
      transformOrigin: '0 0',
      opacity,
      pointerEvents: 'none',
      zIndex: 100,
      willChange: 'transform, left, top',
    }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M4 2 L4 18 L8.5 14 L11 20 L14 19 L11.5 13 L18 13 Z"
          fill="#0b1220" stroke="#ffffff" strokeWidth="1.5" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// Calendify.ai wordmark — "Calendify" in ink + ".ai" in cyan
function Wordmark({ size = 32, inkColor, aiColor }) {
  const inkC = inkColor || CAL.ink;
  const aiC = aiColor || CAL.cyan;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'baseline',
      fontFamily: CAL.font,
      fontWeight: 700,
      fontSize: size,
      letterSpacing: '-0.035em',
      lineHeight: 1,
    }}>
      <span style={{ color: inkC }}>Calendify</span>
      <span style={{ color: aiC }}>.ai</span>
    </div>
  );
}

// Simple pill/badge
function Pill({ children, bg = CAL.blueSoft, fg = CAL.blue, size = 12 }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px',
      background: bg, color: fg,
      borderRadius: 999,
      fontFamily: CAL.font,
      fontSize: size,
      fontWeight: 500,
    }}>{children}</span>
  );
}

Object.assign(window, { CAL, BrowserChrome, Cursor, Wordmark, Pill, Dot });