// ── Hero ──────────────────────────────────────────────
function Hero() {
  const heroSlides = [
    {
      src: 'assets/visit-massage-treatment-16x9.png',
      alt: 'ご自宅で足のマッサージを受ける高齢の方と施術者のイメージ',
      loading: 'eager'
    },
    {
      src: 'assets/audience-family.jpg',
      alt: 'ご自宅で家族と訪問マッサージについて相談するイメージ',
      loading: 'lazy'
    },
    {
      src: 'assets/about-visit-car.jpg',
      alt: '施術者が車で訪問先へ向かうイメージ',
      loading: 'lazy'
    },
  ];
  return (
    <section id="top" style={{
      position: 'relative',
      background: 'linear-gradient(160deg, var(--color-accent-50) 0%, var(--color-primary-50) 55%, var(--color-neutral-50) 100%)',
      overflow: 'hidden'
    }}>
      <div className="container hero-container" style={{ maxWidth: '1440px', padding: '34px 18px 70px' }}>
        <div className="hero-layout">
          <div className="hero-slider">
            {heroSlides.map((slide, i) => (
              <img
                key={slide.src}
                src={slide.src}
                alt={slide.alt}
                loading={slide.loading}
                className="hero-slide"
                style={{ animationDelay: `${i * 6}s` }}
              />
            ))}
            <div className="hero-copy">
              <span className="hero-badge">国家資格者がご自宅へお伺いします</span>
              <h1>
                通院がむずかしくても、<br />
                ご自宅で受けられる<br />
                訪問マッサージ。
              </h1>
              <p>
                寝たきりや歩行がつらい方のもとへ、あん摩マッサージ指圧師がお伺いします。
                医師の同意により、医療保険が使える場合があります。
              </p>
              <div className="hero-checks">
                <span>出張料・往診料<br />保険内</span>
                <span>対応エリア内<br />訪問可</span>
                <span>ケアマネ様<br />連携対応</span>
              </div>
            </div>
          </div>

          <aside className="hero-cta-panel">
            <div className="hero-phone">
              <span>お電話でのご相談</span>
              <strong>0000-00-0000</strong>
              <small>平日 9:00-18:00</small>
            </div>
            <p>
              ご家族からのご相談も、ケアマネジャー様からのご紹介も承ります。
            </p>
            <div className="hero-cta-mascot" aria-label="指差しして案内するしろくまマスコット">
              <img
                src="assets/mascot-polar-bear-pointing.jpg"
                alt=""
              />
            </div>
            <div className="hero-cta-list">
              <a href="#contact" className="btn btn-family">ご家族の無料相談</a>
              <a href="#contact" className="btn btn-pro">ケアマネ様のご紹介相談</a>
            </div>
          </aside>
        </div>
      </div>

      <style>{`
        .hero-layout {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 300px;
          gap: 16px;
          align-items: stretch;
        }
        .hero-slider {
          position: relative;
          min-height: 700px;
          overflow: hidden;
          border-radius: 24px;
          box-shadow: 0 18px 44px rgba(45, 60, 45, 0.12);
        }
        .hero-slide {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transform: translateX(24px) scale(1.04);
          animation: heroSlide 18s ease-in-out infinite;
        }
        .hero-copy {
          position: absolute;
          left: 46px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 3;
          display: flex;
          flex-direction: column;
          justify-content: center;
          max-width: 560px;
          padding: 0;
          color: var(--color-text-heading);
          text-shadow: 0 2px 12px rgba(255,255,255,0.82);
        }
        .hero-badge {
          align-self: flex-start;
          padding: 7px 16px;
          border-radius: var(--radius-pill);
          background: rgba(255,255,255,0.9);
          color: var(--color-primary-700);
          font-size: 13.5px;
          font-weight: 700;
          box-shadow: var(--shadow-soft);
        }
        .hero-copy h1 {
          margin-top: 24px;
          align-self: flex-start;
          color: var(--color-primary-900);
          font-size: clamp(28px, 3.7vw, 44px);
          line-height: 1.5;
          -webkit-text-stroke: 0;
          text-shadow:
            -2px 0 3px rgba(255,255,255,0.95),
            2px 0 3px rgba(255,255,255,0.95),
            0 -2px 3px rgba(255,255,255,0.95),
            0 2px 3px rgba(255,255,255,0.95),
            0 0 10px rgba(255,255,255,0.88),
            0 2px 20px rgba(255,255,255,0.75);
        }
        .hero-copy p {
          margin-top: 22px;
          color: var(--color-neutral-800);
          font-size: 17px;
          line-height: 2;
          font-weight: 600;
          text-shadow:
            -1px 0 2px rgba(255,255,255,0.98),
            1px 0 2px rgba(255,255,255,0.98),
            0 -1px 2px rgba(255,255,255,0.98),
            0 1px 2px rgba(255,255,255,0.98),
            0 0 8px rgba(255,255,255,0.9),
            0 2px 14px rgba(255,255,255,0.78);
        }
        .hero-checks {
          display: flex;
          gap: 14px;
          flex-wrap: wrap;
          margin-top: 30px;
        }
        .hero-checks span {
          width: 108px;
          height: 108px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background: rgba(255,255,255,0.9);
          color: var(--color-primary-700);
          font-size: 13px;
          font-weight: 800;
          line-height: 1.55;
          box-shadow: 0 10px 26px rgba(24, 48, 30, 0.16);
          border: 1px solid rgba(255,255,255,0.72);
        }
        .hero-cta-panel {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 22px;
          padding: 34px 28px;
          border-radius: 28px;
          background: rgba(255,255,255,0.94);
          box-shadow: 0 18px 46px rgba(45, 60, 45, 0.12);
          border: 1px solid rgba(255,255,255,0.72);
        }
        .hero-phone {
          text-align: center;
          color: var(--color-text-heading);
        }
        .hero-phone span {
          display: block;
          font-size: 13px;
          color: var(--color-text-secondary);
          font-weight: 700;
        }
        .hero-phone strong {
          display: block;
          margin-top: 4px;
          font-size: clamp(22px, 2vw, 28px);
          font-family: var(--font-en);
          line-height: 1.2;
          white-space: nowrap;
        }
        .hero-phone small {
          display: inline-block;
          margin-top: 8px;
          padding: 4px 14px;
          border-radius: var(--radius-pill);
          background: var(--color-neutral-100);
          color: var(--color-text-secondary);
          font-size: 12.5px;
          font-weight: 700;
        }
        .hero-cta-panel p {
          text-align: center;
          font-size: 14.5px;
          color: var(--color-text-body);
          line-height: 1.8;
        }
        .hero-cta-mascot {
          width: 152px;
          height: 190px;
          margin: -2px auto 0;
          overflow: visible;
        }
        .hero-cta-mascot img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
        .hero-cta-list {
          display: grid;
          gap: 12px;
        }
        .hero-cta-list .btn {
          width: 100%;
          justify-content: center;
          padding-inline: 18px;
        }
        @keyframes heroSlide {
          0% { opacity: 1; transform: translateX(0) scale(1); }
          32% { opacity: 1; transform: translateX(0) scale(1); }
          39% { opacity: 0; transform: translateX(-28px) scale(1.03); }
          94% { opacity: 0; transform: translateX(24px) scale(1.04); }
          100% { opacity: 0; transform: translateX(-28px) scale(1.03); }
        }
        @media (prefers-reduced-motion: reduce) {
          .hero-slide { animation: none; }
          .hero-slide:first-child { opacity: 1; transform: none; }
        }
        @media (max-width: 920px) {
          .hero-layout { grid-template-columns: 1fr; }
          .hero-slider { min-height: 580px; }
          .hero-cta-panel { max-width: none; }
        }
        @media (max-width: 520px) {
          .hero-container { padding: 18px 12px 56px !important; }
          .hero-slider { min-height: 620px; }
          .hero-copy { left: 22px; right: 22px; max-width: none; }
          .hero-copy h1 { font-size: clamp(27px, 8vw, 36px); line-height: 1.45; }
          .hero-checks { gap: 8px; }
          .hero-checks span { width: 92px; height: 92px; font-size: 12px; }
          .hero-cta-panel { padding: 26px 22px; border-radius: var(--radius-lg); }
          .hero-cta-mascot { width: 132px; height: 164px; }
        }
      `}</style>
    </section>
  );
}
