// Works + Wage (most important) + Transport sections

const Works = () => {
  const works = [
    { num: "01", icon: "monitor", title: "動画編集", body: "YouTube動画やSNS用の短い動画を編集します。パソコン操作が好きな方に人気です。" },
    { num: "02", icon: "shoppingBag", title: "通販・ECサポート", body: "ネットショップの商品登録や発送準備など。コツコツ作業が好きな方におすすめ。" },
    { num: "03", icon: "package", title: "検品・梱包", body: "商品の状態をチェックし、丁寧に包む作業。集中して取り組める静かな仕事です。" },
    { num: "04", icon: "sprout", title: "水耕栽培", body: "室内で野菜を育てる、季節を感じる作業。植物のお世話が好きな方にぴったりです。" },
    { num: "05", icon: "broom", title: "清掃業務", body: "お墓の清掃などの屋外作業。体を動かしたい方、外の空気を吸いたい方に人気です。" },
    { num: "06", icon: "sparkle2", title: "その他作業", body: "上記のほかにも、その時々で新しい作業が加わります。気になる作業があればご相談ください。" },
  ];

  return (
    <section className="section section--alt" id="works">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">WORKS</div>
          <h2 className="section-title">5つの作業から、あなたに合うものを</h2>
          <p className="lead">軽作業からクリエイティブな仕事まで。「やりたい」と「できる」を一緒に探します。</p>
        </div>
        <div className="works-grid">
          {works.map((w) => (
            <div key={w.num} className="work-card reveal">
              <div className="work-card__num">{w.num}</div>
              <div className="work-card__icon">
                <Icon name={w.icon} size={24} />
              </div>
              <h3 className="work-card__title">{w.title}</h3>
              <p className="work-card__body">{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Number that counts up when in viewport
const useCountUp = (target, duration = 1600) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started.current) {
            started.current = true;
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setVal(Math.floor(eased * target));
              if (t < 1) requestAnimationFrame(tick);
              else setVal(target);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target, duration]);

  return [val, ref];
};

const Wage = () => {
  const [bigNum, bigRef] = useCountUp(33200, 1800);
  const [smallNum, smallRef] = useCountUp(22973, 1800);
  const [barAnimated, setBarAnimated] = React.useState(false);
  const compareRef = React.useRef(null);

  React.useEffect(() => {
    if (!compareRef.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setBarAnimated(true);
        });
      },
      { threshold: 0.3 }
    );
    obs.observe(compareRef.current);
    return () => obs.disconnect();
  }, []);

  const points = [
    { icon: "coins", title: "月最大 33,200円", body: "仙台市内トップクラスの水準です。週4日以上の通所、作業内容により変動します。" },
    { icon: "calc", title: "作業に応じた、わかりやすい工賃", body: "取り組んだ作業時間と内容にもとづいて計算します。「いくらもらえるか」が見える仕組みです。" },
    { icon: "wallet", title: "振込で、毎月きちんとお支払い", body: "月末締め・翌月払いで、ご指定の口座にお振込みします。家計の見通しが立てやすくなります。" },
  ];

  // bar heights — 33,200 = 240px, 22,973 = ~166px
  const maxBar = 240;
  const smallBar = Math.round((22973 / 33200) * maxBar);

  return (
    <section className="section" id="wage">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">WAGE — 仙台でいちばん、ちゃんと稼げるB型を目指して</div>
          <h2 className="section-title">頑張りには、ちゃんと応えたい。</h2>
          <p className="lead">
            「B型の工賃は安い」と言われます。実際、宮城県の平均は月22,973円。<br />
            SATORIは、月最大<strong style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontWeight: 600 }}>33,200円</strong>。約1.4倍の工賃を実現しています。
          </p>
        </div>

        <div className="wage-hero reveal" ref={bigRef}>
          <div className="wage-hero__band"></div>
          <div className="wage-hero__inner">
            <div className="wage-hero__label">MONTHLY MAXIMUM</div>
            <div className="wage-hero__num">
              {bigNum.toLocaleString()}
              <span className="wage-hero__num-yen">円</span>
            </div>
            <div className="wage-hero__caption">月最大支給額（仙台市内トップクラス）</div>
            <div className="wage-hero__sub">頑張りには、ちゃんと応えたい。それが、私たちの姿勢です。</div>
          </div>
        </div>

        <div className="wage-compare reveal" ref={compareRef}>
          <div className="wage-bar">
            <div className="wage-bar__label">宮城県 平均工賃<br />（B型事業所）</div>
            <div className="wage-bar__amount wage-bar__amount--small">
              <span ref={smallRef}>{smallNum.toLocaleString()}</span>円
            </div>
            <div
              className="wage-bar__bar"
              style={{ height: barAnimated ? `${smallBar}px` : "0px" }}
            ></div>
          </div>
          <div className="wage-multiplier">
            <span className="num">×1.4</span> 倍
          </div>
          <div className="wage-bar">
            <div className="wage-bar__label">SATORI<br />月最大工賃</div>
            <div className="wage-bar__amount wage-bar__amount--big">
              {bigNum.toLocaleString()}円
            </div>
            <div
              className="wage-bar__bar wage-bar__bar--accent"
              style={{ height: barAnimated ? `${maxBar}px` : "0px" }}
            ></div>
          </div>
        </div>

        <div className="wage-points">
          {points.map((p) => (
            <div key={p.title} className="wage-point reveal">
              <div className="wage-point__icon">
                <Icon name={p.icon} size={22} />
              </div>
              <h3 className="wage-point__title">{p.title}</h3>
              <p className="wage-point__body">{p.body}</p>
            </div>
          ))}
        </div>

        <p className="wage-disclaimer">
          ※工賃額は通所日数・作業内容により変動します。詳しくは見学時にご説明します。<br />
          ※宮城県平均工賃：22,973円（令和5年度・宮城県発表）
        </p>
      </div>
    </section>
  );
};

const Transport = () => {
  const points = [
    { icon: "bus", title: "無料送迎", body: "事業所から30分圏内が対象です。詳しいエリアはお問い合わせください。" },
    { icon: "utensils", title: "毎日の昼食", body: "栄養バランスを考えたメニューを、追加料金なしでご提供します。" },
    { icon: "heart", title: "アレルギー対応", body: "可能な範囲で対応しますので、見学時にお伝えください。" },
  ];

  return (
    <section className="section section--alt" id="transport">
      <div className="container">
        <div className="transport__grid">
          <div className="reveal">
            <div className="eyebrow">TRANSPORT & MEAL</div>
            <h2 className="about__heading">
              通うのが大変、を<br />なくす。
            </h2>
            <p className="about__body">
              「毎日通えるかな」「電車・バスがしんどい」そんな不安を、できる限りなくしたい。SATORIは、事業所から30分圏内のご自宅まで、無料で送迎します。お昼は毎日、温かい食事をご用意。お弁当の準備は要りません。<br /><br />
              通所のことで悩まずに、安心して一日を過ごせます。
            </p>
            <div className="transport__points">
              {points.map((p) => (
                <div key={p.title} className="transport-point">
                  <div className="transport-point__icon">
                    <Icon name={p.icon} size={22} />
                  </div>
                  <div>
                    <div className="transport-point__title">{p.title}</div>
                    <div className="transport-point__body">{p.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="reveal">
            <div className="transport__visual photo-ph" style={{ aspectRatio: "5 / 6" }}>
              <div className="photo-ph__caption">PHOTO — 送迎車・お昼の食卓</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Works = Works;
window.Wage = Wage;
window.Transport = Transport;