/* Reiderstad Invest — Website kit shared lib: icons + layout helpers.
   Exposed on window so sibling babel scripts can use them. */

// 1.5px line icons (Feather/Lucide family) — the brand's icon language.
const ico = (paths) => (props) => (
  <svg viewBox="0 0 24 24" width={props.size || 20} height={props.size || 20}
    fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
    style={props.style} aria-hidden="true">{paths}</svg>
);
const IconSearch    = ico(<><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5 21 21"/></>);
const IconArrow     = ico(<path d="M5 12h14M13 6l6 6-6 6"/>);
const IconArrowUR   = ico(<path d="M7 17 17 7M8 7h9v9"/>);
const IconCompass   = ico(<><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5-5 2 2-5 5-2z"/></>);
const IconLayers    = ico(<><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></>);
const IconHome      = ico(<><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></>);
const IconTools     = ico(<path d="M14.7 6.3a4 4 0 0 0-5 5L4 17v3h3l5.7-5.7a4 4 0 0 0 5-5l-2.4 2.4-2-2 2.4-2.4z"/>);
const IconKey       = ico(<><circle cx="8" cy="8" r="4"/><path d="M11 11l8 8M16 16l2-2M19 19l2-2"/></>);
const IconCalendar  = ico(<><rect x="4" y="5" width="16" height="16" rx="1.5"/><path d="M4 9h16M8 3v4M16 3v4"/></>);
const IconMenu      = ico(<path d="M4 7h16M4 12h16M4 17h16"/>);
const IconClose     = ico(<path d="M6 6l12 12M18 6 6 18"/>);
const IconCheck     = ico(<path d="M4 12l5 5L20 6"/>);
const IconMapPin    = ico(<><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="2.5"/></>);
const IconBed       = ico(<><path d="M3 8v10M3 18h18M21 18v-5a3 3 0 0 0-3-3H8v5"/><path d="M3 13h5"/></>);
const IconRuler     = ico(<><rect x="3" y="8" width="18" height="8" rx="1"/><path d="M7 8v3M11 8v4M15 8v3M19 8v4"/></>);

const LOGO_DARK  = './assets/logo/logo-white.svg';
const LOGO_LIGHT = './assets/logo/logo-graphite.svg';

// Section shell with brand rhythm.
function Section({ children, dark, pad = '96px 96px', style }) {
  return (
    <section data-theme={dark ? 'dark' : undefined}
      style={{ background: 'var(--bg)', color: 'var(--fg)', padding: pad,
        borderTop: '1px solid var(--hairline)', ...style }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function Eyebrow({ children, gold, style }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: gold ? 'var(--accent)' : 'var(--muted)',
    display: 'flex', gap: 12, alignItems: 'center', ...style }}>{children}</div>;
}

Object.assign(window, {
  IconSearch, IconArrow, IconArrowUR, IconCompass, IconLayers, IconHome, IconTools,
  IconKey, IconCalendar, IconMenu, IconClose, IconCheck, IconMapPin, IconBed, IconRuler,
  LOGO_DARK, LOGO_LIGHT, Section, Eyebrow,
});