// ===========================================================
// Header
// ===========================================================
const Header = ({ onSearch, query, setQuery, activeNav, setActiveNav }) => {
  const navItems = ["ホーム", "はじめての方へ", "記事一覧", "おすすめサービス", "よくある質問", "運営者について"];
  const [scrolled, setScrolled] = 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={"site-header " + (scrolled ? "is-scrolled" : "")}>
      <div className="header-inner">
        <a className="brand" href="#" onClick={(e) => { e.preventDefault(); setActiveNav("ホーム"); }}>
          <span className="brand-mark"><Icon name="leaf" size={22} color="#7ea372" /></span>
          <span className="brand-text">
            <span className="brand-title">現場ハック <em>転職</em>ブログ</span>
            <span className="brand-tag">転職7回の実体験から、本音でお届けします。</span>
          </span>
        </a>
        <nav className="nav">
          {navItems.map(n => (
            <a
              key={n}
              href="#"
              className={"nav-item " + (activeNav === n ? "is-active" : "")}
              onClick={(e) => { e.preventDefault(); setActiveNav(n); }}
            >
              {n}
            </a>
          ))}
        </nav>
        <div className="header-actions">
          <form className="header-search" onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(query); }}>
            <Icon name="search" size={16} color="#8aa085" />
            <input
              type="text"
              placeholder="記事を検索"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
          </form>
          <button className="cta">
            <Icon name="mail" size={15} color="#fff" />
            お問い合わせ
          </button>
        </div>
      </div>
    </header>
  );
};

// ===========================================================
// Hero — slim, blog-y. Not overly large.
// ===========================================================
const Hero = ({ onPickCategory }) => (
  <section className="hero">
    {/* decorative scattered leaves */}
    <svg className="hero-deco hero-deco-1" viewBox="0 0 60 60" fill="none">
      <path d="M10 50c0-22 18-38 40-38-2 22-15 38-37 38Z" stroke="#a8c099" strokeWidth="1.4" fill="#e7eee2" opacity=".7"/>
      <path d="M10 50c10-10 18-18 30-28" stroke="#a8c099" strokeWidth="1.2"/>
    </svg>
    <svg className="hero-deco hero-deco-2" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="14" stroke="#c9d8be" strokeWidth="1" fill="none" strokeDasharray="2 4"/>
    </svg>
    <svg className="hero-deco hero-deco-3" viewBox="0 0 50 50" fill="none">
      <path d="M5 45c0-18 14-32 35-32-2 18-13 32-33 32Z" stroke="#b8c9a8" strokeWidth="1.2" fill="#f2f6ec" opacity=".6"/>
    </svg>

    <div className="hero-inner">
      <div className="hero-text">
        <span className="hero-eyebrow">
          <Icon name="leaf" size={13} color="#7ea372" /> Blog ・ 転職に悩むあなたへ
        </span>
        <h1 className="hero-title">
          転職のこと、<br/>
          <span className="hero-underline">ひとり</span>で悩まなくて大丈夫です。
        </h1>
        <p className="hero-lede">
          このブログは、転職に悩んでいるあなたの味方です。情報収集から気持ちの整理、実際の行動まで、やさしくサポートします。
        </p>

        <div className="hero-values">
          <div className="hero-value">
            <span className="hero-value-icon"><Icon name="heart" size={16} color="#7ea372" /></span>
            <div>
              <strong>無理に転職を<br/>おすすめしません</strong>
              <span>あなたのペースで</span>
            </div>
          </div>
          <div className="hero-value">
            <span className="hero-value-icon"><Icon name="leaf" size={16} color="#7ea372" /></span>
            <div>
              <strong>実体験をもとに<br/>わかりやすい情報</strong>
              <span>2回の転職経験から</span>
            </div>
          </div>
          <div className="hero-value">
            <span className="hero-value-icon"><Icon name="sparkle" size={16} color="#7ea372" /></span>
            <div>
              <strong>やさしく<br/>ゆっくり進めます</strong>
              <span>気持ちに寄り添って</span>
            </div>
          </div>
        </div>

        <div className="hero-pills">
          <span className="hero-pills-label">テーマから探す</span>
          {["転職前の準備", "マインド・不安", "実践編", "面接対策"].map(c => (
            <button key={c} className="hero-pill" onClick={() => onPickCategory(c)}>
              <Chip label={c} />
              <Icon name="arrow" size={13} color="#6f8166" />
            </button>
          ))}
        </div>
      </div>
      <div className="hero-art">
        <Placeholder id="hero-portrait" label="HERO ・ やわらかい朝の光のポートレート" ratio="4/5" tone="sage" rounded={20} />
        <div className="hero-badge">
          <Icon name="sparkle" size={14} color="#7ea372" />
          <span className="hero-badge-num">84</span>
          <span className="hero-badge-label">記事公開中</span>
        </div>
        <div className="hero-quote">
          <span className="quote-mark">&ldquo;</span>
          <p>納得できる選択が<br/>できるように、<br/>寄り添います。</p>
        </div>
        <div className="hero-leaf hero-leaf-bl"><Icon name="leaf" size={32} color="#a8c099" /></div>
        <div className="hero-leaf hero-leaf-tr"><Icon name="leaf" size={22} color="#c9d8be" /></div>
      </div>
    </div>
  </section>
);

// ===========================================================
// Footer
// ===========================================================
const Footer = () => (
  <footer className="site-footer">
    <div className="footer-top">
      <div className="footer-brand">
        <div className="brand">
          <span className="brand-mark"><Icon name="leaf" size={22} color="#fff" /></span>
          <span className="brand-text">
            <span className="brand-title" style={{ color: "#fff" }}>現場ハック転職ブログ</span>
            <span className="brand-tag" style={{ color: "rgba(255,255,255,.7)" }}>転職7回の実体験から、本音でお届けします。</span>
          </span>
        </div>
        <p className="footer-desc">
          転職7回・キャリア相談士が、現場目線で本音を書いています。あなたの転職が、納得のいくものになりますように。
        </p>
        <div className="footer-social">
          <a href="#" aria-label="Twitter"><Icon name="twitter" size={16} color="#fff" /></a>
          <a href="#" aria-label="Instagram"><Icon name="ig" size={16} color="#fff" /></a>
          <a href="#" aria-label="note"><Icon name="note" size={16} color="#fff" /></a>
          <a href="#" aria-label="RSS"><Icon name="rss" size={16} color="#fff" /></a>
        </div>
      </div>

      <div className="footer-cols">
        <div className="footer-col">
          <h4>サイトマップ</h4>
          <a href="#">ホーム</a>
          <a href="#">はじめての方へ</a>
          <a href="#">記事一覧</a>
          <a href="#">運営者について</a>
        </div>
        <div className="footer-col">
          <h4>カテゴリ</h4>
          <a href="#">転職前の準備</a>
          <a href="#">マインド・不安</a>
          <a href="#">実践編</a>
          <a href="#">面接対策</a>
        </div>
        <div className="footer-col">
          <h4>お役立ち</h4>
          <a href="#">よくある質問</a>
          <a href="#">おすすめサービス</a>
          <a href="#">用語集</a>
          <a href="#">お問い合わせ</a>
        </div>
        <div className="footer-col footer-newsletter">
          <h4>ニュースレター</h4>
          <p>新着記事と、月1回のやさしいエッセイをお届けします。</p>
          <form onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder="メールアドレス" />
            <button>登録する</button>
          </form>
        </div>
      </div>
    </div>

    <div className="footer-bottom">
      <div className="footer-links">
        <a href="#">利用規約</a>
        <a href="#">プライバシーポリシー</a>
        <a href="#">運営者情報</a>
        <a href="#">広告掲載について</a>
      </div>
      <div className="footer-copy">© 2024–2026 現場ハック転職ブログ</div>
    </div>
  </footer>
);

Object.assign(window, { Header, Hero, Footer });
