// ── ForPro（ケアマネ・医療関係者の方へ） ──────────────
function ProIcon({ name, index }) {
  const gradientId = `pro-icon-gradient-${index}`;
  const paths = {
    document: <React.Fragment><path d="M8 3h7l4 4v14H8z"/><path d="M15 3v5h5M11 12h6M11 16h6"/></React.Fragment>,
    report: <React.Fragment><path d="M5 20V10M12 20V4M19 20v-7"/><path d="M3 20h18"/></React.Fragment>,
    phone: <path d="M7.5 3.5 10 8 8 10c1.3 2.7 3.3 4.7 6 6l2-2 4.5 2.5-1 4c-.2.8-1 1.4-1.8 1.3C9.5 20.8 3.2 14.5 2.2 6.3c-.1-.8.5-1.6 1.3-1.8z"/>,
    clock: <React.Fragment><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></React.Fragment>,
  };
  return (
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <defs><linearGradient id={gradientId} x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse"><stop stopColor="#89C542"/><stop offset="1" stopColor="#06AE95"/></linearGradient></defs>
      <g stroke={`url(#${gradientId})`} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">{paths[name]}</g>
    </svg>
  );
}

function ForPro() {
  const feats = [
    { icon: 'document', title: '同意書の取得をサポート', body: '依頼文書の準備、主治医への確認、書類の受け渡しまで流れを整えます。' },
    { icon: 'report', title: '毎月の報告書を共有', body: '施術内容・状態変化・今後の方針を、ケアプランに使いやすい形でお渡しします。' },
    { icon: 'phone', title: '連絡手段を合わせます', body: '電話・メール・FAXなど、事業所様の運用に合わせてご連絡します。' },
    { icon: 'clock', title: '初回訪問の目安を明確に', body: 'ご紹介後、日程確認から初回訪問までの目安を早めにお伝えします。' },
  ];
  return (
    <section id="pro" className="section" style={{
      background: 'var(--color-bg-subtle)',
      color: 'var(--color-text-body)'
    }}>
      <div className="container">
        <div className="pro-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" style={{ color: 'var(--color-primary-600)' }}>For Care Managers</span>
            <h2 style={{ color: 'var(--color-text-heading)', fontSize: 'clamp(26px, 4vw, 34px)', marginTop: 10 }}>
              ケアマネジャー・<br />医療関係者の皆さまへ
            </h2>
            <p style={{ marginTop: 18, color: 'var(--color-text-body)', fontSize: 16.5 }}>
              利用者様に「安心してご紹介いただける」ことを第一に考えています。
              報告・連携・書類対応まで、担当者様の手間を増やさない運用でお手伝いします。
            </p>
            <a href="#contact" className="btn btn-pro pro-cta-desktop" style={{ marginTop: 26 }}>ご紹介・連携のご相談</a>
            <p style={{ marginTop: 16, fontSize: 13.5, color: 'var(--color-text-secondary)' }}>
              紹介用パンフレット・同意書の見本・報告書サンプルもお渡しできます。
            </p>
          </div>

          <div className="pro-cards" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {feats.map((f, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.86)', border: '1px solid rgba(6,174,149,0.16)',
                borderRadius: 'var(--radius-md)', padding: '22px 20px'
              }}>
                <div style={{ width: 40, height: 40, marginBottom: 10, display: 'grid', placeItems: 'center' }}><ProIcon name={f.icon} index={i} /></div>
                <h3 style={{ color: 'var(--color-primary-600)', fontSize: 16.5, marginBottom: 8 }}>{f.title}</h3>
                <p style={{ color: 'var(--color-text-body)', fontSize: 14 }}>{f.body}</p>
              </div>
            ))}
          </div>
          <a href="#contact" className="btn btn-pro pro-cta-mobile">ご紹介・連携のご相談</a>
        </div>
      </div>
      <style>{`
        .pro-cta-mobile { display: none; }
        @media (max-width: 860px) {
          .pro-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .pro-cta-desktop { display: none; }
          .pro-cta-mobile { display: inline-flex; width: 100%; justify-content: center; margin-top: 4px; }
        }
        @media (max-width: 460px) { .pro-cards { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
