// Service — 参考デザインに合わせた 2×2 グリッド。各カード: 左=写真, 右=タイトル＋「解決できる課題」リスト＋CTA。

const SERVICES = [
  {
    num: "01",
    title: "AIコンサルティング",
    illust: "consulting",
    issues: [
      "AI活用の全社方針を描けていない",
      "どこから着手するか判断できない",
      "PoC止まりで定着に至らない",
    ],
    photo: "戦略・ホワイトボード",
    ctaLabel: "詳細を聞く",
    ctaAction: "deck",
  },
  {
    num: "02",
    title: "AIエージェント開発",
    illust: "agent",
    issues: [
      "社内のルーティン業務を自動化したい",
      "ワークフローを業務に組み込みたい",
      "既存システムとAIを連携させたい",
    ],
    photo: "n8n・ワークフロー画面",
  },
  {
    num: "03",
    title: "AI研修",
    illust: "training",
    issues: [
      "社員のAIリテラシーに差がある",
      "経営層向けの研修を設計したい",
      "実務で使えるレベルに引き上げたい",
    
    ],
    photo: "研修・講義風景",
  },
  {
    num: "04",
    title: "AIツール導入",
    illust: "tools",
    issues: [
      "自社に合うAIツールが選定できない",
      "導入してもうまく活用されない",
      "運用ルールが固まっていない",
    ],
    photo: "PCとツール画面",
  },
];

function Service({ layout = "rule" }) {
  return (
    <section id="services" style={{ background: "#ffffff" }}>
      <div className="wrap" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="section-head">
          <span className="en">事業紹介</span>
          <span className="ja">提供サービス</span>
        </div>

        <div className="svc-grid">
          {SERVICES.map((item, i) => (
            <ServiceCard key={i} item={item} />
          ))}
        </div>
      </div>

      <style>{`
        .svc-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 28px;
        }
        @media (min-width: 820px) {
          .svc-grid {
            grid-template-columns: 1fr 1fr;
            gap: 32px 40px;
          }
        }
      `}</style>
    </section>
  );
}

function ServiceCard({ item }) {
  return (
    <article className="svc-card">
      {/* Title */}
      <div className="svc-title-row">
        <span className="svc-title-dot" />
        <h3 className="svc-title">{item.title}</h3>
      </div>

      {/* Card body — photo + content */}
      <div className="svc-body">
        <div className="svc-photo">
          <img src={`assets/svc-${item.illust}.png`} alt="" aria-hidden="true" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>

        <div className="svc-content">
          <div className="svc-sub">解決できる課題</div>
          <div className="svc-sub-rule" />
          <ul className="svc-list">
            {item.issues.map((issue, i) => (
              <li key={i}>{issue}</li>
            ))}
          </ul>
          <a
            className="svc-cta"
            href={item.ctaAction === "deck" ? "#" : "#contact"}
            onClick={(e) => {
              if (item.ctaAction === "deck") {
                e.preventDefault();
                window.openDeck && window.openDeck();
              }
            }}
          >
            <span>{item.ctaLabel || "詳細を見る"}</span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M5 12h14" />
              <path d="M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <style>{`
        .svc-card {
          background: transparent;
          padding: 0;
          display: flex; flex-direction: column;
          gap: 16px;
        }
        .svc-title-row {
          display: flex; align-items: center; gap: 10px;
        }
        .svc-title-dot {
          width: 12px; height: 12px; border-radius: 50%;
          background: #0c3e8f;
          display: inline-block;
          flex-shrink: 0;
          box-shadow: inset 0 0 0 3px #ffffff;
          outline: 1.5px solid #0c3e8f;
        }
        .svc-title {
          margin: 0;
          font-size: 20px;
          font-weight: 800;
          color: #111;
          letter-spacing: 0.02em;
        }

        .svc-body {
          background: #ffffff;
          padding: 16px 8px 16px 0;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
          gap: 20px;
          align-items: center;
        }
        @media (max-width: 520px) {
          .svc-body {
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 18px;
          }
        }

        .svc-photo {
          background: #ffffff;
          overflow: visible;
          align-self: center;
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1 / 1;
          width: 100%;
        }
        .svc-photo > img { width: 100%; height: 100%; object-fit: contain; display: block; }

        .svc-content {
          display: flex; flex-direction: column;
          gap: 12px;
        }
        .svc-sub {
          font-size: 16px;
          font-weight: 800;
          color: #111;
          letter-spacing: 0.02em;
        }
        .svc-sub-rule {
          height: 1px;
          background: rgba(0,0,0,0.1);
          margin: -4px 0 4px;
        }
        .svc-list {
          margin: 0; padding: 0;
          list-style: none;
          display: flex; flex-direction: column; gap: 8px;
          flex: 1;
        }
        .svc-list li {
          position: relative;
          padding-left: 16px;
          font-size: 14px;
          line-height: 1.7;
          color: #1a1a1a;
          font-weight: 500;
          word-break: keep-all;
          overflow-wrap: anywhere;
        }
        .svc-list li::before {
          content: "";
          position: absolute;
          left: 0; top: 0.55em;
          width: 6px; height: 6px;
          background: #111;
          border-radius: 50%;
        }

        .svc-cta {
          align-self: flex-start;
          margin-top: 14px;
          display: inline-flex; align-items: center; gap: 10px;
          padding: 11px 26px;
          background: #111;
          color: #ffffff;
          border-radius: 999px;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.04em;
          text-decoration: none;
          transition: transform 0.15s, background 0.15s;
        }
        .svc-cta:hover {
          background: #333;
          transform: translateY(-1px);
        }
      `}</style>
    </article>
  );
}

window.Service = Service;