// Per-character spans with optional marked range (for underline brush effect).
// `marked` = inclusive start/end index range (in original chars) to wrap with .hero-kanji.
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">SG SEIGAKUKAN RECRUIT</div>

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

      {/* portrait */}
      <div className="hero-portrait">
        <img src="assets/portrait-hero.webp" alt="" loading="eager" fetchpriority="high"/>
      </div>

      {/* content */}
      <div className="hero-content">
        <h1 className="hero-title">
          <span className="hero-line">
            <HeroLine text="教育で、人を育てる。" marked={[0, 1]} 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' }}>
          生徒一人ひとりの可能性に向き合い、<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">MANAGEMENT</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">BUSINESS</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">GROWTH</div>
            <div className="feature-jp">挑戦を楽しみ、<br/>自分の可能性を広げる</div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;