/* Dashboard mockup — interactive */
function Dashboard() {
  const [tab, setTab] = React.useState('products');
  const [selected, setSelected] = React.useState(0);

  // Original demo data
  const products = [
    { sku: 'HB-2024-001', name: 'プレミアム白磁ティーセット', stock: 142, status: 'synced', price: '¥12,800', img: 'oklch(0.7 0.08 60)' },
    { sku: 'HB-2024-002', name: '南部鉄器 急須 黒', stock: 38, status: 'syncing', price: '¥18,500', img: 'oklch(0.35 0.02 20)' },
    { sku: 'HB-2024-003', name: '京都西陣織 帯留め', stock: 7, status: 'warning', price: '¥9,200', img: 'oklch(0.55 0.15 25)' },
    { sku: 'HB-2024-004', name: '輪島塗 木製スプーン3点', stock: 264, status: 'synced', price: '¥4,400', img: 'oklch(0.5 0.1 40)' },
    { sku: 'HB-2024-005', name: '有田焼 蕎麦猪口セット', stock: 89, status: 'synced', price: '¥6,800', img: 'oklch(0.7 0.08 220)' },
  ];

  const statusMap = {
    synced: { label: '同期済', color: 'oklch(0.75 0.15 145)' },
    syncing: { label: '同期中', color: 'var(--gold)' },
    warning: { label: '在庫少', color: 'oklch(0.7 0.16 30)' },
  };

  const current = products[selected];

  return (
    <section id="dashboard" style={{ position: 'relative', padding: '120px 0', overflow: 'hidden' }}>
      {/* Background portal */}
      <div className="glow-orb" style={{
        width: 800, height: 800,
        top: '40%', left: '50%',
        transform: 'translateX(-50%)',
        background: 'radial-gradient(circle, rgba(245,200,66,0.15) 0%, transparent 70%)',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <span className="section-tag">◆ Product · ダッシュボード</span>
            <h2 className="section-h2">
              全ての商品情報が、<br />
              <span className="gold-text serif">一つの画面に。</span>
            </h2>
            <p style={{ marginTop: 16, color: 'var(--ink-3)', fontSize: 13 }} className="mono">
              ── ダミーデータによるUIプレビュー
            </p>
          </div>
        </Reveal>

        <Reveal delay={200}>
          {/* Window chrome */}
          <div style={{
            background: 'linear-gradient(180deg, #161b35 0%, #0f1428 100%)',
            border: '1px solid var(--line-strong)',
            borderRadius: 16,
            overflow: 'hidden',
            boxShadow: '0 40px 100px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(245,200,66,0.08), 0 0 80px -20px rgba(245,200,66,0.3)',
          }}>
            {/* Title bar */}
            <div style={{
              padding: '12px 20px',
              background: 'rgba(0,0,0,0.3)',
              borderBottom: '1px solid var(--line)',
              display: 'flex',
              alignItems: 'center',
              gap: 12,
            }}>
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
              </div>
              <div style={{ flex: 1, textAlign: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
                hub2.co.jp / dashboard
              </div>
              <span className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.15em' }}>BETA</span>
            </div>

            {/* Dashboard body */}
            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', minHeight: 560 }}>
              {/* Sidebar */}
              <div style={{
                background: 'rgba(0,0,0,0.25)',
                borderRight: '1px solid var(--line)',
                padding: 20,
                display: 'flex',
                flexDirection: 'column',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 28 }}>
                  <LogoMark size={24} />
                  <span className="serif" style={{ fontWeight: 700, fontSize: 16 }}>Hub2</span>
                </div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.15em', marginBottom: 12, textTransform: 'uppercase' }}>Workspace</div>
                {[
                  { id: 'products', label: '商品マスター', icon: 'Box', count: 1284 },
                  { id: 'media', label: 'アセット', icon: 'Image', count: 8420 },
                  { id: 'sync', label: '同期ログ', icon: 'Layers', count: null },
                  { id: 'compliance', label: '電帳法保管庫', icon: 'Shield', count: null },
                  { id: 'integrations', label: '外部連携', icon: 'Cube', count: 6 },
                ].map((item) => {
                  const G = Glyph[item.icon];
                  const active = tab === item.id;
                  return (
                    <button
                      key={item.id}
                      onClick={() => setTab(item.id)}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 10,
                        padding: '8px 10px',
                        background: active ? 'rgba(245,200,66,0.1)' : 'transparent',
                        border: 'none',
                        borderRadius: 8,
                        color: active ? 'var(--gold)' : 'var(--ink-2)',
                        fontFamily: 'inherit',
                        fontSize: 13,
                        textAlign: 'left',
                        cursor: 'pointer',
                        marginBottom: 2,
                        position: 'relative',
                      }}
                    >
                      {active && <span style={{ position: 'absolute', left: -20, top: '50%', transform: 'translateY(-50%)', width: 3, height: 16, background: 'var(--gold)', borderRadius: 2, boxShadow: '0 0 8px var(--gold)' }} />}
                      <G width="14" height="14" />
                      <span style={{ flex: 1 }}>{item.label}</span>
                      {item.count !== null && (
                        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{item.count.toLocaleString()}</span>
                      )}
                    </button>
                  );
                })}

                <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 8,
                    padding: '8px 10px',
                    background: 'rgba(255,255,255,0.02)',
                    borderRadius: 8,
                  }}>
                    <div style={{
                      width: 28, height: 28,
                      borderRadius: '50%',
                      background: 'var(--grad-gold)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: 12,
                      fontWeight: 700,
                      color: '#1a1505',
                    }}>L</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 11, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>lifeup.inc</div>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)' }}>Admin</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Main pane */}
              <div style={{ padding: 24, overflow: 'hidden' }}>
                {/* Top bar */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                  <div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.2em', marginBottom: 4 }}>WORKSPACE / 商品マスター</div>
                    <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '0.02em' }}>商品マスター</h3>
                  </div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 8,
                      padding: '8px 12px',
                      background: 'rgba(255,255,255,0.04)',
                      border: '1px solid var(--line)',
                      borderRadius: 8,
                      fontSize: 12,
                      color: 'var(--ink-3)',
                    }}>
                      <Glyph.Search width="14" height="14" />
                      検索…
                    </div>
                    <button style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      padding: '8px 14px',
                      background: 'var(--grad-gold)',
                      color: '#1a1505',
                      border: 'none',
                      borderRadius: 8,
                      fontSize: 12,
                      fontWeight: 700,
                      cursor: 'pointer',
                      boxShadow: 'var(--shadow-gold)',
                    }}>
                      <Glyph.Plus width="12" height="12" />
                      新規商品
                    </button>
                  </div>
                </div>

                {/* Stats row */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
                  {[
                    { label: '商品総数', val: '1,284', delta: '+12', color: 'var(--ink)' },
                    { label: '同期成功率', val: '99.8%', delta: '今月', color: 'oklch(0.75 0.15 145)' },
                    { label: '保管アセット', val: '8,420', delta: '+148', color: 'var(--ink)' },
                    { label: '電帳法保管', val: '2,910', delta: '保管中', color: 'var(--gold)' },
                  ].map((s) => (
                    <div key={s.label} style={{
                      padding: 14,
                      background: 'rgba(255,255,255,0.025)',
                      border: '1px solid var(--line)',
                      borderRadius: 10,
                    }}>
                      <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{s.label}</div>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
                        <span style={{ fontSize: 22, fontWeight: 700, color: s.color, letterSpacing: '0.02em' }} className="serif">{s.val}</span>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{s.delta}</span>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Product table */}
                <div style={{
                  border: '1px solid var(--line)',
                  borderRadius: 10,
                  overflow: 'hidden',
                  background: 'rgba(0,0,0,0.2)',
                }}>
                  {/* Header row */}
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: '44px 1fr 100px 80px 100px 90px',
                    gap: 12,
                    padding: '10px 16px',
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 9,
                    color: 'var(--ink-3)',
                    letterSpacing: '0.15em',
                    textTransform: 'uppercase',
                    borderBottom: '1px solid var(--line)',
                    background: 'rgba(0,0,0,0.2)',
                  }}>
                    <span></span>
                    <span>商品名 / SKU</span>
                    <span>価格</span>
                    <span>在庫</span>
                    <span>連携モール</span>
                    <span>ステータス</span>
                  </div>
                  {products.map((p, i) => {
                    const st = statusMap[p.status];
                    const isSelected = selected === i;
                    return (
                      <div
                        key={p.sku}
                        onClick={() => setSelected(i)}
                        style={{
                          display: 'grid',
                          gridTemplateColumns: '44px 1fr 100px 80px 100px 90px',
                          gap: 12,
                          padding: '12px 16px',
                          alignItems: 'center',
                          borderBottom: i < products.length - 1 ? '1px solid var(--line)' : 'none',
                          background: isSelected ? 'rgba(245,200,66,0.05)' : 'transparent',
                          cursor: 'pointer',
                          fontSize: 12,
                          transition: 'background 0.2s',
                          position: 'relative',
                        }}
                      >
                        {isSelected && <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 2, background: 'var(--gold)', boxShadow: '0 0 8px var(--gold)' }} />}
                        {/* Image placeholder */}
                        <div style={{
                          width: 32, height: 32,
                          borderRadius: 6,
                          background: `linear-gradient(135deg, ${p.img}, oklch(0.2 0.02 270))`,
                          border: '1px solid var(--line)',
                        }} />
                        <div style={{ minWidth: 0 }}>
                          <div style={{ color: 'var(--ink)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{p.sku}</div>
                        </div>
                        <span className="mono" style={{ color: 'var(--ink)' }}>{p.price}</span>
                        <span className="mono" style={{ color: p.stock < 20 ? 'oklch(0.7 0.16 30)' : 'var(--ink-2)' }}>{p.stock}</span>
                        {/* Mall dots */}
                        <div style={{ display: 'flex', gap: 4 }}>
                          {['A', '楽', 'Y'].map((m, mi) => (
                            <span key={m} style={{
                              width: 18, height: 18,
                              borderRadius: '50%',
                              background: ['oklch(0.7 0.13 60)', 'oklch(0.65 0.18 20)', 'oklch(0.65 0.14 290)'][mi],
                              fontSize: 9,
                              fontWeight: 700,
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              color: 'rgba(10,14,26,0.85)',
                            }}>{m}</span>
                          ))}
                        </div>
                        <span style={{
                          fontSize: 10,
                          padding: '3px 8px',
                          borderRadius: 999,
                          background: `${st.color.replace(')', ' / 0.15)')}`,
                          color: st.color,
                          border: `1px solid ${st.color.replace(')', ' / 0.4)')}`,
                          letterSpacing: '0.05em',
                          textAlign: 'center',
                          fontFamily: 'JetBrains Mono, monospace',
                          textTransform: 'uppercase',
                        }}>{st.label}</span>
                      </div>
                    );
                  })}
                </div>

                {/* Footer status */}
                <div style={{
                  marginTop: 16,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 10,
                  color: 'var(--ink-3)',
                  letterSpacing: '0.1em',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(0.75 0.15 145)', boxShadow: '0 0 6px oklch(0.75 0.15 145)' }} />
                    全プラット同期中 ── 最終同期 2分前
                  </div>
                  <div>選択: {current.sku} / {current.name}</div>
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div style={{
            marginTop: 20,
            textAlign: 'center',
            fontFamily: 'Noto Sans JP, sans-serif',
            fontSize: 12,
            color: 'var(--ink-3)',
            letterSpacing: '0.05em',
          }}>
            ※こちらはイメージ図です。実際の画面は異なる場合があります。
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Dashboard = Dashboard;