/* global React, TileIcon */
const { useState } = React;

/* ============================================================
 * Custom app logos for Minimo store cards
 * ============================================================ */

const AppLogo = ({ name }) => {
  switch (name) {
    case 'ozon':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <text x="24" y="32" textAnchor="middle"
          fontFamily='"SF Pro Display", -apple-system, sans-serif'
          fontSize="20" fontWeight="800" fill="#0066FF" letterSpacing="-0.5">OZ</text>
        </svg>);

    case 'wildberries':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#481173" />
          <text x="24" y="32" textAnchor="middle"
          fontFamily='"SF Pro Display", -apple-system, sans-serif'
          fontSize="18" fontWeight="800" fill="#fff" letterSpacing="-0.5">WB</text>
        </svg>);

    case 'robokassa':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#6B4DB8" />
          <rect x="12" y="14" width="24" height="22" rx="5" fill="#fff" />
          <circle cx="19" cy="24" r="2.5" fill="#6B4DB8" />
          <circle cx="29" cy="24" r="2.5" fill="#6B4DB8" />
          <rect x="19" y="29" width="10" height="2" rx="1" fill="#6B4DB8" />
          <rect x="22" y="8" width="4" height="6" rx="1" fill="#fff" />
          <circle cx="24" cy="8" r="2" fill="#fff" />
        </svg>);

    case 'telegram':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <circle cx="24" cy="24" r="22" fill="#3FA9E5" />
          <path d="M34 16 16 24l5 2 2 6 4-4 7 4z" fill="#fff" />
        </svg>);

    case 'instagram':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <defs>
            <linearGradient id="igGrad" x1="0" y1="1" x2="1" y2="0">
              <stop offset="0%" stopColor="#FCAF45" />
              <stop offset="50%" stopColor="#E1306C" />
              <stop offset="100%" stopColor="#833AB4" />
            </linearGradient>
          </defs>
          <rect width="48" height="48" rx="14" fill="url(#igGrad)" />
          <rect x="13" y="13" width="22" height="22" rx="6" fill="none" stroke="#fff" strokeWidth="2.5" />
          <circle cx="24" cy="24" r="5" fill="none" stroke="#fff" strokeWidth="2.5" />
          <circle cx="31" cy="17" r="1.6" fill="#fff" />
        </svg>);

    case 'whatsapp':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <circle cx="24" cy="24" r="22" fill="#25D366" />
          <path d="M14 34 16 28a10 10 0 1 1 4 4z" fill="#fff" />
          <path d="M19 22c0 4 3 7 7 7l2-1 2 2-2 2c-6 0-11-5-11-11l2-2 2 2z" fill="#25D366" />
        </svg>);

    case 'yukassa':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#FFCC00" />
          <text x="24" y="32" textAnchor="middle"
          fontFamily='"SF Pro Display", -apple-system, sans-serif'
          fontSize="20" fontWeight="800" fill="#1a1410" letterSpacing="-0.5">Ю</text>
        </svg>);

    case 'avito':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#00A046" />
          <circle cx="16" cy="18" r="6" fill="#FF8500" />
          <circle cx="30" cy="20" r="4" fill="#FFD800" />
          <circle cx="20" cy="30" r="5" fill="#965DBA" />
          <circle cx="32" cy="32" r="3" fill="#0AB0F0" />
        </svg>);

    case 'sbp':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#fff" stroke="#e0e0e0" strokeWidth="0.5" />
          <circle cx="24" cy="24" r="11" fill="none" stroke="#5A2D81" strokeWidth="2.5" />
          <text x="24" y="29" textAnchor="middle"
          fontFamily='"SF Pro Display", -apple-system, sans-serif'
          fontSize="13" fontWeight="800" fill="#5A2D81">СБП</text>
        </svg>);

    case 'yandex-maps':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#FC3F1D" />
          <path d="M24 10c5 0 9 4 9 9 0 7-9 19-9 19s-9-12-9-19c0-5 4-9 9-9z" fill="#fff" />
          <circle cx="24" cy="19" r="3.5" fill="#FC3F1D" />
        </svg>);

    case 'email':
      return (
        <svg viewBox="0 0 48 48" width="48" height="48">
          <rect width="48" height="48" rx="14" fill="#1a1410" />
          <rect x="12" y="16" width="24" height="16" rx="2.5" fill="#fff" />
          <path d="m12 18 12 8 12-8" stroke="#1a1410" strokeWidth="2" fill="none" strokeLinejoin="round" />
        </svg>);

    default:
      return null;
  }
};

/* ============================================================
 * Vertical presets — friendly labels, no tech keys
 * ============================================================ */

const VERTICALS = {
  candles: {
    title: 'Свечная «Огонёк»',
    pinned: [
    { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '7' },
    { label: 'Ассистент', color: 'ai', icon: 'ai' },
    { label: 'Аналитика', color: 'rose', icon: 'analytics' },
    { label: 'Старт', color: 'marigold', icon: 'onboarding' }],

    section: {
      title: 'Производство',
      tiles: [
      { label: 'Партии', color: 'marigold', icon: 'batches', badge: '3' },
      { label: 'Рецепты', color: 'lavender', icon: 'recipes' },
      { label: 'Сырьё', color: 'peach', icon: 'materials', badge: '2', alert: true },
      { label: 'Брак', color: 'coral', icon: 'defects' }]

    }
  },
  bakery: {
    title: 'Пекарня «Корица»',
    pinned: [
    { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '12' },
    { label: 'Ассистент', color: 'ai', icon: 'ai' },
    { label: 'Аналитика', color: 'rose', icon: 'analytics' },
    { label: 'Старт', color: 'mint', icon: 'onboarding' }],

    section: {
      title: 'Выпечка',
      tiles: [
      { label: 'Замесы', color: 'marigold', icon: 'batches', badge: '5' },
      { label: 'Рецепты', color: 'peach', icon: 'recipes' },
      { label: 'Продукты', color: 'olive', icon: 'materials', badge: '4' },
      { label: 'Списания', color: 'coral', icon: 'defects' }]

    }
  },
  flowers: {
    title: 'Цветы «Лето»',
    pinned: [
    { label: 'Букеты', color: 'rose', icon: 'orders', badge: '9' },
    { label: 'Ассистент', color: 'ai', icon: 'ai' },
    { label: 'Доставки', color: 'sky', icon: 'shipping' },
    { label: 'Клиенты', color: 'lavender', icon: 'customers' }],

    section: {
      title: 'Сегодня',
      tiles: [
      { label: 'Заказы', color: 'marigold', icon: 'orders', badge: '9' },
      { label: 'Цветы', color: 'mint', icon: 'inventory' },
      { label: 'Маршрут', color: 'periwinkle', icon: 'shipping' },
      { label: 'Платежи', color: 'olive', icon: 'payments' }]

    }
  },
  resale: {
    title: 'Магазин «Лофт»',
    pinned: [
    { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '12' },
    { label: 'Ассистент', color: 'ai', icon: 'ai' },
    { label: 'Аналитика', color: 'rose', icon: 'analytics' },
    { label: 'Старт', color: 'marigold', icon: 'onboarding' }],

    section: {
      title: 'Склад и закупки',
      tiles: [
      { label: 'Закупки', color: 'marigold', icon: 'materials', badge: '3' },
      { label: 'Поставщики', color: 'lavender', icon: 'team' },
      { label: 'Склад', color: 'mint', icon: 'inventory' },
      { label: 'Возвраты', color: 'coral', icon: 'defects' }]

    }
  },
  beauty: {
    title: 'Студия «Лотос»',
    pinned: [
    { label: 'Расписание', color: 'periwinkle', icon: 'tasks', badge: '6' },
    { label: 'Ассистент', color: 'ai', icon: 'ai' },
    { label: 'Клиенты', color: 'rose', icon: 'customers' },
    { label: 'Старт', color: 'mint', icon: 'onboarding' }],

    section: {
      title: 'Сегодня',
      tiles: [
      { label: 'Записи', color: 'marigold', icon: 'orders', badge: '6' },
      { label: 'Услуги', color: 'lavender', icon: 'recipes' },
      { label: 'Расходники', color: 'peach', icon: 'materials' },
      { label: 'Выручка', color: 'mint', icon: 'revenue' }]

    }
  }
};

VERTICALS['clothing-production'] = {
  title: 'Ателье «Вера»',
  pinned: [
  { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '4' },
  { label: 'Ассистент', color: 'ai', icon: 'ai' },
  { label: 'Аналитика', color: 'rose', icon: 'analytics' },
  { label: 'Старт', color: 'mint', icon: 'onboarding' }],

  section: {
    title: 'Производство',
    tiles: [
    { label: 'Коллекции', color: 'marigold', icon: 'batches', badge: '2' },
    { label: 'Лекала', color: 'lavender', icon: 'recipes' },
    { label: 'Ткани', color: 'peach', icon: 'materials', badge: '5' },
    { label: 'Возвраты', color: 'coral', icon: 'defects' }]

  }
};
VERTICALS['clothing-resale'] = VERTICALS.resale;

/* ============================================================
 * Mini phone preview — small mock phone showing tiles
 * ============================================================ */

const MiniPhone = ({ vertical, height = 460, scale = 1 }) => {
  const data = VERTICALS[vertical] || VERTICALS.candles;

  return (
    <div style={{
      width: 280 * scale,
      height: height * scale,
      borderRadius: 36 * scale,
      background: '#1a1410',
      padding: 10 * scale,
      boxShadow: '0 30px 70px rgba(20, 14, 8, 0.22), 0 0 0 1px rgba(0,0,0,0.06)'
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 28 * scale, overflow: 'hidden',
        background: '#fbfbfb', display: 'flex', flexDirection: 'column',
        color: 'var(--ink-1)'
      }}>
        {/* status bar */}
        <div style={{
          padding: '14px 18px 4px', display: 'flex', justifyContent: 'space-between',
          fontSize: 12 * scale, fontWeight: 700, letterSpacing: '-0.01em'
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <svg width="14" height="9" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1" /><rect x="4.5" y="4" width="3" height="7" rx="1" /><rect x="9" y="2" width="3" height="9" rx="1" /><rect x="13.5" y="0" width="3" height="11" rx="1" /></svg>
            <svg width="20" height="10" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="2.5" stroke="currentColor" /><rect x="2.5" y="2.5" width="13" height="7" rx="1" fill="currentColor" /></svg>
          </span>
        </div>
        {/* content */}
        <div style={{ padding: '10px 16px 16px', flex: 1, overflow: 'hidden' }}>
          <div style={{ fontSize: 9 * scale, color: 'var(--ink-2)', fontWeight: 500, marginBottom: 2 }}>{data.title}</div>
          <div style={{ fontSize: 22 * scale, fontWeight: 800, letterSpacing: '-0.03em', marginBottom: 14 }}>
            <span>Сегодня</span>
            <span style={{ color: 'var(--ink-3)' }}> Неделя</span>
          </div>

          {/* Pinned section */}
          <div style={{ fontSize: 14 * scale, fontWeight: 800, letterSpacing: '-0.025em', marginBottom: 10 }}>Закреплённое</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
            {data.pinned.map((t, i) =>
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div className={`tile ${t.color}`} style={{ width: '100%', cursor: 'default' }}>
                  <div className="tile__icon" style={{ borderRadius: 14 }}>
                    <TileIcon name={t.icon} size={32 * scale} />
                    {t.badge &&
                  <span className={`tile__badge ${t.alert ? 'alert' : ''}`} style={{ fontSize: 9, minWidth: 16, height: 16, top: 4, right: 4 }}>{t.badge}</span>
                  }
                  </div>
                </div>
                <div style={{ fontSize: 9 * scale, fontWeight: 600, marginTop: 4, textAlign: 'center', lineHeight: 1.2 }}>{t.label}</div>
              </div>
            )}
          </div>

          {/* Section */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <div style={{ fontSize: 14 * scale, fontWeight: 800, letterSpacing: '-0.025em' }}>{data.section.title}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {data.section.tiles.map((t, i) =>
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div className={`tile ${t.color}`} style={{ width: '100%', cursor: 'default' }}>
                  <div className="tile__icon" style={{ borderRadius: 14 }}>
                    <TileIcon name={t.icon} size={32 * scale} />
                    {t.badge &&
                  <span className={`tile__badge ${t.alert ? 'alert' : ''}`} style={{ fontSize: 9, minWidth: 16, height: 16, top: 4, right: 4 }}>{t.badge}</span>
                  }
                  </div>
                </div>
                <div style={{ fontSize: 9 * scale, fontWeight: 600, marginTop: 4, textAlign: 'center', lineHeight: 1.2 }}>{t.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

};

/* ============================================================
 * Chat phone — phone showing AI conversation
 * Used in the AI/Voice section
 * ============================================================ */

const ChatPhone = ({ height = 580 }) => {
  return (
    <div style={{
      width: 300,
      height,
      borderRadius: 40,
      background: '#1a1410',
      padding: 10,
      boxShadow: '0 30px 70px rgba(20, 14, 8, 0.30), 0 0 0 1px rgba(0,0,0,0.06)'
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 32, overflow: 'hidden',
        background: '#fbfbfb', display: 'flex', flexDirection: 'column',
        color: 'var(--ink-1)',
        position: 'relative'
      }}>
        {/* status bar */}
        <div style={{
          padding: '14px 22px 4px', display: 'flex', justifyContent: 'space-between',
          fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', flexShrink: 0
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <svg width="14" height="9" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1" /><rect x="4.5" y="4" width="3" height="7" rx="1" /><rect x="9" y="2" width="3" height="9" rx="1" /><rect x="13.5" y="0" width="3" height="11" rx="1" /></svg>
            <svg width="20" height="10" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="2.5" stroke="currentColor" /><rect x="2.5" y="2.5" width="13" height="7" rx="1" fill="currentColor" /></svg>
          </span>
        </div>
        {/* header */}
        <div style={{
          padding: '6px 18px 14px',
          borderBottom: '0.5px solid var(--hairline)',
          display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: 'radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%), linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3))',
            boxShadow: '0 4px 12px rgba(255, 130, 90, 0.32)',
            display: 'grid', placeItems: 'center', color: 'white'
          }}>
            <TileIcon name="ai" size={20} />
          </div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 800, letterSpacing: '-0.02em' }}>Ассистент</div>
            <div style={{ fontSize: 11, color: 'var(--t-mint)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--t-mint)' }} />
              онлайн
            </div>
          </div>
        </div>

        {/* messages */}
        <div style={{
          flex: 1, padding: '14px 14px 80px', display: 'flex', flexDirection: 'column',
          gap: 8, overflow: 'hidden'
        }}>
          {/* user voice */}
          <div className="lp-chat__row lp-chat__row--user">
            <div className="lp-chat__voice">
              <div className="lp-chat__voice-wave">
                {[3, 8, 14, 20, 12, 6, 10, 16, 22, 18, 11, 5, 9, 14, 8, 3].map((h, i) =>
                <span key={i} style={{ height: h }} />
                )}
              </div>
              <span className="lp-chat__voice-time">0:08</span>
            </div>
            <div className="lp-chat__transcript">
              «Продала Маше синее платье XL за 4500, оплата&nbsp;на карту»
            </div>
          </div>

          {/* AI plan */}
          <div className="lp-chat__row lp-chat__row--ai">
            <div className="lp-chat__bubble">
              <div className="lp-chat__bubble-hint">Сейчас сделаю:</div>
              <div className="lp-chat__plan-item">
                <span className="dot mint">+</span>
                Клиент <strong>Мария</strong>
              </div>
              <div className="lp-chat__plan-item">
                <span className="dot marigold">→</span>
                Заказ <strong>«Платье синее, XL»</strong> 4&nbsp;500&nbsp;₽
              </div>
              <div className="lp-chat__plan-item">
                <span className="dot periwinkle">−</span>
                Со склада: 1 шт
              </div>
              <div className="lp-chat__plan-confirm">
                <button className="lp-chat__plan-btn primary">Подтвердить</button>
                <button className="lp-chat__plan-btn">Изменить</button>
              </div>
            </div>
          </div>
        </div>

        {/* composer */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '10px 14px 18px',
          background: 'linear-gradient(to top, #fbfbfb 70%, rgba(251,251,251,0))',
          display: 'flex', gap: 8, alignItems: 'center'
        }}>
          <div style={{
            flex: 1, height: 40, borderRadius: 999,
            background: 'rgba(26,20,16,0.06)', display: 'flex', alignItems: 'center',
            padding: '0 16px', fontSize: 13, color: 'var(--ink-3)', fontWeight: 500
          }}>
            Спросить или сказать...
          </div>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: 'linear-gradient(135deg, var(--ai-1), var(--ai-2))',
            display: 'grid', placeItems: 'center', color: 'white',
            boxShadow: '0 6px 16px rgba(255, 130, 90, 0.4)'
          }}>
            <TileIcon name="mic" size={18} />
          </div>
        </div>
      </div>
    </div>);

};

/* ============================================================
 * TEAM ROLES — one business, different people, different views
 * ============================================================ */

const ROLES = [
  {
    id: 'owner',
    name: 'Анна',
    role: 'Владелица',
    accent: 'marigold',
    avatar: 'А',
    summary: 'Видит всё, держит руку на пульсе',
    pinned: [
      { label: 'Аналитика', color: 'rose', icon: 'analytics' },
      { label: 'Ассистент', color: 'ai', icon: 'ai' },
      { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '7' },
      { label: 'Команда', color: 'lavender', icon: 'team' },
    ],
    sectionTitle: 'Бизнес сегодня',
    sectionTiles: [
      { label: 'Выручка', color: 'mint', icon: 'revenue' },
      { label: 'Заказы', color: 'marigold', icon: 'orders', badge: '9' },
      { label: 'Партии', color: 'peach', icon: 'batches', badge: '3' },
      { label: 'Клиенты', color: 'rose', icon: 'customers' },
    ],
  },
  {
    id: 'production',
    name: 'Иван',
    role: 'Мастер',
    accent: 'periwinkle',
    avatar: 'И',
    summary: 'Партии, рецепты, сырьё — больше ничего',
    pinned: [
      { label: 'Задачи', color: 'periwinkle', icon: 'tasks', badge: '4' },
      { label: 'Ассистент', color: 'ai', icon: 'ai' },
      { label: 'Партии', color: 'marigold', icon: 'batches', badge: '3' },
      { label: 'Сырьё', color: 'peach', icon: 'materials', badge: '2', alert: true },
    ],
    sectionTitle: 'В работе',
    sectionTiles: [
      { label: 'Партии', color: 'marigold', icon: 'batches', badge: '3' },
      { label: 'Рецепты', color: 'lavender', icon: 'recipes' },
      { label: 'Сырьё', color: 'peach', icon: 'materials' },
      { label: 'Брак', color: 'coral', icon: 'defects' },
    ],
  },
  {
    id: 'sales',
    name: 'Маша',
    role: 'Менеджер',
    accent: 'rose',
    avatar: 'М',
    summary: 'Заказы, чаты с клиентами, отгрузки',
    pinned: [
      { label: 'Заказы', color: 'marigold', icon: 'orders', badge: '9' },
      { label: 'Ассистент', color: 'ai', icon: 'ai' },
      { label: 'Клиенты', color: 'rose', icon: 'customers' },
      { label: 'Чаты', color: 'sky', icon: 'telegram', badge: '3' },
    ],
    sectionTitle: 'Воронка',
    sectionTiles: [
      { label: 'Новые', color: 'marigold', icon: 'orders', badge: '5' },
      { label: 'Отгрузка', color: 'periwinkle', icon: 'shipping' },
      { label: 'Возвраты', color: 'coral', icon: 'defects' },
      { label: 'История', color: 'lavender', icon: 'customers' },
    ],
  },
  {
    id: 'accountant',
    name: 'Ольга',
    role: 'Бухгалтер',
    accent: 'mint',
    avatar: 'О',
    summary: 'Деньги, чеки, отчёты — без лишнего',
    pinned: [
      { label: 'Выручка', color: 'mint', icon: 'revenue' },
      { label: 'Ассистент', color: 'ai', icon: 'ai' },
      { label: 'Платежи', color: 'olive', icon: 'payments', badge: '12' },
      { label: 'Аналитика', color: 'rose', icon: 'analytics' },
    ],
    sectionTitle: 'Финансы',
    sectionTiles: [
      { label: 'Поступления', color: 'mint', icon: 'payments' },
      { label: 'Чеки ФНС', color: 'sky', icon: 'robokassa' },
      { label: 'Расходы', color: 'coral', icon: 'materials' },
      { label: 'Экспорт', color: 'lavender', icon: 'export' },
    ],
  },
];

const TeamPhone = ({ role, height = 440 }) => {
  return (
    <div style={{
      width: 230,
      height,
      borderRadius: 32,
      background: '#1a1410',
      padding: 8,
      boxShadow: '0 24px 50px rgba(20, 14, 8, 0.22), 0 0 0 1px rgba(0,0,0,0.06)'
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 26, overflow: 'hidden',
        background: '#fbfbfb', display: 'flex', flexDirection: 'column',
        color: 'var(--ink-1)'
      }}>
        {/* status bar */}
        <div style={{
          padding: '12px 16px 4px', display: 'flex', justifyContent: 'space-between',
          fontSize: 10, fontWeight: 700, letterSpacing: '-0.01em'
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
            <svg width="11" height="7" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1" /><rect x="4.5" y="4" width="3" height="7" rx="1" /><rect x="9" y="2" width="3" height="9" rx="1" /><rect x="13.5" y="0" width="3" height="11" rx="1" /></svg>
            <svg width="16" height="8" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="2.5" stroke="currentColor" /><rect x="2.5" y="2.5" width="13" height="7" rx="1" fill="currentColor" /></svg>
          </span>
        </div>
        <div style={{ padding: '8px 14px 14px', flex: 1, overflow: 'hidden' }}>
          {/* role chip */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px 4px 4px',
            background: 'rgba(26,20,16,0.05)', borderRadius: 999,
            fontSize: 10, fontWeight: 700, marginBottom: 8,
          }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%',
              background: `var(--t-${role.accent})`,
              color: 'white', display: 'grid', placeItems: 'center',
              fontSize: 10, fontWeight: 800,
            }}>{role.avatar}</span>
            <span>{role.name} · {role.role}</span>
          </div>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.03em', marginBottom: 12 }}>
            Сегодня
          </div>

          {/* Pinned */}
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.06, textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Под рукой</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginBottom: 14 }}>
            {role.pinned.map((t, i) =>
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 0 }}>
                <div className={`tile ${t.color}`} style={{ width: '100%', cursor: 'default' }}>
                  <div className="tile__icon" style={{ borderRadius: 11 }}>
                    <TileIcon name={t.icon} size={22} />
                    {t.badge &&
                      <span className={`tile__badge ${t.alert ? 'alert' : ''}`} style={{ fontSize: 8, minWidth: 13, height: 13, top: 3, right: 3, padding: '0 3px' }}>{t.badge}</span>
                    }
                  </div>
                </div>
                <div style={{ fontSize: 8, fontWeight: 600, marginTop: 3, textAlign: 'center', lineHeight: 1.2, color: 'var(--ink-2)' }}>{t.label}</div>
              </div>
            )}
          </div>

          {/* Section */}
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.06, textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>{role.sectionTitle}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
            {role.sectionTiles.map((t, i) =>
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 0 }}>
                <div className={`tile ${t.color}`} style={{ width: '100%', cursor: 'default' }}>
                  <div className="tile__icon" style={{ borderRadius: 11 }}>
                    <TileIcon name={t.icon} size={22} />
                    {t.badge &&
                      <span className={`tile__badge ${t.alert ? 'alert' : ''}`} style={{ fontSize: 8, minWidth: 13, height: 13, top: 3, right: 3, padding: '0 3px' }}>{t.badge}</span>
                    }
                  </div>
                </div>
                <div style={{ fontSize: 8, fontWeight: 600, marginTop: 3, textAlign: 'center', lineHeight: 1.2, color: 'var(--ink-2)' }}>{t.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============================================================
 * PALETTES — 3 light + 3 dark themes, each with its own dashboard
 * ============================================================ */

const PALETTES = [
  {
    id: 'paper',
    name: 'Бумага',
    desc: 'Тёплая, по умолчанию',
    theme: 'light',
    bg: '#F5F1EB',
    cardInk1: '#1a1410',
    cardInk2: '#6e645c',
    cardInk3: '#a39990',
    tiles: ['#E89A2E', '#E47373', '#B19CD9', '#74BD93', '#6E8CDB', '#F2A88F'],
  },
  {
    id: 'mint',
    name: 'Мята',
    desc: 'Свежая, для бьюти и цветов',
    theme: 'light',
    bg: '#E8F1EC',
    cardInk1: '#152821',
    cardInk2: '#5c7068',
    cardInk3: '#94a89e',
    tiles: ['#52B188', '#6FB7E0', '#6E8CDB', '#B19CD9', '#B8C168', '#E47373'],
  },
  {
    id: 'blush',
    name: 'Пион',
    desc: 'Пудровая, для бьюти и handmade',
    theme: 'light',
    bg: '#F6E7E7',
    cardInk1: '#2a1418',
    cardInk2: '#75555a',
    cardInk3: '#b09499',
    tiles: ['#E29CAF', '#E47373', '#B19CD9', '#E89A2E', '#F2A88F', '#B8C168'],
  },
  {
    id: 'graphite',
    name: 'Графит',
    desc: 'Уютная, для ночного режима',
    theme: 'dark',
    bg: '#1a1410',
    cardInk1: '#f5f1eb',
    cardInk2: '#a39990',
    cardInk3: '#6e645c',
    tiles: ['#E89A2E', '#E47373', '#B19CD9', '#74BD93', '#6E8CDB', '#F2A88F'],
  },
  {
    id: 'midnight',
    name: 'Полночь',
    desc: 'Глубокая, для маркетплейсов',
    theme: 'dark',
    bg: '#0E1424',
    cardInk1: '#E5ECF7',
    cardInk2: '#8B95B0',
    cardInk3: '#535D78',
    tiles: ['#6FB7E0', '#6E8CDB', '#B19CD9', '#52B188', '#E29CAF', '#E89A2E'],
  },
  {
    id: 'cocoa',
    name: 'Какао',
    desc: 'Шоколадная, для пекарен и баристы',
    theme: 'dark',
    bg: '#2A1812',
    cardInk1: '#F4ECDF',
    cardInk2: '#A99182',
    cardInk3: '#7A6655',
    tiles: ['#E89A2E', '#F2A88F', '#E47373', '#E29CAF', '#B8C168', '#B19CD9'],
  },
];

const PALETTE_ICON_SET = [
  { icon: 'orders',    label: 'Заказы' },
  { icon: 'batches',   label: 'Партии' },
  { icon: 'inventory', label: 'Склад' },
  { icon: 'customers', label: 'Клиенты' },
  { icon: 'revenue',   label: 'Деньги' },
  { icon: 'tasks',     label: 'Задачи' },
];

const PalettePhone = ({ palette }) => {
  const p = palette;
  const isDark = p.theme === 'dark';
  return (
    <div className="lp-pal" data-theme={p.theme}>
      <div
        className="lp-pal__phone"
        style={{
          background: isDark ? '#0a0606' : '#1a1410',
        }}
      >
        <div
          className="lp-pal__screen"
          style={{
            background: p.bg,
            color: p.cardInk1,
          }}
        >
          {/* status bar */}
          <div className="lp-pal__status">
            <span>9:41</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              <svg width="11" height="7" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1" /><rect x="4.5" y="4" width="3" height="7" rx="1" /><rect x="9" y="2" width="3" height="9" rx="1" /><rect x="13.5" y="0" width="3" height="11" rx="1" /></svg>
              <svg width="16" height="8" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="2.5" stroke="currentColor" /><rect x="2.5" y="2.5" width="13" height="7" rx="1" fill="currentColor" /></svg>
            </span>
          </div>

          <div className="lp-pal__body">
            <div className="lp-pal__title" style={{ color: p.cardInk1 }}>
              Сегодня
            </div>
            <div className="lp-pal__day" style={{ color: p.cardInk3 }}>
              понедельник · 4 мая
            </div>

            <div className="lp-pal__tiles">
              {PALETTE_ICON_SET.map((t, i) => (
                <div key={i} className="lp-pal__tile-wrap">
                  <div
                    className="lp-pal__tile"
                    style={{ background: p.tiles[i % p.tiles.length] }}
                  >
                    <TileIcon name={t.icon} size={26} />
                  </div>
                  <div className="lp-pal__tile-label" style={{ color: p.cardInk2 }}>{t.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="lp-pal__caption">
        <div className="lp-pal__caption-dots">
          {p.tiles.slice(0, 4).map((c, i) => (
            <span key={i} style={{ background: c }} />
          ))}
        </div>
        <div>
          <div className="lp-pal__name">{p.name}</div>
          <div className="lp-pal__desc">{p.desc}</div>
        </div>
      </div>
    </div>
  );
};

window.MiniPhone = MiniPhone;
window.AppLogo = AppLogo;
window.ChatPhone = ChatPhone;
window.TeamPhone = TeamPhone;
window.PalettePhone = PalettePhone;
window.ROLES = ROLES;
window.PALETTES = PALETTES;