const { Section, SectionHeading, Badge } = window.NoahBOXDesignSystem_a2fe90;

function ProductShots() {
  return (
    <Section tone="tint">
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-8)" }}>
        <SectionHeading badge="管理画面" badgeTone="blue">迷わず使える、シンプルな管理画面</SectionHeading>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "var(--space-6)", alignItems: "start" }}>
          {[
            { src: "/assets/reference-app-files-panel.png", label: "ファイル一覧" },
            { src: "/assets/reference-app-invoice-panel.png", label: "請求書管理・検索" },
          ].map((s) => (
            <figure key={s.label} style={{ margin: 0, borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--white)", border: "var(--border-card)", boxShadow: "var(--shadow-card)" }}>
              <img src={s.src} alt={s.label} style={{ display: "block", width: "100%" }} />
              <figcaption style={{ padding: "var(--space-3) var(--space-4)", font: "var(--type-caption)", color: "var(--text-muted)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span>{s.label}</span>
                <Badge tone="cyan">実画面</Badge>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { ProductShots });