// theme.jsx — 쩨우스 design tokens, themes, fonts, and shared UI primitives.
// Tokens are emitted as CSS variables on the app root; components read var(--x).

// ─────────────────────────────────────────────────────────────
// Color themes  (색 테마 변형)
// ─────────────────────────────────────────────────────────────
const JJ_THEMES = {
  sunset: { // 노을 — default warm cream + coral/amber
    label: '노을',
    vars: {
      '--paper': '#F7F0E2', '--paper-2': '#FCF7ED', '--card': '#FFFDF7',
      '--ink': '#15323C', '--ink-2': '#3D5B66', '--ink-3': '#6E8089',
      '--coral': '#DE7355', '--amber': '#E3A24E', '--sea': '#20596B',
      '--line': '#E6D9BE', '--line-soft': '#EEE3CD',
      '--host': '#20596B', '--guest': '#DE7355', '--app': '#E3A24E',
      '--accent': '#DE7355', '--accent-soft': 'rgba(222,115,85,.10)',
      '--shadow': 'rgba(86,61,32,.13)',
    },
  },
  sea: { // 바다 — cooler, sea-forward
    label: '바다',
    vars: {
      '--paper': '#EEF1EC', '--paper-2': '#F6F8F3', '--card': '#FFFFFF',
      '--ink': '#142C34', '--ink-2': '#36545E', '--ink-3': '#6A8088',
      '--coral': '#D86F50', '--amber': '#D9963F', '--sea': '#1C5E73',
      '--line': '#D2DDD8', '--line-soft': '#E0E8E3',
      '--host': '#1C5E73', '--guest': '#D86F50', '--app': '#D9963F',
      '--accent': '#1C5E73', '--accent-soft': 'rgba(28,94,115,.10)',
      '--shadow': 'rgba(20,44,52,.12)',
    },
  },
  night: { // 밤바다 — dark mode, warm accents over deep navy
    label: '밤바다',
    vars: {
      '--paper': '#10242B', '--paper-2': '#16303A', '--card': '#1B3742',
      '--ink': '#F4ECDA', '--ink-2': '#C7D4D6', '--ink-3': '#8AA0A6',
      '--coral': '#E98564', '--amber': '#EBB164', '--sea': '#6FB6C9',
      '--line': 'rgba(228,214,184,.16)', '--line-soft': 'rgba(228,214,184,.10)',
      '--host': '#6FB6C9', '--guest': '#E98564', '--app': '#EBB164',
      '--accent': '#E98564', '--accent-soft': 'rgba(233,133,100,.14)',
      '--shadow': 'rgba(0,0,0,.4)',
    },
  },
};

// ─────────────────────────────────────────────────────────────
// Type themes  (폰트 테마 변형)
// ─────────────────────────────────────────────────────────────
const JJ_FONTS = {
  classic: { // 명조 헤드라인 — default
    label: '명조',
    vars: {
      '--f-display': "'Gowun Batang', serif",
      '--f-body': "'IBM Plex Sans KR', sans-serif",
      '--f-hand': "'Nanum Pen Script', cursive",
      '--hand-scale': '1',
    },
  },
  hand: { // 손글씨 강조 — more pen accents, larger
    label: '손글씨',
    vars: {
      '--f-display': "'Gowun Batang', serif",
      '--f-body': "'IBM Plex Sans KR', sans-serif",
      '--f-hand': "'Nanum Pen Script', cursive",
      '--hand-scale': '1.18',
    },
  },
  clean: { // 산세리프 — IBM Plex everywhere, crisp
    label: '산세리프',
    vars: {
      '--f-display': "'IBM Plex Sans KR', sans-serif",
      '--f-body': "'IBM Plex Sans KR', sans-serif",
      '--f-hand': "'Nanum Pen Script', cursive",
      '--hand-scale': '1',
    },
  },
};

function jjThemeVars(themeKey, fontKey) {
  return { ...JJ_THEMES[themeKey].vars, ...JJ_FONTS[fontKey].vars };
}

// ─────────────────────────────────────────────────────────────
// Icon set — thin line icons, no emoji. stroke = currentColor.
// ─────────────────────────────────────────────────────────────
const JJ_ICON_PATHS = {
  trip:    'M4 19c4-1 6-5 8-9s4-8 8-9M4 19l3-1M4 19l1-3',           // winding path
  map:     'M12 21s7-6.3 7-12a7 7 0 10-14 0c0 5.7 7 12 7 12z|M12 9.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4z',
  album:   'M3 6h18v14H3z|M3 16l5-5 4 4 3-3 6 6|M16 9.5a1.2 1.2 0 100-.01',
  wallet:  'M3 7h15a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h12|M17 13h.01',
  home:    'M4 11l8-7 8 7|M6 9.6V20h12V9.6',
  ticket:  'M4 8a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 000 4v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2a2 2 0 000-4z|M14 6v12',
  key:     'M14.5 4a4.5 4.5 0 11-3.6 7.2L4 18v2h2l1-1h2v-2h2l1.1-1.1A4.5 4.5 0 0114.5 4z|M16 8h.01',
  gift:    'M4 11h16v9H4z|M3 7h18v4H3z|M12 7v13|M12 7C9 7 7.5 3.5 9.5 3.5S12 6 12 7c0-1 .5-3.5 2.5-3.5S15 7 12 7z',
  book:    'M5 4h11a2 2 0 012 2v14H7a2 2 0 01-2-2z|M5 18a2 2 0 012-2h11',
  bell:    'M6 9a6 6 0 1112 0c0 5 2 6 2 6H4s2-1 2-6|M10 21h4',
  sun:     'M12 4v2M12 18v2M4 12H2M22 12h-2M6 6L5 5M18 18l1 1M18 6l1-1M6 18l-1 1|M12 8a4 4 0 100 8 4 4 0 000-8z',
  spark:   'M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z',
  heart:   'M12 20S4 14.5 4 9.2A4.2 4.2 0 0112 6a4.2 4.2 0 018 3.2C20 14.5 12 20 12 20z',
  plus:    'M12 5v14M5 12h14',
  check:   'M5 12.5l4.2 4.2L19 7',
  send:    'M5 12L20 5l-4 15-4-6-7-2z',
  train:   'M7 4h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z|M5 17l-2 3M19 17l2 3|M9 19h6|M9 9h6|M9 13h.01M15 13h.01',
  user:    'M12 12a4 4 0 100-8 4 4 0 000 8z|M5 20c0-3.3 3.1-5.5 7-5.5s7 2.2 7 5.5',
  chevron: 'M9 5l7 7-7 7',
  chevL:   'M15 5l-7 7 7 7',
  arrow:   'M5 12h14M13 6l6 6-6 6',
  pin:     'M12 21s7-6.3 7-12a7 7 0 10-14 0c0 5.7 7 12 7 12z|M12 9.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4z',
  clock:   'M12 21a9 9 0 100-18 9 9 0 000 18z|M12 7.5V12l3 2',
  cloud:   'M7 18a4 4 0 01-.5-8A5.5 5.5 0 0117 11a3.5 3.5 0 01-1 7z',
  edit:    'M4 20h4L19 9l-4-4L4 16z|M14 6l4 4',
  close:   'M6 6l12 12M18 6L6 18',
  loop:    'M4 12a8 8 0 0114-5l2 2M20 12a8 8 0 01-14 5l-2-2|M20 4v5h-5M4 20v-5h5',
  letter:  'M4 6h16v12H4z|M4 7l8 6 8-6',
  star:    'M12 4l2.3 5.1L20 9.8l-4 3.9 1 5.6-5-2.8-5 2.8 1-5.6-4-3.9 5.7-.7z',
};

function JJIcon({ name, size = 22, color = 'currentColor', sw = 1.7, fill = false, style = {} }) {
  const segs = (JJ_ICON_PATHS[name] || '').split('|');
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block', flexShrink: 0, ...style }}>
      {segs.map((d, i) => (
        <path key={i} d={d} stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
          fill={fill ? color : 'none'} fillOpacity={fill ? 0.13 : 0} />
      ))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Small shared primitives
// ─────────────────────────────────────────────────────────────
function Kicker({ children, color = 'var(--coral)', style = {} }) {
  return (
    <div style={{
      fontFamily: 'var(--f-body)', fontSize: 10.5, fontWeight: 600,
      letterSpacing: '.28em', textTransform: 'uppercase', color,
      display: 'flex', alignItems: 'center', gap: 9, ...style,
    }}>{children}</div>
  );
}

function Hand({ children, size = 21, color = 'var(--coral)', style = {} }) {
  return (
    <span style={{
      fontFamily: 'var(--f-hand)', color,
      fontSize: `calc(${size}px * var(--hand-scale))`, lineHeight: 1.15, ...style,
    }}>{children}</span>
  );
}

function Tag({ children, tone = 'amber', solid = false, style = {} }) {
  const map = {
    amber: ['var(--amber)', 'rgba(227,162,78,.16)'],
    coral: ['var(--coral)', 'rgba(222,115,85,.14)'],
    sea:   ['var(--sea)', 'rgba(32,89,107,.12)'],
    ink:   ['var(--ink-3)', 'rgba(110,128,137,.12)'],
  };
  const [c, bg] = map[tone] || map.amber;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontFamily: 'var(--f-body)', fontSize: 11, fontWeight: 600, letterSpacing: '.01em',
      color: solid ? '#fff' : c, background: solid ? c : bg,
      border: solid ? 'none' : `1px solid ${c}33`,
      borderRadius: 999, padding: '3px 10px', whiteSpace: 'nowrap', ...style,
    }}>{children}</span>
  );
}

function Avatar({ name, tone = 'coral', size = 38, ring = false }) {
  const c = tone === 'host' ? 'var(--host)' : tone === 'guest' ? 'var(--guest)' : `var(--${tone})`;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: `linear-gradient(150deg, ${c}, color-mix(in srgb, ${c} 60%, #000 8%))`,
      color: '#fff', fontFamily: 'var(--f-display)', fontWeight: 700,
      fontSize: size * 0.42, display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: ring ? `0 0 0 3px var(--card), 0 0 0 4.5px ${c}` : `0 2px 6px var(--shadow)`,
    }}>{name}</div>
  );
}

// A warm "photo" placeholder evoking Busan scenes (no real images on hand).
const JJ_SCENES = {
  sea:    'linear-gradient(180deg,#9FC9D6 0%,#7FB4C6 38%,#E8C79B 78%,#EBB07E 100%)',
  sunset: 'linear-gradient(180deg,#F0B27A 0%,#E8895E 45%,#C95F52 78%,#7B4A55 100%)',
  night:  'linear-gradient(180deg,#16303F 0%,#27506050 55%,#3A2C3A 100%)',
  market: 'linear-gradient(150deg,#E8A24E 0%,#DE7355 60%,#9A4632 100%)',
  hill:   'linear-gradient(180deg,#BcD6C9 0%,#8FB89E 50%,#C98C5E 100%)',
  cafe:   'linear-gradient(160deg,#E6C9A0 0%,#C98C66 55%,#7C5A4A 100%)',
  temple: 'linear-gradient(180deg,#C9B58C 0%,#B07A4E 55%,#5E3B2E 100%)',
  bridge: 'linear-gradient(180deg,#2A4A5E 0%,#3E6A78 40%,#E0A26A 90%)',
};
function Photo({ scene = 'sea', label, h = 120, r = 14, style = {}, children }) {
  return (
    <div style={{
      position: 'relative', width: '100%', height: h, borderRadius: r, overflow: 'hidden',
      background: JJ_SCENES[scene] || JJ_SCENES.sea, flexShrink: 0,
      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -30px 40px rgba(40,20,10,.18)', ...style,
    }}>
      {/* faint horizon to read as photo */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '54%', height: 1, background: 'rgba(255,255,255,.22)' }} />
      {label && (
        <div style={{
          position: 'absolute', left: 8, bottom: 7, fontFamily: 'var(--f-hand)',
          fontSize: 'calc(15px * var(--hand-scale))', color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,.45)',
        }}>{label}</div>
      )}
      {children}
    </div>
  );
}

// Card surface
function Card({ children, style = {}, pad = 16, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'var(--card)', border: '1px solid var(--line-soft)', borderRadius: 18,
      padding: pad, boxShadow: '0 1px 2px var(--shadow)', ...style,
      cursor: onClick ? 'pointer' : 'default',
    }}>{children}</div>
  );
}

// Primary pill button
function BtnPrimary({ children, onClick, icon, tone = 'coral', style = {}, full = false }) {
  const c = `var(--${tone})`;
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: 'var(--f-body)', fontSize: 15, fontWeight: 600, color: '#fff',
      background: `linear-gradient(180deg, color-mix(in srgb, ${c} 92%, #fff 8%), ${c})`,
      border: 'none', borderRadius: 999, padding: '13px 22px', cursor: 'pointer',
      width: full ? '100%' : undefined, boxShadow: `0 6px 16px color-mix(in srgb, ${c} 35%, transparent)`,
      WebkitTapHighlightColor: 'transparent', ...style,
    }}>
      {icon && <JJIcon name={icon} size={18} color="#fff" sw={2} />}
      {children}
    </button>
  );
}
function BtnGhost({ children, onClick, icon, style = {}, full = false }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
      fontFamily: 'var(--f-body)', fontSize: 14, fontWeight: 600, color: 'var(--ink-2)',
      background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 999,
      padding: '11px 18px', cursor: 'pointer', width: full ? '100%' : undefined,
      WebkitTapHighlightColor: 'transparent', ...style,
    }}>
      {icon && <JJIcon name={icon} size={16} color="var(--ink-2)" />}
      {children}
    </button>
  );
}

// Section heading inside screens
function ScreenTitle({ kicker, title, sub, kickerColor }) {
  return (
    <div style={{ marginBottom: 14 }}>
      {kicker && <Kicker color={kickerColor}>{kicker}<span style={{ flex: 1, height: 1, background: 'var(--line)' }} /></Kicker>}
      <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 25, color: 'var(--ink)', lineHeight: 1.3, marginTop: kicker ? 9 : 0, letterSpacing: '.01em' }}>{title}</div>
      {sub && <div style={{ fontFamily: 'var(--f-body)', fontSize: 13.5, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.6 }}>{sub}</div>}
    </div>
  );
}

Object.assign(window, {
  JJ_THEMES, JJ_FONTS, jjThemeVars, JJ_SCENES,
  JJIcon, Kicker, Hand, Tag, Avatar, Photo, Card,
  BtnPrimary, BtnGhost, ScreenTitle,
});