/* global React */
const { useEffect: useEffectHero } = React;

/** Editorial hero with rising words.
 * Pass `lines` as an array of arrays: each line is a list of {text, italic?}.
 * The final italic-ed line is offset (indent class) like the live homepage.
 */
function HeroDisplay({ lines, sub, primaryCta = 'Stuur me een berichtje', secondaryCta = 'Bekijk diensten', poster = 'assets/photo-anne-portrait.jpg', side = null }) {
  let delay = 0;
  return (
    <section className="cs-hero">
      <div className="cs-hero-grid">
        <div>
          <h1 className="cs-hero-display">
            {lines.map((line, li) => (
              <React.Fragment key={li}>
                {line.map((word, wi) => {
                  const d = (delay += 60);
                  return (
                    <React.Fragment key={wi}>
                      <span className="cs-word">
                        <span style={{ animationDelay: `${d}ms` }} className={word.italic ? 'ital' : ''}>
                          {word.text}
                        </span>
                      </span>
                      {wi < line.length - 1 ? ' ' : null}
                    </React.Fragment>
                  );
                })}
                {li < lines.length - 1 && <br/>}
              </React.Fragment>
            ))}
          </h1>
          <div className="cs-hero-sub-wrap">
            <p className="cs-hero-sub">{sub}</p>
            <div className="cs-hero-actions">
              <a href="contact.html" className="cs-btn-primary"><span>{primaryCta}</span><span className="arrow">→</span></a>
              <a href="diensten.html" className="cs-btn-ghost">{secondaryCta} <span className="arrow">↓</span></a>
            </div>
          </div>
        </div>
        <aside className="cs-hero-side">
          {side ? side : (
            <div className="cs-hero-image-wrap">
              <img src={poster} alt="Anne Caron at work"/>
              <div className="cs-hero-image-tag"><span className="live-dot"></span>Caron Studio · Rotterdam</div>
            </div>
          )}
        </aside>
      </div>
    </section>
  );
}

window.HeroDisplay = HeroDisplay;