// Vagoonya Mobile — Component Library
// Native-feeling primitives + product cards. All composed from token classes.

const { useState, useEffect, useRef, useMemo, Fragment } = React;

// ─── Icons (Lucide outline 1.8 stroke, hand-drawn) ─────────────
const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.8, style = {} }) => {
  const paths = {
    'compass':       <><circle cx="12" cy="12" r="9"/><polygon points="16,8 13,13 8,16 11,11" fill={color} stroke="none"/></>,
    'search':        <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    'ticket':        <><path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8z"/><path d="M9 6v12" strokeDasharray="2 2"/></>,
    'heart':         <path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"/>,
    'heart-fill':    <path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z" fill={color}/>,
    'user':          <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    'user-circle':   <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="10" r="3"/><path d="M6.2 18a6 6 0 0 1 11.6 0"/></>,
    'bell':          <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z"/><path d="M9 19a3 3 0 0 0 6 0"/></>,
    'chevron-left':  <path d="m15 6-6 6 6 6"/>,
    'chevron-right': <path d="m9 6 6 6-6 6"/>,
    'chevron-down':  <path d="m6 9 6 6 6-6"/>,
    'chevron-up':    <path d="m6 15 6-6 6 6"/>,
    'arrow-right':   <><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></>,
    'arrow-left':    <><path d="M19 12H5"/><path d="m11 5-7 7 7 7"/></>,
    'plus':          <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    'minus':         <path d="M5 12h14"/>,
    'close':         <><path d="m18 6-12 12"/><path d="m6 6 12 12"/></>,
    'check':         <path d="M5 12.5 10 17.5 19 7"/>,
    'star':          <polygon points="12,2.5 14.9,9.2 22,9.7 16.5,14.5 18.3,21.5 12,17.7 5.7,21.5 7.5,14.5 2,9.7 9.1,9.2"/>,
    'star-fill':     <polygon points="12,2.5 14.9,9.2 22,9.7 16.5,14.5 18.3,21.5 12,17.7 5.7,21.5 7.5,14.5 2,9.7 9.1,9.2" fill={color}/>,
    'map-pin':       <><path d="M20 10c0 6-8 13-8 13S4 16 4 10a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    'calendar':      <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
    'users':         <><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20a6 6 0 0 1 12 0M14 20a5 5 0 0 1 7 0"/></>,
    'home':          <><path d="m3 11 9-7 9 7"/><path d="M5 10v10h14V10"/></>,
    'bed':           <><path d="M3 19V8M21 19v-5a3 3 0 0 0-3-3H8"/><path d="M3 14h18"/><circle cx="7" cy="11" r="2"/></>,
    'wifi':          <><path d="M2 9a14 14 0 0 1 20 0"/><path d="M5 13a10 10 0 0 1 14 0"/><path d="M8 17a6 6 0 0 1 8 0"/><circle cx="12" cy="20" r="1" fill={color}/></>,
    'coffee':        <><path d="M5 6h12v8a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4Z"/><path d="M17 9h2a2 2 0 0 1 0 4h-2"/><path d="M8 2v2M12 2v2"/></>,
    'pool':          <><path d="M3 18s2 1 4 0 4-1 6 0 4 1 6 0 2-1 2-1"/><path d="M3 14s2 1 4 0 4-1 6 0 4 1 6 0 2-1 2-1"/><path d="M9 4l2 2-2 2"/><path d="M15 4l2 2-2 2"/></>,
    'car':           <><path d="M5 17h14M6 17l-2-5 2-5h12l2 5-2 5"/><circle cx="8" cy="17" r="2"/><circle cx="16" cy="17" r="2"/></>,
    'spa':           <><path d="M12 22V12M12 12c-3-3-6-2-7 1 2 1 5 0 7-1ZM12 12c3-3 6-2 7 1-2 1-5 0-7-1ZM12 12c0-4 2-7 5-8-1 4-3 7-5 8ZM12 12c0-4-2-7-5-8 1 4 3 7 5 8Z"/></>,
    'utensils':      <><path d="M5 3v8a2 2 0 0 0 4 0V3M7 11v10"/><path d="M17 3c-1 0-3 1-3 5s2 5 3 5v8"/></>,
    'share':         <><circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="m9 11 6-3M9 13l6 3"/></>,
    'wallet':        <><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M3 10h18"/><circle cx="17" cy="15" r="1.5" fill={color}/></>,
    'globe':         <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    'settings':      <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h0a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8h0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    'log-out':       <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></>,
    'shield':        <path d="M12 3 4 6v6c0 5 3 8 8 9 5-1 8-4 8-9V6Z"/>,
    'shield-check':  <><path d="M12 3 4 6v6c0 5 3 8 8 9 5-1 8-4 8-9V6Z"/><path d="m9 12 2.5 2.5L16 10" stroke="#fff" strokeWidth="2"/></>,
    'lock':          <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    'eye':           <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></>,
    'eye-off':       <><path d="M2 2l20 20"/><path d="M6.7 6.7C4 8.8 2 12 2 12s4 7 10 7c2 0 3.7-.7 5.2-1.7M9.5 4.4A11 11 0 0 1 12 4c6 0 10 7 10 7s-1.3 2.3-3.5 4.2"/><path d="M9.5 12a2.5 2.5 0 0 1 3-3"/></>,
    'mail':          <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
    'phone':         <path d="M5 4h4l2 5-3 2c1 3 3 5 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/>,
    'camera':        <><path d="M4 8h3l2-3h6l2 3h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2Z"/><circle cx="12" cy="13" r="3.5"/></>,
    'image':         <><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 16-5-5-9 9"/></>,
    'send':          <path d="m22 2-7 20-4-9-9-4Z"/>,
    'message':       <path d="M3 11a8 8 0 0 1 16 0v9l-3-2H11a8 8 0 0 1-8-8z"/>,
    'menu':          <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    'more':          <><circle cx="6" cy="12" r="1.6" fill={color}/><circle cx="12" cy="12" r="1.6" fill={color}/><circle cx="18" cy="12" r="1.6" fill={color}/></>,
    'filter':        <><path d="M4 6h16M7 12h10M10 18h4"/></>,
    'sort':          <><path d="M3 6h13M3 12h9M3 18h5M17 8v12M21 16l-4 4-4-4"/></>,
    'tag':           <><path d="M3 12V4h8l10 10-8 8L3 12Z"/><circle cx="8" cy="8" r="1.5" fill={color}/></>,
    'check-circle':  <><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></>,
    'x-circle':      <><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></>,
    'info-circle':   <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01" strokeLinecap="round"/></>,
    'alert':         <><path d="M12 3 2 21h20Z"/><path d="M12 10v5M12 18h.01"/></>,
    'clock':         <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    'fire':          <path d="M12 22a7 7 0 0 0 7-7c0-3-2-5-3-7-1 2-2 3-3 3 0-3-2-6-5-9 0 5-3 6-3 11a7 7 0 0 0 7 9Z"/>,
    'sparkles':      <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></>,
    'gift':          <><rect x="3" y="9" width="18" height="12" rx="1"/><path d="M3 13h18M12 9v12"/><path d="M12 9c-2-3-5-3-5-1s3 1 5 1Zm0 0c2-3 5-3 5-1s-3 1-5 1Z"/></>,
    'percent':       <><path d="m6 18 12-12"/><circle cx="7" cy="7" r="2"/><circle cx="17" cy="17" r="2"/></>,
    'trash':         <><path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14"/></>,
    'edit':          <><path d="M11 5H4v15h15v-7"/><path d="m17 3 4 4-9 9-5 1 1-5Z"/></>,
    'download':      <><path d="M12 4v12M7 11l5 5 5-5M5 20h14"/></>,
    'qr':            <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3h-3zM20 14v3M14 20h3v1M20 20h1"/></>,
    'apple-wallet':  <><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M3 11h18"/><circle cx="17" cy="15" r="1.2" fill={color}/></>,
    'face-id':       <><path d="M5 8V5h3M19 8V5h-3M5 16v3h3M19 16v3h-3"/><path d="M9 10v2M15 10v2M9 16c1 1 5 1 6 0M12 10v4h-1"/></>,
    'fingerprint':   <><path d="M5 12a7 7 0 0 1 14 0v3M5 12v2a3 3 0 0 0 3 3M9 12a3 3 0 0 1 6 0v3a4 4 0 0 1-2 3.5M12 12v3M16 12v3a8 8 0 0 1-2 5"/></>,
    'language':      <><path d="M3 5h12M9 3v2M5 8c1 4 6 4 8 0M14 19l4-9 4 9M16 16h4"/></>,
    'help':          <><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.5l-1 1v1M12 17h.01"/></>,
    'sun':           <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></>,
    'moon':          <path d="M21 14a9 9 0 0 1-12-12 9 9 0 1 0 12 12Z"/>,
    'building':      <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3"/></>,
    'palm':          <><path d="M12 22V12M12 12c-2-4-6-5-9-3 2 3 6 4 9 3ZM12 12c2-4 6-5 9-3-2 3-6 4-9 3ZM12 12c-1-4-3-6-7-7 1 4 3 6 7 7ZM12 12c1-4 3-6 7-7-1 4-3 6-7 7Z"/></>,
    'mountain':      <><path d="M3 20 10 8l4 6 3-4 4 10Z"/><circle cx="17" cy="6" r="1.5" fill={color}/></>,
    'anchor':        <><circle cx="12" cy="6" r="2"/><path d="M12 8v14M5 14l-2 4a9 9 0 0 0 18 0l-2-4M8 14h8"/></>,
    'snowflake':     <><path d="M12 2v20M2 12h20M5 5l14 14M5 19 19 5"/></>,
    'compass-fill':  <><circle cx="12" cy="12" r="9" fill={color}/></>,
    'arrow-up-right':<><path d="M7 17 17 7M9 7h8v8"/></>,
    'play':          <polygon points="6,4 20,12 6,20"/>,
    'paperclip':     <path d="M21 12 13 20a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-8 8a2 2 0 0 1-3-3l7-7"/>,
    'list':          <><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1" fill={color}/><circle cx="4" cy="12" r="1" fill={color}/><circle cx="4" cy="18" r="1" fill={color}/></>,
    'refresh':       <><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></>,
    'map':           <><path d="m3 6 6-2 6 2 6-2v14l-6 2-6-2-6 2Z"/><path d="M9 4v16M15 6v16"/></>,
  };
  const p = paths[name] || paths['help'];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'block', flexShrink: 0, ...style }}>{p}</svg>
  );
};

// ─── Buttons ───────────────────────────────────────────────────
const Btn = ({ variant = 'primary', size = 'md', icon, iconRight, block, children, onClick, style = {}, type = 'button' }) => (
  <button
    type={type}
    onClick={onClick}
    className={`btn btn-${variant} btn-${size}${block ? ' btn-block' : ''}`}
    style={style}
  >
    {icon && <Icon name={icon} size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />}
    {children}
    {iconRight && <Icon name={iconRight} size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />}
  </button>
);

// ─── Inputs ────────────────────────────────────────────────────
const Input = React.forwardRef(({ icon, ...props }, ref) => {
  if (icon) {
    return (
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-low)' }}>
          <Icon name={icon} size={18}/>
        </div>
        <input ref={ref} className="input" style={{ paddingLeft: 42 }} {...props}/>
      </div>
    );
  }
  return <input ref={ref} className="input" {...props}/>;
});

const Field = ({ label, hint, error, children, optional }) => (
  <label style={{ display: 'block' }}>
    {label && <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
      <span>{label}</span>
      {optional && <span style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 500 }}>opsiyonel</span>}
    </div>}
    {children}
    {hint && !error && <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 6 }}>{hint}</div>}
    {error && <div style={{ fontSize: 12, color: 'var(--danger-deep)', marginTop: 6 }}>{error}</div>}
  </label>
);

// ─── Pill ──────────────────────────────────────────────────────
const Pill = ({ tone = 'default', children, icon, size = 'md', style = {} }) => {
  const cls = tone === 'default' ? '' : `pill-${tone}`;
  const fontSize = size === 'sm' ? 10 : 11;
  return (
    <span className={`pill ${cls}`} style={{ fontSize, ...style }}>
      {icon && <Icon name={icon} size={11}/>}
      {children}
    </span>
  );
};

// ─── Stars ─────────────────────────────────────────────────────
const Stars = ({ value = 5, size = 13, showValue = false, count, color = 'var(--brand-500)' }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
    <div style={{ display: 'inline-flex', gap: 1 }}>
      {[1,2,3,4,5].map(i => (
        <Icon key={i} name={i <= Math.round(value) ? 'star-fill' : 'star'} size={size} color={color} strokeWidth={1.5}/>
      ))}
    </div>
    {showValue && <span style={{ fontSize: size, fontWeight: 700, color: 'var(--ink)' }} className="tnum">{value.toFixed(1)}</span>}
    {count != null && <span style={{ fontSize: size - 1, color: 'var(--ink-low)' }} className="tnum">({count})</span>}
  </div>
);

// ─── Avatar ────────────────────────────────────────────────────
const Avatar = ({ name = 'EK', src, size = 40, ring }) => {
  const initials = (name || '').split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: src ? `url(${src}) center/cover` : 'var(--brand-100)',
      color: 'var(--brand-700)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.36, fontWeight: 700, flexShrink: 0,
      border: ring ? `2px solid ${ring}` : 'none',
    }}>{!src && initials}</div>
  );
};

// ─── Status pill (BookingStatus → token) ───────────────────────
const STATUS_MAP = {
  Pending:         { tone: 'default', label: 'Beklemede' },
  AwaitingPayment: { tone: 'warn',    label: 'Ödeme Bekliyor' },
  Confirmed:       { tone: 'success', label: 'Onaylandı' },
  Completed:       { tone: 'info',    label: 'Tamamlandı' },
  Cancelled:       { tone: 'danger',  label: 'İptal Edildi' },
  Refunded:        { tone: 'default', label: 'İade Edildi' },
  CheckedIn:       { tone: 'success', label: 'Check-in' },
  CheckedOut:      { tone: 'dark',    label: 'Check-out' },
  // Gift card / loyalty
  Active:          { tone: 'success', label: 'Aktif' },
  Redeemed:        { tone: 'dark',    label: 'Kullanıldı' },
  Expired:         { tone: 'default', label: 'Süresi doldu' },
  Cancelled:       { tone: 'danger',  label: 'İptal' },
  PendingPayment:  { tone: 'warn',    label: 'Ödeme Bekliyor' },
};
const StatusPill = ({ status, size = 'md' }) => {
  const m = STATUS_MAP[status] || { tone: 'default', label: status };
  return <Pill tone={m.tone} size={size}>{m.label}</Pill>;
};

// ─── Bottom Tab Bar (5 tabs) ───────────────────────────────────
const BottomTabBar = ({ active = 'discover', onTab, dark = false, labels = {} }) => {
  const def = {
    discover: 'Keşfet', search: 'Ara', trips: 'Rezervasyonlarım',
    favorites: 'Favoriler', account: 'Hesap',
  };
  const L = { ...def, ...labels };
  const tabs = [
    ['discover',  L.discover,  'compass'],
    ['search',    L.search,    'search'],
    ['trips',     L.trips,     'ticket'],
    ['favorites', L.favorites, 'heart'],
    ['account',   L.account,   'user-circle'],
  ];
  return (
    <div style={{
      display: 'flex',
      background: 'var(--surface-raised)',
      borderTop: '1px solid var(--line)',
      paddingBottom: 'env(safe-area-inset-bottom)',
    }}>
      {tabs.map(([key, label, icon]) => {
        const isActive = active === key;
        return (
          <button key={key} onClick={() => onTab && onTab(key)} style={{
            flex: 1, padding: '8px 0 6px', background: 'none', border: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, cursor: 'pointer',
            color: isActive ? 'var(--brand-500)' : 'var(--ink-dim)',
            fontFamily: 'inherit',
          }}>
            <Icon name={icon} size={22} strokeWidth={isActive ? 2 : 1.7}/>
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.01 }}>{label}</span>
          </button>
        );
      })}
    </div>
  );
};

// ─── Editorial photo (placeholder via gradient + Unsplash) ─────
const PHOTO = {
  bodrum:    'https://images.unsplash.com/photo-1604580864964-0462f5d5b1a8?w=900&q=80',
  capp:      'https://images.unsplash.com/photo-1570168007204-dfb528c6958f?w=900&q=80',
  istanbul:  'https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?w=900&q=80',
  antalya:   'https://images.unsplash.com/photo-1605537964294-e7a73d0b65d4?w=900&q=80',
  fethiye:   'https://images.unsplash.com/photo-1601581987809-a874a81309c9?w=900&q=80',
  boat:      'https://images.unsplash.com/photo-1542644071-bef9f7d8e91a?w=900&q=80',
  balloon:   'https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?w=900&q=80',
  paragliding:'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=900&q=80',
  museum:    'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?w=900&q=80',
  hamam:     'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=900&q=80',
  food:      'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=900&q=80',
  hotel1:    'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=900&q=80',
  hotel2:    'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=900&q=80',
  hotel3:    'https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=900&q=80',
  hotel4:    'https://images.unsplash.com/photo-1455587734955-081b22074882?w=900&q=80',
  villa:     'https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=900&q=80',
  cave:      'https://images.unsplash.com/photo-1600240644455-3edc55c375fe?w=900&q=80',
  beach:     'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=900&q=80',
  sunset:    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&q=80',
};

// ─── Listing card (Tour) ───────────────────────────────────────
const TourCard = ({ title, dest, duration, rating, count, price, img, category, saved, width = 280 }) => (
  <div className="card" style={{ width, minWidth: width, overflow: 'hidden', cursor: 'pointer' }}>
    <div style={{ position: 'relative', width: '100%', aspectRatio: '3/2', background: `url(${img}) center/cover`, backgroundColor: 'var(--surface-muted)' }}>
      {category && <div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,0.92)', padding: '5px 10px', borderRadius: 'var(--r-pill)', fontSize: 11, fontWeight: 600, color: 'var(--ink)', backdropFilter: 'blur(8px)' }}>{category}</div>}
      <button style={{ position: 'absolute', top: 10, right: 10, width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(8px)' }}>
        <Icon name={saved ? 'heart-fill' : 'heart'} size={17} color={saved ? 'var(--brand-500)' : 'var(--ink)'}/>
      </button>
    </div>
    <div style={{ padding: 14 }}>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden', minHeight: 39 }}>{title}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="map-pin" size={11} color="var(--ink-low)"/> {dest} <span>·</span> {duration}
      </div>
      <div style={{ marginTop: 8 }}><Stars value={rating} size={12} showValue count={count}/></div>
      <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span className="tnum" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{price.toLocaleString('tr-TR')} ₺</span>
        <span style={{ fontSize: 11, color: 'var(--ink-dim)' }}>/ kişi</span>
      </div>
    </div>
  </div>
);

// ─── Hotel card ────────────────────────────────────────────────
const HotelCard = ({ title, dest, stars, score, scoreLabel, count, price, img, mealPlan, refundable, saved, width = 280 }) => (
  <div className="card" style={{ width, minWidth: width, overflow: 'hidden', cursor: 'pointer' }}>
    <div style={{ position: 'relative', width: '100%', aspectRatio: '3/2', background: `url(${img}) center/cover`, backgroundColor: 'var(--surface-muted)' }}>
      <div style={{ position: 'absolute', top: 12, left: 12, background: 'var(--dark-800)', color: 'var(--on-dark)', padding: '5px 10px', borderRadius: 'var(--r-sm)', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
        <span className="tnum">{score}</span>
        <span style={{ fontSize: 10, opacity: 0.85 }}>{scoreLabel}</span>
      </div>
      <button style={{ position: 'absolute', top: 10, right: 10, width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={saved ? 'heart-fill' : 'heart'} size={17} color={saved ? 'var(--brand-500)' : 'var(--ink)'}/>
      </button>
    </div>
    <div style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
        {Array.from({length: stars}).map((_, i) => <Icon key={i} name="star-fill" size={10} color="var(--warn-deep)"/>)}
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden', minHeight: 39 }}>{title}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="map-pin" size={11} color="var(--ink-low)"/> {dest}
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
        {mealPlan && <Pill tone="default" size="sm">{mealPlan}</Pill>}
        {refundable && <Pill tone="success" size="sm">Ücretsiz iptal</Pill>}
      </div>
      <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span className="tnum" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{price.toLocaleString('tr-TR')} ₺</span>
        <span style={{ fontSize: 11, color: 'var(--ink-dim)' }}>/ gece · vergi dahil</span>
      </div>
    </div>
  </div>
);

// ─── Bottom sheet shell (composable) ───────────────────────────
const BottomSheet = ({ title, children, action, height = 'auto' }) => (
  <div style={{
    background: 'var(--surface-raised)',
    borderTopLeftRadius: 'var(--r-xl)',
    borderTopRightRadius: 'var(--r-xl)',
    padding: '12px 0 24px',
    height,
    display: 'flex', flexDirection: 'column',
  }}>
    <div style={{ width: 36, height: 4, borderRadius: 2, background: 'var(--ink-soft)', margin: '0 auto 14px' }}/>
    {title && <div style={{ padding: '0 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <h3 className="t-h3" style={{ margin: 0, color: 'var(--ink)' }}>{title}</h3>
    </div>}
    <div style={{ padding: '0 20px', flex: 1, overflowY: 'auto' }}>{children}</div>
    {action && <div style={{ padding: '14px 20px 0', borderTop: '1px solid var(--line-soft)' }}>{action}</div>}
  </div>
);

// ─── Skeleton helpers ──────────────────────────────────────────
const Skel = ({ w, h, r = 6, style = {} }) => (
  <div className="skel" style={{ width: w, height: h, borderRadius: r, ...style }}/>
);

// ─── Stepper (counter) ────────────────────────────────────────
const Stepper = ({ value, onChange, min = 0, max = 99 }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
    <button onClick={() => onChange && onChange(Math.max(min, value - 1))}
      disabled={value <= min}
      style={{ width: 32, height: 32, borderRadius: '50%', border: '1.5px solid var(--line-strong)', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: value <= min ? 'var(--ink-soft)' : 'var(--ink)' }}>
      <Icon name="minus" size={14}/>
    </button>
    <span className="tnum" style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)', minWidth: 18, textAlign: 'center' }}>{value}</span>
    <button onClick={() => onChange && onChange(Math.min(max, value + 1))}
      disabled={value >= max}
      style={{ width: 32, height: 32, borderRadius: '50%', border: '1.5px solid var(--ink)', background: 'var(--ink)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-dark)' }}>
      <Icon name="plus" size={14}/>
    </button>
  </div>
);

// ─── Mobile screen wrapper (acts as the inside of a frame) ────
const MobileScreen = ({ children, dark = false, bg = 'var(--surface)', style = {} }) => (
  <div style={{
    width: '100%', height: '100%', overflow: 'hidden',
    background: bg, color: 'var(--ink)',
    display: 'flex', flexDirection: 'column',
    ...style,
  }} data-theme={dark ? 'dark' : undefined}>{children}</div>
);

// ─── Top bar (pushed-screen header — back chevron + title) ────
const PushBar = ({ title, onBack, right, blur = false }) => (
  <div style={{
    height: 56, padding: '0 8px', display: 'flex', alignItems: 'center', gap: 4,
    background: blur ? 'rgba(251, 247, 242, 0.85)' : 'var(--surface)',
    backdropFilter: blur ? 'blur(20px) saturate(180%)' : undefined,
    borderBottom: '1px solid var(--line-soft)',
    flexShrink: 0,
  }}>
    <button onClick={onBack} style={{ width: 40, height: 40, borderRadius: '50%', background: 'none', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' }}>
      <Icon name="chevron-left" size={24}/>
    </button>
    <div style={{ flex: 1, fontSize: 16, fontWeight: 600, color: 'var(--ink)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
    <div style={{ width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{right}</div>
  </div>
);

// ─── Large header (tabbed root screen) ────────────────────────
const RootHeader = ({ eyebrow, title, right }) => (
  <div style={{ padding: '8px 20px 14px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, flexShrink: 0 }}>
    <div style={{ flex: 1 }}>
      {eyebrow && <div className="t-eyebrow" style={{ color: 'var(--ink-low)', marginBottom: 6 }}>{eyebrow}</div>}
      <h1 className="t-h1" style={{ margin: 0, color: 'var(--ink-strong)' }}>{title}</h1>
    </div>
    {right && <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{right}</div>}
  </div>
);

// Expose globals
Object.assign(window, {
  Icon, Btn, Input, Field, Pill, Stars, Avatar, StatusPill, BottomTabBar,
  TourCard, HotelCard, BottomSheet, Skel, Stepper, MobileScreen, PushBar, RootHeader,
  PHOTO, STATUS_MAP,
});