// Staff + Steps + FAQ sections

const Staff = () => {
  const staff = [
    {
      role: "施設長",
      name: "小松 由典",
      kana: "Yoshinori",
      initial: "由",
      msg: "「今日もまた来たい」と思える場所をつくることが、私の仕事です。どんな小さなことでも、まずはお話しください。",
    },
    {
      role: "サービス管理責任者",
      name: "里 佳子",
      kana: "Yoshiko",
      initial: "佳",
      msg: "あなたの『得意』と『苦手』を一緒に見つけて、無理のない働き方を考えます。",
    },
    {
      role: "支援員",
      name: "雅江",
      kana: "Masae",
      initial: "雅",
      msg: "笑顔と真心で、毎日の小さな『できた』を一緒に喜びたい。それが私の願いです。",
    },
    {
      role: "支援員（元調理師）",
      name: "翔太郎",
      kana: "Shotaro",
      initial: "翔",
      msg: "明日もまた来たいと思っていただけるよう、誠実で明るい対応を心がけています。",
    },
  ];

  return (
    <section className="section" id="staff">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">STAFF</div>
          <h2 className="section-title">顔の見える、4人のスタッフ</h2>
          <p className="lead">少人数だからこそ、一人ひとりとちゃんと向き合える。それがSATORIのスタッフです。</p>
        </div>
        <div className="staff-grid">
          {staff.map((s) => (
            <div key={s.name} className="staff-card reveal">
              <div className="staff-card__avatar">{s.initial}</div>
              <div className="staff-card__role">{s.role}</div>
              <div className="staff-card__name">{s.name}</div>
              <p className="staff-card__msg">「{s.msg}」</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Steps = () => {
  const steps = [
    { num: "01", title: "お問い合わせ", body: "電話・メール・フォームのいずれかで、お気軽にご連絡ください。" },
    { num: "02", title: "見学", body: "施設をご案内します。ご家族の同行も大歓迎です。" },
    { num: "03", title: "受給者証の申請", body: "市区町村窓口での手続きを、スタッフが丁寧にご説明します。" },
    { num: "04", title: "体験利用（2日間）", body: "実際に1日の流れを体験。雰囲気を確かめてください。" },
    { num: "05", title: "ご利用開始", body: "個別支援計画を作成し、あなたのペースで通所スタート。" },
  ];

  return (
    <section className="section section--alt" id="steps">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">STEPS</div>
          <h2 className="section-title">ご利用開始までの5ステップ</h2>
          <p className="lead">難しい手続きは、私たちが一緒に進めます。安心してお問い合わせください。</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={s.num} className="step reveal">
              <div className="step__num">
                <span>{s.num}</span>STEP
              </div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
              {i < steps.length - 1 && (
                <div className="step__arrow">
                  <Icon name="arrow" size={20} />
                </div>
              )}
            </div>
          ))}
        </div>
        <p className="steps-note">
          <Icon name="clock" size={16} />
          お問い合わせから見学まで、最短即日〜3日程度で対応いたします。
        </p>
      </div>
    </section>
  );
};

const FAQ = () => {
  const faqs = [
    { q: "見学だけでも大丈夫ですか？", a: "もちろんです。「合うかどうか確かめたい」気持ちはとても大切です。見学だけでお帰りいただいてかまいません。無理にお勧めすることはありません。ご家族の同行も歓迎です。" },
    { q: "週に何日から通えますか？", a: "週4日からのご利用をおすすめしていますが、体調や生活リズムに応じて、まずは週1〜2日からスタートすることも可能です。少しずつ通う日数を増やしていく方も多くいらっしゃいます。" },
    { q: "利用料金はかかりますか？", a: "前年度の世帯所得により異なりますが、9割以上の方が無料でご利用いただいています。送迎・昼食も追加料金はかかりません。詳しくは、見学時にご説明します。" },
    { q: "送迎の範囲はどこまでですか？", a: "事業所（仙台市太白区ひより台）から、車で30分圏内のご自宅までが対象です。具体的なエリアはお住まいの地域によりますので、お気軽にお問い合わせください。" },
    { q: "精神障がい・発達障がいでも利用できますか？", a: "はい、ご利用いただけます。精神・発達・身体・知的、いずれの障がいの方も、診断書や手帳がある方であればご利用いただけます。一人ひとりの特性に合わせた関わり方を大切にしています。" },
    { q: "体調が悪い日は休んでもいいですか？", a: "もちろんです。体調や気分は日によって違うもの。当日のご連絡で、お休みいただいてかまいません。「今日は無理せず休もう」も、大切な選択です。" },
    { q: "受給者証がありませんが、利用できますか？", a: "受給者証の取得手続きから、スタッフが一緒にお手伝いします。市区町村窓口での申請が必要ですが、初めての方でも大丈夫。流れをわかりやすくご説明します。" },
    { q: "作業が自分にできるか不安です。", a: "ご安心ください。すべての作業は、スタッフが丁寧にお伝えします。「できないこと」よりも「できそうなこと」「やってみたいこと」を一緒に探していきます。最初は短い時間から、少しずつで大丈夫です。" },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">FAQ</div>
          <h2 className="section-title">よくあるご質問</h2>
          <p className="lead">少しでも不安がやわらぐように、よくいただくご質問にお答えしています。</p>
        </div>
        <div className="faq reveal">
          {faqs.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
              <button
                className="faq-q"
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}
              >
                <span className="faq-q__mark">Q</span>
                <span className="faq-q__text">{f.q}</span>
                <span className="faq-q__icon"><Icon name="chevDown" size={20} /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a__inner">
                  <div className="faq-a__body">{f.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Staff = Staff;
window.Steps = Steps;
window.FAQ = FAQ;