// ── Flow（ご利用の流れ／同意書の説明つき） ──────────
function Flow() {
  const steps = [
    { n: '01', title: '無料相談・お問い合わせ', body: 'お電話またはフォームから。ご本人の状態やご希望をお聞きします。ご家族・ケアマネ様からのご連絡も歓迎です。' },
    { n: '02', title: '無料体験・カウンセリング', body: 'ご自宅へお伺いし、実際の施術をお試しいただけます。無理な勧誘はいたしません。' },
    { n: '03', title: '医師の同意書をいただく', body: 'かかりつけ医に「同意書」をお願いします。取得の手続きは当院がサポートしますのでご安心ください。' },
    { n: '04', title: '施術スタート', body: '計画にそって定期的に訪問します。体調の変化はその都度共有し、無理のない範囲で続けます。' },
  ];
  return (
    <section id="flow" className="section">
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 48px' }}>
          <span className="eyebrow">Flow</span>
          <h2 className="section-title">ご利用までの流れ</h2>
          <p className="section-lead">はじめての方でも迷わないよう、4つのステップでご案内します。</p>
        </div>

        <div className="flow-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {steps.map((s, i) => (
            <div key={i} className="flow-step" style={{ position: 'relative' }}>
              <div className="card" style={{ padding: '26px 22px', height: '100%' }}>
                <div style={{
                  fontFamily: 'var(--font-en)', fontWeight: 700, fontSize: 30,
                  color: 'var(--color-primary-400)', marginBottom: 10
                }}>{s.n}</div>
                <h3 style={{ fontSize: 17.5, marginBottom: 10 }}>{s.title}</h3>
                <p style={{ fontSize: 14.5 }}>{s.body}</p>
              </div>
              {i < steps.length - 1 && (
                <span className="flow-arrow" aria-hidden="true">
                  <svg viewBox="0 0 24 24"><path d="m9 5 7 7-7 7" /></svg>
                </span>
              )}
            </div>
          ))}
        </div>

        <div className="card" style={{
          marginTop: 30, padding: '24px 26px', background: 'var(--color-bg-accent-soft)',
          borderColor: 'transparent', display: 'flex', gap: 16, alignItems: 'flex-start'
        }}>
          <span style={{ fontSize: 26 }}>📝</span>
          <p style={{ fontSize: 14.5 }}>
            <strong style={{ color: 'var(--color-text-heading)' }}>「同意書」について</strong><br />
            訪問マッサージを保険で受けるには、医師の同意書が必要です。継続する場合は、
            <strong>半年ごと（一定期間ごと）</strong>に医師へ再度お願いします。書類のやりとりは当院がお手伝いします。
          </p>
        </div>
      </div>
      <style>{`
        .flow-arrow {
          position: absolute;
          top: 50%;
          right: -17px;
          z-index: 2;
          width: 28px;
          height: 28px;
          display: grid;
          place-items: center;
          transform: translateY(-50%);
          border-radius: 50%;
          background: var(--brand-primary-gradient);
          color: #fff;
          font-size: 27px;
          font-weight: 700;
          line-height: 1;
          box-shadow: var(--shadow-soft);
        }
        .flow-arrow svg {
          width: 16px;
          height: 16px;
          display: block;
          fill: none;
          stroke: currentColor;
          stroke-width: 3;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
        @media (max-width: 900px) {
          .flow-grid { grid-template-columns: 1fr 1fr !important; row-gap: 38px !important; }
          .flow-step:nth-child(2) .flow-arrow {
            top: auto;
            right: auto;
            bottom: -33px;
            left: 50%;
            transform: translateX(-50%) rotate(90deg);
          }
          .flow-step:nth-child(3) { grid-column: 2; grid-row: 2; }
          .flow-step:nth-child(4) { grid-column: 1; grid-row: 2; }
          .flow-step:nth-child(3) .flow-arrow {
            right: auto;
            left: -17px;
            transform: translateY(-50%) rotate(180deg);
          }
        }
        @media (max-width: 760px) {
          .flow-grid { grid-template-columns: 1fr !important; gap: 38px !important; }
          .flow-step:nth-child(3),
          .flow-step:nth-child(4) { grid-column: auto; grid-row: auto; }
          .flow-step .flow-arrow {
            top: auto !important;
            right: auto !important;
            bottom: -33px !important;
            left: 50% !important;
            transform: translateX(-50%) rotate(90deg) !important;
          }
        }
      `}</style>
    </section>
  );
}
