CSSやJSで作る、U字型に並ぶアイコンナビメニュー

const appData = [{
	id: 'oversight',
	title: '業務の全体像を把握',
	icon: 'layout-grid',
	description: '事務所のあらゆる動きを、一つの画面で明確に可視化します。'
}, {
	id: 'profiles',
	title: 'データの一元管理',
	icon: 'users',
	description: '案件、書類、クライアント情報を安全なハブに集約します。'
}, {
	id: 'portal',
	title: '安全な専用ポータル',
	icon: 'shield-check',
	description: 'クライアントが安心してファイルを共有できる、暗号化された専用スペース。'
}, {
	id: 'drafting',
	title: '書類作成の自動化',
	icon: 'wand-2',
	description: '登録データから遺言書や信託書類を即座に自動生成します。'
}, {
	id: 'ai',
	title: 'AIアシスタント',
	icon: 'sparkles',
	description: 'AIが下書きや要約を担当。ルーチンワークを効率化します。'
}, {
	id: 'billing',
	title: 'スマートな請求管理',
	icon: 'credit-card',
	description: '稼働時間を正確に記録し、請求書の発行を自動化します。'
}];
const fixedPositions = [{
	x: 290,
	y: -130
}, {
	x: 270,
	y: 55
}, {
	x: 130,
	y: 200
}, {
	x: -130,
	y: 200
}, {
	x: -270,
	y: 55
}, {
	x: -290,
	y: -130
}];
let activeIdx = 0;
const navLayer = document.getElementById('kumonosu-nav-layer');
const cardBody = document.getElementById('kumonosu-card-body');
const titleEl = document.getElementById('kumonosu-main-title');
const descEl = document.getElementById('kumonosu-main-desc');

function init() {
	appData.forEach((item, i) => {
		const btn = document.createElement('div');
		btn.className = `kumonosu-nav-item ${i === 0 ? 'kumonosu-active' : ''}`;
		btn.innerHTML = `<i data-lucide="${item.icon}" class="w-8 h-8"></i>`;
		const pos = fixedPositions[i];
		btn.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
		btn.onclick = () => selectItem(i);
		navLayer.appendChild(btn);
	});
	selectItem(0, true);
}

function selectItem(index, isInitial = false) {
	if (!isInitial && activeIdx === index) return;
	activeIdx = index;
	const els = [cardBody, titleEl, descEl];
	if (!isInitial) els.forEach(el => el.classList.add('kumonosu-content-hidden'));
	document.querySelectorAll('.kumonosu-nav-item').forEach((item, i) => {
		item.classList.toggle('kumonosu-active', i === index);
	});
	setTimeout(() => {
		const data = appData[index];
		cardBody.innerHTML = getMockHTML(data.id);
		titleEl.textContent = data.title;
		descEl.textContent = data.description;
		lucide.createIcons();
		if (!isInitial) els.forEach(el => el.classList.remove('kumonosu-content-hidden'));
	}, isInitial ? 0 : 400);
}

function getMockHTML(id) {
	const mocks = {
		oversight: `<div class="p-10 h-full bg-white flex flex-col"><div class="flex justify-between items-center mb-8"><span class="font-bold text-2xl tracking-tight">進行中の案件</span></div><div class="space-y-4 flex-1">${['生前信託の作成', '遺産分割協議', '法人設立登記', '不動産名義変更'].map((name, i) => `<div class="flex items-center justify-between p-5 bg-slate-50 rounded-3xl border border-slate-100/50"><div class="flex flex-col"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">案件番号 #${i+102}</span><span class="font-bold text-slate-700">${name}</span></div><div class="w-8 h-8 rounded-full bg-white flex items-center justify-center border border-slate-200"><i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i></div></div>`).join('')}</div></div>`,
		profiles: `<div class="p-10 h-full flex flex-col justify-center items-center text-center"><div class="w-36 h-36 bg-slate-50 rounded-[48px] flex items-center justify-center mb-8 shadow-inner border border-slate-100"><i data-lucide="user-check" class="w-16 h-16 text-slate-300"></i></div><h3 class="text-3xl font-bold text-slate-800">クライアント管理</h3><p class="text-slate-400 mt-3 text-lg">情報を一箇所に統合します。</p></div>`,
		portal: `<div class="p-10 h-full bg-slate-50 flex flex-col"><div class="space-y-4 flex-1"><div class="bg-white p-6 rounded-[32px] rounded-bl-none shadow-sm border border-slate-100 max-w-[85%] text-sm leading-relaxed">書類に署名しました。</div><div class="bg-slate-900 text-white p-6 rounded-[32px] rounded-br-none shadow-xl self-end max-w-[85%] text-sm leading-relaxed">ありがとうございます。</div></div><div class="h-24 bg-white rounded-[32px] border border-slate-200 flex items-center px-8 shadow-sm"><i data-lucide="message-circle" class="text-slate-300 mr-4"></i><div class="h-4 bg-slate-100 w-1/2 rounded-full"></div></div></div>`,
		drafting: `<div class="p-12 h-full flex flex-col justify-center"><div class="flex items-center space-x-4 mb-8"><div class="w-12 h-12 bg-blue-500 rounded-2xl flex items-center justify-center text-white"><i data-lucide="file-text"></i></div><span class="font-bold text-xl">書類の自動生成</span></div><div class="space-y-6">${[1,2,3].map(i => `<div class="h-2 bg-slate-100 rounded-full w-${i === 2 ? 'full' : '2/3'}"></div>`).join('')}<div class="mt-12 p-8 border-2 border-dashed border-slate-200 rounded-3xl text-center"><p class="text-slate-400 font-bold">PDFを生成中...</p></div></div></div>`,
		ai: `<div class="p-10 h-full bg-slate-900 text-white flex flex-col"><div class="flex items-center space-x-3 mb-12"><div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20"><i data-lucide="zap" class="w-5 h-5 text-white"></i></div><span class="text-lg font-bold tracking-tight">AI アシスタント</span></div><div class="p-8 bg-slate-800/50 rounded-[40px] border border-slate-700/50 flex-1 flex flex-col justify-center"><p class="text-slate-300 leading-relaxed italic text-lg">「最適なプランを提案可能です。」</p></div></div>`,
		billing: `<div class="p-12 h-full flex flex-col justify-center text-center"><span class="text-slate-400 text-sm font-bold uppercase tracking-widest mb-4">未請求金額</span><div class="text-6xl font-black text-slate-900 mb-16 tracking-tighter">¥452,000</div><div class="grid grid-cols-2 gap-6"><button class="py-5 bg-slate-100 rounded-3xl font-bold text-slate-600">履歴</button><button class="py-5 bg-slate-900 text-white rounded-3xl font-bold shadow-xl">一括請求</button></div></div>`
	};
	return mocks[id] || '';
}
window.onload = init;