/* Michael Style — Prototype · Proto shell.
   The persistent chrome: global header (theme switcher + view toggle + website nav),
   the ThemeSwitcher (used in both the top bar and the app's Me screen), floating Book button.
   Loaded via browser Babel; uses global React + DS namespace. */

const SHELL = window.MichaelStyleDesignSystem_7fd21b;
const T = (lang, en, es) => (lang === 'ES' ? es : en);

const ACCENTS = [
  { id: 'dominican-red', label: 'Dominican Red', es: 'Rojo', dot: '#E5121F' },
  { id: 'electric-cobalt', label: 'Electric Cobalt', es: 'Cobalto', dot: '#3D69FF' },
  { id: 'volt', label: 'Volt', es: 'Volt', dot: '#C7F032' },
];

/* —— The theme switcher. variant="bar" (top bar chips) | "segmented" (app Me) —— */
function ThemeSwitcher({ accent, setAccent, variant = 'bar' }) {
  if (variant === 'segmented') {
    return (
      <div role="radiogroup" aria-label="Accent theme" style={{ display: 'flex', border: '1px solid var(--bd-d)', borderRadius: 'var(--radius-pill)', padding: '4px', gap: '4px', background: 'var(--card)' }}>
        {ACCENTS.map((a) => {
          const on = a.id === accent;
          return (
            <button key={a.id} role="radio" aria-checked={on} onClick={() => setAccent(a.id)} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
              fontFamily: 'var(--font-mono)', fontSize: '0.5rem', letterSpacing: '0.06em', textTransform: 'uppercase',
              padding: '9px 4px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', border: 'none',
              background: on ? 'var(--accent)' : 'transparent',
              color: on ? 'var(--on-accent)' : 'var(--muted)',
              transition: 'background var(--dur-fast) var(--ease-out)',
            }}>
              <i style={{ width: '8px', height: '8px', borderRadius: '50%', background: a.dot, flex: 'none', boxShadow: on ? '0 0 0 1.5px var(--on-accent)' : 'none' }} />
              {a.es}
            </button>
          );
        })}
      </div>
    );
  }
  // bar variant — labeled chips with color dots
  return (
    <div role="radiogroup" aria-label="Accent theme" style={{ display: 'flex', alignItems: 'center', gap: '7px' }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.52rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted-2)', marginRight: '2px' }} className="ms-theme-word">Theme</span>
      {ACCENTS.map((a) => {
        const on = a.id === accent;
        return (
          <button key={a.id} role="radio" aria-checked={on} onClick={() => setAccent(a.id)} title={a.label} style={{
            display: 'inline-flex', alignItems: 'center', gap: '7px',
            fontFamily: 'var(--font-mono)', fontSize: '0.55rem', letterSpacing: '0.08em', textTransform: 'uppercase',
            padding: '7px 12px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
            border: `1px solid ${on ? 'var(--bone)' : 'var(--bd-d)'}`,
            background: on ? 'rgba(255,255,255,.06)' : 'transparent',
            color: on ? 'var(--bone)' : 'var(--muted)',
            transition: 'border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)',
          }}>
            <i style={{ width: '11px', height: '11px', borderRadius: '50%', background: a.dot, flex: 'none', boxShadow: on ? '0 0 0 2px var(--ink), 0 0 0 3px ' + a.dot : 'none' }} />
            <span className="ms-chip-label">{a.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* —— Website / App view toggle —— */
function ViewToggle({ view, setView }) {
  const opts = [['website', 'Website'], ['owner', 'Owner']];
  return (
    <div role="radiogroup" aria-label="View" style={{ display: 'inline-flex', border: '1px solid var(--bd-d2)', borderRadius: 'var(--radius-pill)', overflow: 'hidden' }}>
      {opts.map(([id, label]) => {
        const on = id === view;
        return (
          <button key={id} role="radio" aria-checked={on} onClick={() => setView(id)} style={{
            fontFamily: 'var(--font-mono)', fontSize: '0.58rem', letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: '8px 16px', border: 'none', cursor: 'pointer',
            background: on ? 'var(--bone)' : 'transparent', color: on ? 'var(--ink)' : 'var(--muted)',
            transition: 'background var(--dur-fast) var(--ease-out)',
          }}>{label}</button>
        );
      })}
    </div>
  );
}

/* —— Persistent global header (single row; collapses to a hamburger on mobile) —— */
function Header({ view, setView, accent, setAccent, onBook, lang, setLang, onNav }) {
  const { Logo, Button } = SHELL;
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isWeb = view === 'website';
  const go = onNav || (() => {});
  const navItems = [[T(lang, 'Services', 'Servicios'), 'servicios'], [T(lang, 'Work', 'Trabajo'), 'work'], ['SMP', 'smp'], [T(lang, 'About', 'Nosotros'), 'about']];
  const hrefFor = (t) => (t === 'work' ? '#work' : '#' + t);
  const link = { color: 'inherit', textDecoration: 'none' };
  const ulStyle = { display: 'flex', gap: '22px', listStyle: 'none', margin: 0, padding: 0, fontFamily: 'var(--font-mono)', fontSize: '0.62rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)' };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: 'var(--scrim-dark)', backdropFilter: 'var(--blur-chrome)',
      borderBottom: '1px solid var(--bd-d)',
    }}>
      <div style={{
        maxWidth: 'var(--maxw)', margin: '0 auto', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: '16px', padding: '12px 24px',
      }}>
        {/* left — brand only */}
        <span onClick={() => go('home')} style={{ cursor: 'pointer', display: 'inline-flex', flex: 'none' }}><Logo size="md" /></span>
        {/* right — nav + actions (desktop) / hamburger (mobile) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '30px', flex: 'none' }}>
          {isWeb && (
            <ul className="ms-nav-desktop" style={ulStyle}>
              {navItems.map(([label, target]) => (
                <li key={label}><a href={hrefFor(target)} onClick={(e) => { e.preventDefault(); go(target); }} style={link} className="ms-nav-link">{label}</a></li>
              ))}
            </ul>
          )}
          {isWeb && (
            <div className="ms-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              <window.LangToggle value={lang} onChange={setLang} />
              <Button variant="fill" onClick={onBook}>{T(lang, 'Book now', 'Reservar')}</Button>
            </div>
          )}
          {isWeb && (
            <button className="ms-nav-mobile" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen((o) => !o)} style={{
              width: '42px', height: '42px', borderRadius: '11px', alignItems: 'center', justifyContent: 'center',
              background: 'transparent', border: '1px solid var(--bd-d2)', color: 'var(--bone)', cursor: 'pointer',
            }}>
              <window.Icon name={menuOpen ? 'x' : 'menu'} size={20} />
            </button>
          )}
        </div>
      </div>
      {/* mobile dropdown menu (website only) */}
      {isWeb && menuOpen && (
        <div className="ms-nav-mobile" style={{ flexDirection: 'column', padding: '4px 20px 18px', borderTop: '1px solid var(--bd-d)' }}>
          {navItems.map(([label, target]) => (
            <a key={label} href={hrefFor(target)} onClick={(e) => { e.preventDefault(); go(target); setMenuOpen(false); }} className="ms-nav-link"
              style={{ ...link, fontFamily: 'var(--font-mono)', fontSize: '0.74rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', padding: '13px 0', borderBottom: '1px solid var(--bd-d)' }}>{label}</a>
          ))}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '15px' }}>
            <window.LangToggle value={lang} onChange={setLang} />
            <Button variant="fill" onClick={() => { setMenuOpen(false); onBook(); }}>{T(lang, 'Book now', 'Reservar')}</Button>
          </div>
        </div>
      )}
    </header>
  );
}

/* —— Floating Reservar · Book button (website view) —— */
function FloatingBook({ onBook, lang }) {
  return (
    <button onClick={onBook} style={{
      position: 'fixed', right: '24px', bottom: '24px', zIndex: 70,
      fontFamily: 'var(--font-mono)', fontSize: '0.64rem', letterSpacing: '0.1em', textTransform: 'uppercase',
      background: 'var(--accent)', color: 'var(--on-accent)', border: 'none',
      padding: '15px 22px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
      boxShadow: 'var(--shadow-pop)', display: 'inline-flex', alignItems: 'center', gap: '8px',
      transition: 'transform var(--dur-fast) var(--ease-out)',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {T(lang, 'Book now', 'Reservar')}
    </button>
  );
}

Object.assign(window, { ACCENTS, ThemeSwitcher, ViewToggle, Header, FloatingBook });