// Member — 代表者プロフィール紹介。Companyセクションの下に配置。

const MEMBERS = [
  {
    portrait: "assets/muto-portrait.png",
    portraitPosition: "50% 30%",
    role: "株式会社B-Steep 代表",
    familyName: "武藤",
    givenName: "匠吾",
    nameEn: "SHOGO MUTO",
    profile: [
      "慶應義塾大学法学部卒業",
      "KPMGコンサルティングにてDX戦略の立案からAIシステムの導入支援まで、テクノロジーを活用した企業変革プロジェクトを多数牽引",
      "生成AIの最新動向調査を目的にシリコンバレー支社への短期派遣を経験",
      "日本初となる「n8n」公式アンバサダーに就任",
      "文部科学省「トビタテ留学JAPAN」日本代表11期",
    ],
  },
  {
    portrait: "assets/nakayama-portrait.png",
    portraitPosition: "50% 35%",
    role: "株式会社B-Steep COO",
    familyName: "中山",
    givenName: "恭輔",
    nameEn: "KYOSUKE NAKAYAMA",
    profile: [
      "慶應義塾大学経済学部卒業",
      "アクセンチュア株式会社の戦略部隊にて、大手製造業の企業価値向上（CEO／CFOアジェンダ）に関する戦略プロジェクトを多数牽引",
      "中期経営計画の策定、GX戦略の立案、M&Aを前提としたグローバル新規事業展開など、幅広い経営アジェンダに従事",
      "HEC経営大学院への留学経験を活かし、海外チームと連携したグローバルデリバリーを推進",
    ],
  },
];

function Member() {
  return (
    <section
      id="member"
      style={{ background: "#fff", borderTop: "1px solid var(--sky-200)" }}
    >
      <div className="wrap" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="section-head">
          <span className="en">Member</span>
          <span className="ja">メンバー紹介</span>
        </div>

        <div className="member-list">
          {MEMBERS.map((m, idx) => (
            <div className="member-card" key={idx}>
              {/* Left — portrait + name */}
              <div className="member-id">
                <div className="member-portrait-frame">
                  {m.portrait ? (
                    <img
                      src={m.portrait}
                      alt={`${m.familyName} ${m.givenName}`}
                      className="member-portrait"
                      style={{ objectPosition: m.portraitPosition || "50% 30%" }}
                    />
                  ) : (
                    <Placeholder
                      label={m.portraitLabel || "顔写真"}
                      aspect="1/1"
                      className="member-portrait member-portrait-ph"
                    />
                  )}
                </div>
                <div className="member-role">{m.role}</div>
                <div className="member-name">
                  {m.familyName}{" "}
                  <span className="member-name-given">{m.givenName}</span>
                </div>
                <div className="member-name-en">{m.nameEn}</div>
              </div>

              {/* Right — simple bullet list */}
              <div className="member-profile">
                <ul className="member-bullets">
                  {m.profile.map((line, i) => (
                    <li key={i}>{line}</li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .member-list {
          display: flex;
          flex-direction: column;
          gap: 28px;
          margin-top: 24px;
        }
        .member-card {
          display: grid;
          grid-template-columns: 1fr;
          gap: 40px;
          padding: 48px 40px;
          background: linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
          border: 1px solid var(--sky-100);
          border-radius: 14px;
          box-shadow: 0 6px 20px rgba(12,37,92,0.05);
          align-items: start;
        }
        @media (min-width: 900px) {
          .member-card {
            grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
            gap: 56px;
            padding: 56px 56px;
            align-items: center;
          }
        }

        /* --- ID block --- */
        .member-id {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 4px;
        }
        .member-portrait-frame {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          padding: 4px;
          background: linear-gradient(135deg, var(--sky-400) 0%, var(--brand) 100%);
          box-shadow: 0 12px 28px rgba(12,37,92,0.18);
          margin-bottom: 22px;
        }
        .member-portrait {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
          object-position: 50% 30%;
          background: #fff;
          border: 4px solid #fff;
        }
        .member-portrait-ph {
          aspect-ratio: auto !important;
          border: 4px solid #fff;
          border-radius: 50% !important;
          overflow: hidden;
        }
        .member-portrait-ph .ph-label { font-size: 11px; }
        .member-role {
          font-family: var(--font-mono);
          font-size: 11.5px;
          letter-spacing: 0.16em;
          color: var(--navy-700);
          font-weight: 600;
          margin-bottom: 8px;
        }
        .member-name {
          font-family: var(--font-sans);
          font-size: 28px;
          font-weight: 800;
          color: var(--navy-900);
          letter-spacing: 0.08em;
          line-height: 1.1;
        }
        .member-name-given { margin-left: 6px; }
        .member-name-en {
          margin-top: 6px;
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.32em;
          color: var(--sky-500);
          font-weight: 500;
        }

        /* --- Profile bullets (simple) --- */
        .member-profile { width: 100%; }
        .member-bullets {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .member-bullets li {
          position: relative;
          padding-left: 22px;
          font-size: 14px;
          line-height: 1.9;
          color: var(--navy-900);
          font-weight: 500;
          letter-spacing: 0.03em;
          word-break: normal;
          overflow-wrap: anywhere;
        }
        .member-bullets li::before {
          content: "";
          position: absolute;
          left: 4px;
          top: 0.78em;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--sky-500);
        }

        @media (max-width: 899px) {
          .member-card { padding: 32px 22px; }
          .member-portrait-frame { width: 160px; height: 160px; }
          .member-name { font-size: 24px; }
          .member-bullets li { font-size: 13px; line-height: 1.8; padding-left: 20px; }
          .member-bullets li::before { top: 0.7em; left: 2px; }
        }
      `}</style>
    </section>
  );
}

window.Member = Member;