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

/* ============================================================
   Reveal-on-scroll wrapper
   ============================================================ */
function Reveal({ children, as = "div", delay = 0, className = "", ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback: if IO doesn't fire within ~600ms (sandboxed iframes, certain
    // preview environments), reveal anyway so content is never stuck invisible.
    const fallback = setTimeout(() => setVisible(true), 600);
    let io;
    try {
      io = new IntersectionObserver(
        (entries) => {
          entries.forEach((e) => {
            if (e.isIntersecting) {
              setVisible(true);
              clearTimeout(fallback);
              io.unobserve(el);
            }
          });
        },
        { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
      );
      io.observe(el);
    } catch (_) {
      setVisible(true);
    }
    return () => {clearTimeout(fallback);io && io.disconnect();};
  }, []);
  const Tag = as;
  const cls = ["reveal", visible ? "in" : "", delay ? `reveal-delay-${delay}` : "", className].
  filter(Boolean).
  join(" ");
  return (
    <Tag ref={ref} className={cls} {...rest}>
      {children}
    </Tag>);

}

/* ============================================================
   NAV
   ============================================================ */
function Nav({ theme, onToggleTheme }) {
  return (
    <nav className="nav">
      <div className="nav-mark">
        <span className="dot"></span>
        <span>kolber.tech / .NET + React Engineer · Product Owner</span>
      </div>
      <div className="nav-links">
        <a href="#stack">01 — Stack</a>
        <a href="#experience">02 — Work</a>
        <a href="#education">03 — Education</a>
        <a href="#about">04 — About</a>
        <a href="#now">05 — Now</a>
      </div>
      <div className="nav-actions">
        <button className="theme-toggle" onClick={onToggleTheme} aria-label="Toggle theme">
          <span className="glyph"></span>
          <span>{theme === "dark" ? "Dark" : "Light"}</span>
        </button>
        <a className="contact-pill" href="#contact">
          <span>Contact</span>
          <span>↗</span>
        </a>
      </div>
    </nav>);

}

/* ============================================================
   HERO with role toggle
   ============================================================ */
const ROLES = [
{
  key: "engineer",
  label: "Senior Software Engineer",
  num: "01",
  blurb:
  "Architecting and shipping production .NET and React systems — distributed architectures with Microsoft Orleans, Terraform-managed Azure, and code that holds up under audit.",
  stats: [
  { num: ".NET 9", label: "C# 13 in prod" },
  { num: "React 18", label: "TypeScript first" },
  { num: "Azure", label: "Terraform · Orleans" }]

},
{
  key: "po",
  label: "Product Owner",
  num: "02",
  blurb:
  "Translating stakeholder ambition into a backlog the team can actually build — sharp acceptance criteria, ruthless prioritisation, and a refinement cadence that doesn't burn out.",
  stats: [
  { num: "4", label: "Dev team size" },
  { num: "40+", label: "Releases shipped" },
  { num: "DDD", label: "Domain modelling" },
  { num: "Agile", label: "Scrum · Confluence" }]

}];


function Hero() {
  const [active, setActive] = useState("engineer");
  const [paused, setPaused] = useState(false);
  const role = ROLES.find((r) => r.key === active);

  // Auto-cycle every 10s; pauses if the user clicks a chip.
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setActive((curr) => {
        const idx = ROLES.findIndex((r) => r.key === curr);
        return ROLES[(idx + 1) % ROLES.length].key;
      });
    }, 10000);
    return () => clearInterval(id);
  }, [paused]);

  const pickRole = (key) => {
    setActive(key);
    setPaused(true);
  };

  return (
    <header className="hero">
      <Reveal>
        <div className="hero-meta">
          <span>KRAKÓW, POLAND · CET · POLISH (NATIVE) / ENGLISH C2</span>
        </div>
      </Reveal>

      <Reveal delay={1}>
        <h1 className="hero-title">
          Marcin <span className="accent-word">Kolber</span>
        </h1>
      </Reveal>

      <Reveal delay={2}>
        <div className="hero-roles" role="tablist" aria-label="Role">
          {ROLES.map((r) =>
          <button
            key={r.key}
            className={`role-chip ${active === r.key ? "active" : ""}`}
            onClick={() => pickRole(r.key)}
            role="tab"
            aria-selected={active === r.key}>
            
              <span className="num">{r.num}</span>
              <span>{r.label}</span>
            </button>
          )}
        </div>
      </Reveal>

      <Reveal delay={3}>
        <div className="role-detail" key={active}>
          <div>
            <div className="role-detail-key">In this role</div>
            <p className="role-blurb">{role.blurb}</p>
          </div>
          <div className="role-stats">
            {role.stats.map((s, i) =>
            <div key={i} className="role-stat">
                <div className="role-stat-num">
                  {/^\d/.test(s.num) ?
                <>
                      <span className="accent">{s.num.match(/^\d+/)[0]}</span>
                      {s.num.replace(/^\d+/, "")}
                    </> :

                s.num
                }
                </div>
                <div className="role-stat-label">{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </Reveal>
    </header>);

}

Object.assign(window, { Reveal, Nav, Hero });