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

const PROBLEMS = [
  { icon: "file-search", title: "請求書が見つからない" },
  { icon: "cloud-download", title: "大容量ファイルを\n安全に送りたい" },
  { icon: "messages-square", title: "社内の情報共有が\nバラバラ" },
];

function Problems() {
  return (
    <Section tone="tint">
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-10)" }}>
        <SectionHeading>こんなお悩み、ありませんか？</SectionHeading>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-6)" }}>
          {PROBLEMS.map((p) => (
            <Card key={p.title} align="center" interactive padding="var(--space-8) var(--space-6)" style={{ gap: "var(--space-5)" }}>
              <IconCircle icon={p.icon} tone="bare" size={72} style={{ color: "var(--blue-500)" }} />
              <h3 style={{ fontSize: "var(--text-subtitle)", whiteSpace: "pre-line", color: "var(--text-strong)" }}>{p.title}</h3>
              <Icon name="chevron-down" size={20} style={{ background: "var(--blue-400)" }} />
            </Card>
          ))}
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Problems });