// Hero — 既存構造踏襲。左: MISSION / 見出し / サブコピー / CTA2つ、右: B-Steep ロゴの大きな見せ場。
// 視覚強度アップ: 細い罫線の走り、左上の英字メタ、CTA下の信頼バッジ行、下部 SCROLL インジケータ。
function Hero() {
  return (
    <section id="top" style={{ position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ paddingTop: 16, paddingBottom: 72 }}>
        <div className="hero-grid">
          {/* Left */}
          <div>
            <p className="eyebrow" style={{ marginBottom: 36 }}>
              <span className="dot"></span>ミッション
            </p>

            <h1 style={{
              margin: 0,
              fontSize: "clamp(30px, 4vw, 50px)",
              lineHeight: 1.45,
              fontWeight: 700,
              letterSpacing: "0.02em",
              color: "var(--navy-900)",
              wordBreak: "keep-all",
            }}>
              <span style={{ whiteSpace: "nowrap" }}>大きな挑戦への</span>
              <br />
              <span style={{ whiteSpace: "nowrap" }}>
                “<span className="marker-wrap">小さな一歩</span>”を提供する
              </span>
            </h1>

            <p style={{
              maxWidth: 560,
              fontSize: 18,
              lineHeight: 2.05,
              color: "var(--ink-2)",
              margin: "32px 0 44px 0",
              letterSpacing: "0.02em",
            }}>
              AIワークフロー・エージェント領域に特化<br className="hide-sm" />
              貴社の業務フローを革新、事業の成長を加速します。
            </p>

            <div style={{ display: "flex", flexWrap: "wrap", gap: 14 }}>
              <a href="#contact" className="btn btn-primary" style={{ height: 52, padding: "0 26px", fontSize: 14.5 }}>
                まずは相談する <Icon.ArrowRight size={14} />
              </a>
              <a href="#services" className="btn btn-ghost" style={{ height: 52, padding: "0 26px", fontSize: 14.5 }}>
                サービスを詳しく見る
              </a>
            </div>
          </div>

          {/* Right: Logo animation — large, bleed over text allowed */}
          <div className="hero-right">
            <div className="hero-logo-wrap">
              <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" aria-label="B-Steep Mark"
                style={{ width: "100%", height: "auto", overflow: "visible" }}>
                <defs>
                  <mask id="floorReveal" maskUnits="userSpaceOnUse" x="0" y="0" width="500" height="500">
                    <rect width="500" height="500" fill="black" />
                    <rect className="floor-mask-rect" x="93" y="371" width="319" height="50" fill="white" />
                  </mask>
                  <mask id="wallReveal" maskUnits="userSpaceOnUse" x="0" y="0" width="500" height="500">
                    <rect width="500" height="500" fill="black" />
                    <rect className="wall-mask-rect" x="362" y="73" width="50" height="348" fill="white" />
                  </mask>
                  <mask id="slopeReveal" maskUnits="userSpaceOnUse" x="0" y="0" width="500" height="500">
                    <rect width="500" height="500" fill="black" />
                    <rect className="slope-mask-rect" x="260" y="233" width="110" height="145" fill="white" />
                  </mask>
                </defs>
                <polygon points="260,373 365,237 365,373" fill="#1F3A6E" mask="url(#slopeReveal)" />
                <path d="M 118,371 L 387,371 A 25 25 0 0 1 387 421 L 118,421 A 25 25 0 0 1 118 371 Z" fill="#1F3A6E" mask="url(#floorReveal)" />
                <path d="M 362,98 A 25 25 0 0 1 412 98 L 412,396 A 25 25 0 0 1 362 396 Z" fill="#1F3A6E" mask="url(#wallReveal)" />
                <rect className="anim-frame"
                  x="32" y="32" width="436" height="436"
                  rx="76" ry="76"
                  fill="none" stroke="#1F3A6E" strokeWidth="28"
                  strokeLinejoin="round" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll indicator removed */}

      <style>{`
        .hero-grid {
          display: grid;
          gap: 40px;
          align-items: center;
        }
        @media (min-width: 900px) {
          .hero-grid {
            grid-template-columns: 1.5fr 1fr;
            gap: 24px;
          }
        }
        .hero-right {
          display: flex; justify-content: center;
          position: relative;
        }
        .hero-logo-wrap {
          width: 100%;
          max-width: 720px;
        }
        @media (min-width: 900px) {
          .hero-right {
            margin-right: -40px;
          }
          .hero-logo-wrap {
            max-width: 780px;
          }
        }
        @media (min-width: 1200px) {
          .hero-right {
            margin-right: -80px;
          }
          .hero-logo-wrap {
            max-width: 880px;
            margin-left: -40px;
          }
        }
        @media (max-width: 640px) {
          .hide-sm { display: none; }
        }

        /* ---- B-Steep logo animation (8s) ---- */
        .anim-frame {
          transform-box: fill-box;
          transform-origin: center;
          opacity: 0;
          animation: frameIntro 8s cubic-bezier(0.25, 1, 0.4, 1) forwards;
        }
        @keyframes frameIntro {
          0%   { opacity: 0; transform: scale(0.92); }
          5%   { opacity: 1; transform: scale(1); }
          82%  { opacity: 1; transform: scale(1); }
          87%  { opacity: 1; transform: scale(1.02); }
          93%  { opacity: 1; transform: scale(1); }
          100% { opacity: 1; transform: scale(1); }
        }
        .floor-mask-rect {
          transform-box: fill-box;
          transform-origin: left center;
          transform: scaleX(0);
          animation: floorReveal 8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        }
        @keyframes floorReveal {
          0%   { transform: scaleX(0); }
          5%   { transform: scaleX(0); }
          30%  { transform: scaleX(1); }
          100% { transform: scaleX(1); }
        }
        .wall-mask-rect {
          transform-box: fill-box;
          transform-origin: center bottom;
          transform: scaleY(0);
          animation: wallReveal 8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        }
        @keyframes wallReveal {
          0%     { transform: scaleY(0); }
          33.75% { transform: scaleY(0); }
          56.25% { transform: scaleY(1); }
          100%   { transform: scaleY(1); }
        }
        .slope-mask-rect {
          transform-box: fill-box;
          transform-origin: bottom left;
          transform: scale(0, 0);
          animation: slopeReveal 8s cubic-bezier(0.55, 0.085, 0.4, 1) forwards;
        }
        @keyframes slopeReveal {
          0%    { transform: scale(0, 0); }
          60%   { transform: scale(0, 0); }
          82.5% { transform: scale(1.4, 1.4); }
          100%  { transform: scale(1.4, 1.4); }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;