// Hero Component
const { useState, useEffect, useRef } = React;

// SplitText: renders text with per-char stagger animation, but wraps each
// WORD in an inline-block so line-breaks only happen on whitespace.
// (Previous version broke mid-word because every char was an inline-block.)
function SplitText({ text, delay = 0, className = "" }) {
  const words = String(text).split(' ');
  let gi = 0;
  const nodes = [];
  words.forEach((word, wi) => {
    if (word.length > 0) {
      const chars = Array.from(word);
      nodes.push(
        <span className="split-word" key={`w${wi}`}>
          {chars.map((c, i) => {
            const idx = gi++;
            return (
              <span
                key={i}
                className="split-char"
                style={{ '--i': idx + (delay / 18) }}
              >{c}</span>
            );
          })}
        </span>
      );
    }
    // real space between words = valid break opportunity
    if (wi < words.length - 1) {
      nodes.push(<span key={`s${wi}`} className="split-space"> </span>);
    }
  });
  return <span className={className}>{nodes}</span>;
}

function Hero({ t, variant }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current && window.initHeroCanvas) {
      window.initHeroCanvas(
        canvasRef.current,
        () => document.documentElement.getAttribute('data-hero') || 'mesh',
        () => document.documentElement.getAttribute('data-theme') || 'light'
      );
    }
  }, []);

  return (
    <section className={`hero hero-variant-${variant}`} id="home">
      <canvas ref={canvasRef} className="hero-canvas"></canvas>

      <div className="container hero-inner">
        <div className="hero-meta reveal" style={{ '--d': '100ms' }}>
          <div>◉ <strong>{t.hero.meta_role}</strong></div>
          <div>{t.hero.meta_location}</div>
          <div>{t.hero.meta_available}</div>
        </div>

        <h1 className="hero-title">
          <span className="line reveal" style={{ '--d': '200ms' }}>
            <SplitText text={t.hero.l1} />
          </span>
          <span className="line reveal" style={{ '--d': '400ms' }}>
            <SplitText text={t.hero.l2a} />
            <span className="split-space"> </span>
            <em><SplitText text={t.hero.l2b} delay={400} /></em>
          </span>
          <span className="line reveal" style={{ '--d': '700ms' }}>
            <SplitText text={t.hero.l3} />
          </span>
        </h1>

        <div className="hero-bottom">
          <p className="hero-description reveal" style={{ '--d': '1000ms' }}>
            {t.hero.description}
          </p>
          <div className="hero-actions reveal" style={{ '--d': '1100ms' }}>
            {/* Primary "View work" CTA hidden while Projects section is offline.
                When re-enabling, restore the original two-button layout. */}
            <a href="#contact" className="magnetic" data-magnetic>
              <span className="btn btn-primary">
                {t.hero.cta_secondary}
                <svg className="btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
              </span>
            </a>
            <a href="#process" className="magnetic" data-magnetic>
              <span className="btn btn-secondary">
                {t.hero.cta_explore}
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.SplitText = SplitText;