/* eslint-disable */
/* ---------- CONTACT — form + cal.com booking + ASCII accent ---------- */

const { useEffect: _useEffectC, useState: _useStateC, useRef: _useRefC } = React;

/* small ASCII map for the side rail */
const CONTACT_ASCII = `   ┌─────────────────────────┐
   │  ▣ inbound.queue        │
   │  ▣ scheduler.cal        │
   │  ▣ briefcase.notion     │
   │  ▢ phone.directvm       │
   │                         │
   │  ► ROUTE: kevin@yyz     │
   │  ► SLA:   <24h business │
   │  ► TZ:    EST (UTC-5)   │
   └─────────────────────────┘`;

function Contact() {
  const [form, setForm] = _useStateC({ name: "", email: "", company: "", topic: "consulting", msg: "" });
  const [sent, setSent] = _useStateC(false);
  const [showCal, setShowCal] = _useStateC(false);
  const calRef = _useRefC(null);

  /* lazy-load cal.com embed only when the user clicks "book a call" */
  _useEffectC(() => {
    if (!showCal || !calRef.current) return;
    if (calRef.current.dataset.loaded) return;
    calRef.current.dataset.loaded = "1";
    /* Cal.com embed loader — official snippet, deferred */
    const s = document.createElement("script");
    s.innerHTML = `
      (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document;
      C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments;
      if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; }
      if (ar[0] === L) { const api = function () { p(api, arguments); };
      const namespace = ar[1]; api.q = api.q || [];
      if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]);} else p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
      Cal("init", "intro", { origin: "https://cal.com" });
      Cal.ns.intro("inline", { elementOrSelector:"#cal-mount", config: { layout: "month_view", theme: "dark" }, calLink: "kzicherman/intro" });
      Cal.ns.intro("ui", { theme: "dark", styles: { branding: { brandColor: "#f5f3ec" } }, hideEventTypeDetails: false, layout: "month_view" });
    `;
    document.body.appendChild(s);
  }, [showCal]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.email) return;
    /* TODO: wire to ghost members / formspree / a serverless endpoint at /api/contact */
    /* for now: optimistic UI + log the intent */
    console.log("[contact] submit", form);
    setSent(true);
  };

  return (
    <section id="contact" data-section="contact" className="section-pad">
      <div className="container">
        <div className="box-head">
          <span>// 14 — contact / book a call</span>
          <span className="rule" />
        </div>

        <window.Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0, border: "1px solid var(--line-strong)", background: "var(--bg-1)" }} className="contact-grid">
            {/* LEFT — form */}
            <div style={{ padding: 36, borderRight: "1px solid var(--line)" }} className="contact-left">
              <div className="prompt-line" style={{ marginBottom: 14 }}>
                <span className="ps">kevin@toronto</span>
                <span className="dim">:</span>
                <span className="amber">~/inbox</span>
                <span className="dim"> $ </span>
                <span>compose --new<span className="cursor" /></span>
              </div>
              <h2 className="h-section" style={{ margin: "0 0 12px" }}>send a ping.</h2>
              <p className="lede" style={{ marginTop: 0 }}>
                Consulting, partnerships, podcast invites, or just hello. I read every message — typically reply within 24h.
              </p>

              {!sent ? (
                <form onSubmit={submit} className="contact-form" style={{ display: "grid", gap: 12, marginTop: 24, maxWidth: 520 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <input className="news-input" type="text" placeholder="name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
                    <input className="news-input" type="email" placeholder="you@operator.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
                  </div>
                  <input className="news-input" type="text" placeholder="company / role (optional)" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--fg-3)" }}>
                    {[
                      { v: "consulting", l: "consulting" },
                      { v: "speaking", l: "speaking" },
                      { v: "press", l: "press" },
                      { v: "other", l: "other" }
                    ].map((o) => (
                      <button key={o.v} type="button" onClick={() => setForm({ ...form, topic: o.v })}
                        style={{
                          padding: "8px 12px",
                          border: "1px solid " + (form.topic === o.v ? "var(--amber)" : "var(--line-strong)"),
                          background: form.topic === o.v ? "color-mix(in oklch, var(--amber) 10%, transparent)" : "transparent",
                          color: form.topic === o.v ? "var(--amber)" : "var(--fg-3)",
                          fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                          cursor: "pointer", transition: "all 140ms ease"
                        }}>
                        ▸ {o.l}
                      </button>
                    ))}
                  </div>
                  <textarea
                    className="news-input"
                    rows={5}
                    placeholder="what are you trying to build?"
                    value={form.msg}
                    onChange={(e) => setForm({ ...form, msg: e.target.value })}
                    required
                    style={{ resize: "vertical", fontFamily: "var(--mono)" }}
                  />
                  <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                    <button className="btn btn-primary" type="submit">▸ send signal</button>
                    <button className="btn" type="button" onClick={() => setShowCal((v) => !v)}>
                      {showCal ? "✗ hide calendar" : "$ book 20-min intro →"}
                    </button>
                    <span className="dim" style={{ fontSize: 11, letterSpacing: "0.12em" }}>or email <a href="mailto:hi@kevinz.ai" style={{ color: "var(--amber)" }}>hi@kevinz.ai</a></span>
                  </div>
                </form>
              ) : (
                <div style={{ marginTop: 24, padding: 22, border: "1px solid var(--green)", background: "color-mix(in oklch, var(--green) 6%, transparent)", color: "var(--fg)" }}>
                  <div style={{ fontSize: 11, color: "var(--green)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 8 }}>▸ TRANSMIT_OK · queued</div>
                  <div style={{ fontSize: 14 }}>Got it. I'll route this to my inbox and reply within 24h business.</div>
                  <div className="dim mt-12" style={{ fontSize: 11, letterSpacing: "0.12em" }}>$ ack — payload: {form.topic} from {form.email}</div>
                </div>
              )}

              {showCal && (
                <div style={{ marginTop: 32, border: "1px solid var(--line-strong)", background: "var(--bg)" }}>
                  <div style={{ padding: "10px 14px", borderBottom: "1px dashed var(--line)", display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase" }}>
                    <span><span className="amber">▸</span> calendar.cal · 20-min intro</span>
                    <span><span className="led" style={{ width: 5, height: 5 }} />LIVE</span>
                  </div>
                  <div ref={calRef} id="cal-mount" style={{ minHeight: 580 }}>
                    <div style={{ padding: 40, textAlign: "center", color: "var(--fg-4)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                      ⌛ loading calendar… <span className="dim">[ powered by cal.com ]</span>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* RIGHT — meta + ascii */}
            <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 22 }} className="contact-right">
              <div>
                <div className="dim" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 10 }}>▸ routing table</div>
                <pre style={{ fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1.45, color: "var(--fg-2)", margin: 0, whiteSpace: "pre" }}>{CONTACT_ASCII}</pre>
              </div>

              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 22 }}>
                <div className="dim" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 14 }}>▸ social channels</div>
                <div style={{ display: "grid", gap: 10 }}>
                  {[
                    { k: "X / @KZic", v: "https://x.com/KZic", note: "building in public · daily" },
                    { k: "LinkedIn", v: "https://linkedin.com/in/kzicherman", note: "28K+ · CEOs / operators" },
                    { k: "GitHub", v: "https://github.com/KevinZai", note: "31 repos · OSS Commander" },
                    { k: "Discord", v: "https://discord.gg/commander", note: "Insider tier · members" }
                  ].map((s) => (
                    <a key={s.k} href={s.v} target="_blank" rel="noreferrer"
                      style={{ display: "grid", gridTemplateColumns: "120px 1fr auto", gap: 12, padding: "10px 12px", border: "1px solid var(--line)", background: "var(--bg-2)", alignItems: "center", transition: "all 140ms ease" }}
                      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--amber)"; e.currentTarget.style.background = "color-mix(in oklch, var(--amber) 5%, var(--bg-2))"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.background = "var(--bg-2)"; }}>
                      <span style={{ fontSize: 12, fontWeight: 600, color: "var(--fg)" }}>{s.k}</span>
                      <span style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em" }}>{s.note}</span>
                      <span style={{ color: "var(--fg-4)", fontSize: 14 }}>↗</span>
                    </a>
                  ))}
                </div>
              </div>

              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 22, marginTop: "auto" }}>
                <div className="dim" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 8 }}>▸ pgp · optional</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em", lineHeight: 1.6 }}>
                  fingerprint <span className="amber">3D5F · 9C42 · BB10 · 7AE8</span>
                  <br />
                  <a href="/.well-known/pgp.txt" style={{ color: "var(--fg-3)", borderBottom: "1px dashed var(--line-strong)" }}>$ curl kevinz.ai/.well-known/pgp.txt</a>
                </div>
              </div>
            </div>
          </div>
        </window.Reveal>
      </div>
    </section>
  );
}

window.Contact = Contact;