/* Maison Silya — website kit local primitives.
   These mirror the system components (Button, Tag, Input, Divider) and
   add website chrome (icons, placeholders). Kept kit-local so the kit
   renders standalone; production should consume the published library
   at window.MaisonSilyaDesignSystem_db0f02. */

const C = (v) => `var(--ms-${v})`;

/* True only on devices with a real hovering pointer (mouse / trackpad).
   On touch screens a tap emulates mouseenter and it sticks — which made
   rug cards swap to their in-situ photo and zoom in. Hover effects are
   gated on this so phones keep the flat, un-zoomed image. */
const MS_CAN_HOVER = !(window.matchMedia && window.matchMedia('(hover: none)').matches);

/* ---- Thin hairline icons (~1.25px stroke, currentColor) ---- */
function Icon({ name, size = 20, style = {} }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.25, strokeLinecap: 'square' };
  const paths = {
    menu: <g {...p}><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="13" x2="21" y2="13"/><line x1="3" y1="19" x2="21" y2="19"/></g>,
    close: <g {...p}><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></g>,
    search: <g {...p}><circle cx="11" cy="11" r="6.5"/><line x1="16" y1="16" x2="21" y2="21"/></g>,
    account: <g {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></g>,
    arrow: <g {...p}><line x1="3" y1="12" x2="20" y2="12"/><polyline points="14,6 21,12 14,18"/></g>,
    chevron: <g {...p}><polyline points="9,5 16,12 9,19"/></g>,
    plus: <g {...p}><line x1="12" y1="4" x2="12" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/></g>,
    minus: <g {...p}><line x1="4" y1="12" x2="20" y2="12"/></g>,
  };
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block', ...style }} aria-hidden="true">{paths[name]}</svg>;
}

/* ---- Button (mirrors system Button) ---- */
function Btn({ children, variant = 'primary', size = 'md', as = 'button', style = {}, ...rest }) {
  const sizes = {
    sm: { padding: '10px 22px', fontSize: 10, letterSpacing: '0.24em' },
    md: { padding: '15px 32px', fontSize: 11, letterSpacing: '0.26em' },
    lg: { padding: '19px 44px', fontSize: 12, letterSpacing: '0.28em' },
  };
  const variants = {
    primary: { background: C('ink'), color: C('ivory'), borderColor: C('ink') },
    secondary: { background: 'transparent', color: C('ink'), borderColor: C('line-strong') },
    ghost: { background: 'transparent', color: C('ink'), borderColor: 'transparent', padding: `${sizes[size].padding.split(' ')[0]} 0` },
    inverse: { background: C('ivory'), color: C('ink'), borderColor: C('ivory') },
    'ghost-inverse': { background: 'transparent', color: C('ivory'), borderColor: 'transparent', padding: `${sizes[size].padding.split(' ')[0]} 0` },
  };
  const Tag = as;
  const enter = (e) => {
    if (variant === 'primary') Object.assign(e.currentTarget.style, { background: C('stone-800'), borderColor: C('stone-800') });
    if (variant === 'secondary') e.currentTarget.style.borderColor = C('ink');
    if (variant === 'ghost') e.currentTarget.style.color = C('accent');
    if (variant === 'ghost-inverse') e.currentTarget.style.opacity = 0.7;
    if (variant === 'inverse') Object.assign(e.currentTarget.style, { background: C('champagne'), borderColor: C('champagne') });
  };
  const leave = (e) => { Object.assign(e.currentTarget.style, { ...variants[variant], opacity: 1 }); };
  return (
    <Tag onMouseEnter={enter} onMouseLeave={leave}
      style={{ fontFamily: C('font-sans'), textTransform: 'uppercase', fontWeight: 400,
        border: '1px solid transparent', borderRadius: C('radius-sm'), cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, lineHeight: 1, whiteSpace: 'nowrap',
        textDecoration: 'none', transition: C('transition'), WebkitFontSmoothing: 'antialiased',
        ...sizes[size], ...variants[variant], ...style }} {...rest}>{children}</Tag>
  );
}

/* ---- Filter tag (mirrors system Tag) ---- */
function FilterTag({ children, selected, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ fontFamily: C('font-sans'), textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.22em',
        color: selected ? C('ivory') : C('ink-secondary'), background: selected ? C('ink') : 'transparent',
        border: `1px solid ${selected ? C('ink') : (h ? C('line-strong') : C('line'))}`, borderRadius: C('radius-pill'),
        padding: '9px 18px', cursor: 'pointer', lineHeight: 1, transition: C('transition') }}>{children}</button>
  );
}

/* ---- Underline field (mirrors system Input) ---- */
function Field({ label, type = 'text', placeholder, defaultValue, name, required }) {
  const [f, setF] = React.useState(false);
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
      <span style={{ fontFamily: C('font-sans'), textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.22em', color: C('ink-tertiary') }}>{label}</span>
      <input type={type} placeholder={placeholder} defaultValue={defaultValue} name={name} required={required}
        onFocus={() => setF(true)} onBlur={() => setF(false)}
        style={{ fontFamily: C('font-serif'), fontSize: 17, color: C('ink'), background: 'transparent',
          border: 'none', borderBottom: `1px solid ${f ? C('ink') : C('line-strong')}`, borderRadius: 0,
          padding: '10px 0', outline: 'none', transition: 'border-color 420ms var(--ms-ease)' }} />
    </label>
  );
}

function Diamond({ size = 5, color = C('accent') }) {
  return <span style={{ width: size, height: size, background: color, rotate: '45deg', display: 'inline-block', flex: 'none' }} />;
}

/* ---- Stone placeholder for imagery (no stock photos available) ---- */
function Plate({ ratio = '4 / 5', label = 'Silya', tone = 'stone-200', radius = 'sm', image, children, style = {} }) {
  return (
    <div className="ms-plate" style={{ position: 'relative', aspectRatio: ratio, background: C(tone), overflow: 'hidden',
      borderRadius: C(`radius-${radius}`), ...style }}>
      {image && <img className="ms-plate-img" src={image} alt={label} loading="lazy" decoding="async" />}
      {!image && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: C('stone-500') }}>{label}</div>}
      {children}
    </div>
  );
}

/* ---- Chapter masthead: a monograph-style page opener.
   Replaces the bronze-eyebrow + giant-italic formula. A diamond + optional
   chapter numeral + section label + hairline, then the title. ---- */
function Chapter({ index, label, title, lede, max = 920 }) {
  return (
    <header>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <span style={{ width: 6, height: 6, background: C('accent'), rotate: '45deg', flex: 'none' }} />
        {index && <span style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontWeight: 400, fontSize: 21, color: C('ink-secondary') }}>N°&nbsp;{index}</span>}
        {label && <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{label}</span>}
        <span style={{ flex: 1, height: 1, background: C('line') }} />
      </div>
      <h1 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.75rem,5.5vw,4.75rem)', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '30px 0 0', maxWidth: max }}>{title}</h1>
      {lede && <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 20, lineHeight: 1.7, color: C('ink-secondary'), marginTop: 24, maxWidth: 560 }}>{lede}</p>}
    </header>
  );
}

Object.assign(window, { Icon, Btn, FilterTag, Field, Diamond, Plate, Chapter, C, MS_CAN_HOVER });