// ── About（訪問マッサージとは） ──────────────────────
function About() {
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    const grid = gridRef.current;
    if (!grid || !window.gsap || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const cards = grid.querySelectorAll('.about-card');
    window.gsap.set(cards, { autoAlpha: 0, y: 32, scale: 0.92, transformOrigin: 'center center' });

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        window.gsap.to(cards, {
          autoAlpha: 1,
          y: 0,
          scale: 1,
          duration: 0.8,
          stagger: 0.25,
          ease: 'power3.out'
        });
        observer.disconnect();
      }
    }, { threshold: 0.2, rootMargin: '0px 0px -8% 0px' });

    observer.observe(grid);
    return () => observer.disconnect();
  }, []);

  const points = [
    { icon: 'home', title: 'ご自宅・施設へ訪問', body: '通院がむずかしい方のもとへ、国家資格を持つあん摩マッサージ指圧師がお伺いします。' },
    { icon: 'clipboard', title: '医師の同意にもとづく施術', body: '医師の同意書をいただいたうえで、筋のこわばりや関節の動かしにくさなどに対して施術を行います。' },
    { icon: 'yen', title: '医療保険が使える場合が', body: '要件を満たすと医療保険の対象となり、自己負担は原則1〜3割。出張にかかる費用も保険の範囲です。' },
  ];
  const icons = {
    home: (
      <path d="M3 11.5 12 4l9 7.5M5.5 10.5V20h13v-9.5M9.5 20v-6h5v6" />
    ),
    clipboard: (
      <>
        <path d="M9 4h6l1 2h3v14H5V6h3l1-2Z" />
        <path d="M9 10h6M9 14h6M9 18h4" />
      </>
    ),
    yen: (
      <>
        <path d="M7 5l5 7 5-7M12 12v8M8 13h8M8 16h8" />
      </>
    ),
  };
  const renderIcon = (name) => (
    <svg viewBox="0 0 24 24" aria-hidden="true" style={{
      width: 30, height: 30, fill: 'none', stroke: 'var(--color-primary-600)',
      strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round'
    }}>
      {icons[name]}
    </svg>
  );
  return (
    <section id="about" className="section" style={{
      backgroundImage: 'linear-gradient(135deg, rgba(137, 197, 66, 0.78), rgba(6, 174, 149, 0.78)), url("assets/about-visit-car.jpg")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundAttachment: 'scroll'
    }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <span className="eyebrow" style={{ color: 'var(--color-primary-100)' }}>About</span>
          <h2 className="section-title" style={{ color: '#fff' }}>訪問マッサージとは</h2>
          <p className="section-lead" style={{ color: 'rgba(255,255,255,0.92)' }}>
            寝たきりや歩行が困難などの理由で通院がむずかしい方が、
            <strong style={{ color: '#fff' }}>ご自宅で受けられる保険適用のマッサージ</strong>です。
            機能の維持・改善や、日々を少しでも楽に過ごすことを目的としています。
          </p>
        </div>

        <div ref={gridRef} className="about-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 48
        }}>
          {points.map((p, i) => (
            <div key={i} className="card about-card" style={{
              padding: '30px 26px', textAlign: 'center',
              background: 'rgba(255,255,255,0.94)', borderColor: 'rgba(255,255,255,0.42)'
            }}>
              <div style={{
                width: 58, height: 58, borderRadius: 'var(--radius-md)',
                background: 'var(--color-bg-primary-soft)', display: 'flex',
                alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px'
              }}>{renderIcon(p.icon)}</div>
              <h3 style={{ fontSize: 19, marginBottom: 10, color: 'var(--color-primary-600)' }}>{p.title}</h3>
              <p style={{ fontSize: 15.5 }}>{p.body}</p>
            </div>
          ))}
        </div>

        <p style={{
          marginTop: 30, textAlign: 'center', fontSize: 13.5, color: 'rgba(255,255,255,0.82)'
        }}>
          ※ 保険適用には医師の同意など一定の要件があります。適用可否は無料相談時に確認いたします。
        </p>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .about-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}