/* global React */
// Hero — recreated from the supplied reference layout: editorial copy on the
// left (eyebrow → headline → highlighted tagline → body → 3 feature chips →
// primary/secondary CTA → "1業務から相談OK"), and a single supplied illustration
// (problem cards → robot → outcome cards → consultant) on the right.

const HERO_ASSETS = "assets/";
function heroAsset(k) {
  const R = (typeof window !== "undefined" && window.__resources) || {};
  return R["hero-" + k] || (HERO_ASSETS + k + ".png");
}

function Hero({ onLine }) {
  const { Icon, SplitText } = window;
  const { heroBenefits } = window.LP;

  return (
    <section className="lp-hero" id="top">
      <div className="lp-hero__inner">
        <div className="lp-hero__copy" data-parallax="-0.04">
          <div className="lp-hero__head">
            <span className="lp-hero__eyebrow2 lp-rise" style={{ "--d": "0s" }}>
              <span className="lp-eyb-sl lp-eyb-sl--l" aria-hidden="true"><i></i><i></i></span>
              <span className="lp-eyb-tx">中小企業のための<b>AI業務自動化</b>サービス</span>
              <span className="lp-eyb-sl lp-eyb-sl--r" aria-hidden="true"><i></i><i></i></span>
            </span>
            <h1 className="lp-hero__h1">
              <SplitText
                lines={["AI導入を、", "現場で使える仕組みに。"]}
                accentRange={{ line: 1, from: 0, to: 6 }}
                mask
                stagger={0.045}
                start={0.12}
              />
            </h1>
          </div>
          <div className="lp-hero__rest">
            <p className="lp-hero__tagline lp-rise" style={{ "--d": ".14s" }}>
              <span className="lp-uline">AIを<span className="lp-mark">“使って終わり”</span></span>にしない。
            </p>
            <p className="lp-hero__sub lp-rise" style={{ "--d": ".2s" }}>
              <span className="lp-nb">はたラクAIは、</span>業務の整理から自動化の設計・導入・<span className="lp-nb">社内定着まで伴走。</span><span className="lp-nb">小さく始めて、ムリなく成果につなげます。</span>
            </p>
            <img
              className="lp-hero__benefitsimg lp-rise"
              style={{ "--d": ".27s" }}
              src={heroAsset("benefits")}
              alt="小さく始められる／業務に合う自動化を設計／導入後の定着まで支援"
            />
            <div className="lp-hero__cta2 lp-rise" style={{ "--d": ".34s" }}>
              <button type="button" className="lp-hbtn lp-hbtn--primary" onClick={onLine}>
                <span className="lp-hbtn__badge"><span>相談</span><span>無料</span></span>
                <span className="lp-hbtn__txt">無料で相談する</span>
                <Icon name="chevron-right" size={20} color="#fff" />
              </button>
              <a className="lp-hbtn lp-hbtn--ghost" href="#pricing">
                サービス内容を見る
                <span className="lp-hbtn__chev"><Icon name="chevron-right" size={17} color="var(--blue-600)" /></span>
              </a>
            </div>
            <p className="lp-hero__okline lp-rise" style={{ "--d": ".42s" }}>
              <svg className="lp-okmark" width="26" height="26" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 2.2 L19.4 5.1 L19.4 11 C19.4 16 16.2 19.6 12 21.8 C7.8 19.6 4.6 16 4.6 11 L4.6 5.1 Z" fill="#2563DB" />
                <path d="M8.4 12.1 L11 14.6 L15.6 9.6" fill="none" stroke="#ffffff" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              まずは<b>1業務から</b>相談OK
            </p>
          </div>
        </div>

        <div className="lp-hero__visual" data-parallax="0.05">
          <div className="lp-hero__visual-in">
            <div className="lp-hero__stage">
              <div className="lp-hs-scene">
                <img
                  className="lp-hs-info"
                  src={heroAsset("info")}
                  alt="はたラクAIが、メール返信・請求書作成・スケジュール調整・資料作成といった業務をまとめて自動化。"
                />
                <img
                  className="lp-hs-person"
                  src={heroAsset("person")}
                  alt="ノートPCで業務をこなす担当者"
                />
              </div>
              <img
                className="lp-hs-cardsimg"
                src={heroAsset("cards")}
                alt="業務整理 → 自動化 → 定着：一気通貫で、成果が続く仕組みへ。現場に合わせて伴走支援：貴社の状況に寄り添います。"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });