// Hero section with animated terminal
const Hero = () => {
  const data = window.PORTFOLIO_DATA;

  const terminalLines = [
    { type: "cmd", prompt: "~", text: "whoami" },
    { type: "out", text: "eren_guler — fullstack engineer", instant: true },
    { type: "cmd", prompt: "~", text: "cat ./profile.json" },
    {
      type: "json",
      instant: true,
      lines: [
        `{`,
        `  "role":      "Fullstack Developer",`,
        `  "stack":     [".NET", "Angular", "MSSQL"],`,
        `  "focus":     "scalable microservices",`,
        `  "location":  "Istanbul, TR",`,
        `  "available": true`,
        `}`,
      ],
    },
    { type: "cmd", prompt: "~", text: "./status.sh" },
    {
      type: "out",
      text: "● open to freelance + full-time roles",
      instant: true,
    },
  ];

  const [step, setStep] = React.useState(0);
  const [typed, setTyped] = React.useState({});

  React.useEffect(() => {
    if (step >= terminalLines.length) return;
    const line = terminalLines[step];

    if (line.type === "cmd") {
      const text = line.text;
      let i = 0;
      const id = setInterval(() => {
        i++;
        setTyped((t) => ({ ...t, [step]: text.slice(0, i) }));
        if (i >= text.length) {
          clearInterval(id);
          setTimeout(() => setStep(step + 1), 350);
        }
      }, 45);
      return () => clearInterval(id);
    } else {
      setTimeout(() => setStep(step + 1), 600);
    }
  }, [step]);

  return (
    <section className="hero" id="top">
      <div
        className="glow glow-amber"
        style={{ width: 600, height: 600, top: -100, right: -150 }}
      ></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-content">
            <div className="hero-greeting">
              <span className="prompt">$</span>
              <span>echo "hi, my name is"</span>
            </div>
            <h1 className="hero-name">
              Eren <span className="accent">Güler</span>.
            </h1>
            <h2 className="hero-role">I build scalable .NET systems.</h2>
            <p className="hero-tagline">
              I'm a <span className="hl">fullstack developer</span> based in
              Istanbul, specializing in{" "}
              <span className="hl">.NET microservices</span>, Angular
              interfaces, and the boring infrastructure that keeps both running
              quietly in production.
            </p>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="dot"></span>
                <span>available for work</span>
              </div>
              <div className="hero-meta-item">
                <window.Icon name="location" size={14} />
                <span>Istanbul, TR</span>
              </div>
              <div className="hero-meta-item">
                <window.Icon name="zap" size={14} />
                <span>4+ years shipping</span>
              </div>
            </div>
            <div className="hero-actions">
              <a
                href="mailto:erenguler1994@gmail.com"
                className="btn btn-primary"
              >
                <window.Icon name="mail" size={15} />
                Get in touch
              </a>
              <a
                href={data.github}
                target="_blank"
                rel="noreferrer"
                className="btn btn-ghost"
              >
                <window.Icon name="github" size={15} />
                View GitHub
                <window.Icon name="arrowUpRight" size={13} />
              </a>
            </div>
          </div>

          <div className="terminal" data-cursor="hover">
            <div className="terminal-bar">
              <div className="terminal-dots">
                <span className="terminal-dot red"></span>
                <span className="terminal-dot yellow"></span>
                <span className="terminal-dot green"></span>
              </div>
              <div className="terminal-title">~/eren — zsh — 80×24</div>
            </div>
            <div className="terminal-body">
              {terminalLines.slice(0, step + 1).map((line, i) => {
                const isCurrent = i === step;
                if (line.type === "cmd") {
                  const t =
                    typed[i] !== undefined
                      ? typed[i]
                      : i < step
                        ? line.text
                        : "";
                  return (
                    <div className="terminal-line" key={i}>
                      <span className="terminal-prompt">
                        eren@dev{" "}
                        <span style={{ color: "var(--amber)" }}>
                          {line.prompt}
                        </span>{" "}
                        $
                      </span>
                      <span className="terminal-cmd">
                        {t}
                        {isCurrent && <span className="terminal-cursor"></span>}
                      </span>
                    </div>
                  );
                }
                if (line.type === "out") {
                  return (
                    <div className="terminal-line" key={i}>
                      <span className="terminal-output">
                        {line.text.split("●").map((part, idx) =>
                          idx === 0 ? (
                            part
                          ) : (
                            <React.Fragment key={idx}>
                              <span style={{ color: "var(--green)" }}>●</span>
                              {part}
                            </React.Fragment>
                          ),
                        )}
                      </span>
                    </div>
                  );
                }
                if (line.type === "json") {
                  return (
                    <div key={i}>
                      {line.lines.map((l, j) => (
                        <div className="terminal-line" key={j}>
                          <span
                            className="terminal-output"
                            dangerouslySetInnerHTML={{
                              __html: colorJsonLine(l),
                            }}
                          ></span>
                        </div>
                      ))}
                    </div>
                  );
                }
                return null;
              })}
              {step >= terminalLines.length && (
                <div className="terminal-line">
                  <span className="terminal-prompt">
                    eren@dev <span style={{ color: "var(--amber)" }}>~</span> $
                  </span>
                  <span className="terminal-cursor"></span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

function colorJsonLine(line) {
  // Color JSON: keys magenta, strings green, booleans amber
  return line
    .replace(/("[\w]+"):/g, '<span style="color:var(--magenta)">$1</span>:')
    .replace(/: (".+?")/g, ': <span style="color:var(--green)">$1</span>')
    .replace(/: (true|false)/g, ': <span style="color:var(--amber)">$1</span>')
    .replace(
      /(\[.+?\])/g,
      (m) =>
        '<span style="color:#a89b86">' +
        m.replace(/(".+?")/g, '<span style="color:var(--green)">$1</span>') +
        "</span>",
    );
}

window.Hero = Hero;