const { Section, SectionHeading, PricingCard, Button } = window.NoahBOXDesignSystem_a2fe90;

function Pricing() {
  return (
    <Section>
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-10)" }}>
        <SectionHeading lead="初期費用・サポート費用込み。ユーザー数と容量で選べる2プラン。">料金プラン</SectionHeading>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-6)", maxWidth: 760, margin: "0 auto", width: "100%" }}>
          <PricingCard
            name="Starter"
            price="6,600"
            note="100GB・5ユーザー"
            features={["請求書管理", "ファイル送受信", "社内チャット", "電子帳簿保存法対応"]}
            cta={<Button variant="secondary" size="sm" fullWidth>このプランで相談</Button>}
          />
          <PricingCard
            name="Basic"
            price="11,000"
            note="200GB・10ユーザー"
            recommended
            features={["Starterのすべての機能", "共有URLのパスワード保護", "部署別チャットルーム", "優先サポート"]}
            cta={<Button size="sm" fullWidth icon="chevron-right">このプランで相談</Button>}
          />
        </div>
        <p style={{ font: "var(--type-caption)", color: "var(--text-muted)", textAlign: "center" }}>表示価格は税込です。ユーザー・容量の追加はご相談ください。</p>
      </div>
    </Section>
  );
}
Object.assign(window, { Pricing });