// hero.jsx — cinematic full-bleed eagle hero
function Hero({ onContactClick }) {
  return (
    <section className="hero" id="top">
      <img
        className="hero-photo"
        src="assets/eagle-hero.jpg"
        alt="広い空を象徴するブランドビジュアル" />
      
      <div className="hero-photo-overlay"></div>
      <div className="hero-photo-grain"></div>

      <div className="hero-vert-label">SKYIDEA · EST. 2026 RENEWAL</div>

      <div className="hero-content">
        <div className="container">
          <div className="hero-flag">
            <span className="live"></span>
            SKYIDEA — IT CONSULTING / 2026
          </div>
          <h1>
            <span className="vert">守り</span>と<span className="accent">攻め</span>を<br />
            ひとつの<br />戦略で
          </h1>
          <p className="lede" style={{ width: "580px" }}>
            DXからAXへ、そしてセキュリティとBCPで事業を守る。<br />
            中堅・中小企業の情報システム部門の皆様に寄り添い、自社の規模・体制に合った進め方を、<br />
            経営層と現場の両言語でご一緒に考える、伴走型ITコンサルティング。
          </p>
          <div className="hero-cta">
            <a href="#themes" className="btn btn-primary">
              3つの主力テーマを見る
              <span className="arrow">→</span>
            </a>
            {window.CONTACT_ENABLED &&
            <button className="btn btn-ghost" onClick={onContactClick}>
                お問い合わせ
              </button>
            }
          </div>
        </div>
      </div>

      <div className="hero-strip">
        <div className="hero-strip-inner">
          <div className="strip-themes">
            <a href="#themes" className="theme-chip">
              <span className="tn">SERVICE 01・攻め</span>
              <span className="tt">DX / AX 推進</span>
            </a>
            <a href="#themes" className="theme-chip t-sec">
              <span className="tn">SERVICE 02・守り</span>
              <span className="tt">情報セキュリティ ＆ BCP</span>
            </a>
            <a href="#themes" className="theme-chip t-infra">
              <span className="tn">SERVICE 03・土台</span>
              <span className="tt">ITインフラ 構築・運用保守</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;