// CTA + footer
function CtaTerminal() {
  const lines = [
    { p: true, t: "git clone tu-idea.git" },
    { p: false, t: "✓ idea clonada · 0 conflicts" },
    { p: true, t: "cd tu-idea/" },
    { p: true, t: "vh-code ship --fast --good --weekly" },
    { p: false, t: "→ próximo release: viernes 18:00" },
  ];

  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (shown >= lines.length) return;
    const t = setTimeout(() => setShown(shown + 1), 700);
    return () => clearTimeout(t);
  }, [shown]);

  return (
    <div className="cta-terminal">
      <div className="cta-terminal-head">
        <div className="cta-terminal-dots">
          <span className="cta-terminal-dot"></span>
          <span className="cta-terminal-dot"></span>
          <span className="cta-terminal-dot"></span>
        </div>
        <span>~/vh-code · zsh</span>
      </div>
      <div className="cta-terminal-body">
        {lines.slice(0, shown).map((l, i) => (
          <div key={i}>
            {l.p ? (
              <span>
                <span className="cta-terminal-prompt">$</span>{" "}
                <span style={{ color: "var(--fg)" }}>{l.t}</span>
              </span>
            ) : (
              <span className="cta-terminal-output">{l.t}</span>
            )}
          </div>
        ))}
        {shown < lines.length && <span className="cursor"></span>}
      </div>
    </div>
  );
}

function Cta() {
  return (
    <section className="cta" id="contact">
      <div className="cta-bg"></div>
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <span className="eyebrow cta-eyebrow">/ empezar</span>
        <h2 className="cta-headline">
          Construyamos
          <br />
          algo que{" "}
          <span className="gradient-text" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400 }}>
            importe.
          </span>
        </h2>
        <p className="cta-sub">
          30 minutos de call. Te decimos si lo hacemos, cuánto sale y cuándo arranca.
          Sin formularios eternos, sin propuestas de 40 páginas.
        </p>
        <div className="cta-row">
          <a href="mailto:hola@vhcode.com" className="btn btn-primary">
            hola@vhcode.com
            <span className="btn-arrow">↗</span>
          </a>
          <a href="#" className="btn btn-ghost">
            Agendar 30 min
            <span className="btn-arrow">→</span>
          </a>
        </div>
        <CtaTerminal />
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container" style={{ padding: 0 }}>
        <div className="footer-top">
          <div className="footer-brand">
            <div className="footer-logo">
              <img src="logo2.png" alt="VH code" className="footer-logo-img" />
            </div>
            <div className="footer-tag">
              Studio de ingeniería — software a medida + producto.
              <br />
              Buenos Aires · trabajamos remoto con clientes en LATAM, US y EU.
            </div>
          </div>
          <div>
            <div className="footer-col-title">Productos</div>
            <div className="footer-col-links">
              <a href="https://botsapper.com">Botsapper</a>
              <a href="https://mydatatalk.com">MyDataTalk</a>
              <a href="https://zwip.io">Zwip</a>
              <a href="https://kalir.io">Kalir</a>
            </div>
          </div>
          <div>
            <div className="footer-col-title">Studio</div>
            <div className="footer-col-links">
              <a href="#about">Manifesto</a>
              <a href="#process">Proceso</a>
              <a href="#products">Casos</a>
              <a href="#">Trabajá con nosotros</a>
            </div>
          </div>
          <div>
            <div className="footer-col-title">Hablar</div>
            <div className="footer-col-links">
              <a href="mailto:hola@vhcode.com">hola@vhcode.com</a>
              <a href="tel:+5491151109844">+54 9 11 5110 9844</a>
              <a href="#">LinkedIn</a>
              <a href="#">GitHub</a>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 VH code — built in Buenos Aires</span>
          <span className="footer-bottom-glyph">/</span>
          <span>v2026.05 · ship date 2026-05-10</span>
        </div>
      </div>
    </footer>
  );
}

window.Cta = Cta;
window.Footer = Footer;