// Per-character spans with optional marked range (for underline brush effect).
const HeroLine = ({ text, marked, baseDelay = 0.4 }) => {
  const chars = [...text];
  const [mStart, mEnd] = marked || [-1, -1];
  const out = [];
  let i = 0;
  while (i < chars.length) {
    if (i === mStart) {
      const markedNodes = [];
      while (i <= mEnd && i < chars.length) {
        markedNodes.push(
          <i key={`m${i}`} style={{ transitionDelay: `${baseDelay + i * 0.05}s` }}>
            {chars[i]}
          </i>
        );
        i++;
      }
      out.push(<span className="hero-kanji" key={`mark${mStart}`}>{markedNodes}</span>);
    } else {
      out.push(
        <i key={`c${i}`} style={{ transitionDelay: `${baseDelay + i * 0.05}s` }}>
          {chars[i]}
        </i>
      );
      i++;
    }
  }
  return <span className="hero-split">{out}</span>;
};

const Hero = () => {
  return (
    <section className="hero" id="top">
      {/* background animation overlay */}
      <div className="hero-bg-layer">
        <div className="hero-bg-img"/>
        <div className="hero-bg-overlay"/>
        <div className="hero-particles" aria-hidden="true">
          {Array.from({ length: 12 }).map((_, i) => (
            <span key={i} className={`particle particle-${i + 1}`}/>
          ))}
        </div>
      </div>

      {/* Foreground diagonal flying pills */}
      <div className="hero-pills" aria-hidden="true">
        {Array.from({ length: 14 }).map((_, i) => (
          <span key={i} className={`pill pill-${i + 1}`}/>
        ))}
      </div>

      {/* vertical left label */}
      <div className="hero-side-label">MATSUMURA TAXI RECRUIT</div>

      {/* soft halo */}
      <div className="hero-halo"/>

      {/* portrait */}
      <div className="hero-portrait">
        <img src="assets/photos/IMG_1112.jpg?v=2" alt="松村タクシーの乗務員" loading="eager" fetchpriority="high"/>
      </div>

      {/* content */}
      <div className="hero-content">
        <h1 className="hero-title">
          <span className="hero-line">
            <HeroLine text="走った分だけ、報われる。" marked={[0, 2]} baseDelay={0.4}/>
          </span>
          <span className="hero-line">
            <HeroLine text="歩合で、稼ぐ仕事。" marked={[0, 1]} baseDelay={0.7}/>
          </span>
        </h1>
        <p className="hero-lead hero-fade-in" style={{ transitionDelay: '1.4s' }}>
          熊本のまちで、創業60年。<br/>
          歩合給だから、あなたの頑張りは、まっすぐ収入になります。<br/>
          未経験から始めた仲間が、自分のペースで活躍中。<br/>
          年齢も、経験も、関係ありません。<br/>
          まずは、話を聞きに来てください。
        </p>
        <div className="hero-cta hero-fade-in" style={{ transitionDelay: '1.7s' }}>
          <a href="#entry" className="btn btn-primary">
            <span>エントリーする</span><span className="btn-arrow"/>
          </a>
          <a href="#recruit" className="btn btn-outline">
            <span>募集要項を見る</span><span className="btn-arrow"/>
          </a>
        </div>
      </div>

      {/* scroll hint bottom-left */}
      <div className="scroll-hint hero-fade-in" style={{ transitionDelay: '2.0s' }}>
        <span>SCROLL</span>
        <span className="scroll-line"/>
      </div>

      {/* feature cards bottom */}
      <div className="hero-feature-row">
        <div className="feature-card hero-fade-up" style={{ transitionDelay: '2.1s' }}>
          <div className="feature-num">01</div>
          <div className="feature-body">
            <div className="feature-en">INCENTIVE</div>
            <div className="feature-jp">歩合で稼ぐ。<br/>頑張りが収入になる</div>
          </div>
        </div>
        <div className="feature-card hero-fade-up" style={{ transitionDelay: '2.3s' }}>
          <div className="feature-num">02</div>
          <div className="feature-body">
            <div className="feature-en">WELCOME</div>
            <div className="feature-jp">未経験、歓迎。<br/>二種免許の取得も相談可</div>
          </div>
        </div>
        <div className="feature-card hero-fade-up" style={{ transitionDelay: '2.5s' }}>
          <div className="feature-num">03</div>
          <div className="feature-body">
            <div className="feature-en">SUPPORT</div>
            <div className="feature-jp">女性も活躍。<br/>育児と両立した働き方も</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;