// CommunityFeature — YouTubeセクション下。左に説明文、右に複数画像（プレースホルダ）。
// デザインリズムはYouTubeFeatureを踏襲して統一感を出す。

function CommunityFeature() {
  return (
    <section
      id="community-feature"
      style={{ background: "#ffffff", borderTop: "1px solid var(--sky-200)" }}
    >
      <div className="wrap" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="cm-grid">
          {/* LEFT — text + CTA */}
          <div className="cm-text">
            <div className="cm-tag">
              <span className="cm-tag-dot" />
              <span className="cm-tag-label">Community</span>
            </div>

            <div className="cm-brand">AI市民開発コミュニティ</div>
            <h2 className="cm-heading">
              <span className="cm-brand-main">トモラボ</span>
              <span className="cm-brand-sub">／ トモラボ＋</span>
            </h2>

            <p className="cm-desc">
              500名を超える日本有数のAI市民開発コミュニティ。
              <br />
              現場の課題を持ち寄り、AIエージェントや自動化ワークフローを
              <br />
              一緒に作って学び合う場です。
            </p>

            <a
              className="cm-cta"
              href="https://www.skool.com/tomolab-plus"
              target="_blank"
              rel="noopener noreferrer"
            >
              <span>コミュニティを見る</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 12h14" />
                <path d="M13 5l7 7-7 7" />
              </svg>
            </a>
          </div>

          {/* RIGHT — image stack (overlapping polaroids) */}
          <div className="cm-visual">
            <div className="cm-photo cm-p1">
              <img src="assets/tomolab-2.png" alt="Skool上のコミュニティ画面" />
            </div>
            <div className="cm-photo cm-p2">
              <img src="assets/tomolab-3.png" alt="トモラボ 懇親会" />
            </div>
            <div className="cm-photo cm-p3">
              <img src="assets/tomolab-1.png" alt="トモラボ オフ会集合写真" />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .cm-grid {
          display: grid;
          gap: 56px;
          align-items: center;
          grid-template-columns: 1fr;
        }
        @media (min-width: 900px) {
          .cm-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
            gap: 80px;
          }
        }

        /* --- Text --- */
        .cm-text { max-width: 440px; }
        .cm-tag {
          display: inline-flex; align-items: center; gap: 10px;
          font-family: var(--font-mono);
          font-size: 12px; letter-spacing: 0.14em;
          color: var(--navy-900);
          border-top: 1px solid var(--navy-900);
          padding-top: 14px;
          margin-bottom: 28px;
          width: 100%;
        }
        .cm-tag-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--sky-500, #4fb5e5);
          display: inline-block;
        }
        .cm-tag-label { font-weight: 600; }

        .cm-brand {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          color: var(--navy-700);
          font-weight: 600;
          margin-bottom: 10px;
        }
        .cm-heading {
          margin: 0;
          font-weight: 800;
          letter-spacing: 0.01em;
          color: var(--navy-900);
          line-height: 1.15;
          display: flex;
          align-items: baseline;
          flex-wrap: wrap;
          gap: 8px;
        }
        .cm-brand-main {
          font-size: clamp(36px, 4.5vw, 52px);
          font-weight: 900;
          letter-spacing: 0.02em;
          background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .cm-brand-sub {
          font-size: clamp(14px, 1.5vw, 18px);
          font-weight: 600;
          color: var(--navy-700);
          letter-spacing: 0.04em;
        }
        .cm-desc {
          margin: 20px 0 0;
          font-size: 13.5px;
          line-height: 1.9;
          color: var(--navy-700);
          font-weight: 500;
        }

        .cm-cta {
          display: inline-flex; align-items: center; gap: 12px;
          margin-top: 32px;
          padding: 14px 28px 14px 32px;
          background: var(--navy-900);
          color: #ffffff;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-decoration: none;
          transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
          box-shadow: 0 2px 0 rgba(0,0,0,0.08);
        }
        .cm-cta:hover {
          background: #0a1f4a;
          transform: translateY(-1px);
          box-shadow: 0 4px 10px rgba(12,37,92,0.25);
        }

        /* --- Visual (overlapping stack) --- */
        .cm-visual {
          position: relative;
          width: 100%;
          aspect-ratio: 5/4;
          min-height: 340px;
        }
        .cm-photo {
          position: absolute;
          overflow: hidden;
          background: #ffffff;
          padding: 10px 10px 14px;
          border-radius: 4px;
          box-shadow: 0 14px 30px rgba(12,37,92,0.18), 0 4px 8px rgba(12,37,92,0.08);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .cm-photo > img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
          border-radius: 1px;
        }
        .cm-photo:hover {
          transform: translateY(-4px) rotate(0deg) scale(1.02);
          box-shadow: 0 20px 40px rgba(12,37,92,0.25);
          z-index: 10;
        }

        /* back: Skool screenshot, now at top, rotated slightly left */
        .cm-p1 {
          top: 0;
          left: 8%;
          width: 60%;
          aspect-ratio: 16/9;
          transform: rotate(-4deg);
          z-index: 1;
        }
        /* middle-right: izakaya (懇親会), rotated right */
        .cm-p2 {
          top: 18%;
          right: 0;
          width: 46%;
          aspect-ratio: 1/1;
          transform: rotate(5deg);
          z-index: 2;
        }
        /* front-bottom-left: group photo, large, tilted left */
        .cm-p3 {
          bottom: 0;
          left: 0;
          width: 66%;
          aspect-ratio: 16/9;
          transform: rotate(-3deg);
          z-index: 3;
        }

        @media (max-width: 700px) {
          .cm-visual { aspect-ratio: 5/4; min-height: 280px; }
          .cm-p1 { left: 6%; width: 64%; }
          .cm-p2 { width: 48%; }
          .cm-p3 { width: 70%; }
        }
      `}</style>
    </section>
  );
}

window.CommunityFeature = CommunityFeature;