// ssup2-core.jsx — shared data, icons, and components for the V2 "Electric Midnight" UI

const S2U = (id, w) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w || 900}&q=75`;
const S2AV = (n) => `https://i.pravatar.cc/160?img=${n}`;

const S2PH = {
  beach: S2U('1507525428034-b723cf961d3e'),
  cafe: S2U('1445116572660-236099ec97a0'),
  market: S2U('1533777324565-a040eb52facd'),
  streetfood: S2U('1528605248644-14dd04022da1'),
  sunset: S2U('1495616811223-4d98c6e9c869'),
  friends: S2U('1529156069898-49953e39b3ac'),
  party: S2U('1492684223066-81342ee5ff30'),
  hangout: S2U('1543269865-cbf427effbad'),
  sunsetcrew: S2U('1506869640319-fe1a24fd76dc'),
  golden: S2U('1511632765486-a01980e01a18'),
  trek: S2U('1539635278303-d4002c07eae3'),
  festival: S2U('1501281668745-f7f57925c3b4'),
};

// ── Icons — tiny stroke set ─────────────────────────────────
function S2Icon({ name, size = 18, sw = 1.8, style = {} }) {
  const P = {
    arrow: <path d="M4 12h15m-6-7 7 7-7 7" />,
    back: <path d="M20 12H5m6 7-7-7 7-7" />,
    pulse: <path d="M2 12h4l3-8 4 16 3-8h6" />,
    compass: <g><circle cx="12" cy="12" r="9.2" /><path d="m15.5 8.5-2.2 5-4.8 2 2.2-5z" /></g>,
    nav: <path d="M21 3 10.5 13.5M21 3l-7 18-3.5-7.5L3 10z" />,
    book: <g><path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z" /><path d="M5 17V4M8 20a3 3 0 0 1 0-6h11" /></g>,
    shield: <path d="M12 3 5 6v5c0 5 3.2 8.4 7 10 3.8-1.6 7-5 7-10V6z" />,
    zap: <path d="M13 2 4.5 13.5H11L9.5 22 19 9.5h-7z" />,
    clock: <g><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2" /></g>,
    pin: <g><path d="M12 21s-7-5.4-7-11a7 7 0 0 1 14 0c0 5.6-7 11-7 11z" /><circle cx="12" cy="10" r="2.6" /></g>,
    users: <g><circle cx="9" cy="8.5" r="3.5" /><path d="M3 20c.6-3.4 3-5.5 6-5.5s5.4 2.1 6 5.5M16 5.4a3.5 3.5 0 0 1 0 6.2M18 14.8c2 .8 3.3 2.6 3.7 5.2" /></g>,
    check: <path d="m5 13 4.5 4.5L19 7" />,
    bookmark: <path d="M7 3h10v18l-5-4-5 4z" />,
    x: <path d="m6 6 12 12M18 6 6 18" />,
    edit: <path d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17z" />,
    reload: <path d="M20 12a8 8 0 1 1-2.3-5.6M20 3v4h-4" />,
    lock: <g><rect x="5" y="11" width="14" height="9" rx="2.5" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></g>,
    bell: <g><path d="M18.5 16h-13c1.4-1.5 2.1-2.9 2.1-5.5a4.4 4.4 0 0 1 8.8 0c0 2.6.7 4 2.1 5.5z" /><path d="M10.4 19.2a1.8 1.8 0 0 0 3.2 0" /></g>,
    tune: <g><path d="M4 7.5h16M4 16.5h16" /><circle cx="9.5" cy="7.5" r="2.4" /><circle cx="14.5" cy="16.5" r="2.4" /></g>,
    sos: <g><circle cx="12" cy="12" r="9" /><path d="M12 7.5v5M12 16.2v.1" /></g>,
    sparkle: <path d="M12 3c.6 4.5 2 6.5 7 7-5 .5-6.4 2.5-7 7-.6-4.5-2-6.5-7-7 5-.5 6.4-2.5 7-7z" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {P[name] || null}
    </svg>
  );
}

// ── Building blocks ─────────────────────────────────────────
function S2Screen({ children, style = {} }) {
  return <div className="s2-screen" style={style}>{children}</div>;
}

function Mono({ children, on, style = {} }) {
  return <div className="s2-mono" style={style}>{on ? <span className="s2-on">{children}</span> : children}</div>;
}

function S2LivePill({ children }) {
  return (
    <span className="s2-livepill">
      <span className="s2-livedot"></span>
      {children}
    </span>
  );
}

function S2Btn({ children, ghost, quiet, icon, style = {} }) {
  const cls = 's2-btn' + (ghost ? ' s2-ghost' : '') + (quiet ? ' s2-quiet' : '');
  return (
    <button className={cls} style={style}>
      {children}
      {icon ? <S2Icon name={icon} size={19} sw={2.2} /> : null}
    </button>
  );
}

function S2Chip({ children, on, lime, dot }) {
  const cls = 's2-chip' + (on ? ' s2-on' : '') + (lime ? ' s2-lime' : '');
  return (
    <button className={cls}>
      {dot ? <span style={{ width: 7, height: 7, borderRadius: '50%', background: dot }}></span> : null}
      {children}
    </button>
  );
}

function S2Av({ n, size = 36, ring, style = {} }) {
  return <img className={'s2-av' + (ring ? ' s2-ring' : '')} src={S2AV(n)} alt=""
    style={{ width: size, height: size, ...style }} />;
}

function S2AvStack({ ns, size = 28 }) {
  return (
    <div className="s2-avstack">
      {ns.map((n) => <S2Av key={n} n={n} size={size} />)}
    </div>
  );
}

// ── Tab bar ─────────────────────────────────────────────────
function S2TabBar({ active }) {
  const tabs = [
    { k: 'discover', icon: 'users', label: 'Discover' },
    { k: 'compass', icon: 'compass', label: 'Compass' },
    { k: 'go', icon: 'nav', label: 'Go' },
    { k: 'passport', icon: 'book', label: 'Passport' },
  ];
  return (
    <div className="s2-tabbar">
      {tabs.map((t) => (
        <button key={t.k} className={'s2-tab' + (t.k === active ? ' s2-on' : '')}>
          <S2Icon name={t.icon} size={21} sw={t.k === active ? 2.1 : 1.7} />
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
}

// ── Pulse strip (lives on top of Discover / Compass) ────────
function S2PulseStrip({ mood = 'Social', summary = 'street food · walking · open to a few', dot = 'var(--accent)', fade = '1h 40m left', expired = false }) {
  return (
    <div className="s2-card s2-row" style={{
      padding: '12px 14px', gap: 12, alignItems: 'center',
      boxShadow: expired
        ? 'inset 0 0 0 1.5px color-mix(in oklab, #FFB04D 55%, transparent)'
        : 'inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 38%, transparent)',
    }}>
      <span style={{
        width: 38, height: 38, borderRadius: 12, flex: '0 0 38px', display: 'flex',
        alignItems: 'center', justifyContent: 'center', background: 'var(--surface-raised)',
        boxShadow: 'var(--inset-hairline)', color: expired ? '#FFB04D' : 'var(--accent)',
      }}><S2Icon name="pulse" size={18} sw={2.2} /></span>
      <div className="s2-col" style={{ gap: 2, flex: 1, minWidth: 0 }}>
        <div className="s2-row" style={{ gap: 7 }}>
          <Mono on={!expired} style={expired ? { color: '#FFB04D' } : undefined}>{expired ? 'Pulse faded' : 'Your pulse'}</Mono>
          <span style={{ fontSize: 10, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>· {fade}</span>
        </div>
        {expired ? (
          <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Tap to set a fresh one</span>
        ) : (
          <div className="s2-row" style={{ gap: 8, minWidth: 0 }}>
            <span className="s2-mooddot" style={{ background: dot, flex: '0 0 auto' }}></span>
            <span style={{ fontSize: 14, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{mood} · {summary}</span>
          </div>
        )}
      </div>
      <span className="s2-chip s2-on" style={{ minHeight: 34, flex: '0 0 auto', gap: 6 }}>
        <S2Icon name="edit" size={14} sw={2.2} />{expired ? 'Set' : 'Re-tune'}
      </span>
    </div>
  );
}

// ── Wordmark ────────────────────────────────────────────────
function S2Wordmark({ h = 56, style = {} }) {
  return <img src="brand/ssup-wordmark.png" alt="Ssup!" style={{ height: h, width: 'auto', display: 'block', ...style }} />;
}

Object.assign(window, {
  S2U, S2AV, S2PH, S2Icon, S2Screen, Mono, S2LivePill, S2Btn, S2Chip,
  S2Av, S2AvStack, S2TabBar, S2PulseStrip, S2Wordmark,
});