/* セクション: ヘッダー、ヒーロー、強み */
const { useState, useEffect } = React;

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
      <div className="site-header__inner">
        <a href="#" className="logo" onClick={closeMenu}>
          <span className="logo__text">
            行政書士法人 Tree
            <small>TREE LEGAL OFFICE</small>
          </span>
        </a>
        <nav className={`nav ${menuOpen ? "nav--open" : ""}`}>
          <ul className="nav__list">
            <li><a href="#strengths" onClick={closeMenu}>強み</a></li>
            <li><a href="#flow" onClick={closeMenu}>サービスの流れ</a></li>
            <li><a href="#pricing" onClick={closeMenu}>料金</a></li>
            <li><a href="#licenses" onClick={closeMenu}>対応許認可</a></li>
            <li><a href="#faq" onClick={closeMenu}>FAQ</a></li>
          </ul>
          <div className="nav__contact-tel">
            <small>月〜土 9:00 - 17:00（日曜のみ定休）</small>
            <span>042-404-2927</span>
          </div>
          <a href="#contact" className="btn-primary" onClick={closeMenu}>
            無料相談 <Icons.arrow />
          </a>
        </nav>
        <button
          className={`mobile-menu-btn ${menuOpen ? "open" : ""}`}
          aria-label="メニュー"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(!menuOpen)}
        ><span></span></button>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg-text">Tree</div>
      <div className="hero__inner">
        <div className="hero__copy">
          <span className="hero__pretitle">建設業のための法人設立サポート</span>
          <h1 className="hero__title">
            設立から<span className="underline">許可取得</span>まで、<br />
            <span className="gold">一つの窓口</span>で完結する<br />
            建設業のための法務パートナー
          </h1>
          <p className="hero__subtitle">
            行政書士と提携司法書士が緊密に連携。法人設立登記から建設業許可、その後の経営事項審査・入札参加資格まで、面倒な手続きを途切れることなくお引き受けいたします。
          </p>
          <div className="hero__cta-row">
            <a href="#contact" className="btn-primary">無料相談を予約する <Icons.arrow /></a>
            <a href="#pricing" className="btn-outline">料金プランを見る <Icons.arrow /></a>
          </div>
        </div>
        <div className="hero__visual">
          <div className="hero__photo">
            <img src="hero.jpg" alt="建設業のお客様と打ち合わせをする行政書士法人 Treeのスタッフ" className="hero__photo-img" />
          </div>
          <div className="hero__badge">
            <div className="hero__badge-label">— OUR PROMISE —</div>
            <div className="hero__badge-text">面倒な書類仕事を、現場の手が止まらないように。</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Strengths() {
  return (
    <section className="strengths" id="strengths" data-screen-label="02 Strengths">
      <div className="container">
        <div className="strengths__head">
          <div>
            <span className="eyebrow">Why Tree</span>
            <h2 className="section-title">
              建設業に特化した、<br />
              <span className="accent">わたしたち</span>の強み。
            </h2>
          </div>
        </div>
        <div className="strengths__grid">
          {window.TREE_DATA.strengths.map((s) => {
            const Icon = Icons[s.icon];
            return (
              <div className="strength-card" key={s.num}>
                <div className="strength-card__num">— {s.num}</div>
                <div className="strength-card__icon"><Icon /></div>
                <h3 className="strength-card__title">{s.title}</h3>
                <p className="strength-card__desc">{s.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Header = Header;
window.Hero = Hero;
window.Strengths = Strengths;