/* Hero with type animation + destruction */

function useTypewriter(text, speed = 60, startDelay = 0) {
  const [shown, setShown] = React.useState("");
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    let cancelled = false;
    let i = 0;
    const start = setTimeout(function step() {
      if (cancelled) return;
      if (i <= text.length) {
        setShown(text.slice(0, i));
        i++;
        setTimeout(step, speed);
      } else {
        setDone(true);
      }
    }, startDelay);
    return () => { cancelled = true; clearTimeout(start); };
  }, [text]);
  return [shown, done];
}

function Hero() {
  const [phase, setPhase] = React.useState(0);
  // phase 0: typing "JKC Portfolio_"
  // phase 1: destructing
  // phase 2: showing korean title + glitch english + body

  const [typed, typedDone] = useTypewriter("JKC Portfolio", 90, 400);
  const [subTyped, subDone] = useTypewriter("안녕하세요. JAVA 백엔드 기반으로 운영형 플랫폼을 만드는 개발자, 경경철입니다.", 40, 2600);

  React.useEffect(() => {
    if (typedDone && phase === 0) {
      setTimeout(() => setPhase(1), 900);
      setTimeout(() => setPhase(2), 1600);
    }
  }, [typedDone]);

  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const timeStr = time.toLocaleTimeString("en-US", { hour12: false });
  const dateStr = time.toLocaleDateString("en-US", { year:"numeric", month:"2-digit", day:"2-digit" });

  return (
    <section className="hero" data-screen-label="00 Hero">
      <div className="hero-top">
        <span>▸ <b>jkc</b>.portfolio / v5.0</span>
        <span>SESSION <b>#{Math.floor(Math.random()*900+100)}</b></span>
        <span>{dateStr} · <b className="green">{timeStr}</b></span>
      </div>

      <div>
        {phase < 2 && (
          <h1 className="hero-title" style={{ marginTop: 100 }}>
            {phase === 0 && <>{typed}<span className="caret" /></>}
            {phase === 1 && (
              <span>
                {"JKC Portfolio".split("").map((ch, i) => (
                  <span
                    key={i}
                    className="destructing"
                    style={{ animationDelay: (i * 40) + "ms" }}
                  >{ch === " " ? "\u00a0" : ch}</span>
                ))}
              </span>
            )}
          </h1>
        )}

        {phase === 2 && (
          <>
            <h1 className="hero-title reveal in">
              <span className="glitch" data-text="Hello, world.">Hello, world.</span>
            </h1>
            <div className="hero-kr reveal in" style={{ transitionDelay: "120ms" }}>
              경경철<span className="caret" style={{ color: "var(--magenta)" }} />
            </div>
            <p className="hero-sub reveal in" style={{ transitionDelay: "260ms" }}>
              <b>$ whoami →</b> Fullstack Developer · Backend Engineer. Java 백엔드를 기반으로 에너지·스마트팜·운영형 플랫폼 도메인에서 실무를 쌓아왔습니다.<br />
              최근에는 <span className="green">AI 연동 시스템</span>과 <span className="magenta">OpenAI API 기반 서비스</span> 구축에 집중하고 있습니다.
            </p>
          </>
        )}

        {phase < 2 && (
          <p className="hero-sub" style={{ color: "var(--ink-ghost)", marginTop: 40 }}>
            <span className="dim">▸</span> {subTyped}{!subDone && <span className="caret" />}
          </p>
        )}
      </div>

      <div className="hero-strip reveal in" style={{ transitionDelay: "400ms", opacity: phase === 2 ? 1 : 0 }}>
        <div className="hero-strip-item">
          <span className="k">total projects</span>
          <span className="v">50+</span>
        </div>
        <div className="hero-strip-item">
          <span className="k">primary domain</span>
          <span className="v magenta">Energy / ICT / IoT</span>
        </div>
        <div className="hero-strip-item">
          <span className="k">main stack</span>
          <span className="v amber">Java · Spring</span>
        </div>
        <div className="hero-strip-item">
          <span className="k">current status</span>
          <span className="v">▸ AVAILABLE</span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;