// Header + Hero + About sections

const NAV_LINKS = [
  { href: "#about", label: "SATORIについて" },
  { href: "#works", label: "作業内容" },
  { href: "#wage", label: "工賃" },
  { href: "#transport", label: "送迎・昼食" },
  { href: "#staff", label: "スタッフ" },
  { href: "#steps", label: "ご利用までの流れ" },
  { href: "#faq", label: "よくあるご質問" },
];

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="header__inner">
        <a href="#top" className="logo" aria-label="SATORI ホーム">
          <span className="logo__name">SATORI</span>
          <span className="logo__sub">就労継続支援B型事業所｜仙台市太白区</span>
        </a>
        <nav className="nav" aria-label="メインナビゲーション">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </nav>
        <div className="header__cta">
          <a href="#contact" className="btn btn--primary">
            無料で見学を申し込む
            <Icon name="arrow" size={16} />
          </a>
          <button
            className="menu-toggle"
            aria-label="メニューを開く"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <span style={menuOpen ? { transform: "translateY(6.5px) rotate(45deg)" } : {}}></span>
            <span style={menuOpen ? { opacity: 0 } : {}}></span>
            <span style={menuOpen ? { transform: "translateY(-6.5px) rotate(-45deg)" } : {}}></span>
          </button>
        </div>
      </div>
      <div className={`mobile-menu ${menuOpen ? "is-open" : ""}`}>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
        ))}
      </div>
    </header>
  );
};

const Hero = () => {
  const features = [
    { label: "月最大 33,200円", icon: "coins" },
    { label: "無料送迎あり", icon: "bus" },
    { label: "毎日昼食つき", icon: "utensils" },
    { label: "週4日からOK", icon: "clock" },
    { label: "少人数20名定員", icon: "users" },
    { label: "5つの作業から選べる", icon: "grid" },
  ];

  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero__grid">
          <div className="reveal">
            <div className="eyebrow hero__eyebrow">SENDAI · TAIHAKU · B-TYPE</div>
            <h1 className="hero__title">
              頑張りに、<br />
              <span className="accent-mark">ちゃんと応える。</span>
            </h1>
            <p className="hero__sub">
              仙台市内トップクラスの工賃、月最大33,200円。<br />
              無料送迎・毎日の昼食つき・週4日からOK。<br />
              あなたのペースで、ちゃんと働ける場所がここにあります。
            </p>
            <div className="hero__chips">
              {features.map((f) => (
                <span key={f.label} className="chip">
                  <Icon name={f.icon} size={15} />
                  {f.label}
                </span>
              ))}
            </div>
            <div className="hero__cta">
              <a href="#contact" className="btn btn--primary btn--lg">
                まずは見学からどうぞ（無料）
                <Icon name="arrow" size={16} />
              </a>
              <a href="tel:022-778-3621" className="btn btn--ghost btn--lg">
                <Icon name="phone" size={16} />
                電話で相談する
              </a>
            </div>
          </div>
          <div className="reveal" style={{ position: "relative" }}>
            <div className="hero__visual photo-ph">
              <img
                src="https://yoshiki-video-portfolio.s1998yoshiki.workers.dev/satori-images/hero.jpg"
                alt="縁側の光が差すSATORIの作業風景"
                loading="lazy"
                className="hero__img"
              />
            </div>
            <div className="hero__badge">
              <div>
                <div className="hero__badge-label">月最大支給額</div>
                <span className="hero__badge-num">33,200</span>
                <span className="hero__badge-yen">円</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const About = () => {
  const values = [
    { num: "01", title: "あなたのペースを尊重します", body: "体調や気分は日によって違うもの。週4日から、1日数時間からの通所も相談できます。" },
    { num: "02", title: "頑張りには、ちゃんと応えます", body: "仙台市内トップクラスの月最大33,200円。働いた成果を、しっかり工賃でお返しします。" },
    { num: "03", title: "通所のハードルを下げます", body: "30分圏内の無料送迎と、毎日の昼食つき。「通うのが大変」をできる限りなくしました。" },
    { num: "04", title: "少人数だから、顔が見える", body: "定員20名のアットホームな空間。スタッフ全員が、あなたのことをちゃんと知っています。" },
  ];

  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about__grid">
          <div className="reveal">
            <div className="about__visual photo-ph">
              <img
                src="https://yoshiki-video-portfolio.s1998yoshiki.workers.dev/satori-images/about.jpg"
                alt="丁寧な手作業の様子"
                loading="lazy"
                className="about__img"
              />
            </div>
          </div>
          <div className="reveal">
            <div className="eyebrow">ABOUT — SATORIってどんな場所？</div>
            <h2 className="about__heading">
              「働きたい」気持ちを、<br />受けとめる場所です。
            </h2>
            <p className="about__body">
              「働きたい」気持ちはあっても、一歩が踏み出せない。そんなあなたのために、SATORIはあります。仙台市太白区にある、定員20名の小さな就労継続支援B型事業所。一人ひとりのペースと得意を大切に、無理のない関わり方を続けています。<br /><br />
              「誰一人取り残さない」を、毎日、実践しています。
            </p>
          </div>
        </div>

        <div className="values">
          {values.map((v) => (
            <div key={v.num} className="value-card reveal">
              <div className="value-card__num">VALUE {v.num}</div>
              <h3 className="value-card__title">{v.title}</h3>
              <p className="value-card__body">{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Header = Header;
window.Hero = Hero;
window.About = About;