// ── Audience（2つの入口：ご家族 / ケアマネ・医療関係者） ──
function Audience() {
  const cards = [
    {
      tag: 'ご家族・ご本人の方へ',
      image: 'assets/audience-family.jpg',
      alt: 'ご自宅で家族と訪問マッサージについて相談するイメージ',
      title: '「通わせるのがつらい」を、\nおうちで解決',
      body: '送り迎えの負担なく、住み慣れたお部屋で施術を受けられます。料金や保険のこと、まずは気軽にご相談ください。',
      cta: '対象になる方を見る',
      href: '#target',
      accent: '#D96A1F',
      ctaClass: 'btn-family'
    },
    {
      tag: 'ケアマネ・医療関係者の方へ',
      image: 'assets/audience-pro.jpg',
      alt: 'ケアマネジャーと施術者が連携について相談するイメージ',
      title: '安心してご紹介いただける\n連携体制',
      body: '同意書の取得サポート、月次のご報告、状態変化の共有まで。担当者様の手間を増やさない運用でお手伝いします。',
      cta: '連携・ご紹介の流れを見る',
      href: '#pro',
      accent: 'var(--color-primary-600)',
      ctaClass: 'btn-pro'
    },
  ];
  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 40, background: 'var(--color-bg-subtle)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 36px' }}>
          <h2 className="section-title">ご相談内容に合わせてご案内します</h2>
          <p className="section-lead">
            ご本人・ご家族の方、ケアマネジャー・医療関係者の方、それぞれに必要な情報をまとめています。
          </p>
        </div>
        <div className="aud-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {cards.map((c, i) => (
            <a key={i} href={c.href} className="card aud-card" style={{
              padding: 0, background: '#fff', borderColor: 'transparent',
              display: 'block', overflow: 'hidden', transition: 'transform .15s ease, box-shadow .15s ease'
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-card)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-soft)'; }}>
              <img
                src={c.image}
                alt={c.alt}
                loading="lazy"
                style={{
                  width: '100%',
                  aspectRatio: '16 / 9',
                  objectFit: 'cover',
                  objectPosition: 'center',
                }}
              />
              <div style={{ padding: '26px 30px 28px', background: '#fff' }}>
                <div style={{ marginBottom: 14 }}>
                  <span style={{ fontSize: 13, fontWeight: 700, color: c.accent, letterSpacing: '0.03em' }}>{c.tag}</span>
                </div>
                <h3 style={{ fontSize: 22, whiteSpace: 'pre-line', marginBottom: 12 }}>{c.title}</h3>
                <p style={{ fontSize: 15.5 }}>{c.body}</p>
                <span className={`btn ${c.ctaClass}`} style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  minHeight: 44, marginTop: 20, padding: '10px 18px',
                  borderRadius: 'var(--radius-pill)', color: '#fff',
                  fontSize: 14.5, fontWeight: 700, boxShadow: '0 8px 20px rgba(45, 60, 45, 0.12)'
                }}>{c.cta} →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .aud-card,
        .aud-card > div {
          background: #fff !important;
        }
        @media (max-width: 780px) {
          .aud-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}