// YouTubeFeature — 事業紹介の後に入るYouTubeチャンネル紹介セクション。
// 左: 大きなサムネ + 重ねて小さいサムネ（斜めに配置）
// 右: 「● YouTube」タグ, 見出し, 説明文, 赤いYouTubeボタン

function YouTubeFeature() {
  return (
    <section
      id="youtube-feature"
      style={{ background: "#ffffff", borderTop: "1px solid var(--sky-200)" }}
    >
      <div className="wrap" style={{ paddingTop: 80, paddingBottom: 96 }}>
        <div className="yt-grid">
          {/* LEFT — thumbnail stack */}
          <div className="yt-visual">
            {/* Main thumbnail */}
            <div className="yt-thumb-main">
              <img src="assets/yt-thumb-main.png" alt="サムネイル：CLAUDEで経理自動化" className="yt-thumb-img" />
              {/* Play indicator overlay */}
              <div className="yt-play-overlay">
                <svg width="54" height="38" viewBox="0 0 54 38" aria-hidden="true">
                  <rect width="54" height="38" rx="8" fill="#E94F3C" />
                  <polygon points="22,11 22,27 36,19" fill="#fff" />
                </svg>
              </div>
            </div>

            {/* Smaller thumbnail, offset bottom-right */}
            <div className="yt-thumb-sub">
              <img src="assets/yt-thumb-sub.png" alt="サムネイル：15分で作る音声AI受付システム" className="yt-thumb-img" />
            </div>

            {/* decorative tape removed per user request */}
          </div>

          {/* RIGHT — text + CTA */}
          <div className="yt-text">
            <div className="yt-tag">
              <span className="yt-tag-dot" />
              <span className="yt-tag-label">YouTube</span>
            </div>

            <h2 className="yt-heading">AIワークフロー解説のトモ</h2>

            <p className="yt-desc">
              YouTubeチャンネル「AIワークフロー解説のトモ」では、皆様の業務をAIによって自動化する方法を解説しております。
              <br />
              <span className="yt-desc-note">（26年4月時点の登録者：1.3万人）</span>
            </p>

            <a
              className="yt-cta"
              href="https://www.youtube.com/@tomos_aiagent"
              target="_blank"
              rel="noopener noreferrer"
            >
              <span>YouTube</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>
        </div>
      </div>

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

        /* --- Left visual --- */
        .yt-visual {
          position: relative;
          min-height: 340px;
          padding: 16px 32px 72px 8px;
        }
        .yt-thumb-main {
          position: relative;
          width: 100%;
          max-width: 520px;
          aspect-ratio: 16 / 9;
          transform: rotate(-1.5deg);
          overflow: hidden;
          box-shadow: 0 12px 28px rgba(12,37,92,0.14);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          cursor: pointer;
        }
        .yt-thumb-main:hover {
          transform: rotate(0deg) translateY(-4px) scale(1.02);
          box-shadow: 0 20px 40px rgba(12,37,92,0.25);
          z-index: 5;
        }
        .yt-thumb-img {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          display: block;
          object-fit: cover;
        }
        .yt-play-overlay {
          position: absolute;
          left: 50%; top: 50%;
          transform: translate(-50%, -50%) translateY(-2px);
          filter: drop-shadow(0 4px 8px rgba(12,37,92,0.22));
          opacity: 0.95;
          pointer-events: none;
        }

        .yt-thumb-sub {
          position: absolute;
          left: 38%;
          bottom: 0;
          width: 44%;
          max-width: 240px;
          aspect-ratio: 16 / 9;
          transform: rotate(3deg);
          overflow: hidden;
          box-shadow: 0 8px 20px rgba(12,37,92,0.14);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          cursor: pointer;
          z-index: 2;
        }
        .yt-thumb-sub:hover {
          transform: rotate(0deg) translateY(-4px) scale(1.05);
          box-shadow: 0 16px 32px rgba(12,37,92,0.25);
          z-index: 6;
        }

        .yt-tape {
          position: absolute;
          top: -4px; left: 30px;
          width: 52px; height: 18px;
          background: #f5c842;
          transform: rotate(-6deg);
          opacity: 0.95;
        }

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

        .yt-heading {
          margin: 0;
          font-size: clamp(22px, 2.4vw, 28px);
          font-weight: 700;
          letter-spacing: 0.01em;
          color: var(--navy-900);
          line-height: 1.35;
        }
        .yt-desc {
          margin: 20px 0 0;
          font-size: 13.5px;
          line-height: 1.9;
          color: var(--navy-700);
          font-weight: 500;
        }
        .yt-desc-note {
          display: inline-block;
          margin-top: 8px;
          font-size: 12px;
          color: var(--ink-3);
        }

        .yt-cta {
          display: inline-flex; align-items: center; gap: 12px;
          margin-top: 32px;
          padding: 14px 28px 14px 32px;
          background: #E94F3C;
          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);
        }
        .yt-cta:hover {
          background: #d63d2c;
          transform: translateY(-1px);
          box-shadow: 0 4px 10px rgba(233,79,60,0.25);
        }
      `}</style>
    </section>
  );
}

window.YouTubeFeature = YouTubeFeature;