/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "stack"
}/*EDITMODE-END*/;

const BOOT_LINES = [
  { t: "$ ./bootstrap --user=arman", d: 280 },
  { t: "  ↳ resolving identity......................OK", d: 320 },
  { t: "  ↳ loading interests [ai, ml, systems]......OK", d: 320 },
  { t: "  ↳ mounting projects (10 found)............OK", d: 320 },
  { t: "  ↳ shaking hands with hackathons...........OK", d: 320 },
  { t: "  ↳ ready.", d: 280 },
];

function BootLoader() {
  const [step, setStep] = useState(0);
  const [fading, setFading] = useState(false);

  useEffect(() => {
    if (step >= BOOT_LINES.length) {
      const fadeId = setTimeout(() => setFading(true), 220);
      return () => clearTimeout(fadeId);
    }
    const id = setTimeout(() => setStep(step + 1), BOOT_LINES[step].d);
    return () => clearTimeout(id);
  }, [step]);

  return (
    <div className={"boot-screen " + (fading ? "boot-screen-fade" : "") }>
      <div className="shell boot-shell">
        <div className="boot-window">
          <div className="boot-titlebar mono">
            <span className="dotrow"><i/><i/><i/></span>
            <span>~/arman.chaudhary — zsh — boot.log</span>
            <span className="boot-meta">[ 24 lines · 1.2kb ]</span>
          </div>
          <div className="boot-body mono">
            {BOOT_LINES.slice(0, step).map((l, i) => (
              <div key={i} className="boot-line">{l.t}</div>
            ))}
            {step < BOOT_LINES.length && (
              <div className="boot-line">{BOOT_LINES[step]?.t || ""}<span className="caret caret-thin" /></div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const tweaks = TWEAK_DEFAULTS;
  const [showBoot, setShowBoot] = useState(true);
  window.useReveal(true);

  useEffect(() => {
    const id = setTimeout(() => setShowBoot(false), 2500);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="page">
      <window.Cursor />
      <window.StatusBar />
      <window.Nav />
      <main>
        <window.Hero
          key={(showBoot ? "booting" : "ready") + "-" + tweaks.heroVariant}
          variant={tweaks.heroVariant}
        />
        <window.About />
        <window.Skills />
        <window.Projects />
        <window.Experience />
        <window.Hackathons />
        {/* <window.Testimonials /> */}
        <window.Connect />
      </main>

      {showBoot && <BootLoader />}


    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);