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

// ============================================================
// Hero — three variants, all big "Arman Chaudhary" + role
// ============================================================

const ROLES = [
  "AI/ML Engineer",
  "Data Scientist",
  "Research Fellow",
  "Full-Stack Builder",
  "Hackathon Hacker",
  "Curious Builder",
];

// ---- Variant A: BOOT ----------------------------------------
function HeroBoot() {
  const [step, setStep] = useState(0);
  const 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 },
  ];
  useEffect(() => {
    if (step >= lines.length) return;
    const id = setTimeout(() => setStep(step + 1), lines[step].d);
    return () => clearTimeout(id);
  }, [step]);

  return (
    <div className="hero-boot">
      <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">
          {lines.slice(0, step).map((l, i) => (
            <div key={i} className="boot-line">{l.t}</div>
          ))}
          {step < lines.length && <div className="boot-line">{lines[step]?.t || ""}<span className="caret caret-thin" /></div>}
        </div>
      </div>

      <div className={"hero-name " + (step >= lines.length ? "settled" : "")}>
        <div className="kicker mono">
          <span>──── 2026 / curious builder</span>
        </div>
        <h1 className="bigname">
          <span className="word">Arman</span>
          <span className="word">Chaudhary</span>
        </h1>
        <div className="role-row mono">
          <RoleSwap />
          <span className="role-loc">→ Chandigarh · India</span>
        </div>
      </div>
    </div>
  );
}

// ---- Variant B: STACK ---------------------------------------
function HeroStack() {
  return (
    <div className="hero-stack">
      <div className="hero-rail mono">
        <span>idx_00</span>
        <span>·</span>
        <span>hero / stack</span>
        <span>·</span>
        <span>v2.0.0</span>
      </div>
      <div className="stack-name">
        <div className="stack-row r1">ARMAN</div>
        <div className="stack-row r2">
          <span className="stack-meta mono">
            <span className="lbl">role</span>
            <span className="val">ai/ml engineer</span>
          </span>
          <span className="stack-arrow">↘</span>
        </div>
        <div className="stack-row r3">CHAUDHARY</div>
        <div className="stack-row r4">
          <span className="stack-meta mono">
            <span className="lbl">stack</span>
            <span className="val">ai/ml · next · fastapi</span>
          </span>
        </div>
      </div>
      <div className="hero-foot mono">
        <div>
          <span className="foot-lbl">// signal</span>
          <p>Building intelligent systems at the edge of research and product. Deepfakes, transformers, agents — and the occasional weekend hackathon.</p>
        </div>
        <div className="foot-stats">
          <Stat n="10+" l="projects shipped" />
          <Stat n="07"  l="hackathons" />
          <Stat n="02"  l="research roles" />
          <Stat n="∞"   l="curious questions" />
        </div>
      </div>
    </div>
  );
}

// ---- Variant C: MANIFESTO -----------------------------------
function HeroManifesto() {
  return (
    <div className="hero-manifesto">
      <div className="m-row mono">
        <span>FILE / 00_hero.txt</span>
        <span>LAST MODIFIED · {new Date().toISOString().slice(0, 10)}</span>
      </div>
      <h1 className="m-headline">
        Hi, I'm <em className="serif">Arman</em>. I build
        <br/>intelligent systems and ship them
        <br/>before the demo ends.<span className="caret caret-thin" />
      </h1>
      <div className="m-bottom">
        <div className="m-tag mono">// AI/ML Engineer · Data Scientist · Research Fellow · CS @ PEC</div>
        <div className="m-cta">
          <a className="btn" href="https://www.linkedin.com/in/arman-chaudhary/" target="_blank" rel="noopener">
            Hire Me <span className="arrow" />
          </a>
          <a className="btn btn-ghost" href="#projects" onClick={(e) => { e.preventDefault(); document.getElementById('projects')?.scrollIntoView({behavior:'smooth'}); }}>
            See Work <span className="arrow" />
          </a>
        </div>
      </div>
    </div>
  );
}

// shared bits
function RoleSwap() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % ROLES.length), 2000);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="role-swap">
      <span className="role-arrow">›</span>
      <span key={i} className="role-text">{ROLES[i]}</span>
    </span>
  );
}
function Stat({ n, l }) {
  return (
    <div className="stat">
      <div className="stat-n">{n}</div>
      <div className="stat-l mono">{l}</div>
    </div>
  );
}

function Hero({ variant }) {
  return (
    <section id="home" className="section hero-section">
      <div className="col-rule" />
      <div className="shell">
        {variant === "boot" && <HeroBoot />}
        {variant === "stack" && <HeroStack />}
        {variant === "manifesto" && <HeroManifesto />}

        {/* always-on hero footer ticker */}
        <div className="hero-ticker">
          <div className="ticker-track mono">
            {"AVAILABLE FOR · RESEARCH · FULL TIME · CONTRACT · COLLABORATIONS · OPEN-SOURCE  ★  ".repeat(6)}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });