// ── Trust（対応エリア・スタッフ・初回対応） ───────────
function Trust() {
  const [visible, setVisible] = React.useState(false);
  const panelRef = React.useRef(null);
  const items = [
    {
      icon: '📍',
      image: 'assets/trust-area.jpg',
      alt: '訪問マッサージの対応エリアをイメージした住宅街と訪問車',
      title: '対応エリア',
      body: 'あおぞら市内を中心に、近隣エリアへ訪問します。エリア外でも調整できる場合がありますので、まずはご相談ください。',
      note: '本番では市区町村名・施設対応可否を明記'
    },
    {
      icon: '👤',
      image: 'assets/trust-staff.jpg',
      alt: '訪問マッサージを担当する施術者のイメージ',
      title: '担当スタッフ',
      body: '国家資格を持つあん摩マッサージ指圧師が訪問します。初回時にお体の状態や生活環境を確認し、無理のない計画をご提案します。',
      note: '顔写真・資格・経験年数があると信頼感が上がります'
    },
    {
      icon: '🗓️',
      image: 'assets/trust-phone.jpg',
      alt: '電話で初回相談の日程や状況を確認するスタッフのイメージ',
      title: '初回対応の目安',
      body: 'お問い合わせ後、まずはお電話で状況を確認します。対応エリア・ご希望日時を確認し、初回訪問または無料体験の日程をご案内します。',
      note: '実案件では「最短◯日」など実態に合わせて記載'
    },
  ];

  React.useEffect(() => {
    const node = panelRef.current;
    if (!node) return;

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduceMotion || !window.gsap) {
      setVisible(true);
      return;
    }

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

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

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

  return (
    <section id="trust" className="section" style={{ background: 'var(--color-bg-subtle)' }}>
      <div className="container trust-container">
        <div ref={panelRef} className={`trust-panel ${visible ? 'is-visible' : ''}`}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 44px' }}>
            <span className="eyebrow">Trust</span>
            <h2 className="section-title">はじめてでも安心して相談できる理由</h2>
            <p className="section-lead">
              対象になるか、どこまで来てもらえるか、費用はどのくらいか。
              相談前に気になりやすいことを、初回の段階でわかりやすくご案内します。
            </p>
          </div>

          <div className="trust-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {items.map((item, i) => (
              <div key={i} className="card trust-card" style={{ padding: 0, overflow: 'hidden' }}>
                <img
                  src={item.image}
                  alt={item.alt}
                  loading="lazy"
                  style={{ width: '100%', aspectRatio: '16 / 9', objectFit: 'cover' }}
                />
                <div style={{ padding: '26px 26px 28px' }}>
                  <h3 style={{ fontSize: 19, marginBottom: 10, color: 'var(--color-primary-700)' }}>{item.title}</h3>
                  <p style={{ fontSize: 15.5 }}>{item.body}</p>
                  <p style={{ marginTop: 14, fontSize: 12.5, color: 'var(--color-text-secondary)' }}>※ {item.note}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .trust-panel {
          background: var(--color-bg-surface);
          border: 1px solid var(--color-border-default);
          border-radius: 28px;
          padding: 54px 42px 46px;
          box-shadow: 0 18px 46px rgba(45, 60, 45, 0.10);
          opacity: 0;
          transform: translateY(80px) scale(0.96);
          will-change: opacity, transform;
        }
        .trust-container {
          max-width: none;
          padding-left: 32px;
          padding-right: 32px;
        }
        .trust-grid {
          max-width: var(--maxw);
          margin-left: auto;
          margin-right: auto;
        }
        .trust-panel.is-visible {
          opacity: 1;
          transform: translateY(0) scale(1);
          will-change: auto;
        }
        @media (prefers-reduced-motion: reduce) {
          .trust-panel {
            opacity: 1;
            transform: none;
            transition: none;
          }
        }
        @media (max-width: 820px) {
          .trust-grid { grid-template-columns: 1fr !important; }
          .trust-container { padding-left: 18px; padding-right: 18px; }
          .trust-panel { padding: 38px 20px 28px; border-radius: var(--radius-lg); }
        }
      `}</style>
    </section>
  );
}