// StudentCommunityFeature — コミュニティセクションの姉妹。レイアウト反転（画像左・文字右）。

function StudentCommunityFeature() {
  return (
    <section
      id="student-community"
      style={{ background: "#ffffff", borderTop: "1px solid var(--sky-200)" }}
    >
      <div className="wrap" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="sc-grid">
          {/* LEFT — single hero image */}
          <div className="sc-visual">
            <div className="sc-photo sc-p1" style={{ aspectRatio: "4/3" }}>
              <img src="assets/tomouni-1.png" alt="大学でのAI講義の様子" />
            </div>
          </div>

          {/* RIGHT — text */}
          <div className="sc-text">
            <div className="sc-tag">
              <span className="sc-tag-dot" />
              <span className="sc-tag-label">Students</span>
            </div>

            <div className="sc-brand">学生向けAIコミュニティ</div>
            <h2 className="sc-heading">
              <span className="sc-brand-main">トモユニバーシティ</span>
            </h2>

            <p className="sc-desc">
              大学生を対象として、AI学習・実践コミュニティを運営。
              <br />
              現場の事例に触れながら、AIを「使える」レベルまで
              <br />
              引き上げるための学びの場です。
            </p>
          </div>
        </div>
      </div>

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

        /* --- Visual (single hero polaroid) --- */
        .sc-visual {
          position: relative;
          padding: 10px 10px 0;
        }
        .sc-photo {
          position: relative;
          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;
        }
        .sc-photo > img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
          border-radius: 1px;
        }
        .sc-p1 {
          transform: rotate(-2deg);
        }
        .sc-photo:hover {
          transform: translateY(-4px) rotate(0deg) scale(1.02);
          box-shadow: 0 20px 40px rgba(12,37,92,0.25);
        }

        /* --- Text --- */
        .sc-text { max-width: 440px; }
        .sc-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%;
        }
        .sc-tag-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--sky-500, #4fb5e5);
          display: inline-block;
        }
        .sc-tag-label { font-weight: 600; }

        .sc-brand {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          color: var(--navy-700);
          font-weight: 600;
          margin-bottom: 10px;
        }
        .sc-heading {
          margin: 0;
          font-weight: 800;
          letter-spacing: 0.01em;
          color: var(--navy-900);
          line-height: 1.15;
        }
        .sc-brand-main {
          font-size: clamp(30px, 4vw, 44px);
          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;
        }
        .sc-desc {
          margin: 20px 0 0;
          font-size: 13.5px;
          line-height: 1.9;
          color: var(--navy-700);
          font-weight: 500;
        }
      `}</style>
    </section>
  );
}

window.StudentCommunityFeature = StudentCommunityFeature;