/* ============================================================
   HERO — boot sequence + name reveal + ascii portrait
   ============================================================ */

const BOOT_LINES = [
  { text: "> booting portfolio.sh ...",                                   wait: 140 },
  { text: "[ OK ] loading kernel modules ......................... done", wait: 80,  cls: "ok" },
  { text: "[ OK ] mounting /experience ............................ done", wait: 80, cls: "ok" },
  { text: "[ OK ] mounting /projects .............................. done", wait: 80, cls: "ok" },
  { text: "[ OK ] initializing tech_stack.service ................. done", wait: 80, cls: "ok" },
  { text: "[ OK ] establishing uplink → neuroflash ................ done", wait: 80, cls: "ok" },
  { text: "[ â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“ ] 100%",                            wait: 200, cls: "bar" },
  { text: "> ready. type --help or scroll to continue.",                  wait: 300 },
];

const PORTRAIT_SRC = "images/portrait-hero.jpg";

function Boot({ onDone }) {
  const { lines, done } = useTypewriter(BOOT_LINES, { charDelay: 6, lineDelay: 90 });
  useEffect(() => { if (done) onDone && onDone(); }, [done]);
  return (
    <div className="boot">
      {lines.map((l, i) => (
        <span key={i} className={"line " + (l.cls || "")}>
          {l.text}
          {l.partial && <span style={{ color: "var(--accent)" }}>â–‹</span>}
        </span>
      ))}
    </div>
  );
}

function AsciiPortrait() {
  return (
    <div className="ascii-portrait">
      <div className="label">
        <span>portrait.jpg</span>
        <span>420x420</span>
      </div>
      <div className="portrait-frame">
        <img src={PORTRAIT_SRC} alt="Yassine Zenned portrait" className="portrait-image" />
      </div>
      <div className="label" style={{ marginTop: 10, marginBottom: 0 }}>
        <span>yzenned</span>
        <span>live</span>
      </div>
    </div>
  );
}

function Hero() {
  const [bootDone, setBootDone] = useState(false);
  const [bootHidden, setBootHidden] = useState(false);
  const [showName, setShowName] = useState(false);

  useEffect(() => {
    if (bootDone) {
      const t1 = setTimeout(() => setShowName(true), 200);
      // hold the fully-typed boot on screen briefly, then fade + collapse
      const t2 = setTimeout(() => setBootHidden(true), 1400);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }
  }, [bootDone]);

  const name1 = useScramble("YASSINE", showName, 2.2);
  const name2 = useScramble("ZENNED", showName, 1.8);

  return (
    <section className="hero" data-screen-label="hero">
      {!bootHidden && (
        <div className={"boot-wrap " + (bootDone ? "fading" : "")}>
          <Boot onDone={() => setBootDone(true)} />
        </div>
      )}

      <div className="hero-split">
        <div>
          <h1 className="hero-name scramble">
            {showName ? <>{name1 || "YASSINE"}<br /><span className="accent">{name2 || "ZENNED"}</span></> : <>&nbsp;</>}
            {showName && <span className="caret" />}
          </h1>
          {bootDone && (
            <>
              <p className="hero-sub">
                <span className="hl">{'>'}</span> software engineer. building <span className="hl">AI-powered backends</span>,{" "}
                scalable <span className="hl">microservices</span>, and the occasional dev tool that actually gets used.
                based in <span className="hl">Germany</span>. open to interesting problems.
              </p>
              <div className="hero-meta">
                <div className="m"><span className="k">role</span><span className="v">Software Engineer</span></div>
                <div className="m"><span className="k">company</span><span className="v">neuroflash</span></div>
                <div className="m"><span className="k">loc</span><span className="v">Germany</span></div>
                <div className="m"><span className="k">mail</span><a href={`mailto:${PROFILE.email}`}>{PROFILE.email}</a></div>
              </div>
            </>
          )}
        </div>
        <AsciiPortrait />
      </div>
    </section>
  );
}

Object.assign(window, { Hero });