/* I Know My Skin — shared primitives (root-relative paths) */

const Logo = ({ size = 40, mono = false, color = '#3D6B6C', style = {} }) => {
  // New brand mark: hexagon-network "skin map" with a woman's profile.
  // Shipped as pre-coloured PNG masters; pick the right one for the ground.
  const R = (typeof window !== 'undefined' && window.__resources) || {};
  const src = mono
    ? (R.logoBlush || 'assets/logo-icon-blush.png')
    : (color === '#2B4A4B' ? (R.logoDeep || 'assets/logo-icon-deep.png') : (R.logoIcon || 'assets/logo-icon.png'));
  const dim = typeof size === 'number' ? size + 'px' : size;
  return (
    <img src={src} alt="I Know My Skin"
      style={{ flex: 'none', display: 'block', objectFit: 'contain', width: dim, height: dim, ...style }} />
  );
};

const Wordmark = ({ light = false, size = 22, tagline = false, taglineText = '' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
    <Logo size={size * 2} mono={light} color={light ? '#F2DDD9' : '#3D6B6C'} />
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: size, lineHeight: 1, color: light ? '#FAFAF8' : 'var(--deep-teal)' }}>I Know My Skin</div>
      {tagline && <div style={{ textTransform: 'uppercase', letterSpacing: '0.17em', fontSize: size * 0.42, color: light ? '#9DB6B6' : 'var(--slate-teal)', marginTop: 6 }}>{taglineText}</div>}
    </div>
  </div>
);

const Icon = ({ name, size = 22, color = 'var(--slate-teal)', stroke = 1.6 }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color, 'stroke-width': stroke } });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size }} />;
};

const Eyebrow = ({ children, light = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
    <span style={{ width: 28, height: 1, background: 'var(--dusty-rose)' }} />
    <span style={{ textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 12, fontWeight: 700, color: light ? 'var(--blush)' : 'var(--rose-700)' }}>{children}</span>
  </div>
);

const Button = ({ children, variant = 'primary', onClick, type = 'button', as = 'button', href }) => {
  const [hover, setHover] = React.useState(false);
  const base = { fontFamily: 'var(--font-body)', fontSize: 15, borderRadius: 999, padding: '13px 28px', border: '1.5px solid transparent', cursor: 'pointer', transition: 'all 200ms var(--ease-soft)', letterSpacing: '0.01em', display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none', lineHeight: 1, whiteSpace: 'nowrap' };
  const variants = {
    primary: { ...base, background: hover ? 'var(--slate-teal)' : 'var(--deep-teal)', color: 'var(--off-white)' },
    secondary: { ...base, background: hover ? 'var(--teal-50)' : 'transparent', color: 'var(--deep-teal)', borderColor: hover ? 'var(--slate-teal)' : 'var(--teal-300)' },
    accent: { ...base, background: hover ? 'var(--rose-700)' : 'var(--dusty-rose)', color: '#fff' },
    ghost: { ...base, background: hover ? 'var(--blush-50)' : 'transparent', color: 'var(--slate-teal)' },
    ghostLight: { ...base, background: hover ? 'rgba(255,255,255,0.1)' : 'transparent', color: 'var(--off-white)', borderColor: 'rgba(255,255,255,0.35)' },
    light: { ...base, background: hover ? '#fff' : 'var(--blush)', color: 'var(--deep-teal)' },
  };
  const props = { style: variants[variant], onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) };
  if (as === 'a') return <a href={href} {...props}>{children}</a>;
  return <button type={type} {...props}>{children}</button>;
};

const SkinMap = ({ size = 320, color = 'var(--slate-teal)', opacity = 0.13, style = {} }) => (
  <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.skinMap) || 'assets/skin-map-network.svg'} width={size} height={size}
    style={{ opacity, filter: color === 'light' ? 'brightness(0) invert(1)' : 'none', ...style }} alt="" aria-hidden="true" />
);

/* Aerial photo of central Zürich (Limmat, old town, Fraumünster) with an on-brand location chip. */
const ZurichMap = ({ pinLabel = 'Zürich', nearLabel = '' }) => (
  <div style={{ position: 'relative', width: '100%', aspectRatio: '4/3', borderRadius: 20, overflow: 'hidden', background: 'var(--bg-blush)', border: '1px solid var(--line)', boxShadow: 'var(--shadow-sm)' }}>
    <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.zurich) || 'assets/zurich-altstadt.jpg'} alt="Luftaufnahme der Zürcher Altstadt mit Limmat" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(43,74,75,0.34) 0%, rgba(43,74,75,0) 32%)', pointerEvents: 'none' }} />
    <div style={{ position: 'absolute', left: 16, bottom: 14, background: 'rgba(250,250,248,0.92)', backdropFilter: 'blur(4px)', borderRadius: 999, padding: '7px 14px 7px 11px', display: 'flex', alignItems: 'center', gap: 8, boxShadow: 'var(--shadow-xs)' }}>
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--rose-700)', flex: 'none' }} />
      <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--deep-teal)', whiteSpace: 'nowrap' }}>{pinLabel}</span>
    </div>
    {nearLabel && (
      <div style={{ position: 'absolute', right: 14, top: 14, fontFamily: 'var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 10, color: 'var(--off-white)', textShadow: '0 1px 4px rgba(43,74,75,0.5)' }}>{nearLabel}</div>
    )}
  </div>
);

Object.assign(window, { Logo, Wordmark, Icon, Eyebrow, Button, SkinMap, ZurichMap });