// shiwake LP — Phone screen mockups
const { useEffect: useEffectPS } = React;

/* ────────── iOS status bar ────────── */
const PhoneStatus = ({ tint = "#1a1612", time = "9:41" }) => (
  <div style={{
    position: "relative", zIndex: 3,
    padding: "13px 22px 6px",
    fontSize: 13, fontWeight: 600, color: tint, letterSpacing: "-0.01em",
    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif',
    display: "flex", justifyContent: "space-between", alignItems: "center",
  }}>
    <span>{time}</span>
    <span style={{ display: "flex", gap: 5, alignItems: "center" }}>
      <svg width="17" height="11" viewBox="0 0 17 11">
        <rect x="0" y="7" width="3" height="4" rx="0.7" fill={tint}/>
        <rect x="4.5" y="5" width="3" height="6" rx="0.7" fill={tint}/>
        <rect x="9" y="3" width="3" height="8" rx="0.7" fill={tint}/>
        <rect x="13.5" y="0" width="3" height="11" rx="0.7" fill={tint}/>
      </svg>
      <svg width="15" height="11" viewBox="0 0 15 11" fill="none">
        <path d="M7.5 9.5 L10 6.5 Q7.5 5 5 6.5 Z" fill={tint}/>
        <path d="M2 5 Q7.5 0 13 5" stroke={tint} strokeWidth="1.4" strokeLinecap="round"/>
        <path d="M4 7 Q7.5 3 11 7" stroke={tint} strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
      <svg width="26" height="12" viewBox="0 0 26 12">
        <rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke={tint} strokeOpacity="0.45"/>
        <rect x="2" y="2" width="15" height="8" rx="1.5" fill={tint}/>
        <rect x="23" y="3.5" width="1.5" height="5" rx="0.5" fill={tint} fillOpacity="0.45"/>
      </svg>
    </span>
  </div>
);

/* ────────── 1. CAMERA SCREEN (hero + step 1) ────────── */
function CameraScreen() {
  return (
    <div style={{
      width: "100%", height: "100%",
      background: "#0e0c0a", color: "white",
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
    }}>
      {/* Viewfinder */}
      <div style={{
        flex: 1, position: "relative",
        background: "radial-gradient(ellipse at 50% 32%, #3a2e25 0%, #1a1410 55%, #0a0805 100%)",
      }}>
        <PhoneStatus tint="#ffffff" />

        <div style={{
          position: "absolute", top: 60, left: 0, right: 0, textAlign: "center",
          fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.32em",
          color: "rgba(255,255,255,0.55)", textTransform: "uppercase",
        }}>SHIWAKE · CAPTURE</div>

        {/* warm food-shaped blur to suggest the viewfinder content */}
        <div style={{
          position: "absolute", top: "30%", left: "20%", right: "20%", bottom: "32%",
          background: "radial-gradient(ellipse, rgba(196,106,78,0.45) 0%, rgba(196,106,78,0.15) 50%, transparent 75%)",
          filter: "blur(6px)",
        }}></div>
        <div style={{
          position: "absolute", top: "45%", left: "32%", right: "32%", bottom: "40%",
          background: "radial-gradient(ellipse, rgba(255,220,170,0.35), transparent 70%)",
          filter: "blur(4px)",
        }}></div>

        {/* Frame corner brackets */}
        <FrameCorner pos={{ top: 96, left: 22 }} dir="tl" />
        <FrameCorner pos={{ top: 96, right: 22 }} dir="tr" />
        <FrameCorner pos={{ bottom: 60, left: 22 }} dir="bl" />
        <FrameCorner pos={{ bottom: 60, right: 22 }} dir="br" />

        {/* Hint pill */}
        <div style={{
          position: "absolute", bottom: 22, left: 0, right: 0,
          display: "flex", justifyContent: "center",
        }}>
          <div style={{
            padding: "6px 14px",
            background: "rgba(255,255,255,0.08)",
            border: "1px solid rgba(255,255,255,0.18)",
            borderRadius: 999,
            fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
            fontFamily: "var(--mono)",
            color: "rgba(255,255,255,0.85)",
          }}>長押しで話す · 1 tap to shoot</div>
        </div>
      </div>

      {/* Bottom control panel — split mic | camera */}
      <div style={{
        padding: "26px 24px 32px",
        background: "linear-gradient(180deg, #08060a 0%, #050309 100%)",
        display: "grid", gridTemplateColumns: "1fr 1fr",
        position: "relative",
      }}>
        <span style={{
          position: "absolute", top: "18%", bottom: "32%", left: "50%",
          width: 1, background: "rgba(255,255,255,0.08)",
        }}></span>

        {/* Mic */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 64, height: 64, borderRadius: "50%",
            background: "var(--accent)",
            boxShadow: "0 0 0 6px rgba(196,106,78,0.15), 0 0 0 12px rgba(196,106,78,0.06)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="22" height="28" viewBox="0 0 22 28" fill="none">
              <rect x="6" y="2" width="10" height="16" rx="5" fill="white"/>
              <path d="M2 12 v1.5 a9 9 0 0 0 18 0 v-1.5" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
              <line x1="11" y1="23" x2="11" y2="26" stroke="white" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </div>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 8.5, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.78)", textTransform: "uppercase",
          }}>長押しで話す</span>
        </div>

        {/* Camera */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 64, height: 64, borderRadius: "50%",
            background: "transparent",
            border: "2.5px solid white",
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: 4,
          }}>
            <div style={{
              width: "100%", height: "100%", borderRadius: "50%", background: "white",
            }}></div>
          </div>
          <span style={{
            fontFamily: "var(--mono)", fontSize: 8.5, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.78)", textTransform: "uppercase",
          }}>撮影 · shoot</span>
        </div>
      </div>
    </div>
  );
}

function FrameCorner({ pos, dir }) {
  const len = 12, w = 1.2, c = "rgba(255,255,255,0.6)";
  const arms = {
    tl: { h: { top: 0, left: 0 }, v: { top: 0, left: 0 } },
    tr: { h: { top: 0, right: 0 }, v: { top: 0, right: 0 } },
    bl: { h: { bottom: 0, left: 0 }, v: { bottom: 0, left: 0 } },
    br: { h: { bottom: 0, right: 0 }, v: { bottom: 0, right: 0 } },
  }[dir];
  return (
    <div style={{ position: "absolute", width: 16, height: 16, ...pos }}>
      <span style={{ position: "absolute", height: w, width: len, background: c, ...arms.h }}></span>
      <span style={{ position: "absolute", width: w, height: len, background: c, ...arms.v }}></span>
    </div>
  );
}

/* ────────── 2. RECORDING SCREEN (step 2) ────────── */
function RecordingScreen() {
  const bars = [12, 22, 32, 18, 44, 28, 50, 36, 58, 30, 46, 24, 38, 26, 52, 40, 32, 48, 26, 36, 20, 28, 18, 24, 14];
  return (
    <div style={{
      width: "100%", height: "100%",
      background: "#0e0c0a", color: "white",
      display: "flex", flexDirection: "column",
    }}>
      <PhoneStatus tint="#ffffff" />

      <div style={{
        marginTop: 38, display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: "50%",
          background: "#e84a4a",
          boxShadow: "0 0 0 4px rgba(232,74,74,0.18)",
        }}></span>
        <span style={{
          fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.24em",
          color: "rgba(255,255,255,0.8)", textTransform: "uppercase",
        }}>録音中 · recording</span>
      </div>

      <div style={{
        textAlign: "center", marginTop: 4,
        fontFamily: "var(--mono)", fontSize: 26, fontWeight: 500,
        color: "white", letterSpacing: "0.06em",
      }}>00:04</div>

      <div style={{
        marginTop: 22, padding: "0 18px",
        display: "flex", alignItems: "center", justifyContent: "center",
        gap: 3, height: 70,
      }}>
        {bars.map((h, i) => (
          <span key={i} style={{
            width: 3, height: `${h}px`,
            background: i > bars.length - 7 ? "rgba(255,255,255,0.25)" : "var(--accent)",
            borderRadius: 2,
          }}></span>
        ))}
      </div>

      <div style={{ padding: "30px 24px 0", flex: 1 }}>
        <div style={{
          fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.22em",
          color: "rgba(255,255,255,0.45)", textTransform: "uppercase",
          marginBottom: 12,
        }}>Transcript</div>
        <p className="serif" style={{
          fontSize: 18, lineHeight: 1.6, color: "white",
          fontWeight: 400, textWrap: "pretty",
        }}>
          「ラーメン二郎<span style={{ color: "var(--accent)" }}>ヤサイマシマシ</span>食べた、体重 <span style={{ color: "var(--accent)" }}>67.8</span>」
        </p>
        <div style={{ marginTop: 20, display: "flex", gap: 6, flexWrap: "wrap" }}>
          <Chip dot="var(--accent)">Meal</Chip>
          <Chip dot="white">Weight</Chip>
        </div>
      </div>

      <div style={{ padding: "0 0 30px", display: "flex", justifyContent: "center" }}>
        <div style={{
          width: 64, height: 64, borderRadius: "50%",
          background: "transparent", border: "2.5px solid white",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 4,
            background: "#e84a4a",
          }}></div>
        </div>
      </div>
    </div>
  );
}

const Chip = ({ children, dot }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--mono)", fontSize: 8.5, letterSpacing: "0.18em",
    padding: "4px 10px", border: "1px solid rgba(255,255,255,0.2)",
    borderRadius: 999, color: "rgba(255,255,255,0.85)", textTransform: "uppercase",
  }}>
    <span style={{ width: 5, height: 5, borderRadius: "50%", background: dot }}></span>
    {children}
  </span>
);

/* ────────── 3. SUMMARY SCREEN (step 3) ────────── */
function SummaryScreen() {
  const meals = [
    { t: "08:10", n: "おにぎり 2 個 + 無糖ラテ", k: 480 },
    { t: "12:30", n: "ラーメン二郎ヤサイマシマシ", k: 1720, hi: true },
    { t: "19:48", n: "サラダチキン、味噌汁", k: 320 },
  ];
  return (
    <div style={{
      width: "100%", height: "100%",
      background: "var(--bg)", color: "var(--ink)",
      display: "flex", flexDirection: "column",
      overflow: "hidden",
    }}>
      <PhoneStatus tint="var(--ink)" />

      <div style={{ padding: "6px 20px 0" }}>
        <div className="mono-sm" style={{ marginTop: 20, fontSize: 9 }}>TUE · MAY 23</div>
        <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>
          今日のまとめ
        </h3>
      </div>

      <div style={{ padding: "14px 20px 0" }}>
        <div style={{
          background: "var(--paper)",
          border: "1px solid var(--line-2)",
          borderRadius: 12, padding: 14,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div className="mono-sm" style={{ fontSize: 9 }}>INTAKE · 摂取</div>
            <div className="mono-sm" style={{ fontSize: 9, color: "var(--accent)" }}>+ 520 OVER</div>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 4 }}>
            <span className="serif" style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>2,520</span>
            <span className="mono-sm" style={{ fontSize: 9 }}>/ 2,000 kcal</span>
          </div>
          <div style={{ marginTop: 10, height: 5, background: "var(--bg-2)", borderRadius: 99, overflow: "hidden", position: "relative" }}>
            <span style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(90deg, var(--ink) 0% 79%, var(--accent) 79% 100%)",
            }}></span>
            <span style={{ position: "absolute", left: "79%", top: -3, width: 1, height: 11, background: "var(--ink-3)" }}></span>
          </div>

          <div style={{ marginTop: 14 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, alignItems: "baseline" }}>
              <div className="mono-sm" style={{ fontSize: 9 }}>PFC</div>
              <div style={{ display: "flex", gap: 10, fontSize: 10 }}>
                <span><b style={{ color: "var(--ink)", fontWeight: 700 }}>P</b> 84g</span>
                <span><b style={{ color: "var(--accent)", fontWeight: 700 }}>F</b> 72g</span>
                <span><b style={{ color: "#6e8255", fontWeight: 700 }}>C</b> 312g</span>
              </div>
            </div>
            <div style={{ height: 6, borderRadius: 99, overflow: "hidden", display: "flex" }}>
              <span style={{ flex: "0 0 22%", background: "var(--ink)" }}></span>
              <span style={{ flex: "0 0 32%", background: "var(--accent)" }}></span>
              <span style={{ flex: "0 0 46%", background: "#6e8255" }}></span>
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: "14px 20px 0", flex: 1, minHeight: 0 }}>
        <div className="mono-sm" style={{ marginBottom: 8, fontSize: 9 }}>MEALS · 食事</div>
        <div style={{ display: "grid", gap: 1, background: "var(--line-2)", borderRadius: 10, overflow: "hidden", border: "1px solid var(--line-2)" }}>
          {meals.map((m, i) => (
            <div key={i} style={{
              background: m.hi ? "rgba(196,106,78,0.08)" : "var(--paper)",
              padding: "10px 12px",
              display: "grid", gridTemplateColumns: "38px 1fr auto", gap: 8, alignItems: "center",
            }}>
              <span className="mono-sm" style={{ color: "var(--ink)", fontSize: 9 }}>{m.t}</span>
              <span style={{ fontSize: 11, lineHeight: 1.3, color: "var(--ink)" }}>{m.n}</span>
              <span className="serif" style={{ fontSize: 13, color: m.hi ? "var(--accent)" : "var(--ink)", fontWeight: 500 }}>
                {m.k.toLocaleString()}<span className="mono-sm" style={{ marginLeft: 2, fontSize: 8 }}>kcal</span>
              </span>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        marginTop: 12, padding: "10px 24px 18px",
        borderTop: "1px solid var(--line-2)",
        display: "flex", justifyContent: "space-around",
      }}>
        <TabIcon icon="home" active label="今日" />
        <TabIcon icon="list" label="履歴" />
        <TabIcon icon="chart" label="体重" />
        <TabIcon icon="user" label="設定" />
      </div>
    </div>
  );
}

const TabIcon = ({ icon, active, label }) => {
  const c = active ? "var(--ink)" : "var(--ink-3)";
  const icons = {
    home: <path d="M3 11 L12 3 L21 11 V20 H14 V14 H10 V20 H3 Z" stroke={c} strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    list: <g stroke={c} strokeWidth="1.4" strokeLinecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></g>,
    chart: <path d="M4 18 L9 12 L13 15 L20 7" stroke={c} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    user: <g stroke={c} strokeWidth="1.4" fill="none"><circle cx="12" cy="8" r="3.5"/><path d="M4 20 Q12 13 20 20" strokeLinecap="round"/></g>,
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
      <svg width="20" height="20" viewBox="0 0 24 24">{icons[icon]}</svg>
      <span style={{
        fontFamily: "var(--mono)", fontSize: 7.5, letterSpacing: "0.14em",
        color: c, textTransform: "uppercase",
      }}>{label}</span>
    </div>
  );
};

/* ────────── 4. HISTORY LIST SCREEN ────────── */
function HistoryScreen() {
  const days = [
    {
      date: "5月23日", wd: "火",
      total: "2,520 kcal · 67.8 kg",
      items: [
        { t: "23:15", cat: "note", n: "ちょっと食べすぎた。明日は控えめに。" },
        { t: "19:48", cat: "meal", n: "サラダチキン、味噌汁", v: "320" },
        { t: "12:30", cat: "meal", n: "ラーメン二郎 ヤサイマシマシ", v: "1,720" },
        { t: "08:10", cat: "weight", n: "体重を記録", v: "67.8 kg" },
        { t: "08:10", cat: "meal", n: "おにぎり 2 個、無糖ラテ", v: "480" },
      ],
    },
    {
      date: "5月22日", wd: "月",
      total: "1,920 kcal · 67.7 kg",
      items: [
        { t: "20:30", cat: "meal", n: "焼き鮭定食", v: "640" },
        { t: "12:15", cat: "meal", n: "サラダボウル", v: "420" },
      ],
    },
  ];
  const catColor = { meal: "var(--accent)", weight: "var(--ink)", note: "var(--ink-3)" };

  return (
    <div style={{
      width: "100%", height: "100%",
      background: "var(--bg)", color: "var(--ink)",
      display: "flex", flexDirection: "column",
    }}>
      <PhoneStatus tint="var(--ink)" />

      <div style={{ padding: "6px 20px 0" }}>
        <div className="mono-sm" style={{ marginTop: 20, fontSize: 9 }}>HISTORY · 履歴</div>
        <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>
          仕訳の記録
        </h3>
      </div>

      <div style={{ padding: "14px 20px 10px", display: "flex", gap: 5 }}>
        {[
          { l: "すべて", a: true },
          { l: "食事" },
          { l: "体重" },
          { l: "メモ" },
        ].map((f) => (
          <span key={f.l} style={{
            padding: "4px 11px",
            border: "1px solid " + (f.a ? "var(--ink)" : "var(--line)"),
            background: f.a ? "var(--ink)" : "transparent",
            color: f.a ? "var(--bg)" : "var(--ink-2)",
            borderRadius: 99,
            fontSize: 10.5,
          }}>{f.l}</span>
        ))}
      </div>

      <div style={{ flex: 1, overflow: "hidden", padding: "0 20px 18px" }}>
        {days.map((d) => (
          <div key={d.date} style={{ marginBottom: 16 }}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
              padding: "6px 0", borderBottom: "1px solid var(--line-2)", marginBottom: 4,
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                <span className="serif" style={{ fontSize: 14, fontWeight: 500 }}>{d.date}</span>
                <span className="mono-sm" style={{ fontSize: 9 }}>{d.wd}</span>
              </div>
              <div className="mono-sm" style={{ fontSize: 9 }}>{d.total}</div>
            </div>
            {d.items.map((it, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "10px 32px 1fr auto",
                gap: 7, alignItems: "center", padding: "6px 0",
                borderBottom: i < d.items.length - 1 ? "1px dashed var(--line-2)" : "none",
              }}>
                <span style={{ width: 5, height: 5, borderRadius: "50%", background: catColor[it.cat] }}></span>
                <span className="mono-sm" style={{ color: "var(--ink-2)", fontSize: 9 }}>{it.t}</span>
                <span style={{ fontSize: 11, lineHeight: 1.35, color: "var(--ink)" }}>{it.n}</span>
                {it.v && <span className="serif" style={{ fontSize: 11, color: "var(--ink)", fontWeight: 500 }}>{it.v}</span>}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ────────── 5. WEIGHT GRAPH SCREEN ────────── */
function WeightGraphScreen() {
  const actual = [68.4, 68.5, 68.2, 67.9, 68.1, 67.8, 67.6, 67.7, 67.4, 67.2, 67.3, 67.0, 66.8, 66.6];
  const startW = 68.4, idealLossPerDay = 0.14;
  const ideal = actual.map((_, i) => startW - i * idealLossPerDay);

  const w = 280, h = 160, pad = 12;
  const min = 66.0, max = 68.8;
  const xs = actual.map((_, i) => pad + (i * (w - pad * 2)) / (actual.length - 1));
  const ya = actual.map((p) => pad + ((max - p) / (max - min)) * (h - pad * 2));
  const yi = ideal.map((p) => pad + ((max - p) / (max - min)) * (h - pad * 2));
  const pathA = xs.map((x, i) => `${i === 0 ? "M" : "L"} ${x} ${ya[i]}`).join(" ");
  const pathI = xs.map((x, i) => `${i === 0 ? "M" : "L"} ${x} ${yi[i]}`).join(" ");

  return (
    <div style={{
      width: "100%", height: "100%",
      background: "var(--bg)", color: "var(--ink)",
      display: "flex", flexDirection: "column",
    }}>
      <PhoneStatus tint="var(--ink)" />

      <div style={{ padding: "6px 20px 0" }}>
        <div className="mono-sm" style={{ marginTop: 20, fontSize: 9 }}>WEIGHT · 体重</div>
        <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>
          14 日間の推移
        </h3>
      </div>

      <div style={{ padding: "10px 20px 0" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span className="serif" style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.02em" }}>66.6</span>
          <span className="mono-sm" style={{ fontSize: 10 }}>kg</span>
          <span style={{
            marginLeft: "auto",
            padding: "3px 8px", background: "var(--paper)",
            border: "1px solid var(--line-2)", borderRadius: 99,
            fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em",
            color: "var(--accent)",
          }}>− 1.8 kg / 14d</span>
        </div>
      </div>

      <div style={{ padding: "14px 8px 0" }}>
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", display: "block" }}>
          {[0,1,2,3].map((i) => {
            const y = pad + (i * (h - pad * 2)) / 3;
            return <line key={i} x1={pad} x2={w-pad} y1={y} y2={y} stroke="var(--line-2)" strokeWidth="0.6"/>;
          })}
          {/* Ideal pace — iOS Blue dotted */}
          <path d={pathI} fill="none" stroke="#007AFF" strokeWidth="1.4" strokeDasharray="3 3" strokeLinecap="round" opacity="0.85"/>
          {/* Actual line */}
          <path d={pathA} fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          {xs.map((x, i) => (
            <circle key={i} cx={x} cy={ya[i]} r={i === xs.length - 1 ? 3.6 : 1.6}
              fill={i === xs.length - 1 ? "var(--accent)" : "var(--bg)"}
              stroke="var(--accent)" strokeWidth="1"/>
          ))}
        </svg>
      </div>

      <div style={{
        padding: "6px 20px 0",
        display: "flex", gap: 16, justifyContent: "center",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
          <span style={{ width: 14, height: 2, background: "var(--accent)" }}></span>
          <span className="mono-sm" style={{ fontSize: 8.5 }}>実測 / actual</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
          <svg width="14" height="2"><line x1="0" y1="1" x2="14" y2="1" stroke="#007AFF" strokeWidth="2" strokeDasharray="3 3"/></svg>
          <span className="mono-sm" style={{ fontSize: 8.5 }}>理想ペース / pace</span>
        </div>
      </div>

      <div style={{
        margin: "16px 20px 0",
        padding: 12,
        background: "var(--paper)",
        border: "1px solid var(--line-2)",
        borderRadius: 10,
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4,
      }}>
        <WGStat label="Start" v="68.4" u="kg"/>
        <WGStat label="Today" v="66.6" u="kg" hi/>
        <WGStat label="Goal" v="64.0" u="kg"/>
      </div>

      <div style={{ flex: 1 }}></div>

      <div style={{ padding: "0 20px 20px" }}>
        <div className="mono-sm" style={{ textAlign: "center", color: "var(--ink-3)", fontSize: 8.5 }}>
          MAY 10 — MAY 23, 2026
        </div>
      </div>
    </div>
  );
}

const WGStat = ({ label, v, u, hi }) => (
  <div style={{ textAlign: "center", borderRight: label === "Today" ? "none" : undefined }}>
    <div className="mono-sm" style={{ fontSize: 8.5, marginBottom: 2 }}>{label.toUpperCase()}</div>
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "center", gap: 2 }}>
      <span className="serif" style={{ fontSize: 17, fontWeight: 500, color: hi ? "var(--accent)" : "var(--ink)" }}>{v}</span>
      <span className="mono-sm" style={{ fontSize: 7.5 }}>{u}</span>
    </div>
  </div>
);

/* ────────── Phone wrapper ────────── */
function PhoneMock({ children, maxWidth = 360, label }) {
  return (
    <div style={{ width: "100%", maxWidth, position: "relative" }}>
      {label && (
        <div className="mono-sm" style={{ marginBottom: 12, fontSize: 9 }}>{label}</div>
      )}
      <div className="phone-shell">
        <div className="phone-notch"></div>
        <div className="phone-screen">{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  PhoneStatus, PhoneMock,
  CameraScreen, RecordingScreen, SummaryScreen, HistoryScreen, WeightGraphScreen,
});
