/* global React, ReactDOM */ const { useState, useEffect } = React; const C = window.SITE_CONTENT.ja; // ─────────────────────────────────────────────────────────────── // Utility // ─────────────────────────────────────────────────────────────── function cx(...xs) { return xs.filter(Boolean).join(" "); } function fmtUSD(n) { return "$" + n.toLocaleString("en-US"); } function fmtUSDRound(n) { return "$" + Math.round(n).toLocaleString("en-US"); } // ─────────────────────────────────────────────────────────────── // Icon library — minimal line SVGs, 24×24, currentColor // ─────────────────────────────────────────────────────────────── const ICON_PATHS = { cpu: ( ), layers: ( ), megaphone: ( ), dashboard: ( ), process: ( ), group: ( ), growth: ( ), social: ( ), search: ( ), bell: ( ), "check-device": ( ), inbox: ( ), graduation: ( ), package: ( ), "process-2": ( ), campaign: ( ), }; function Icon({ name, className }) { const path = ICON_PATHS[name]; if (!path) return null; return ( ); } // ─────────────────────────────────────────────────────────────── // ImageSlot — gracefully falls back if asset missing // ─────────────────────────────────────────────────────────────── function ImageSlot({ src, label, labelTop, labelBottom, caption, ratio = "16 / 10", className, overlay, dim }) { const [errored, setErrored] = useState(false); const hasImage = !errored && src; return (
{hasImage ? ( {label setErrored(true)} loading="lazy" /> ) : (
)} {hasImage && dim && {caption &&
{caption}
}
); } // ─────────────────────────────────────────────────────────────── // Nav // ─────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 8); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); return (
{C.nav.cta}
{open && (
{C.nav.links.map((l) => ( setOpen(false)}>{l.label} ))} setOpen(false)}>{C.nav.cta}
)}
); } // ─────────────────────────────────────────────────────────────── // Hero — physical infrastructure visual // ─────────────────────────────────────────────────────────────── function Hero() { const hi = C.hero.heroImage; return (
); } // ─────────────────────────────────────────────────────────────── // Section head // ─────────────────────────────────────────────────────────────── function SectionHead({ tag, title, sub }) { return (
{tag}

{title}

{sub &&

{sub}

}
); } // ─────────────────────────────────────────────────────────────── // Why Now — text + execution-shift flow // ─────────────────────────────────────────────────────────────── function WhyNow() { return (
{C.why.body.map((p, i) =>

{p}

)}
{C.why.cards.map((c) => (
{c.num}
{c.t}
{c.d}
))}
{C.why.shift.title}
{C.why.shift.sub}
{C.why.shift.steps.map((s, i) => (
{s.k}
{s.d}
{i < C.why.shift.steps.length - 1 && ( )} ))}
); } // ─────────────────────────────────────────────────────────────── // Problem // ─────────────────────────────────────────────────────────────── function Problem() { return (

{C.problem.body}

    {C.problem.list.map((it, i) => (
  • {it}
    • ))}
); } // ─────────────────────────────────────────────────────────────── // Solution // ─────────────────────────────────────────────────────────────── function Solution() { return (
{C.solution.pillars.map((p) => (
))}
); } // ─────────────────────────────────────────────────────────────── // Trust / Infrastructure Proof — left big image + right 4 cards // ─────────────────────────────────────────────────────────────── function Trust() { return (
{C.trust.blocks.map((b, i) => (
{b.k}
{b.t}
{b.d}
))}
); } // ─────────────────────────────────────────────────────────────── // Units — BOX & Rack with real photos // ─────────────────────────────────────────────────────────────── function Units() { return (
{[C.units.box, C.units.rack].map((u, i) => (
{u.t}
{u.d}
{u.specs.map((s, j) => (
{s.k}
{s.v}
))}
))}
); } // ─────────────────────────────────────────────────────────────── // Partner // ─────────────────────────────────────────────────────────────── function Partner() { return (
{C.partner.flow.map((s, i) => (
{s.step}
{s.t}
{s.d}
{i < C.partner.flow.length - 1 && ( )} ))}
想定される展開領域
{C.partner.apply.map((a, i) => (
))}
{C.hero.ctaPrimary} Partner Programの説明を受ける
); } // ─────────────────────────────────────────────────────────────── // Routing pipeline (5 steps with thumb) // ─────────────────────────────────────────────────────────────── function Routing() { return (
{C.routing.pipeline.map((step, i) => (
{String(i + 1).padStart(2, "0")}
{step.k}
{step.thumb && (
)}
    {step.items.map((it, j) =>
  • {it}
    • )}
{i < C.routing.pipeline.length - 1 && ( )} ))}

{C.routing.notice}

); } // ─────────────────────────────────────────────────────────────── // Use Cases // ─────────────────────────────────────────────────────────────── function UseCases() { return (
{C.usecases.groups.map((g, gi) => (
{String(gi + 1).padStart(2, "0")} {g.h}
{g.items.map((it, i) => (
{it.t}
{it.d}
{it.tags && (
{it.tags.map((tag, j) => ( {tag} ))}
)}
))}
))}
); } // ─────────────────────────────────────────────────────────────── // Audience // ─────────────────────────────────────────────────────────────── function Audience() { return (
{C.audience.cards.map((c, i) => (
{c.cat}
{c.t}
{c.d}
))}
{C.audience.notFor}
); } // ─────────────────────────────────────────────────────────────── // Pricing // ─────────────────────────────────────────────────────────────── function Pricing() { return (
{C.pricing.plans.map((p) => (
{p.highlight &&
Recommended
}
{p.capacity}
{p.capacityNote}
{p.name}
{p.sub}
構成
{p.boxes}
デバイス数
{p.devices}
Fixed Price
{fmtUSD(p.price)}
USD
{p.priceNote &&
{p.priceNote}
}
月次売上目標
{fmtUSD(p.monthly)}
48か月累計目標
{fmtUSD(p.total48)}

{p.purpose}

    {p.features.map((f, i) => (
  • {f}
    • ))}
{p.cta}
))}
    {C.pricing.notes.map((n, i) =>
  • ※ {n}
    • )}
{C.hero.ctaPrimary} 顧問税理士・会計担当者と一緒に相談する
); } // ─────────────────────────────────────────────────────────────── // Revenue + Simulator // ─────────────────────────────────────────────────────────────── function Revenue() { const [planId, setPlanId] = useState("half"); const plan = C.pricing.plans.find(p => p.id === planId) || C.pricing.plans[0]; const sim = C.revenue.simulator; const price = plan.price; const monthly = plan.monthly; const total48 = plan.total48; const targetPct = Math.round((total48 / price) * 100); const chartMax = Math.max(price, total48) * 1.05; return (
{C.revenue.body.map((p, i) =>

{p}

)}
{/* Plan-level summary table */} {C.revenue.summary && (
{C.revenue.summary.title}
{C.revenue.summary.sub}
{C.revenue.summary.head.map((h, i) => )} {C.revenue.summary.rows.map((r, i) => ( ))}
{h}
{r.plan}
{r.sub}
 {r.price} {r.monthly} {r.total}
)}
{sim.title}
{sim.sub}
{C.pricing.plans.map((p) => ( ))}
{sim.labels.plan}
{plan.name}
{plan.boxes} / {plan.devices}
{sim.labels.price}
{fmtUSD(price)}
固定価格 ・ 税抜・ USD
{sim.labels.monthly}
{fmtUSD(monthly)}
販売価格 × 約 2.8% / 月（モデル値）
{sim.labels.total}
{fmtUSD(total48)}
月次目標 × 48か月（モデル値）
{sim.labels.range}
約 {targetPct}%
{sim.labels.rangeLabel}
{sim.labels.chart}
{sim.labels.axisPrice}
{fmtUSD(price)}
{sim.labels.axisTotal}
{fmtUSD(total48)}
    {sim.legend.map((l, i) =>
  • {l}
    • )}
{sim.disclaimer.map((d, i) =>
{d}
)}
期間別の目標値（モデル値）
{C.revenue.table.head.map((h, i) => )} {C.revenue.table.rows.map((r, i) => ( {r.map((c, j) => ( ))} ))}
{h}
{c}
{C.revenue.warning.map((w, i) =>
{w}
)}
{C.hero.ctaPrimary} 顧問税理士・会計担当者と一緒に相談する
); } // ─────────────────────────────────────────────────────────────── // Operating Flow // ─────────────────────────────────────────────────────────────── function OperatingFlow() { return (
); } // ─────────────────────────────────────────────────────────────── // Safety // ─────────────────────────────────────────────────────────────── function Safety() { return (
{C.safety.items.map((it, i) => (
{String(i + 1).padStart(2, "0")}
{it.t}
{it.d}
))}
); } // ─────────────────────────────────────────────────────────────── // FAQ // ─────────────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = useState(0); return (
{C.faq.items.map((it, i) => { const isOpen = open === i; return (
{it.a}
); })}
); } // ─────────────────────────────────────────────────────────────── // Final CTA // ─────────────────────────────────────────────────────────────── function FinalCTA() { return (
{C.finalCta.tag}

{C.finalCta.title.split("\n").map((l, i) => ( {l} ))}

{C.finalCta.sub}

{C.finalCta.primary} {C.finalCta.secondary} {C.finalCta.tertiary}
{C.finalCta.note}
); } // ─────────────────────────────────────────────────────────────── // Footer // ─────────────────────────────────────────────────────────────── function Footer() { return ( ); } // ─────────────────────────────────────────────────────────────── // App // ─────────────────────────────────────────────────────────────── function App() { return (