const { Section, SectionHeading, FeatureCard, Card } = window.NoahBOXDesignSystem_a2fe90;

function Solutions() {
  return (
    <Section>
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-10)" }}>
        <SectionHeading>
          ノアボックスなら、<span style={{ color: "var(--blue-600)" }}>3つ</span>をまとめて解決
        </SectionHeading>
        {/* Supplied reference diagram (assets/reference-solutions-diagram.png) shown as a
            supporting visual. Note: the caption baked into this image states the 電子帳簿保存法
            deadline as 2023年12月31日, which is now outdated — flag to the user before publishing. */}
        <Card align="center" style={{ maxWidth: 720, margin: "0 auto", width: "100%" }}>
          <img
            src="/assets/reference-solutions-diagram.png"
            alt="noahBOX：請求書管理・ストレージ機能・グループトーク機能を1つにまとめた図"
            style={{ width: "100%", height: "auto", display: "block" }}
          />
        </Card>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-6)" }}>
          <FeatureCard number={1} icon="receipt-japanese-yen" title="請求書管理" description="年月日・取引先・金額ですぐ検索" />
          <FeatureCard number={2} icon="server" title="ストレージ・ファイル送受信" description="専用URLとパスワードで安全に共有" />
          <FeatureCard number={3} icon="messages-square" title="社内チャット" description="部署やチームのやり取りをひとつに" />
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Solutions });