const { useState: uS, useEffect: uE, useRef: uR } = window.React; /* Three hero variations */ /* ─── Hero A — Manifesto split (title left, single mac window right) ─── */ const HeroA = ({ lang }) => { const sectionRef = uR(null); const dragRef = uR({ active: false, startX: 0, startY: 0, origX: 0, origY: 0 }); const [pos, setPos] = uS({ x: 0, y: 0 }); const [dragging, setDragging] = uS(false); const clamp = (x, y) => { const sec = sectionRef.current; if (!sec) return { x, y }; const sw = sec.offsetWidth; const sh = sec.offsetHeight; // Left boundary: 42% of section (don't overlap title area) const minX = -(sw * 0.12); const maxX = sw * 0.22; const minY = -(sh * 0.28); const maxY = sh * 0.28; return { x: Math.max(minX, Math.min(maxX, x)), y: Math.max(minY, Math.min(maxY, y)) }; }; const onDown = (e) => { if (e.button !== 0) return; e.preventDefault(); dragRef.current = { active: true, startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y }; setDragging(true); }; uE(() => { const onMove = (e) => { const d = dragRef.current; if (!d.active) return; const dx = e.clientX - d.startX; const dy = e.clientY - d.startY; setPos(clamp(d.origX + dx, d.origY + dy)); }; const onUp = () => { dragRef.current.active = false; setDragging(false); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; }, []); return (
LLMINDMAP · v2.4 · {lang === "ja" ? "2026年春" : "SPRING 2026"}

{lang === "ja" ? ( <>そのチャット、構造見えてる？ ) : ( <>Chats, visualized. )}

{lang === "ja" ? "ChatGPT、Claude、Geminiの会話を、編集可能なマインドマップへ。時間を切り離し、構造で考える。" : "LLMindMap turns ChatGPT, Claude, and Gemini conversations into editable mindmaps. Cut loose from time. Think in structure."}

{lang === "ja" ? "思考を、地図にする。" : "Map your thinking"} {lang === "ja" ? "しくみを見る" : "See how it works"}
{["ChatGPT", "Claude", "Gemini"].map(p => (
{p} ✓
))}
); }; /* ─── Hero B — Centered display over live map ─────────────────────────── */ const HeroB = ({ lang }) => (
{lang === "ja" ? "思考のブラウザ拡張" : "A BROWSER EXTENSION FOR THINKERS"}

{lang === "ja" ? <>思考は、
線で流れない。 : <>Thought
doesn't move in lines.}

{lang === "ja" ? "LLMとの会話を、編集可能なマインドマップへ。分岐して、統合して、戻って、超える。" : "Turn any LLM conversation into an editable map. Branch. Merge. Return. Surpass."}

{lang === "ja" ? "思考を、地図にする。" : "Map your thinking"} {lang === "ja" ? "実演を見る" : "Watch the demo"}
); /* ─── Hero C — Editorial, all type ─────────────────────────────────────── */ const HeroC = ({ lang }) => (
N° 01 — {lang === "ja" ? "序章" : "MANIFESTO"}

{lang === "ja" ? ( <>追跡せよ。
編集せよ。
そして、
超えろ。 ) : ( <>Trace.
Edit.
Surpass. )}

N° 02

{lang === "ja" ? "あなたのLLM会話を、マインドマップへ。LLMindMapは、時系列の鎖を断ち、思考を構造として扱うためのブラウザ拡張です。" : "LLMindMap is a browser extension that turns your LLM chats into editable mindmaps — so you can think in structure, not just in sequence."}

{lang === "ja" ? "地図にする" : "Start mapping"} {lang === "ja" ? "読む" : "Read more"}
ChatGPT · Claude · Gemini · {lang === "ja" ? "日英対応" : "JA · EN"} · {lang === "ja" ? "ローカル保存" : "LOCAL-FIRST"}
); Object.assign(window, { HeroA, HeroB, HeroC });