/* ═══════════════════════════════════════════════════════════════════════════
LLMChat — generic macOS-window LLM chat mock for the hero.
Original UI (no real-product recreation). Bone/ink/rust palette.
Two exports:
LLMChatWindow — chat alone in a mac window
ChatPlusExtensionWindow — single mac window: chat (left) + extension (right)
═══════════════════════════════════════════════════════════════════════════ */
const TrafficLights = () => (
{["#FF5F57", "#FEBC2E", "#28C840"].map(c => (
))}
);
const INTERACTIVE_CONTENT = {
ja: {
suggestions: [
"リピート率が低下してる原因を整理したい",
"CACの改善施策を構造化して",
"明日のキックオフの論点をまとめて",
],
responses: [
"まず数字を確認しましょう。18ヶ月で42%から31%に落ちているなら、獲得チャネル別に2回目購入率を分解するのが最初の一手です。広告経由と自然流入で差が出ているはずです。",
"CACが1.4倍に膨らんでいるなら、まずファネルのどこで漏れているか特定しましょう。クリエイティブ疲弊、LPの離脱率、CVR低下のどれが主因かで打ち手が変わります。",
"論点は3つに絞るのがおすすめです。現状の数字共有、成長ボトルネックの特定、次の90日で検証すべき仮説。この順番なら自然にCEOの合意を取れます。",
],
},
en: {
suggestions: [
"I want to organize the reasons behind declining repeat rate",
"Structure the CAC improvement measures",
"Summarize the discussion points for tomorrow's kickoff",
],
responses: [
"Let's start with the numbers. If repeat rate dropped from 42% to 31% over 18 months, the first move is breaking down second purchase rate by acquisition channel. There's likely a gap between paid and organic.",
"If CAC is up 1.4x, first identify where the funnel is leaking. Creative fatigue, landing page drop off, or CVR decline each call for a different playbook.",
"I'd narrow it to three points: current metrics review, identifying the growth bottleneck, and the hypotheses to test in the next 90 days. That sequence makes it easy to get CEO alignment.",
],
},
trees: [
{
hub: { ja: "リピート率低下", en: "Repeat Rate Decline" },
branches: [
{ ja: "チャネル別分解", en: "By Channel", leaves: [{ ja: "広告経由", en: "Paid" }, { ja: "自然流入", en: "Organic" }] },
{ ja: "2回目購入率", en: "2nd Purchase", leaves: [{ ja: "42%→31%", en: "42%→31%" }] },
{ ja: "時系列推移", en: "Timeline", leaves: [{ ja: "18ヶ月", en: "18 months" }] },
],
},
{
hub: { ja: "CAC改善", en: "CAC Improvement" },
branches: [
{ ja: "ファネル分析", en: "Funnel Analysis", leaves: [{ ja: "LP離脱率", en: "LP Drop Off" }, { ja: "CVR低下", en: "CVR Decline" }] },
{ ja: "クリエイティブ", en: "Creative", leaves: [{ ja: "疲弊度", en: "Fatigue" }] },
{ ja: "打ち手", en: "Playbook", leaves: [{ ja: "チャネル別", en: "Per Channel" }] },
],
},
{
hub: { ja: "キックオフ論点", en: "Kickoff Agenda" },
branches: [
{ ja: "数字共有", en: "Metrics Review", leaves: [{ ja: "現状KPI", en: "Current KPIs" }] },
{ ja: "ボトルネック", en: "Bottleneck", leaves: [{ ja: "成長阻害", en: "Growth Blocker" }, { ja: "優先度", en: "Priority" }] },
{ ja: "仮説検証", en: "Hypotheses", leaves: [{ ja: "90日計画", en: "90 Day Plan" }] },
],
},
],
};
const AutoTypeInput = ({ suggestions, onConfirm, onIndexChange }) => {
const [idx, setIdx] = React.useState(0);
const [charPos, setCharPos] = React.useState(0);
const [erasing, setErasing] = React.useState(false);
const [confirmed, setConfirmed] = React.useState(false);
const [paused, setPaused] = React.useState(false);
const timerRef = React.useRef(null);
const text = suggestions[idx] || "";
const displayed = confirmed ? text : text.slice(0, charPos);
React.useEffect(() => {
if (confirmed) return;
if (paused) {
timerRef.current = setTimeout(() => {
setPaused(false);
setErasing(true);
}, 2000);
return () => clearTimeout(timerRef.current);
}
if (erasing) {
if (charPos <= 0) {
timerRef.current = setTimeout(() => {
const nextIdx = (idx + 1) % suggestions.length;
setErasing(false);
setIdx(nextIdx);
setCharPos(0);
if (onIndexChange) onIndexChange(nextIdx);
}, 300);
return () => clearTimeout(timerRef.current);
}
timerRef.current = setTimeout(() => setCharPos(charPos - 1), 20);
return () => clearTimeout(timerRef.current);
}
if (charPos < text.length) {
timerRef.current = setTimeout(() => setCharPos(charPos + 1), 40);
return () => clearTimeout(timerRef.current);
}
setPaused(true);
}, [charPos, erasing, paused, confirmed, idx, text.length]);
const handleClick = () => {
if (confirmed) return;
setConfirmed(true);
setCharPos(text.length);
clearTimeout(timerRef.current);
onConfirm(idx);
};
return (
{displayed}
{!confirmed && (
)}
);
};
const DEMO_COLORS = ["#C9583C", "#B8864A", "#7A9A85", "#536A8A", "#8F6FA3"];
/* DemoMindmap — progressive reveal matching the real product (mindmap.js).
The actual product uses D3 data-join + transitions: it starts with just
the root, then reveals children one-by-one via setTimeout → _update().
Each _update() triggers D3 enter transitions: links interpolate from
the parent position to the target (300ms cubicOut), dots grow from r=0
to final r (180ms easeBackOut overshoot 1.2), labels appear after dots.
This component replicates that with React state: a `revealStep` counter
advances via setTimeout, and elements render only when their step has
been reached. CSS transitions on `r` and `opacity` handle the smooth
interpolation. Curved quadratic paths match the product's radial links. */
const DemoMindmap = ({ tree, lang, animate }) => {
if (!tree) return null;
const hubLabel = tree.hub[lang] || tree.hub.en;
const W = 320, H = 280;
const cx = W / 2, cy = H / 2;
const R1 = 70, R2 = 120;
const branches = tree.branches;
const angleStep = (2 * Math.PI) / branches.length;
const startAngle = -Math.PI / 2;
// Product timing: 250ms between each branch reveal, 300ms between phases
const PER_NODE = 250;
// Build the reveal schedule — same as the product's progressive reveal:
// step 0: hub only
// step 1..N: each depth-1 branch (one by one)
// step N+1..M: each depth-2 leaf group (one by one)
const totalBranches = branches.length;
const totalSteps = 1 + totalBranches + branches.filter(b => b.leaves && b.leaves.length).length;
const [step, setStep] = React.useState(animate ? 0 : totalSteps);
React.useEffect(() => {
if (!animate) return;
setStep(0);
const timers = [];
// Step 0: hub appears immediately
// Steps 1..N: branches revealed one by one (400ms initial delay, 250ms apart)
for (let i = 0; i < totalBranches; i++) {
timers.push(setTimeout(() => setStep(s => Math.max(s, 1 + i)), 400 + i * PER_NODE));
}
// Steps N+1..M: leaf groups revealed one by one (300ms after last branch, 250ms apart)
const leafStart = 400 + totalBranches * PER_NODE + 300;
let leafIdx = 0;
for (let i = 0; i < totalBranches; i++) {
if (branches[i].leaves && branches[i].leaves.length) {
timers.push(setTimeout(() => setStep(s => Math.max(s, 1 + totalBranches + leafIdx)),
leafStart + leafIdx * PER_NODE));
leafIdx++;
}
}
return () => timers.forEach(clearTimeout);
}, [animate, tree]);
// Helper: quadratic curve from (x1,y1) to (x2,y2) with perpendicular bulge
const curvedPath = (x1, y1, x2, y2, curlFactor) => {
const mx = (x1 + x2) / 2, my = (y1 + y2) / 2;
const dx = x2 - x1, dy = y2 - y1;
const len = Math.sqrt(dx * dx + dy * dy) || 1;
// Perpendicular offset for the control point
const px = -dy / len * curlFactor;
const py = dx / len * curlFactor;
return "M " + x1 + " " + y1 + " Q " + (mx + px) + " " + (my + py) + " " + x2 + " " + y2;
};
// Track which leaf groups have been revealed (for leaf step mapping)
let leafGroupIdx = 0;
const branchLeafStep = branches.map(b => {
if (b.leaves && b.leaves.length) {
return 1 + totalBranches + leafGroupIdx++;
}
return Infinity;
});
return (
);
};
const SAMPLE = {
ja: [
{ who: "user", t: "明日クライアント（D2Cのスキンケアブランド、年商18億）と販売戦略のキックオフ。CACが去年の1.4倍に膨らんでて、CEOは「広告を倍にしてでも成長を取り戻したい」って言ってる。私はそれは違うと思ってる。話の入り方どうしよう。" },
{ who: "ai", t: "CACが1.4倍になってる時点で、**広告倍プッシュは赤字を倍にするだけ**の確率が高いです。けど、CEOの「成長を取り戻したい」を否定から入ると刺さらないので、入り方を一段ずらすのが良さそう。\n\n私ならこの順:\n\n1. **同意できる事実から始める** — 「成長は取り戻すべき」ここは合意。\n2. **問題の置き換え** — 議題は『広告予算をどうするか』ではなく『1人の顧客から取り戻すべきLTV』。\n3. **数字で見せる** — CAC 1.4倍 + LTV横ばい = ペイバック期間が何ヶ月延びてる？\n\nLTV側のデータって直近で見れる状態ですか？" },
{ who: "user", t: "見れる。リピート率が18ヶ月で42% → 31%に落ちてる。新規は獲れてるけど2回目が来ない。" },
{ who: "ai", t: "それなら話はシンプルです — **獲得の問題じゃなくて定着の問題**。広告を倍にすると、漏れてるバケツに水を倍そそぐ構図になります。\n\n1枚目のスライドはこういう構成が綺麗:\n\n- **左**: CAC推移（1.4倍）\n- **右**: 2回目購入率（42% → 31%）\n- **下**: ペイバック期間 8ヶ月 → 14ヶ月（仮）\n\n結論を言葉にしないで、CEOに**自分で気づかせる**のがコツ。" },
],
en: [
{ who: "user", t: "Got a kickoff tomorrow with a client — D2C skincare brand, ~$12M revenue. Their CAC is up 1.4× YoY and the CEO wants to \"double down on paid to get growth back.\" I think that's wrong. How do I open the conversation?" },
{ who: "ai", t: "If CAC is already 1.4× and you double paid, you're most likely **doubling the bleed, not the growth.** But opening with \"you're wrong\" doesn't land — you need to redirect, not contradict.\n\nI'd structure the open like this:\n\n1. **Agree on what's true** — \"Growth needs to come back\" — full agreement, lock it in.\n2. **Reframe the question** — the real question isn't \"how much to spend on paid\", it's \"how much LTV are we leaving on the table per customer?\"\n3. **Let the numbers speak** — CAC 1.4× + flat LTV = payback period stretched by how many months?\n\nDo you have LTV / repeat-rate data you can pull before tomorrow?" },
{ who: "user", t: "Yes — repeat rate over 18 months has fallen from 42% to 31%. They're acquiring fine, customers just aren't coming back for a second purchase." },
{ who: "ai", t: "Then the story tells itself — **this isn't an acquisition problem, it's a retention problem.** Doubling ad spend is pouring twice the water into a leaking bucket.\n\nFor your opening slide:\n\n- **Left**: CAC trend (1.4×)\n- **Right**: 2nd-purchase rate (42% → 31%)\n- **Bottom**: Payback period — likely 8mo → ~14mo\n\nDon't say the conclusion out loud — let the CEO see it." },
],
};
const renderRich = (text) => {
const lines = text.split("\n");
const out = [];
let listBuf = [];
const flushList = () => {
if (!listBuf.length) return;
out.push({listBuf.map((l, i) =>
{renderInline(l)}
)});
listBuf = [];
};
lines.forEach((l, i) => {
const m = l.match(/^\d+\.\s+(.*)$/);
if (m) listBuf.push(m[1]);
else {
flushList();
if (l.trim() === "") out.push();
else out.push(