// Club 1519 — Portal Socios · chrome: Login, Header, Tab bar
const { useState: c15pState } = React;

function C15PLogo({ size = 20, color = 'var(--p-green)' }) {
  const I = window.C15Icons;
  return (
    <div className="c15p-logo" style={{ color }}>
      <I.Columna size={size} />
      <b>CLUB 1519</b>
    </div>
  );
}

/* ---------- Login Socios ---------- */
function C15PLogin({ onEnter }) {
  return (
    <div className="c15p-login">
      <div className="c15p-login-photo" />
      <div className="c15p-login-scrim" />
      <div className="c15p-login-content">
        <C15PLogo size={22} color="#F4F0E8" />
        <div className="c15p-photo-caption">foto editorial · mesa de cata, luz cálida</div>
        <div className="c15p-login-spacer" />
        <div className="c15p-login-kick">Portal de socios</div>
        <h1>Conexiones que<br />crean legado.</h1>
        <p>Acceso no significa entrar — significa pertenecer.</p>
        <div className="c15p-field">
          <input placeholder="Correo" defaultValue="alan@bittnerconstructora.mx" />
        </div>
        <div className="c15p-field">
          <input placeholder="Contraseña" type="password" defaultValue="••••••••" />
        </div>
        <button className="c15p-btn primary lg" onClick={onEnter}>Entrar</button>
        <div className="c15p-login-foot">Club privado · por invitación</div>
      </div>
    </div>
  );
}

/* ---------- Header ---------- */
function C15PHeader({ onBack, onBell, title }) {
  const I = window.C15Icons;
  return (
    <div className="c15p-header">
      {onBack
        ? <button className="c15p-headbtn" onClick={onBack}><I.ChevronIzq size={19} /></button>
        : <C15PLogo />}
      {title && <div className="c15p-headtitle">{title}</div>}
      {!onBack && (
        <button className="c15p-headbtn" onClick={onBell}><I.Campana size={18} /><span className="dot" /></button>
      )}
    </div>
  );
}

/* ---------- Tab bar ---------- */
function C15PTabBar({ active, onNav }) {
  const I = window.C15Icons;
  const items = [
    { id: 'home', label: 'Inicio', icon: 'Inicio' },
    { id: 'eventos', label: 'Eventos', icon: 'Eventos' },
    { id: 'membresia', label: 'Membresía', icon: 'Membresia' },
    { id: 'directorio', label: 'Directorio', icon: 'Directorio' },
  ];
  return (
    <div className="c15p-tabbar">
      {items.map(it => {
        const Ico = I[it.icon];
        const on = active === it.id;
        return (
          <button key={it.id} className={'c15p-tab' + (on ? ' on' : '')} onClick={() => onNav(it.id)}>
            <Ico size={22} sw={on ? 1.9 : 1.6} />
            <span>{it.label}</span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { C15PLogo, C15PLogin, C15PHeader, C15PTabBar });