// Shared UI kit components for Nexion.
// Load AFTER react+babel. Exports to window so all kits can use them.

const Button = ({ variant = 'primary', size = 'md', children, icon, iconRight, onClick, style, ...rest }) => {
  const variants = {
    primary: { background: 'var(--forest-950)', color: 'var(--cream-50)', border: '1.5px solid var(--forest-950)' },
    accent:  { background: 'var(--lime-500)',  color: 'var(--forest-950)', border: '1.5px solid var(--lime-500)' },
    outline: { background: 'transparent',       color: 'var(--forest-950)', border: '1.5px solid var(--forest-950)' },
    ghost:   { background: 'transparent',       color: 'var(--forest-950)', border: '1.5px solid transparent' },
    onDark:  { background: 'var(--cream-50)',  color: 'var(--forest-950)', border: '1.5px solid var(--cream-50)' },
  };
  const sizes = {
    sm: { padding: '8px 16px',  fontSize: 14 },
    md: { padding: '13px 22px', fontSize: 15 },
    lg: { padding: '17px 28px', fontSize: 16 },
  };
  return (
    <button
      onClick={onClick}
      style={{
        ...variants[variant], ...sizes[size],
        fontFamily: 'var(--font-body)', fontWeight: 700, letterSpacing: '-0.005em',
        borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 8,
        cursor: 'pointer', transition: 'transform 180ms var(--ease-out), background 180ms, box-shadow 180ms',
        whiteSpace: 'nowrap', ...style,
      }}
      onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.98)'}
      onMouseUp={(e) => e.currentTarget.style.transform = ''}
      onMouseLeave={(e) => e.currentTarget.style.transform = ''}
      {...rest}
    >
      {icon && <Icon name={icon} size={size === 'lg' ? 20 : 18}/>}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'lg' ? 20 : 18}/>}
    </button>
  );
};

const Icon = ({ name, size = 20, color, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) window.lucide.createIcons({ icons: window.lucide.icons, attrs: { 'stroke-width': 1.75 } });
  }, [name]);
  return <i ref={ref} data-lucide={name} style={{ width: size, height: size, color, display: 'inline-flex', ...style }}/>;
};

const Eyebrow = ({ children, color = 'var(--forest-600)', style }) => (
  <div style={{ font: '600 12px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color, ...style }}>{children}</div>
);

const Badge = ({ children, variant = 'soft', style }) => {
  const v = {
    soft:    { background: 'var(--forest-50)', color: 'var(--forest-700)', border: '1px solid var(--forest-100)' },
    solid:   { background: 'var(--forest-950)', color: 'var(--cream-50)' },
    accent:  { background: 'var(--lime-500)', color: 'var(--forest-950)' },
    outline: { background: 'transparent', color: 'var(--forest-950)', border: '1px solid var(--border-1)' },
  };
  return <span style={{ ...v[variant], font: '600 12px var(--font-body)', padding: '5px 12px', borderRadius: 999, letterSpacing: '0.01em', display: 'inline-flex', alignItems: 'center', gap: 6, ...style }}>{children}</span>;
};

const Field = ({ label, hint, error, value, onChange, type = 'text', placeholder, as = 'input', rows = 4, options }) => {
  const [focused, setFocused] = React.useState(false);
  const borderColor = error ? 'var(--danger)' : focused ? 'var(--lime-500)' : 'var(--border-1)';
  const boxShadow = focused && !error ? '0 0 0 4px rgba(191,157,74,0.18)' : 'none';
  const baseStyle = {
    font: '500 15px var(--font-body)', padding: '14px 16px', borderRadius: 14,
    border: `${focused || error ? 2 : 1}px solid ${borderColor}`,
    background: '#fff', color: 'var(--ink-900)', outline: 'none', width: '100%',
    boxShadow, transition: 'box-shadow 180ms, border-color 180ms',
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {label && <span style={{ font: '600 13px var(--font-body)', color: error ? 'var(--danger)' : 'var(--ink-900)' }}>{label}</span>}
      {as === 'textarea' ? (
        <textarea value={value} onChange={onChange} placeholder={placeholder} rows={rows}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ ...baseStyle, resize: 'vertical', fontFamily: 'var(--font-body)' }}/>
      ) : as === 'select' ? (
        <select value={value} onChange={onChange} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={baseStyle}>
          {options?.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
      ) : (
        <input type={type} value={value} onChange={onChange} placeholder={placeholder}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={baseStyle}/>
      )}
      {error && <span style={{ font: '500 12px var(--font-body)', color: 'var(--danger)' }}>{error}</span>}
      {!error && hint && <span style={{ font: '500 12px var(--font-body)', color: 'var(--fg-3)' }}>{hint}</span>}
    </label>
  );
};

const NexionLogo = ({ tone = 'dark', height = 28 }) => {
  const fg = tone === 'dark' ? 'var(--forest-950)' : 'var(--cream-50)';
  const dotColor = tone === 'dark' ? 'var(--forest-600)' : 'var(--lime-300)';
  const fs = height * 1.1;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'baseline',
      fontFamily: 'Schibsted Grotesk, system-ui, sans-serif', fontWeight: 800,
      fontSize: fs, lineHeight: 1, letterSpacing: '-0.035em', color: fg, userSelect: 'none',
    }} aria-label="Nexion">
      Nexion
      <span style={{ width: fs * 0.18, height: fs * 0.18, borderRadius: '50%', background: dotColor, marginLeft: fs * 0.08, alignSelf: 'flex-start', marginTop: fs * 0.06 }}/>
    </span>
  );
};

const NAV_HREFS = {
  'Werk': '#werk',
  'Pakketten': '/pakketten',
  'Aanpak': '#aanpak',
  'Over ons': '#over-ons',
  'Contact': '#contact',
};

const useIsMobile = () => {
  const [mob, setMob] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setMob(window.innerWidth < 768);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return mob;
};

const Header = ({ tone = 'cream', active, showBar = true }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const mob = useIsMobile();
  const dark = tone === 'forest';
  const fg = dark ? 'var(--cream-50)' : 'var(--forest-950)';
  const items = ['Werk', 'Pakketten', 'Aanpak', 'Over ons', 'Contact'];
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50 }}>
      {showBar && !mob && (
        <div style={{ background: 'var(--forest-950)', padding: '9px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20, font: '500 13px var(--font-body)', color: 'rgba(250,250,247,0.65)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--lime-400)', flexShrink: 0, boxShadow: '0 0 0 3px rgba(217,190,120,0.25)' }}/>
            Nu beschikbaar voor beauty &amp; wellness projecten
          </span>
          <span style={{ width: 1, height: 14, background: 'rgba(250,250,247,0.15)' }}/>
          <a href="#contact" data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com"
            style={{ color: 'var(--lime-300)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 5, font: '600 13px var(--font-body)', flexShrink: 0 }}>
            Plan een gratis kennismaking
            <Icon name="arrow-right" size={13} color="var(--lime-300)"/>
          </a>
        </div>
      )}

      <header style={{ background: dark ? 'rgba(28,6,14,0.85)' : 'rgba(250,250,247,0.92)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.06)' : 'rgba(230,226,216,0.8)'}` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: mob ? '14px 20px' : '15px 24px', display: 'flex', alignItems: 'center' }}>
          <a href="#" style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
            <NexionLogo tone={dark ? 'cream' : 'dark'} height={26}/>
          </a>

          {!mob && (
            <nav style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 36 }}>
              {items.map(i => {
                const isActive = active === i;
                return (
                  <a key={i} href={NAV_HREFS[i]} style={{ font: `${isActive ? 600 : 500} 15px var(--font-body)`, color: isActive ? (dark ? 'var(--cream-50)' : 'var(--forest-950)') : (dark ? 'rgba(250,250,247,0.55)' : 'var(--ink-500)'), textDecoration: 'none', position: 'relative', paddingBottom: 2 }}>
                    {i}
                    {isActive && <span style={{ position: 'absolute', bottom: -4, left: '50%', transform: 'translateX(-50%)', width: 4, height: 4, borderRadius: '50%', background: 'var(--forest-600)' }}/>}
                  </a>
                );
              })}
            </nav>
          )}

          {!mob && (
            <div style={{ flexShrink: 0 }}>
              <Button variant={dark ? 'onDark' : 'primary'} size="sm" iconRight="arrow-up-right"
                data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com">
                Plan een gesprek
              </Button>
            </div>
          )}

          {mob && (
            <button onClick={() => setMobileOpen(!mobileOpen)}
              style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', padding: 8, color: fg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={mobileOpen ? 'x' : 'menu'} size={24}/>
            </button>
          )}
        </div>
      </header>

      {mob && mobileOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--cream-50)', display: 'flex', flexDirection: 'column', padding: '0 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 0', borderBottom: '1px solid var(--border-1)' }}>
            <NexionLogo tone="dark" height={24}/>
            <button onClick={() => setMobileOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--forest-950)', padding: 8, display: 'flex' }}>
              <Icon name="x" size={24}/>
            </button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            {items.map(i => (
              <a key={i} href={NAV_HREFS[i]} onClick={() => setMobileOpen(false)} style={{ font: `${active === i ? 700 : 500} 28px Schibsted Grotesk, sans-serif`, letterSpacing: '-0.025em', color: active === i ? 'var(--forest-600)' : 'var(--ink-900)', textDecoration: 'none', padding: '20px 0', borderBottom: '1px solid var(--border-1)', display: 'block' }}>{i}</a>
            ))}
          </nav>
          <div style={{ paddingBottom: 40 }}>
            <Button variant="primary" size="lg" style={{ width: '100%', justifyContent: 'center' }}
              data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com"
              onClick={() => setMobileOpen(false)}>
              Plan een gesprek
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};

const Footer = () => (
  <footer style={{ background: 'var(--forest-950)', color: 'var(--fg-on-dark-2)', padding: '80px 24px 32px' }}>
    <div className="nx-footer-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 56 }}>
      <div>
        <NexionLogo tone="cream" height={32}/>
        <p style={{ marginTop: 20, font: '400 15px var(--font-body)', lineHeight: 1.6, maxWidth: 320 }}>
          Strakke websites voor ondernemers die door willen. Geen poespas. Wel resultaat.
        </p>
        <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
          <Badge variant="soft" style={{ background: 'rgba(191,157,74,0.12)', color: 'var(--lime-400)', border: '1px solid rgba(191,157,74,0.2)' }}>● Beschikbaar voor projecten</Badge>
        </div>
      </div>
      {[
        { t: 'Diensten', items: ['Website ontwerp', 'Webshops', 'Onderhoud', 'SEO-setup'] },
        { t: 'Bedrijf', items: ['Werk', 'Aanpak', 'Over ons', 'Tarieven'] },
        { t: 'Contact', items: ['hallo@nexion.nl', '+31 (0)20 123 45 67', 'Amsterdam, NL', 'KVK 12345678'] },
      ].map(col => (
        <div key={col.t}>
          <Eyebrow color="var(--lime-400)">{col.t}</Eyebrow>
          <ul style={{ listStyle: 'none', marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {col.items.map(i => <li key={i} style={{ font: '500 15px var(--font-body)' }}>{i}</li>)}
          </ul>
        </div>
      ))}
    </div>
    <div style={{ maxWidth: 1200, margin: '64px auto 0', paddingTop: 24, borderTop: '1px solid var(--forest-800)', display: 'flex', justifyContent: 'space-between', font: '400 13px var(--font-body)', color: 'var(--fg-on-dark-3)' }}>
      <span>© 2026 Nexion B.V.</span>
      <span>Privacy · Algemene voorwaarden</span>
    </div>
  </footer>
);

const Section = ({ children, dark, id, style }) => {
  const base = {
    backgroundColor: dark ? 'var(--forest-950)' : 'var(--cream-50)',
    color: dark ? 'var(--cream-50)' : 'var(--ink-900)',
    padding: '96px 24px',
  };
  if (!dark) {
    base.backgroundImage = 'radial-gradient(circle, rgba(11,20,16,0.055) 1px, transparent 1px)';
    base.backgroundSize = '36px 36px';
    base.backgroundAttachment = 'fixed';
  }
  return (
    <section id={id} style={{ ...base, ...style }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>{children}</div>
    </section>
  );
};

Object.assign(window, { Button, Icon, Eyebrow, Badge, Field, NexionLogo, Header, Footer, Section, useIsMobile });