// Home page — refined version of Direction C.

const HomePage = () => {
  const T = window.TOKENS;
  const [glitch, setGlitch] = React.useState(false);
  const [cursorOn, setCursorOn] = React.useState(true);

  // randomized glitch burst loop with occasional double-tap
  React.useEffect(() => {
    let active = true;
    let timer;
    const fire = () => {
      if (!active) return;
      setGlitch(true);
      setTimeout(() => active && setGlitch(false), 420);
      if (Math.random() < 0.3) {
        setTimeout(() => {
          if (!active) return;
          setGlitch(true);
          setTimeout(() => active && setGlitch(false), 260);
        }, 540);
      }
      const next = 2200 + Math.random() * 3800;
      timer = setTimeout(fire, next);
    };
    timer = setTimeout(fire, 1400);
    return () => { active = false; clearTimeout(timer); };
  }, []);

  // terminal-style blinking underscore — independent of the glitch loop
  React.useEffect(() => {
    const t = setInterval(() => setCursorOn(c => !c), 530);
    return () => clearInterval(t);
  }, []);

  return (
    <div
      className={"hero-glitch" + (glitch ? " glitching" : "")}
      style={{
        minHeight: '100vh', position: 'relative', zIndex: 1,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', padding: '120px 40px 80px',
        fontFamily: T.mono, color: T.fg, textAlign: 'center',
      }}
    >
      <div style={{
        fontSize: 11, letterSpacing: '0.5em', color: T.accent, marginBottom: 32,
        opacity: glitch ? 0.3 : 1,
        transition: 'opacity 0.05s',
      }}>
        ▼ NOW DECRYPTING ▼
      </div>

      <h1 className="glitch-name" style={{
        margin: 0, fontSize: 'clamp(72px, 12vw, 156px)', lineHeight: 0.85, fontWeight: 900,
        letterSpacing: '-0.05em',
        color: T.fg,
        textAlign: 'center',
      }}>
        <div><span className="glitch-line" data-text="KAROL">KAROL</span></div>
        {/* alias slotted between the two name lines — its own row,
            small + lowercase + spaced so it reads as a handle stamp,
            with hairline rules on either side */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 16, margin: '8px 0',
          fontSize: 'clamp(13px, 1.2vw, 16px)', fontWeight: 500,
          letterSpacing: '0.4em', color: T.fgDim,
          textTransform: 'lowercase',
        }}>
          <span style={{
            display: 'inline-block', flex: '0 1 80px', height: 1, background: T.fgGhost,
          }} />
          <span><span style={{ color: T.accent }}>@</span>lorakszak</span>
          <span style={{
            display: 'inline-block', flex: '0 1 80px', height: 1, background: T.fgGhost,
          }} />
        </div>
        <div>
          <span className="glitch-line" data-text="ROSZAK_">
            ROSZAK<span style={{
              color: T.accent,
              opacity: cursorOn ? 1 : 0,
              transition: 'opacity 0.05s',
            }}>_</span>
          </span>
        </div>
      </h1>

      <div style={{
        marginTop: 36, fontSize: 14, letterSpacing: '0.32em',
        textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 16, flexWrap: 'wrap', maxWidth: 900,
      }}>
        <span>GENERATIVE&nbsp;AI&nbsp;ENGINEER</span>
        <span style={{ color: T.accent }}>×</span>
        <span>AGENTIC&nbsp;SYSTEMS</span>
        <span style={{ color: T.accent }}>×</span>
        <span>DIFFUSION&nbsp;PIPELINES</span>
      </div>

      <div style={{
        marginTop: 28, fontSize: 13, letterSpacing: '0.18em', color: T.fgDim,
        fontStyle: 'italic',
      }}>
        “Don't talk about it, be about it.”
      </div>

      <div style={{
        marginTop: 64, display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center',
      }}>
        <button
          onClick={() => window.navigate('/blog')}
          style={{
            padding: '14px 28px',
            border: `1px solid ${T.accent}`, color: T.accent,
            fontSize: 12, letterSpacing: '0.3em', fontFamily: T.mono,
            background: `${T.accent}14`, cursor: 'pointer',
            textTransform: 'uppercase',
          }}
        >
          [↵] read the blog →
        </button>
        <button
          onClick={() => window.navigate('/about')}
          style={{
            padding: '14px 28px',
            border: `1px solid ${T.fgGhost}`, color: T.fg,
            fontSize: 12, letterSpacing: '0.3em', fontFamily: T.mono,
            background: 'transparent', cursor: 'pointer',
            textTransform: 'uppercase',
          }}
        >
          who is this →
        </button>
      </div>

      <div style={{
        position: 'absolute', bottom: 80, left: '50%', transform: 'translateX(-50%)',
        fontSize: 10, letterSpacing: '0.3em', color: T.fgGhost,
      }}>
        ▼ MOVE.CURSOR → REVEAL ▼
      </div>
    </div>
  );
};

window.HomePage = HomePage;