/* global React, PixelArt, Sparkle, Star, Heart */
// UI mockups for portfolio thumbnails — phone screens + dashboards

/* ---------- shared bits ---------- */
function PhoneFrame({ children, accent = '#2E2548', theme = '', frameColor }) {
  return (
    <div className={`mu-phone mu-theme-${theme}`} style={{ ['--phone-accent']: frameColor || accent }}>
      <div className="mu-phone-notch"></div>
      <div className="mu-phone-screen">{children}</div>
    </div>
  );
}

function StatusBar({ time = '9:41', dark = false }) {
  return (
    <div className={`mu-statusbar ${dark ? 'dark' : ''}`}>
      <span>{time}</span>
      <span className="mu-statusbar-r">
        <span className="mu-sb-dot"></span>
        <span className="mu-sb-dot"></span>
        <span className="mu-sb-bat"></span>
      </span>
    </div>
  );
}

/* ---------- 1. 모찌배달 — Food delivery mobile app ---------- */
function MockupDelivery() {
  return (
    <PhoneFrame theme="delivery" frameColor="#1F1A14">
      <StatusBar />
      <div className="mu-bar">
        <div>
          <div className="mu-h-greet">안녕하세요, 지오님 🍪</div>
          <div className="mu-h-loc">📍 망원동, 서울</div>
        </div>
        <div className="mu-avatar peach"></div>
      </div>
      <div className="mu-search">
        <span>🔍</span><span>오늘 뭐 시킬까요?</span>
      </div>
      <div className="mu-cats">
        {[['🍪', '디저트'], ['🥤', '음료'], ['🍩', '도넛'], ['🧁', '베이커리']].map(([e, l], i) => (
          <div key={i} className={`mu-cat ${i === 0 ? 'on' : ''}`}>
            <span>{e}</span><span>{l}</span>
          </div>
        ))}
      </div>
      <div className="mu-section-t">
        <span>🔥 우리 동네 인기</span>
        <span className="mu-more">더보기</span>
      </div>
      <div className="mu-card-row">
        <div className="mu-prod-card">
          <div className="mu-prod-img" style={{ background: 'linear-gradient(135deg, #FFD6B6, #FFA88F)' }}>
            <span className="mu-badge">⚡ 30분</span>
          </div>
          <div className="mu-prod-name">모찌도넛 5종</div>
          <div className="mu-prod-meta"><span>⭐ 4.9</span><strong>12,800원</strong></div>
        </div>
        <div className="mu-prod-card">
          <div className="mu-prod-img" style={{ background: 'linear-gradient(135deg, #FFE0EC, #FFB6CE)' }}>
            <span className="mu-badge">🆕 NEW</span>
          </div>
          <div className="mu-prod-name">딸기 케이크</div>
          <div className="mu-prod-meta"><span>⭐ 4.8</span><strong>9,500원</strong></div>
        </div>
      </div>
      <div className="mu-nav">
        <div className="on">🏠</div><div>🔎</div><div className="cart">🛒</div><div>❤️</div><div>👤</div>
      </div>
    </PhoneFrame>
  );
}

/* ---------- 2. 별다방 리워드 — Coffee loyalty card ---------- */
function MockupCafe() {
  return (
    <PhoneFrame theme="cafe" frameColor="#2E1F14">
      <StatusBar dark />
      <div className="mu-cafe-bg">
        <div className="mu-cafe-top">
          <div>
            <div className="mu-cafe-hello">반가워요!</div>
            <div className="mu-cafe-name">한도윤님 ✨</div>
          </div>
          <div className="mu-cafe-bell">🔔<span></span></div>
        </div>
        <div className="mu-cafe-card">
          <div className="mu-cafe-card-top">
            <span className="mu-cafe-tier">🌟 GOLD MEMBER</span>
            <span className="mu-cafe-bal">12,400P</span>
          </div>
          <div className="mu-cafe-stamps">
            {Array.from({ length: 10 }).map((_, i) => (
              <span key={i} className={`mu-stamp ${i < 7 ? 'on' : ''}`}>
                {i < 7 ? '★' : ''}
              </span>
            ))}
          </div>
          <div className="mu-cafe-progress">
            <div style={{ width: '70%' }}></div>
          </div>
          <div className="mu-cafe-prog-t">무료 음료까지 <strong>3잔</strong> 남았어요 ☕</div>
        </div>
      </div>
      <div className="mu-section-t" style={{ padding: '14px 18px 8px' }}>
        <span>🎁 회원 전용 혜택</span>
      </div>
      <div className="mu-coupon-row">
        <div className="mu-coupon" style={{ background: 'linear-gradient(135deg, #FFF2C4, #FFE89A)' }}>
          <strong>20%</strong><span>신상품 할인</span>
        </div>
        <div className="mu-coupon" style={{ background: 'linear-gradient(135deg, #FFD6F0, #FFB0DD)' }}>
          <strong>1+1</strong><span>케이크</span>
        </div>
      </div>
      <div className="mu-nav">
        <div className="on">🏠</div><div>🎫</div><div>📍</div><div>👤</div>
      </div>
    </PhoneFrame>
  );
}

/* ---------- 3. 또또톡 — Chat app ---------- */
function MockupChat() {
  const msgs = [
    { from: 'them', name: '하늘', t: '오늘 산책 가실래요? 🌳' },
    { from: 'me', t: '좋아요! 한강에서 만나요' },
    { from: 'them', name: '하늘', t: '6시 망원지구 어떠세요?' },
    { from: 'me', t: '🆗 약속!' },
  ];
  return (
    <PhoneFrame theme="chat" frameColor="#221A36">
      <StatusBar />
      <div className="mu-chat-bar">
        <span>←</span>
        <div className="mu-chat-who">
          <div className="mu-avatar lav"></div>
          <div>
            <div className="mu-chat-name">윤하늘 <span className="mu-online"></span></div>
            <div className="mu-chat-status">접속 중 · 취향 92% 매칭</div>
          </div>
        </div>
        <span>⋯</span>
      </div>
      <div className="mu-chat-body">
        <div className="mu-chat-date">오늘 · 오후 2:14</div>
        {msgs.map((m, i) => (
          <div key={i} className={`mu-bubble ${m.from}`}>
            {m.t}
          </div>
        ))}
        <div className="mu-typing">
          <span></span><span></span><span></span>
        </div>
      </div>
      <div className="mu-chat-input">
        <span>+</span>
        <input placeholder="메시지를 입력하세요…" />
        <span className="mu-send">↑</span>
      </div>
    </PhoneFrame>
  );
}

/* ---------- 4. 콘텐츠랩 — SaaS dashboard ---------- */
function MockupDash() {
  return (
    <div className="mu-dash mu-theme-dash">
      <div className="mu-dash-top">
        <div className="mu-dash-logo">
          <span className="mu-logo-mark"></span>
          <span>콘텐츠랩</span>
        </div>
        <div className="mu-dash-tabs">
          <span className="on">대시보드</span><span>채널</span><span>업로드</span><span>리포트</span>
        </div>
        <div className="mu-avatar pink small"></div>
      </div>
      <div className="mu-dash-body">
        <div className="mu-dash-grid">
          <div className="mu-stat-card">
            <div className="mu-stat-k">조회수 (7일)</div>
            <div className="mu-stat-v">1.42M</div>
            <div className="mu-stat-d up">↑ 18.4%</div>
          </div>
          <div className="mu-stat-card">
            <div className="mu-stat-k">구독자</div>
            <div className="mu-stat-v">82.3K</div>
            <div className="mu-stat-d up">↑ 2.1%</div>
          </div>
          <div className="mu-stat-card">
            <div className="mu-stat-k">수익</div>
            <div className="mu-stat-v">₩3.4M</div>
            <div className="mu-stat-d down">↓ 0.4%</div>
          </div>
        </div>
        <div className="mu-chart-card">
          <div className="mu-chart-head">
            <span>채널별 조회수 추이</span>
            <div className="mu-legend">
              <span className="d1"></span>YouTube
              <span className="d2"></span>Instagram
              <span className="d3"></span>TikTok
            </div>
          </div>
          <svg viewBox="0 0 280 100" className="mu-chart-svg" preserveAspectRatio="none">
            <defs>
              <linearGradient id="ga" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#8B7BC4" stopOpacity=".4" />
                <stop offset="100%" stopColor="#8B7BC4" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0 70 L30 60 L60 65 L90 40 L120 50 L150 30 L180 35 L210 20 L240 28 L280 12" stroke="#8B7BC4" strokeWidth="2.5" fill="none" />
            <path d="M0 70 L30 60 L60 65 L90 40 L120 50 L150 30 L180 35 L210 20 L240 28 L280 12 L280 100 L0 100 Z" fill="url(#ga)" />
            <path d="M0 80 L30 75 L60 72 L90 65 L120 70 L150 55 L180 60 L210 45 L240 50 L280 40" stroke="#D88BB8" strokeWidth="2" fill="none" />
            <path d="M0 85 L30 88 L60 80 L90 78 L120 82 L150 70 L180 75 L210 60 L240 68 L280 55" stroke="#5BA8B5" strokeWidth="2" fill="none" />
          </svg>
        </div>
      </div>
    </div>
  );
}

/* ---------- 5. 운동친구 — Fitness app ---------- */
function MockupFit() {
  return (
    <PhoneFrame theme="fit" frameColor="#0F0F0F">
      <StatusBar dark />
      <div className="mu-fit-hero">
        <div className="mu-fit-greet">
          <div className="mu-fit-hello">오늘도 달려볼까요?</div>
          <div className="mu-fit-name">🔥 7일 연속 운동 중</div>
        </div>
        <div className="mu-ring">
          <svg viewBox="0 0 100 100" className="mu-ring-svg">
            <circle cx="50" cy="50" r="42" stroke="#FFEDED" strokeWidth="10" fill="none" />
            <circle cx="50" cy="50" r="42" stroke="#E07B6E" strokeWidth="10" fill="none"
              strokeDasharray="264" strokeDashoffset="58" strokeLinecap="round"
              transform="rotate(-90 50 50)" />
          </svg>
          <div className="mu-ring-c">
            <strong>78%</strong><span>일일 목표</span>
          </div>
        </div>
      </div>
      <div className="mu-fit-stats">
        <div><strong>5.2</strong><span>km</span></div>
        <div><strong>432</strong><span>kcal</span></div>
        <div><strong>34</strong><span>min</span></div>
      </div>
      <div className="mu-section-t" style={{ padding: '8px 18px' }}>
        <span>👥 가까이 있는 러닝메이트</span>
      </div>
      <div className="mu-mate-list">
        {[
          { n: '서연', d: '망원한강 · 0.4km', p: 5.6 },
          { n: '강준', d: '연남동 · 0.8km', p: 6.1 },
        ].map((m, i) => (
          <div key={i} className="mu-mate">
            <div className="mu-avatar mint"></div>
            <div className="mu-mate-meta">
              <div className="mu-mate-n">{m.n}</div>
              <div className="mu-mate-d">{m.d} · {m.p}km/h</div>
            </div>
            <button className="mu-mate-btn">함께</button>
          </div>
        ))}
      </div>
      <div className="mu-nav">
        <div className="on">🏠</div><div>🗺</div><div className="cart">▶</div><div>📊</div><div>👤</div>
      </div>
    </PhoneFrame>
  );
}

/* ---------- 6. 모찌배달 어드민 — Admin dashboard ---------- */
function MockupAdmin() {
  const orders = [
    { id: '#1284', cust: '김소윤', items: '모찌도넛 5종', amt: '12,800', status: 'on', label: '배달중' },
    { id: '#1283', cust: '이준호', items: '딸기 케이크', amt: '9,500', status: 'wait', label: '대기' },
    { id: '#1282', cust: '박하은', items: '크로아샑 세트', amt: '24,000', status: 'done', label: '완료' },
    { id: '#1281', cust: '최서원', items: '아메리카노 2잔', amt: '8,400', status: 'done', label: '완료' },
    { id: '#1280', cust: '정을서', items: '마들렌 4종', amt: '15,200', status: 'on', label: '배달중' },
  ];
  return (
    <div className="mu-admin mu-theme-admin">
      <div className="mu-admin-top">
        <div className="mu-admin-dots"><span></span><span></span><span></span></div>
        <div className="mu-admin-tabs">
          <span className="on">주문 관리</span>
          <span>상품</span>
          <span>고객</span>
          <span>+</span>
        </div>
      </div>
      <div className="mu-admin-body">
        <aside className="mu-admin-side">
          <div className="mu-admin-logo"><span className="mu-admin-logo-mark"></span>모찌 어드민</div>
          <nav>
            <a>■  대시보드</a>
            <a className="on">■  주문 관리</a>
            <a>■  상품</a>
            <a>■  고객</a>
            <a>■  정산</a>
            <a>■  설정</a>
          </nav>
          <div className="mu-admin-user">
            <span className="mu-admin-user-av"></span>
            <div>
              <div>박지오</div>
              <div className="mu-admin-user-r">운영 관리자</div>
            </div>
          </div>
        </aside>
        <main className="mu-admin-main">
          <div className="mu-admin-header">
            <div>
              <h3>주문 관리</h3>
              <p>오늘 총 <strong>142건</strong> · 대기 18 · 배달중 24</p>
            </div>
            <button className="mu-admin-btn">+ 수동 주문</button>
          </div>
          <div className="mu-admin-filters">
            <span className="on">전체 142</span>
            <span>대기 18</span>
            <span>배달중 24</span>
            <span>완료 100</span>
          </div>
          <div className="mu-admin-table">
            <div className="mu-admin-tr mu-admin-th">
              <span>주문번호</span><span>고객</span><span>상품</span><span>금액</span><span>상태</span>
            </div>
            {orders.map(o => (
              <div key={o.id} className="mu-admin-tr">
                <span className="mu-admin-id">{o.id}</span>
                <span>{o.cust}</span>
                <span className="mu-admin-items">{o.items}</span>
                <span><strong>₩{o.amt}</strong></span>
                <span className={`mu-admin-status mu-admin-status--${o.status}`}>{o.label}</span>
              </div>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

/* ---------- 7. 올리브 베이커리 — Premium Dark Editorial ---------- */
function BakeryBadgeSvg() {
  return (
    <svg viewBox="0 0 200 200" className="mu-bv2-badge">
      {/* Outer dashed ring */}
      <circle cx="100" cy="100" r="93" fill="none" stroke="#C8923A" strokeWidth="0.7" strokeDasharray="3,4" opacity="0.45" />
      {/* Main fill circle */}
      <circle cx="100" cy="100" r="84" fill="#1C1710" stroke="#C8923A" strokeWidth="1.2" />
      {/* Inner thin ring */}
      <circle cx="100" cy="100" r="77" fill="none" stroke="#C8923A" strokeWidth="0.4" opacity="0.35" />

      {/* Wheat left */}
      <line x1="53" y1="128" x2="65" y2="80" stroke="#C8923A" strokeWidth="0.9" opacity="0.55" />
      <ellipse cx="62" cy="82" rx="4" ry="7" fill="#C8923A" opacity="0.5" transform="rotate(-20,62,82)" />
      <ellipse cx="56" cy="95" rx="4" ry="7" fill="#C8923A" opacity="0.4" transform="rotate(-20,56,95)" />
      <ellipse cx="66" cy="91" rx="4" ry="7" fill="#C8923A" opacity="0.38" transform="rotate(-20,66,91)" />

      {/* Wheat right */}
      <line x1="147" y1="128" x2="135" y2="80" stroke="#C8923A" strokeWidth="0.9" opacity="0.55" />
      <ellipse cx="138" cy="82" rx="4" ry="7" fill="#C8923A" opacity="0.5" transform="rotate(20,138,82)" />
      <ellipse cx="144" cy="95" rx="4" ry="7" fill="#C8923A" opacity="0.4" transform="rotate(20,144,95)" />
      <ellipse cx="134" cy="91" rx="4" ry="7" fill="#C8923A" opacity="0.38" transform="rotate(20,134,91)" />

      {/* Bread boule */}
      <circle cx="100" cy="96" r="30" fill="#C8923A" opacity="0.88" />
      {/* Boule highlight */}
      <ellipse cx="93" cy="88" rx="14" ry="8" fill="#E8B86A" opacity="0.25" transform="rotate(-20,93,88)" />
      {/* Score marks */}
      <line x1="100" y1="70" x2="100" y2="122" stroke="#1C1710" strokeWidth="1.6" strokeLinecap="round" />
      <line x1="74" y1="96" x2="126" y2="96" stroke="#1C1710" strokeWidth="1.6" strokeLinecap="round" />
      <line x1="82" y1="78" x2="118" y2="114" stroke="#1C1710" strokeWidth="0.8" strokeLinecap="round" opacity="0.35" />
      <line x1="118" y1="78" x2="82" y2="114" stroke="#1C1710" strokeWidth="0.8" strokeLinecap="round" opacity="0.35" />
      {/* Boule shadow */}
      <ellipse cx="100" cy="126" rx="22" ry="5" fill="#C8923A" opacity="0.18" />

      {/* Arc text top */}
      <path id="bv2a" d="M 25,100 A 75,75 0 0,1 175,100" fill="none" />
      <text fontFamily="'Nanum Myeongjo',serif" fontSize="11.5" letterSpacing="5" fill="#C8923A" fillOpacity="0.9">
        <textPath href="#bv2a" startOffset="7%">OLIVE BAKERY</textPath>
      </text>

      {/* Arc text bottom */}
      <path id="bv2b" d="M 175,100 A 75,75 0 0,1 25,100" fill="none" />
      <text fontFamily="'Nanum Myeongjo',serif" fontSize="9" letterSpacing="3.5" fill="#C8923A" fillOpacity="0.55">
        <textPath href="#bv2b" startOffset="13%">MANGWON · EST. 2019</textPath>
      </text>

      {/* Diamond top */}
      <polygon points="100,9 102.5,15 109,15 104,19 106,25 100,21 94,25 96,19 91,15 97.5,15" fill="#C8923A" opacity="0.65" />
      {/* Diamond bottom */}
      <polygon points="100,175 102.5,181 109,181 104,185 106,191 100,187 94,191 96,185 91,181 97.5,181" fill="#C8923A" opacity="0.65" />
    </svg>
  );
}

function MockupBrand() {
  const PRODS = [
    { n: '01', name: 'Walnut Campagne', note: 'Daily Bake', price: '₩9,800' },
    { n: '02', name: 'Cheese Focaccia',  note: 'Limited 30',  price: '₩7,200' },
    { n: '03', name: 'Butter Croissant', note: '48h Ferment', price: '₩4,500' },
  ];
  return (
    <div className="mu-brand mu-bv2">
      {/* Browser chrome */}
      <div className="mu-brand-chrome mu-bv2-chrome">
        <div className="mu-admin-dots mu-bv2-dots"><span></span><span></span><span></span></div>
        <span className="mu-bv2-url">olive-bakery.kr</span>
      </div>

      <div className="mu-brand-page mu-bv2-page">
        {/* Nav */}
        <nav className="mu-bv2-nav">
          <div className="mu-bv2-nav-links">
            <span>STORY</span><span>MENU</span><span>STORES</span>
          </div>
          <span className="mu-bv2-logo">OLIVE</span>
          <div className="mu-bv2-nav-right">
            <span>JOURNAL</span>
            <span className="mu-bv2-reserve">RESERVE</span>
          </div>
        </nav>

        {/* Hero */}
        <div className="mu-bv2-hero">
          <div className="mu-bv2-kicker">EST. 2019 &nbsp;·&nbsp; MANGWON-DONG, SEOUL</div>
          <div className="mu-bv2-hero-grid">
            <div className="mu-bv2-hero-copy">
              <h2 className="mu-bv2-headline">Baked<br/>Before<br/>Dawn.</h2>
              <div className="mu-bv2-rule"></div>
              <p className="mu-bv2-sub">Hand-shaped sourdough &amp; viennoiserie,<br/>pulled from the oven at nine.</p>
              <div className="mu-bv2-actions">
                <span className="mu-bv2-btn-fill">VIEW MENU</span>
                <span className="mu-bv2-btn-line">OUR STORY ↗</span>
              </div>
            </div>
            <div className="mu-bv2-hero-art">
              <BakeryBadgeSvg />
            </div>
          </div>
        </div>

        {/* Products strip */}
        <div className="mu-bv2-products">
          {PRODS.map(p => (
            <div key={p.n} className="mu-bv2-prod">
              <span className="mu-bv2-pn">{p.n}</span>
              <div className="mu-bv2-pmeta">
                <strong>{p.name}</strong>
                <em>{p.note}</em>
              </div>
              <span className="mu-bv2-price">{p.price}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- 8. ContentsLab — SaaS PM dashboard (light, kanban) ---------- */
function MockupSaasDash() {
  const cols = [
    { title: '백로그', color: '#94A3B8', items: ['API 인증 모듈', 'S3 업로드 연동'] },
    { title: '진행 중', color: '#3B82F6', items: ['대시보드 위젯', '멤버 초대 UX'] },
    { title: '리뷰', color: '#F59E0B', items: ['결제 웹훅 처리'] },
    { title: '완료', color: '#10B981', items: ['로그인 OAuth', 'CSV 내보내기'] },
  ];
  return (
    <div className="mu-saas mu-theme-saas">
      <div className="mu-saas-top">
        <div className="mu-saas-logo">
          <span className="mu-saas-mark">C</span>
          <span>ContentsLab</span>
        </div>
        <div className="mu-saas-nav">
          {['보드', '타임라인', '목록', '보고서'].map((t, i) => (
            <span key={i} className={i === 0 ? 'on' : ''}>{t}</span>
          ))}
        </div>
        <button className="mu-saas-btn">+ 작업 추가</button>
      </div>
      <div className="mu-saas-sub">
        <div className="mu-saas-project">
          <span className="mu-saas-dot blue"></span>
          <strong>v2.4 스프린트</strong>
        </div>
        <div className="mu-saas-avatars">
          {['#8B7BC4','#D88BB8','#5BA8B5','#E8C86A'].map((c, i) => (
            <span key={i} className="mu-saas-av" style={{ background: c, marginLeft: i ? -6 : 0 }}></span>
          ))}
          <span className="mu-saas-av-n">+3</span>
        </div>
      </div>
      <div className="mu-saas-board">
        {cols.map((col, ci) => (
          <div key={ci} className="mu-saas-col">
            <div className="mu-saas-col-head">
              <span className="mu-saas-col-dot" style={{ background: col.color }}></span>
              <span className="mu-saas-col-title">{col.title}</span>
              <span className="mu-saas-col-cnt">{col.items.length}</span>
            </div>
            {col.items.map((item, ii) => (
              <div key={ii} className="mu-saas-card">
                <div className="mu-saas-card-title">{item}</div>
                <div className="mu-saas-card-foot">
                  <span className="mu-saas-av sm" style={{ background: ['#8B7BC4','#D88BB8','#5BA8B5','#E8C86A'][ii % 4] }}></span>
                  <span className="mu-saas-card-date">{['5/18','5/20','5/22','5/15'][ii % 4]}</span>
                </div>
              </div>
            ))}
            <div className="mu-saas-add">+ 추가</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- 9. Drop Mobility — Taxi dispatch mobile app ---------- */
function MockupTaxi() {
  return (
    <PhoneFrame theme="taxi" frameColor="#0A0F1E">
      <StatusBar dark />
      <div className="mu-taxi-map">
        <svg viewBox="0 0 260 140" className="mu-taxi-map-svg">
          <rect width="260" height="140" fill="#131C34" />
          <line x1="0" y1="50" x2="260" y2="50" stroke="#1E2B4A" strokeWidth="12" />
          <line x1="0" y1="100" x2="260" y2="100" stroke="#1E2B4A" strokeWidth="8" />
          <line x1="80" y1="0" x2="80" y2="140" stroke="#1E2B4A" strokeWidth="8" />
          <line x1="190" y1="0" x2="190" y2="140" stroke="#1E2B4A" strokeWidth="12" />
          <line x1="0" y1="50" x2="260" y2="50" stroke="#253353" strokeWidth="1.5" />
          <line x1="0" y1="100" x2="260" y2="100" stroke="#253353" strokeWidth="1" />
          <line x1="80" y1="0" x2="80" y2="140" stroke="#253353" strokeWidth="1" />
          <line x1="190" y1="0" x2="190" y2="140" stroke="#253353" strokeWidth="1.5" />
          <circle cx="120" cy="68" r="7" fill="#3B82F6" opacity="0.9" />
          <circle cx="120" cy="68" r="14" fill="#3B82F6" opacity="0.15" />
          <circle cx="55" cy="38" r="5" fill="#F59E0B" opacity="0.85" />
          <circle cx="210" cy="90" r="5" fill="#F59E0B" opacity="0.85" />
          <circle cx="160" cy="118" r="5" fill="#F59E0B" opacity="0.85" />
          <circle cx="35" cy="105" r="5" fill="#10B981" opacity="0.85" />
          <circle cx="230" cy="42" r="5" fill="#10B981" opacity="0.85" />
        </svg>
        <div className="mu-taxi-overlay">
          <div className="mu-taxi-badge">🚖 AI 자동배차 중</div>
        </div>
      </div>
      <div className="mu-taxi-panel">
        <div className="mu-taxi-stats">
          <div className="mu-taxi-stat">
            <strong>24</strong><span>운행 중</span>
          </div>
          <div className="mu-taxi-stat">
            <strong>8</strong><span>배차 대기</span>
          </div>
          <div className="mu-taxi-stat">
            <strong>2.3분</strong><span>평균 ETA</span>
          </div>
        </div>
        <div className="mu-taxi-req-t">대기 콜</div>
        {[
          { loc: '홍대입구역 2번 출구', dest: '여의도 IFC', eta: '1.2km · 2분' },
          { loc: '망원동 성산로 47', dest: '마포구청역', eta: '0.8km · 1분' },
        ].map((r, i) => (
          <div key={i} className="mu-taxi-req">
            <div className="mu-taxi-req-dot"></div>
            <div className="mu-taxi-req-info">
              <div className="mu-taxi-req-from">{r.loc}</div>
              <div className="mu-taxi-req-to">→ {r.dest}</div>
            </div>
            <div className="mu-taxi-req-eta">{r.eta}</div>
          </div>
        ))}
      </div>
      <div className="mu-nav" style={{ background: '#0D1525', borderTop: '1px solid #1E2B4A' }}>
        <div className="on">🗺</div><div>📊</div><div>🚖</div><div>👤</div>
      </div>
    </PhoneFrame>
  );
}

/* ---------- 9. Dealpang — E-commerce web ---------- */
function MockupShop() {
  const products = [
    { name: '에어팟 프로 2세대', price: '289,000', orig: '359,000', badge: '19%', color: '#EFF6FF' },
    { name: '다이슨 에어랩', price: '549,000', orig: '720,000', badge: '23%', color: '#FFF7ED' },
    { name: '닌텐도 스위치', price: '299,000', orig: '399,000', badge: '25%', color: '#F0FDF4' },
    { name: 'LG 스탠바이미 Go', price: '799,000', orig: '1,100,000', badge: '27%', color: '#FDF4FF' },
  ];
  return (
    <div className="mu-shop mu-theme-shop">
      <div className="mu-shop-top">
        <div className="mu-shop-logo">
          <span className="mu-shop-logo-mark">D</span>
          <span>딜팡</span>
        </div>
        <div className="mu-shop-search">
          <span>🔍</span>
          <input readOnly placeholder="오늘의 특가 검색" />
        </div>
        <div className="mu-shop-cart">🛒 <span>3</span></div>
      </div>
      <div className="mu-shop-cats">
        {['전체', '전자기기', '패션', '뷰티', '생활'].map((c, i) => (
          <span key={i} className={i === 1 ? 'on' : ''}>{c}</span>
        ))}
      </div>
      <div className="mu-shop-banner">
        <div>
          <div className="mu-shop-banner-label">오늘만! 타임딜</div>
          <div className="mu-shop-banner-title">최대 40% 할인</div>
          <div className="mu-shop-banner-sub">전자기기 카테고리 한정</div>
        </div>
        <div className="mu-shop-timer">
          <span>23</span>:<span>14</span>:<span>08</span>
        </div>
      </div>
      <div className="mu-shop-grid">
        {products.map((p, i) => (
          <div key={i} className="mu-shop-card" style={{ background: p.color }}>
            <span className="mu-shop-badge">-{p.badge}</span>
            <div className="mu-shop-img-ph"></div>
            <div className="mu-shop-name">{p.name}</div>
            <div className="mu-shop-price-row">
              <strong>{p.price}원</strong>
              <del>{p.orig}원</del>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- 10. APIHub — Developer portal web ---------- */
function MockupApi() {
  const endpoints = [
    { method: 'GET', path: '/users/{id}', color: '#10B981' },
    { method: 'POST', path: '/auth/token', color: '#3B82F6' },
    { method: 'PUT', path: '/orders/{id}', color: '#F59E0B' },
    { method: 'DELETE', path: '/sessions', color: '#EF4444' },
  ];
  return (
    <div className="mu-api mu-theme-api">
      <div className="mu-api-top">
        <div className="mu-api-dots"><span></span><span></span><span></span></div>
        <div className="mu-api-title">APIHub · REST Explorer</div>
        <div className="mu-api-version">v2.4.1</div>
      </div>
      <div className="mu-api-body">
        <div className="mu-api-sidebar">
          <div className="mu-api-sb-title">엔드포인트</div>
          {endpoints.map((e, i) => (
            <div key={i} className={`mu-api-ep ${i === 1 ? 'on' : ''}`}>
              <span className="mu-api-method" style={{ color: e.color }}>{e.method}</span>
              <span className="mu-api-path">{e.path}</span>
            </div>
          ))}
          <div className="mu-api-sb-title" style={{ marginTop: 10 }}>모델</div>
          {['User', 'Order', 'Token'].map((m, i) => (
            <div key={i} className="mu-api-ep model">
              <span className="mu-api-model-dot"></span>
              <span className="mu-api-path">{m}</span>
            </div>
          ))}
        </div>
        <div className="mu-api-main">
          <div className="mu-api-main-head">
            <span className="mu-api-method-badge" style={{ background: '#3B82F6' }}>POST</span>
            <span className="mu-api-main-path">/auth/token</span>
          </div>
          <div className="mu-api-code-block">
            <div className="mu-api-code-label">Request</div>
            <pre className="mu-api-code">{`{
  "client_id": "app_01",
  "grant_type": "password",
  "username": "admin@wcs.ai"
}`}</pre>
          </div>
          <div className="mu-api-code-block resp">
            <div className="mu-api-code-label green">Response 200</div>
            <pre className="mu-api-code">{`{
  "access_token": "eyJ...",
  "expires_in": 3600,
  "token_type": "Bearer"
}`}</pre>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Dispatcher ---------- */
function PortfolioMockup({ kind }) {
  if (kind === 'delivery') return <MockupDelivery />;
  if (kind === 'cafe') return <MockupCafe />;
  if (kind === 'chat') return <MockupChat />;
  if (kind === 'dash') return <MockupDash />;
  if (kind === 'fit') return <MockupFit />;
  if (kind === 'admin') return <MockupAdmin />;
  if (kind === 'brand') return <MockupBrand />;
  if (kind === 'taxi') return <MockupTaxi />;
  if (kind === 'shop') return <MockupShop />;
  if (kind === 'api') return <MockupApi />;
  if (kind === 'saas') return <MockupSaasDash />;
  return null;
}

Object.assign(window, { PortfolioMockup });