/* =========================================================================
   DR. BANANA CLUB — MEMBERSHIP APP KIT · CORE
   Tokens, noise overlay, shared chrome (TopMeta, ScreenHead, BottomNav,
   SegmentedBar). Exposes globals at the bottom for other Babel scripts.
   ========================================================================= */

/* -----  NOISE  -----
   The single most important visual motif: every screen reads as printed.
   Fractal-noise SVG at ~3.5% opacity, multiply blend, fixed.
*/
const NoiseOverlay = () => (
  <div
    aria-hidden="true"
    style={{
      position: 'absolute',
      inset: 0,
      pointerEvents: 'none',
      backgroundImage:
        "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")",
      opacity: 0.035,
      mixBlendMode: 'multiply',
      zIndex: 1,
    }}
  />
);

/* -----  TOP META  -----
   Mono header above every screen. DR.BANANA ● NO.023
*/
const TopMeta = ({ code = '023', dark }) => (
  <div
    className="db-top-meta"
    style={{
      display: 'flex',
      gap: 8,
      alignItems: 'center',
      padding: '10px 0 8px',
      borderBottom: `1px solid ${dark ? 'var(--db-d-hairline)' : 'var(--db-hairline)'}`,
      color: dark ? 'var(--db-d-silver)' : 'var(--db-silver)',
      fontFamily: 'var(--font-mono)',
      fontSize: 10,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
    }}
  >
    <img
      src="../../assets/banana-mark.png"
      alt=""
      aria-hidden="true"
      style={{
        height: 14,
        width: 'auto',
        mixBlendMode: dark ? 'screen' : 'multiply',
        opacity: dark ? 0.9 : 1,
      }}
    />
    <span>DR.BANANA</span>
    <span>●</span>
    <span>28.ROOM</span>
    <span style={{ marginLeft: 'auto' }}>NO. {code}</span>
  </div>
);

/* -----  SCREEN HEAD  -----
   Editorial page head: mono kicker, narrow display title, mono meta row.
*/
const ScreenHead = ({ kicker, title, meta, dark }) => (
  <div
    className="db-screen-head"
    style={{
      padding: '20px 0 20px',
      borderBottom: `1px solid ${dark ? 'var(--db-d-hairline)' : 'var(--db-hairline)'}`,
    }}
  >
    <div
      style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: dark ? 'var(--db-d-graphite)' : 'var(--db-graphite)',
        marginBottom: 8,
      }}
    >
      {kicker}
    </div>
    <h2
      style={{
        margin: 0,
        fontFamily: 'var(--font-sans-narrow)',
        fontWeight: 700,
        fontSize: 36,
        lineHeight: 0.95,
        letterSpacing: '-0.02em',
        color: dark ? 'var(--db-d-ink)' : 'var(--db-ink)',
      }}
    >
      {title}
    </h2>
    <div
      style={{
        marginTop: 10,
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: dark ? 'var(--db-d-graphite)' : 'var(--db-graphite)',
      }}
    >
      {meta}
    </div>
  </div>
);

/* -----  BOTTOM NAV  -----
   Five labels, mono, underlined when active. Icon-free by design.
*/
const BottomNav = ({ active, onNav, dark }) => {
  const items = [
    { id: 'home', label: 'HOME' },
    { id: 'events', label: 'EVENTS' },
    { id: 'node', label: 'NODE' },
    { id: 'vault', label: 'VAULT' },
    { id: 'perks', label: 'PERKS' },
  ];
  return (
    <nav
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        display: 'flex',
        justifyContent: 'space-between',
        padding: '14px 20px 28px',
        borderTop: `1px solid ${dark ? 'var(--db-d-hairline)' : 'var(--db-hairline)'}`,
        background: dark ? 'var(--db-d-bg)' : 'var(--db-paper)',
        zIndex: 3,
      }}
    >
      {items.map((i) => {
        const on = active === i.id;
        return (
          <button
            key={i.id}
            onClick={() => onNav && onNav(i.id)}
            style={{
              background: 'transparent',
              border: 0,
              padding: '4px 2px',
              cursor: 'pointer',
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: on
                ? dark
                  ? 'var(--db-d-ink)'
                  : 'var(--db-ink)'
                : dark
                ? 'var(--db-d-silver)'
                : 'var(--db-silver)',
              borderBottom: on
                ? `2px solid ${dark ? 'var(--db-d-ink)' : 'var(--db-ink)'}`
                : '2px solid transparent',
              paddingBottom: 3,
            }}
          >
            {i.label}
          </button>
        );
      })}
    </nav>
  );
};

/* -----  SEGMENTED BAR  -----
   Tier progress bar. 10 segments; filled ones use ink (or paper in dark);
   the leading edge uses acid.
*/
const SegmentedBar = ({ filled, total = 10, dark }) => (
  <div
    style={{
      display: 'flex',
      gap: 3,
      margin: '10px 0',
    }}
  >
    {Array.from({ length: total }).map((_, i) => {
      const on = i < filled;
      const edge = i === filled - 1;
      return (
        <span
          key={i}
          style={{
            flex: 1,
            height: 8,
            background: edge
              ? 'var(--db-acid)'
              : on
              ? dark
                ? 'var(--db-d-ink-2)'
                : 'var(--db-ink)'
              : dark
              ? 'var(--db-d-hairline-2)'
              : 'var(--db-hairline)',
            transition: 'background 300ms ease',
          }}
        />
      );
    })}
  </div>
);

/* -----  HAIRLINE ROW  -----
   Generic dashed-or-solid separator used in ledgers and lists.
*/
const Hairline = ({ dashed, dark, style }) => (
  <div
    style={{
      borderTop: `1px ${dashed ? 'dashed' : 'solid'} ${
        dark ? 'var(--db-d-hairline)' : 'var(--db-hairline)'
      }`,
      ...style,
    }}
  />
);

Object.assign(window, {
  NoiseOverlay,
  TopMeta,
  ScreenHead,
  BottomNav,
  SegmentedBar,
  Hairline,
});