// Hero — massive type + live commit feed
function Hero({ accent }) {
  const [commits, setCommits] = React.useState(window.COMMITS_INITIAL);

  React.useEffect(() => {
    const id = setInterval(() => {
      setCommits((prev) => {
        const next = [...prev];
        const item = next.pop();
        next.unshift(item);
        return next;
      });
    }, 2400);
    return () => clearInterval(id);
  }, []);

  const now = new Date();
  const date = now.toISOString().slice(0, 10);

  return (
    <section className="hero" id="top">
      <div className="hero-grid-bg"></div>
      <div className="hero-glow"></div>
      <div className="hero-glow b"></div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div className="hero-meta">
          <div className="hero-meta-block">
            <span className="hero-meta-label">// studio</span>
            <span className="hero-meta-value">Buenos Aires · remoto</span>
          </div>
          <div className="hero-meta-block" style={{ alignItems: "center" }}>
            <span className="hero-meta-label">— v2026.05 —</span>
            <span className="hero-meta-value">producción estable</span>
          </div>
          <div className="hero-meta-block" style={{ alignItems: "flex-end" }}>
            <span className="hero-meta-label">// ship date</span>
            <span className="hero-meta-value">{date}</span>
          </div>
        </div>

        <h1 className="hero-headline">
          <span className="line">Construimos</span>
          <span className="line indent">
            <span className="serif" style={{ fontFamily: "var(--font-serif)" }}>software</span>
          </span>
          <span className="line">
            que cambia lo
            <span className="gigaslash">/</span>
            establecido<span className="cursor"></span>
          </span>
        </h1>

        <div className="hero-bottom">
          <div>
            <p className="hero-pitch">
              Somos <strong>VH code</strong>, un studio de ingeniería que diseña y desarrolla
              productos a medida — y opera <strong>cuatro</strong> productos propios que ya usan
              cientos de equipos. <span className="serif">Hacemos lo que prometemos</span>, en
              sprints cortos, con código que no da vergüenza.
            </p>
            <div className="hero-cta-row">
              <a href="#contact" className="btn btn-primary">
                Contar tu proyecto
                <span className="btn-arrow">↗</span>
              </a>
              <a href="#products" className="btn btn-ghost">
                Ver productos
                <span className="btn-arrow">→</span>
              </a>
            </div>
          </div>

          <CommitFeed commits={commits} />
        </div>
      </div>
    </section>
  );
}

function CommitFeed({ commits }) {
  return (
    <div className="commit-feed">
      <div className="commit-feed-head">
        <span className="commit-feed-dot live"></span>
        <span className="commit-feed-title">~ VH code · activity feed</span>
        <span className="commit-feed-status">live</span>
      </div>
      <div className="commit-feed-body">
        <div className="commit-feed-list">
          {commits.slice(0, 12).map((c, i) => (
            <div
              key={c.hash + i}
              className="commit-row"
              style={{
                opacity: 1 - i * 0.05,
                transition: "opacity 0.5s",
              }}
            >
              <span className="commit-hash">{c.hash}</span>
              <span className="commit-msg">
                <span className={`commit-tag ${c.tag}`}>{c.tag}</span>
                <span style={{ color: "var(--fg-muted)" }}>{c.repo}/</span>
                <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{c.msg}</span>
              </span>
              <span className="commit-time">{i === 0 ? "now" : `${i * 3}m`}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;