// contact.jsx — Final business-card sequence

function QRGrid({ url }) {
  const target = url || "https://www.linkedin.com/in/bruno-margula-a95927119/";
  const cells = React.useMemo(() => {
    if (typeof window.qrcode !== "function") return null;
    const qr = window.qrcode(0, "M");
    qr.addData(target);
    qr.make();
    const n = qr.getModuleCount();
    const arr = [];
    for (let r = 0; r < n; r++) {
      for (let c = 0; c < n; c++) arr.push(qr.isDark(r, c) ? 1 : 0);
    }
    return { n, arr };
  }, [target]);

  if (!cells) {
    return <div className="bizcard-qr" aria-hidden="true" style={{ width: 96, height: 96 }}/>;
  }

  return (
    <a href={target} target="_blank" rel="noopener noreferrer"
       className="bizcard-qr"
       aria-label="QR code to LinkedIn profile"
       style={{
         gridTemplateColumns: `repeat(${cells.n}, 1fr)`,
         width: 96, height: 96
       }}>
      {cells.arr.map((v, i) => (
        <span key={i} style={{
          opacity: 0,
          background: v ? "var(--ink)" : "transparent",
          animationDelay: `${0.3 + (i % cells.n) * 0.003 + Math.floor(i / cells.n) * 0.003}s`
        }}/>
      ))}
    </a>
  );
}

function Contact({ t }) {
  return (
    <section className="contact-wrap" data-screen-label="08 Kontakt">
      <div className="section-tag">{t.contact.tag}</div>
      <h2 className="section-title" style={{ textAlign: "center", marginBottom: "20px" }}>
        {t.contact.title} <em>{t.contact.titleEm}</em>
      </h2>
      <p className="section-sub" style={{ margin: "0 auto 0", textAlign: "center" }}>
        {t.contact.sub}
      </p>

      <div className="bizcard">
        <div className="bizcard-top">
          <div>
            <div className="bizcard-name">Bruno Margula</div>
            <div className="bizcard-role">{t.contact.cardRole}</div>
          </div>
          <div className="bizcard-mark">
            <div>BM</div>
            <span className="id">{t.contact.cardId}</span>
          </div>
        </div>
        <div className="bizcard-bottom">
          <div className="bizcard-links">
            {t.contact.links.map((l) => (
              <a key={l.l} href={l.href} target="_blank" rel="noopener noreferrer">
                <span style={{ color: "var(--ink-mute)" }}>{l.l}</span>
                <span>{l.h}</span>
                <span className="arrow">→</span>
              </a>
            ))}
          </div>
          <QRGrid />
        </div>
      </div>

      <div className="footer">
        <span>{t.footer.copy}</span>
        <span>{t.footer.updated}</span>
      </div>
    </section>
  );
}

window.Contact = Contact;