/* ========== Recruit Page ========== */

const RecruitHero = ({ isMobile }) => (
  <section className={`recruit-hero ${isMobile ? "is-mobile" : ""}`}>
    <SeigaihaPattern color="var(--t-accent)" opacity={0.06} />
    <div className="recruit-hero__inner">
      <span className="eyebrow">RECRUIT</span>
      <h1 className="recruit-hero__title">
        一緒に焼きませんか、<br />
        <span className="brush-under">たっぷりの</span>毎日を。
      </h1>
      <p className="recruit-hero__lede">
        未経験大歓迎。アットホームな職場で、<br />
        あなたらしく働ける場所がここにあります。
      </p>
      <div className="recruit-hero__fish">
        <TaiyakiSVG flavor="ogura" size={isMobile ? 240 : 360} />
        <SteamWisps count={4} />
      </div>
    </div>
  </section>
);

const RecruitWhy = () => {
  const items = [
    { kanji: "笑", title: "明るい職場", desc: "スタッフ同士の仲が良く、お客様にも自然と笑顔が伝わる雰囲気です。" },
    { kanji: "学", title: "丁寧な研修", desc: "未経験でも安心。先輩スタッフがイチから丁寧にお教えします。" },
    { kanji: "和", title: "和やかな時間", desc: "焼きたてを目の前で。お客様の「美味しい！」を直接聞ける喜び。" },
    { kanji: "成", title: "長く働ける", desc: "時短勤務・シフト相談OK。長く続けられる環境を整えています。" },
  ];
  return (
    <section className="recruit-why reveal">
      <div className="recruit-why__inner">
        <div className="recruit-why__head">
          <span className="eyebrow">WHY US</span>
          <h2 className="section-title">たっぷり庵で<br />働く、四つの魅力。</h2>
        </div>
        <div className="recruit-why__grid">
          {items.map((it, i) => (
            <div className="recruit-why__card reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="recruit-why__kanji">{it.kanji}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const RecruitPositions = () => {
  const positions = [
    {
      tag: "正社員",
      title: "店舗スタッフ（正社員）",
      points: ["月給 22万円〜", "賞与年2回", "昇給あり", "社会保険完備", "交通費全額支給"],
      hours: "シフト制（実働8時間）",
    },
    {
      tag: "アルバイト",
      title: "店舗スタッフ（アルバイト・パート）",
      points: ["時給 1,100円〜", "週2日〜OK", "1日3時間〜", "扶養内勤務OK", "シフト相談可"],
      hours: "9:00 〜 19:30の間でシフト",
    },
  ];
  return (
    <section className="recruit-pos reveal">
      <div className="recruit-pos__head">
        <span className="eyebrow">POSITIONS</span>
        <h2 className="section-title">募集職種</h2>
      </div>
      <div className="recruit-pos__grid">
        {positions.map((p, i) => (
          <article className="recruit-pos__card reveal" key={i} style={{ transitionDelay: `${i * 0.1}s` }}>
            <div className="recruit-pos__tag">{p.tag}</div>
            <h3 className="recruit-pos__title">{p.title}</h3>
            <ul className="recruit-pos__points">
              {p.points.map((pt, j) => <li key={j}><span>◆</span>{pt}</li>)}
            </ul>
            <div className="recruit-pos__meta">
              <div><span>勤務時間</span><strong>{p.hours}</strong></div>
            </div>
            <a href="#apply" className="btn">この職種に応募する →</a>
          </article>
        ))}
      </div>
    </section>
  );
};

const RecruitVoice = () => {
  const voices = [
    { name: "田中 美咲さん", role: "本店・パート", years: "勤続 5年", quote: "お客様が「ここのが一番！」と言ってくださる瞬間が、何よりの励みです。", flavor: "shiro" },
    { name: "鈴木 太郎さん", role: "ひたちなか店・正社員", years: "勤続 8年", quote: "焼き場に立つ毎日。素材と向き合う時間が、人生で一番充実しています。", flavor: "ogura" },
    { name: "佐藤 ゆりさん", role: "千葉店・パート", years: "勤続 2年", quote: "未経験でしたが、先輩方が本当に優しくて、毎日楽しく働けています。", flavor: "cream" },
  ];
  return (
    <section className="recruit-voice reveal">
      <div className="recruit-voice__head">
        <span className="eyebrow" style={{ color: "var(--t-gold-soft)" }}>STAFF VOICE</span>
        <h2 className="section-title" style={{ color: "var(--t-cream)" }}>働く仲間の声</h2>
      </div>
      <div className="recruit-voice__grid">
        {voices.map((v, i) => (
          <article className="recruit-voice__card reveal" key={i} style={{ transitionDelay: `${i * 0.1}s` }}>
            <div className="recruit-voice__avatar">
              <TaiyakiSVG flavor={v.flavor} size={80} oozing={false} />
            </div>
            <blockquote className="recruit-voice__quote">「{v.quote}」</blockquote>
            <div className="recruit-voice__meta">
              <div className="recruit-voice__name">{v.name}</div>
              <div className="recruit-voice__role">{v.role}・{v.years}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

const RecruitApply = () => (
  <section className="recruit-apply reveal" id="apply">
    <div className="recruit-apply__inner">
      <div className="recruit-apply__text">
        <h2 className="recruit-apply__title">応募・お問い合わせ</h2>
        <p className="recruit-apply__sub">まずはお気軽にご連絡ください。<br />「採用情報を見ました」とお伝えください。</p>
      </div>
      <div className="recruit-apply__methods">
        <a href="tel:0246230181" className="recruit-apply__method">
          <div className="recruit-apply__method-icon">📞</div>
          <div className="recruit-apply__method-label">お電話で応募</div>
          <div className="recruit-apply__method-value">0246-23-0181</div>
          <div className="recruit-apply__method-note">本店（いわき）／ 9:30〜18:30</div>
        </a>
        <a href="#" className="recruit-apply__method">
          <div className="recruit-apply__method-icon">✉️</div>
          <div className="recruit-apply__method-label">フォームから応募</div>
          <div className="recruit-apply__method-value">応募フォーム →</div>
          <div className="recruit-apply__method-note">24時間受付・3営業日以内に返信</div>
        </a>
      </div>
    </div>
  </section>
);

const RecruitPage = ({ isMobile = false }) => {
  useReveal();
  return (
    <div className="page">
      {isMobile ? <Nav variant="mobile" active="recruit" /> : <Nav active="recruit" />}
      <RecruitHero isMobile={isMobile} />
      <RecruitWhy />
      <RecruitPositions />
      <RecruitVoice />
      <RecruitApply />
      <Footer />
    </div>
  );
};

Object.assign(window, { RecruitPage });