@godxjp/ui 28.12.0 → 29.0.0

package/docs/showcase/caimono-price-comparison.tsx

@@ -0,0 +1,911 @@
+/** Caimono comparison composition. Public components and scoped token overrides only.
+ * Fixed source snapshot, not live merchant data. See /tmp/caimono-gaps.md for fidelity limits.
+ */
+import * as React from "react";
+import { Button, Heading, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  DataTable,
+  Descriptions,
+  EmptyState,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import {
+  Checkbox,
+  FormField,
+  NumberInput,
+  SearchInput,
+  Segmented,
+  Select,
+} from "@godxjp/ui/data-entry";
+import {
+  Alert,
+  AlertDescription,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@godxjp/ui/feedback";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+import { AreaChart } from "@godxjp/ui/charts";
+import { useTranslation } from "@godxjp/ui/i18n";
+
+// CUSTOMER-THEMING.md permits per-subtree custom-property overrides.
+// No ordinary CSS declarations; reapply to portalled content because it leaves the page scope.
+const theme = {
+  "--primary": "20.86956522 100.00000000% 36.07843137%", // #B84000, accessible action, not decorative orange
+  "--primary-hover": "20.92105263 100.00000000% 29.80392157%",
+  "--primary-foreground": "0 0% 100%",
+  "--ring": "218.00000000 75.63025210% 46.66666667%",
+  "--focus-ring-color": "218.00000000 75.63025210% 46.66666667%",
+  "--background": "210.00000000 22.22222222% 96.47058824%",
+  "--foreground": "220.27397260 76.84210526% 18.62745098%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "220.27397260 76.84210526% 18.62745098%",
+  "--popover": "0 0% 100%",
+  "--popover-foreground": "220.27397260 76.84210526% 18.62745098%",
+  "--muted-foreground": "215.67567568 18.40796020% 39.41176471%",
+  "--border": "214.28571429 26.92307692% 89.80392157%",
+  "--input": "216.36363636 14.79820628% 56.27450980%",
+  "--accent": "32.72727273 100.00000000% 95.68627451%",
+  "--accent-foreground": "220.27397260 76.84210526% 18.62745098%",
+  "--text-primary": "20.86956522 100.00000000% 36.07843137%",
+  "--success": "155.55555556 69.23076923% 22.94117647%",
+  "--text-success": "155.55555556 69.23076923% 22.94117647%",
+  "--text-warning": "37.20930233 100.00000000% 25.29411765%",
+  "--text-error": "353.19148936 64.97695853% 42.54901961%",
+  "--text-info": "218.10810811 74.74747475% 38.82352941%",
+  "--radius-md": "10px",
+  "--radius-xl": "16px",
+  "--control-radius": "var(--radius-md)",
+  "--button-radius": "var(--radius-md)",
+  "--card-radius": "var(--radius-xl)",
+  "--radius-2xl": "24px",
+  "--card-shadow": "0 12px 36px rgb(11 35 84 / .06)",
+  "--font-sans-base":
+    'Inter, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  "--font-sans-ja":
+    '"Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif',
+  "--chart-1": "#B84000",
+} as React.CSSProperties;
+
+const snapshot = Date.parse("2026-09-13T09:00:00Z");
+type Offer = {
+  id: string;
+  merchant: string;
+  model: string;
+  variant: string;
+  condition: string;
+  price: number;
+  shipping: { Tokyo: number | null; Osaka: number | null };
+  points: number;
+  observedAt: string;
+  eta: number | null;
+  inStock: boolean;
+  coupon?: number;
+};
+const common = { model: "AERO-H1", variant: "black", condition: "new", inStock: true };
+const offers: Offer[] = [
+  {
+    ...common,
+    id: "mori",
+    merchant: "mori",
+    price: 24800,
+    shipping: { Tokyo: 600, Osaka: 1000 },
+    points: 248,
+    observedAt: "2026-09-13T08:48:00Z",
+    eta: 1,
+  },
+  {
+    ...common,
+    id: "aoi",
+    merchant: "aoi",
+    price: 25100,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 251,
+    observedAt: "2026-09-13T08:42:00Z",
+    eta: 2,
+  },
+  {
+    ...common,
+    id: "hako",
+    merchant: "hako",
+    price: 25500,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 255,
+    observedAt: "2026-09-13T08:38:00Z",
+    eta: 3,
+    coupon: 1000,
+  },
+  {
+    ...common,
+    id: "kumo",
+    merchant: "kumo",
+    price: 23900,
+    shipping: { Tokyo: null, Osaka: null },
+    points: 239,
+    observedAt: "2026-09-13T08:20:00Z",
+    eta: 2,
+  },
+  {
+    ...common,
+    id: "haru",
+    merchant: "haru",
+    price: 22900,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 229,
+    observedAt: "2026-09-11T08:00:00Z",
+    eta: 4,
+  },
+  {
+    ...common,
+    id: "mika",
+    merchant: "mika",
+    price: 21800,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 218,
+    observedAt: "2026-09-13T08:30:00Z",
+    eta: null,
+    inStock: false,
+  },
+  {
+    ...common,
+    id: "neko-used",
+    merchant: "neko",
+    condition: "used",
+    price: 18800,
+    shipping: { Tokyo: 500, Osaka: 800 },
+    points: 0,
+    observedAt: "2026-09-13T08:40:00Z",
+    eta: 3,
+  },
+  {
+    ...common,
+    id: "aoi-cream",
+    merchant: "aoi",
+    variant: "cream",
+    price: 26100,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 261,
+    observedAt: "2026-09-13T08:42:00Z",
+    eta: 2,
+  },
+  {
+    ...common,
+    id: "mori-cream",
+    merchant: "mori",
+    variant: "cream",
+    price: 25700,
+    shipping: { Tokyo: 600, Osaka: 1000 },
+    points: 257,
+    observedAt: "2026-09-13T08:48:00Z",
+    eta: 1,
+  },
+  {
+    ...common,
+    id: "wrong-model",
+    merchant: "other",
+    model: "AERO-H2",
+    price: 9000,
+    shipping: { Tokyo: 0, Osaka: 0 },
+    points: 0,
+    observedAt: "2026-09-13T08:48:00Z",
+    eta: 1,
+  },
+];
+const history = {
+  "30": [
+    ["2026-08-15", 27500],
+    ["2026-08-19", 26800],
+    ["2026-08-23", 26800],
+    ["2026-08-27", 27200],
+    ["2026-08-31", 25900],
+    ["2026-09-04", 26100],
+    ["2026-09-09", 25500],
+    ["2026-09-13", 25100],
+  ],
+  "90": [
+    ["2026-06-16", 29900],
+    ["2026-06-29", 28900],
+    ["2026-07-12", 29100],
+    ["2026-07-25", 27900],
+    ["2026-08-07", 28100],
+    ["2026-08-20", 26900],
+    ["2026-09-02", 25700],
+    ["2026-09-13", 25100],
+  ],
+} satisfies Record<string, [string, number][]>;
+
+export default function CaimonoPriceComparison() {
+  const { t, locale } = useTranslation();
+  // Re-declare derived font aliases in this nested scope; root aliases are already resolved.
+  const font =
+    locale === "ja"
+      ? theme["--font-sans-ja" as keyof React.CSSProperties]
+      : theme["--font-sans-base" as keyof React.CSSProperties];
+  const scopedTheme = {
+    ...theme,
+    "--font-family-sans": font,
+    "--font-family-body": font,
+    "--font-family-display": font,
+  } as React.CSSProperties;
+  const [variant, setVariant] = React.useState("black");
+  const [condition, setCondition] = React.useState("new");
+  const [destination, setDestination] = React.useState<"Tokyo" | "Osaka">("Tokyo");
+  const [query, setQuery] = React.useState("");
+  const [sort, setSort] = React.useState("total");
+  const [free, setFree] = React.useState(false);
+  const [stock, setStock] = React.useState(false);
+  const [fast, setFast] = React.useState(false);
+  const [coupon, setCoupon] = React.useState(false);
+  const [period, setPeriod] = React.useState<"30" | "90">("30");
+  const [dialog, setDialog] = React.useState<"offer" | "alert" | "quote" | null>(null);
+  const [selectedId, setSelectedId] = React.useState<string | null>(null);
+  const [threshold, setThreshold] = React.useState<number | null>(25000);
+  const [notice, setNotice] = React.useState("");
+  const [favorite, setFavorite] = React.useState(false);
+  const favoriteKey = `caimono:favorite:JP:AERO-H1:${variant}:${condition}`;
+  React.useEffect(() => {
+    try {
+      setFavorite(localStorage.getItem(favoriteKey) === "1");
+    } catch {
+      setFavorite(false);
+    }
+  }, [favoriteKey]);
+  /*
+   * THE MARKET, not the viewer. A Japanese price-comparison board quotes JPY and stamps Tokyo time
+   * whichever language it is read in — translating the page does not move the shop. Both live here
+   * as market data so `Intl` derives the formatting from a value rather than from a literal at the
+   * call site, which is what `check:no-consumer-coupling` asks for and why it flagged the literals.
+   */
+  const MARKET = { currency: "JPY", timeZone: "Asia/Tokyo" } as const;
+
+  const money = (value: number | null) =>
+    value === null
+      ? t("caimono.unknownTotal")
+      : new Intl.NumberFormat(locale, { style: "currency", currency: MARKET.currency }).format(
+          value,
+        );
+  const number = (value: number) => new Intl.NumberFormat(locale).format(value);
+  const date = (value: string | number) =>
+    new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      timeZone: MARKET.timeZone,
+    }).format(new Date(value));
+  const evaluate = (offer: Offer, applyCoupon = coupon) => {
+    const shipping = offer.shipping[destination];
+    const discount =
+      applyCoupon && snapshot < Date.parse("2026-09-14T09:00:00Z") ? (offer.coupon ?? 0) : 0;
+    const age = snapshot - Date.parse(offer.observedAt);
+    const reason =
+      !Number.isFinite(age) || age < 0 || age > 86400000
+        ? "stale"
+        : !offer.inStock
+          ? "outStock"
+          : shipping === null
+            ? "needsShipping"
+            : null;
+    return {
+      ...offer,
+      shippingCost: shipping,
+      discount,
+      total: shipping === null ? null : offer.price + shipping - discount,
+      reason,
+    };
+  };
+  const scoped = offers.filter(
+    (o) => o.model === "AERO-H1" && o.variant === variant && o.condition === condition,
+  );
+  const rows = scoped
+    .map((o) => evaluate(o))
+    .filter(
+      (o) =>
+        t(`caimono.merchants.${o.merchant}`)
+          .toLocaleLowerCase(locale)
+          .includes(query.toLocaleLowerCase(locale)) &&
+        (!free || o.shippingCost === 0) &&
+        (!stock || o.inStock) &&
+        (!fast || o.eta === 1),
+    )
+    .sort(
+      (a, b) =>
+        Number(!!a.reason) - Number(!!b.reason) ||
+        (sort === "delivery"
+          ? (a.eta ?? Infinity) - (b.eta ?? Infinity)
+          : (a.total ?? Infinity) - (b.total ?? Infinity)) ||
+        a.id.localeCompare(b.id),
+    );
+  const eligible = rows.filter((o) => !o.reason && o.total !== null);
+  const minimum = eligible.length ? Math.min(...eligible.map((o) => o.total!)) : null;
+  const best = eligible.find((o) => o.total === minimum);
+  const selected = scoped.find((o) => o.id === selectedId);
+  const detail = selected ? evaluate(selected) : undefined;
+  const reset = () => {
+    setQuery("");
+    setFree(false);
+    setStock(false);
+    setFast(false);
+  };
+  const openOffer = (id: string) => {
+    setSelectedId(id);
+    setNotice("");
+    setDialog("offer");
+  };
+  const columns: ColumnDef<(typeof rows)[number]>[] = [
+    {
+      key: "merchant",
+      header: t("caimono.shop"),
+      render: (o) => (
+        <Flex direction="col" gap="xs">
+          <Text weight="semibold">{t(`caimono.merchants.${o.merchant}`)}</Text>
+          <Text size="sm" tone="muted">
+            {t(`caimono.${o.condition}`)}
+          </Text>
+          <Text size="xs" tone="muted">
+            {t("caimono.observed", { date: date(o.observedAt) })}
+          </Text>
+        </Flex>
+      ),
+    },
+    {
+      key: "total",
+      header: t("caimono.cash"),
+      render: (o) => (
+        <Flex direction="col" gap="xs">
+          <Text size="xl" weight="bold" tabular>
+            {money(o.total)}
+          </Text>
+          {!o.reason && o.total === minimum ? (
+            <Badge tone="success">{t("caimono.best")}</Badge>
+          ) : o.reason ? (
+            <Text size="sm" tone="warning">
+              {t(`caimono.${o.reason}`)}
+            </Text>
+          ) : null}
+          <Text size="sm" tone="muted">
+            {t("caimono.itemValue", { amount: money(o.price) })}
+          </Text>
+          <Text size="sm" tone="muted">
+            {t("caimono.shippingValue", {
+              amount: o.shippingCost === null ? t("caimono.unknown") : money(o.shippingCost),
+            })}
+          </Text>
+          {o.discount > 0 && (
+            <Text size="sm" tone="success">
+              {t("caimono.discountValue", { amount: money(o.discount) })}
+            </Text>
+          )}
+        </Flex>
+      ),
+    },
+    {
+      key: "eta",
+      header: t("caimono.delivery"),
+      render: (o) => (
+        <Flex direction="col" gap="xs">
+          <Text>
+            {o.eta === null
+              ? t("caimono.unknown")
+              : t("caimono.eta", {
+                  duration: new Intl.NumberFormat(locale, {
+                    style: "unit",
+                    unit: "day",
+                    unitDisplay: "long",
+                  }).format(o.eta),
+                })}
+          </Text>
+          <Text tone={o.inStock ? "success" : "muted"}>
+            {t(o.inStock ? "caimono.inStock" : "caimono.outStock")}
+          </Text>
+          <Text size="sm" tone="muted">
+            {t(o.condition === "new" ? "caimono.manufacturer" : "caimono.sellerWarranty")}
+          </Text>
+          <Text size="sm" tone="muted">
+            {t("caimono.pointsValue", { count: number(o.points) })}
+          </Text>
+        </Flex>
+      ),
+    },
+    {
+      key: "actions",
+      header: t("caimono.action"),
+      render: (o) => (
+        <Button
+          variant={!o.reason && o.total === minimum ? "default" : "outline"}
+          size="sm"
+          onClick={() => openOffer(o.id)}
+          aria-label={t("caimono.detailFor", { merchant: t(`caimono.merchants.${o.merchant}`) })}
+        >
+          {t("caimono.breakdown")}
+        </Button>
+      ),
+    },
+  ];
+  const chartData = history[period].map(([day, total]) => ({
+    day: new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+      timeZone: MARKET.timeZone,
+    }).format(new Date(`${day}T00:00:00+09:00`)),
+    total,
+  }));
+  return (
+    <Flex direction="col" gap="none" data-tenant="caimono" style={scopedTheme}>
+      <PageContainer
+        title={t("caimono.brand")}
+        subtitle={t("caimono.eyebrow")}
+        extra={<AppSettingPicker kind="locale" appearance="icon" />}
+        stickyFooter
+        footer={
+          <Flex direction="col" gap="sm">
+            <Flex hideFrom="md" justify="between" align="center" gap="sm" wrap>
+              <Text weight="bold" tabular>
+                {minimum === null ? t("caimono.noEligible") : money(minimum)}
+              </Text>
+              <Button disabled={!best} onClick={() => best && openOffer(best.id)}>
+                {t("caimono.bestDetails")}
+              </Button>
+            </Flex>
+            <Text size="sm" tone="muted">
+              {t("caimono.footerNote")}
+            </Text>
+          </Flex>
+        }
+      >
+        <Alert tone="info">
+          <AlertDescription>{t("caimono.demo")}</AlertDescription>
+        </Alert>
+        <Card style={{ "--card-radius": "var(--radius-2xl)" } as React.CSSProperties}>
+          <CardContent solo>
+            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="xl">
+              <Flex direction="col" gap="md">
+                <Badge tone="neutral">{t("caimono.synthetic")}</Badge>
+                <Heading level={1}>{t("caimono.product")}</Heading>
+                <Text tone="muted">{t("caimono.productMeta", { count: number(1) })}</Text>
+                <FormField label={t("caimono.variant")}>
+                  <Select
+                    value={variant}
+                    onValueChange={setVariant}
+                    options={["black", "cream"].map((value) => ({
+                      value,
+                      label: t(`caimono.${value}`),
+                    }))}
+                  />
+                </FormField>
+                <FormField label={t("caimono.condition")}>
+                  <Segmented
+                    value={condition}
+                    onValueChange={setCondition}
+                    options={["new", "used"].map((value) => ({
+                      value,
+                      label: t(`caimono.${value}`),
+                    }))}
+                  />
+                </FormField>
+              </Flex>
+              <Flex direction="col" gap="md">
+                <Text tone="muted">{t("caimono.lowest")}</Text>
+                <Text size="4xl" weight="bold" tabular>
+                  {minimum === null ? t("caimono.noEligible") : money(minimum)}
+                </Text>
+                <Text>{t("caimono.incl")}</Text>
+                <Text size="sm" tone="muted">
+                  {t(coupon ? "caimono.couponActive" : "caimono.couponInactive")}
+                </Text>
+                <Flex gap="sm" wrap>
+                  <Button disabled={!best} onClick={() => best && openOffer(best.id)}>
+                    {t("caimono.bestDetails")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      const totals = scoped
+                        .map((o) => evaluate(o, false))
+                        .filter((o) => !o.reason && o.total !== null)
+                        .map((o) => o.total!);
+                      setThreshold(totals.length ? Math.max(1, Math.min(...totals) - 1000) : 25000);
+                      setNotice("");
+                      setDialog("alert");
+                    }}
+                  >
+                    {t("caimono.priceAlert")}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    aria-pressed={favorite}
+                    onClick={() => {
+                      try {
+                        localStorage.setItem(favoriteKey, favorite ? "0" : "1");
+                        setFavorite(!favorite);
+                        setNotice(t(favorite ? "caimono.favoriteOff" : "caimono.favoriteOn"));
+                      } catch {
+                        setNotice(t("caimono.storageFail"));
+                      }
+                    }}
+                  >
+                    {t(favorite ? "caimono.saved" : "caimono.save")}
+                  </Button>
+                </Flex>
+              </Flex>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+        <Heading level={2}>{t("caimono.offers")}</Heading>
+        <Text tone="muted" size="sm">
+          {t("caimono.snapshot", { date: date(snapshot) })}
+        </Text>
+        <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md">
+          <FormField label={t("caimono.findShop")}>
+            <SearchInput
+              value={query}
+              onValueChange={setQuery}
+              placeholder={t("caimono.searchPlaceholder")}
+            />
+          </FormField>
+          <FormField label={t("caimono.deliverTo")}>
+            <Select
+              value={destination}
+              onValueChange={(v: string) => setDestination(v === "Osaka" ? "Osaka" : "Tokyo")}
+              options={["Tokyo", "Osaka"].map((value) => ({ value, label: t(`caimono.${value}`) }))}
+            />
+          </FormField>
+          <FormField label={t("caimono.sort")}>
+            <Select
+              value={sort}
+              onValueChange={setSort}
+              options={[
+                { value: "total", label: t("caimono.totalSort") },
+                { value: "delivery", label: t("caimono.deliverySort") },
+              ]}
+            />
+          </FormField>
+        </ResponsiveGrid>
+        <Flex gap="md" wrap align="center">
+          <Checkbox checked={free} onCheckedChange={(v) => setFree(v === true)}>
+            {t("caimono.free")}
+          </Checkbox>
+          <Checkbox checked={stock} onCheckedChange={(v) => setStock(v === true)}>
+            {t("caimono.stockOnly")}
+          </Checkbox>
+          <Checkbox checked={fast} onCheckedChange={(v) => setFast(v === true)}>
+            {t("caimono.fast", {
+              duration: new Intl.NumberFormat(locale, {
+                style: "unit",
+                unit: "day",
+                unitDisplay: "long",
+              }).format(1),
+            })}
+          </Checkbox>
+          <Button variant="ghost" size="sm" onClick={reset}>
+            {t("caimono.reset")}
+          </Button>
+        </Flex>
+        <Text role="status" size="sm">
+          {t("caimono.counts", { total: number(rows.length), eligible: number(eligible.length) })}
+        </Text>
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={rows}
+              columns={columns}
+              getRowId={(o) => o.id}
+              rowTone={(o) => (!o.reason && o.total === minimum ? "success" : undefined)}
+              empty={
+                <EmptyState
+                  title={t("caimono.noResultTitle")}
+                  description={t("caimono.noResultBody")}
+                />
+              }
+            />
+          </CardContent>
+        </Card>
+        <Text size="sm" tone="muted">
+          {t("caimono.limitNote")}
+        </Text>
+        <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("caimono.couponTitle")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm">
+                <Checkbox checked={coupon} onCheckedChange={(v) => setCoupon(v === true)}>
+                  {t("caimono.couponLabel", { amount: money(1000) })}
+                </Checkbox>
+                <Text size="sm" tone="muted">
+                  {t("caimono.couponHelp")}
+                </Text>
+                <Text size="sm" tone="muted">
+                  {t("caimono.expires", { date: date("2026-09-14T09:00:00Z") })}
+                </Text>
+              </Flex>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("caimono.whyRank")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm">
+                {["rule1", "rule2", "rule3"].map((key) => (
+                  <Text key={key} size="sm">
+                    {t(`caimono.${key}`)}
+                  </Text>
+                ))}
+                <Text size="sm" tone="muted">
+                  {t("caimono.kaimiBody")}
+                </Text>
+              </Flex>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("caimono.buyAssist")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <Text size="sm" tone="muted">
+                  {t("caimono.buyAssistBody")}
+                </Text>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setNotice("");
+                    setDialog("quote");
+                  }}
+                >
+                  {t("caimono.quote")}
+                </Button>
+              </Flex>
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("caimono.historyTitle")}</CardTitle>
+            <CardDescription>{t("caimono.historyScope")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField label={t("caimono.period")}>
+                <Segmented
+                  value={period}
+                  onValueChange={(v) => setPeriod(v === "90" ? "90" : "30")}
+                  options={[30, 90].map((value) => ({
+                    value: String(value),
+                    label: new Intl.NumberFormat(locale, {
+                      style: "unit",
+                      unit: "day",
+                      unitDisplay: "long",
+                    }).format(value),
+                  }))}
+                />
+              </FormField>
+              <AreaChart
+                label={t("caimono.historyTitle")}
+                showCaption={false}
+                description={t("caimono.historyScope")}
+                data={chartData}
+                categoryKey="day"
+                series={[{ dataKey: "total", label: t("caimono.historyMetric") }]}
+                numberFormat={{ style: "currency", currency: MARKET.currency }}
+              />
+            </Flex>
+          </CardContent>
+          <CardContent flush>
+            <DataTable
+              data={chartData}
+              getRowId={(r) => r.day}
+              columns={[
+                { key: "day", header: t("caimono.date") },
+                {
+                  key: "total",
+                  header: t("caimono.price"),
+                  render: (r) => <Text tabular>{money(r.total)}</Text>,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("caimono.reviewTitle")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg">
+              <Flex direction="col" gap="sm">
+                <Heading level={3}>{t("caimono.editorial")}</Heading>
+                <Text tone="muted">{t("caimono.editorialBody")}</Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Heading level={3}>{t("caimono.community")}</Heading>
+                <Text tone="muted">{t("caimono.communityBody")}</Text>
+              </Flex>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("caimono.specTitle")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Descriptions
+              items={[
+                { label: t("caimono.model"), value: t("caimono.modelValue") },
+                { label: t("caimono.connection"), value: t("caimono.wireless") },
+                { label: t("caimono.unit"), value: number(1) },
+                { label: t("caimono.market"), value: t("caimono.japan") },
+              ]}
+            />
+          </CardContent>
+        </Card>
+        <Text weight="semibold">{t("caimono.disclosure")}</Text>
+        <Text tone="muted" size="sm">
+          {t("caimono.disclosureText", {
+            duration: new Intl.NumberFormat(locale, {
+              style: "unit",
+              unit: "hour",
+              unitDisplay: "long",
+            }).format(24),
+          })}
+        </Text>
+        <Text role="status">{dialog === null ? notice : ""}</Text>
+      </PageContainer>
+      <Dialog
+        open={dialog !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDialog(null);
+            setNotice("");
+          }
+        }}
+      >
+        <DialogContent style={scopedTheme}>
+          <DialogHeader>
+            <DialogTitle>
+              {t(
+                dialog === "alert"
+                  ? "caimono.alertTitle"
+                  : dialog === "quote"
+                    ? "caimono.quoteTitle"
+                    : "caimono.breakdownTitle",
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                dialog === "alert"
+                  ? "caimono.alertBody"
+                  : dialog === "quote"
+                    ? "caimono.quoteBody"
+                    : "caimono.breakdownNote",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            {dialog === "offer" && detail && (
+              <Flex direction="col" gap="md">
+                <Heading level={3}>{t(`caimono.merchants.${detail.merchant}`)}</Heading>
+                <Descriptions
+                  columns={1}
+                  items={[
+                    { label: t("caimono.item"), value: money(detail.price) },
+                    {
+                      label: t("caimono.shipping"),
+                      value:
+                        detail.shippingCost === null
+                          ? t("caimono.unknown")
+                          : money(detail.shippingCost),
+                    },
+                    { label: t("caimono.fee"), value: money(0) },
+                    { label: t("caimono.discount"), value: money(detail.discount) },
+                    { label: t("caimono.cash"), value: money(detail.total) },
+                    { label: t("caimono.points"), value: number(detail.points) },
+                  ]}
+                />
+                <Text tone="muted">{t("caimono.notDeducted")}</Text>
+                {detail.reason && (
+                  <Alert tone="warning">
+                    <AlertDescription>
+                      {t(`caimono.${detail.reason}`)} {t("caimono.notRankedExplain")}
+                    </AlertDescription>
+                  </Alert>
+                )}
+              </Flex>
+            )}
+            {dialog === "alert" && (
+              <Flex direction="col" gap="md">
+                <Text>
+                  {t("caimono.alertScope", {
+                    variant: t(`caimono.${variant}`),
+                    condition: t(`caimono.${condition}`),
+                    destination: t(`caimono.${destination}`),
+                  })}
+                </Text>
+                <FormField label={t("caimono.alertLabel")} helper={t("caimono.alertHelp")}>
+                  <NumberInput
+                    value={threshold}
+                    onValueChange={setThreshold}
+                    min={1}
+                    max={10000000}
+                    precision={0}
+                  />
+                </FormField>
+              </Flex>
+            )}
+            {dialog === "quote" && (
+              <Flex direction="col" gap="md">
+                <Descriptions
+                  columns={1}
+                  items={[
+                    { label: t("caimono.domestic"), value: money(minimum) },
+                    ...["assistFee", "intlShip", "importCost"].map((key) => ({
+                      label: t(`caimono.${key}`),
+                      value: t("caimono.pendingQuote"),
+                    })),
+                    { label: t("caimono.landed"), value: t("caimono.notFinal") },
+                  ]}
+                />
+                <Text tone="muted">{t("caimono.quoteNote")}</Text>
+              </Flex>
+            )}
+            <Text role="status">{notice}</Text>
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDialog(null);
+                setNotice("");
+              }}
+            >
+              {t("caimono.close")}
+            </Button>
+            {dialog === "alert" && (
+              <Button
+                disabled={
+                  threshold === null ||
+                  !Number.isSafeInteger(threshold) ||
+                  threshold < 1 ||
+                  threshold > 10000000
+                }
+                onClick={() => {
+                  try {
+                    localStorage.setItem(
+                      `caimono:alert:${variant}:${condition}:${destination}`,
+                      JSON.stringify({
+                        model: "AERO-H1",
+                        variant,
+                        condition,
+                        destination,
+                        currency: MARKET.currency,
+                        market: "JP",
+                        threshold,
+                        metric: "cash_total_without_conditional_coupon",
+                        createdAt: new Date().toISOString(),
+                      }),
+                    );
+                    setNotice(t("caimono.alertSaved"));
+                  } catch {
+                    setNotice(t("caimono.storageFail"));
+                  }
+                }}
+              >
+                {t("caimono.alertSave")}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Flex>
+  );
+}