// Services section.
const { Card: SCard, SectionLabel: SLabel, Badge: SBadge } = window.DesignSystem_82a491;

const SERVICES = [
  { icon: "home", t: "新築", d: "造り手の顔が見える、心のこもった一棟を。木の質感を活かした家づくり。", tags: ["木造", "注文住宅"] },
  { icon: "hammer", t: "増改築", d: "暮らしの変化に合わせて、住まいを建て増し・間取り変更でととのえます。", tags: ["間取り変更"] },
  { icon: "paint-roller", t: "リフォーム", d: "キッチン・浴室・トイレなど、水まわりから内外装まで幅広く対応。", tags: ["水まわり", "内外装"] },
  { icon: "shield-check", t: "耐震補強", d: "大切な住まいを地震から守る、構造の補強・診断を行います。", tags: ["耐震診断"] },
  { icon: "accessibility", t: "介護保険改修", d: "手すりの設置や段差解消など、介護保険を活用したバリアフリー改修。", tags: ["バリアフリー"] },
  { icon: "wrench", t: "メンテナンス", d: "地元ならではの迅速なアフターサービス。建てたあとも末永く。", tags: ["アフター"] },
];

function Services({ bare = false }) {
  const Icon = window.Icon;
  return (
    <section id="services" style={{ padding: "84px 40px", background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto" }}>
        {!bare && <SLabel>What we do</SLabel>}
        {!bare && <h2 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-4xl)", color: "var(--text-strong)", margin: "16px 0 8px" }}>事業内容</h2>}
        <p style={{ fontSize: "var(--text-md)", color: "var(--text-muted)", maxWidth: 560, lineHeight: "var(--leading-relaxed)", marginTop: bare ? 0 : undefined }}>
          新築・増改築・リフォーム・耐震補強・介護改修。家に関するすべてを取り扱っています。
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40 }}>
          {SERVICES.map((s, i) => (
            <SCard key={i} elevated style={{ cursor: "pointer", transition: "transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out)" }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--ai-50)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <Icon name={s.icon} size={26} stroke={1.8} color="var(--ai-700)" />
              </div>
              <h3 style={{ fontFamily: "var(--font-gothic)", fontWeight: 900, fontSize: "var(--text-xl)", color: "var(--text-strong)", margin: "0 0 10px" }}>{s.t}</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", lineHeight: "var(--leading-relaxed)", margin: "0 0 16px" }}>{s.d}</p>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {s.tags.map(t => <SBadge key={t} tone="timber" size="sm">{t}</SBadge>)}
              </div>
            </SCard>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;