// contact.jsx — form, Calendly card, social links

const { useState: useStateC, useEffect: useEffectC } = React;

function Contact({ setRoute }) {
  const [form, setForm] = useStateC({ name: "", email: "", subject: "Project enquiry", message: "" });
  const [status, setStatus] = useStateC("idle"); // idle | sending | sent
  const mobile = useMobile();

  const submit = async (e) => {
    e.preventDefault();
    if (!form.email.includes("@") || form.message.length < 10) return;
    setStatus("sending");
    try {
      const res = await fetch("https://formspree.io/f/xrejpezr", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(form),
      });
      setStatus(res.ok ? "sent" : "idle");
    } catch {
      setStatus("idle");
    }
  };

  return (
    <main style={{ paddingTop: 88 }}>
      <section style={{ padding: "60px 0 var(--d-section)" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  Get in touch</div>

          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "1.5fr 1fr",
            gap: mobile ? 20 : 64, alignItems: "flex-end",
            marginBottom: mobile ? 32 : 64,
          }}>
            <h1 style={{ fontSize: "clamp(56px, 7.4vw, 136px)" }}>
              <span style={{ color: "var(--ink)" }}>Say</span>{" "}
              <span className="serif spectrum">hello.</span>
              <br/>
              <span style={{ color: "var(--ink)" }}>Or </span>
              <span className="serif" style={{ color: "var(--ink-2)" }}>just lurk.</span>
            </h1>
            <p style={{
              color: "var(--ink-2)", fontSize: 19, lineHeight: 1.5,
              margin: 0, maxWidth: 420,
            }}>
              The fastest way to start a project is the order form. But if you've got
              a custom brief, want to chat first, or just want to say hi — drop me a note.
            </p>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "1fr 1.2fr",
            gap: 16,
            alignItems: "flex-start",
          }}>
            {/* ─── left rail ─── */}
            <Reveal>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <CalendlyCard />
                <EmailCard />
                <SocialsCard />
              </div>
            </Reveal>

            {/* ─── right: form ─── */}
            <Reveal delay={120}>
              <form onSubmit={submit} className="glass" style={{
                padding: "36px 36px 32px",
                borderRadius: "var(--radius-lg)",
                display: "flex", flexDirection: "column", gap: 22,
              }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>—  Message form</div>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 500,
                  letterSpacing: "-0.025em", marginBottom: 8,
                }}>
                  <span className="serif">Drop me</span> a line.
                </div>

                <div style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 18,
                }}>
                  <Field label="Your name">
                    <input
                      type="text" value={form.name}
                      onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                      placeholder="Alex Doe" style={inputStyleC}
                    />
                  </Field>
                  <Field label="Email" required>
                    <input
                      type="email" value={form.email}
                      onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                      placeholder="you@studio.com" style={inputStyleC}
                    />
                  </Field>
                </div>

                <Field label="What's this about?">
                  <select
                    value={form.subject}
                    onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
                    style={inputStyleC}
                  >
                    <option>Project enquiry</option>
                    <option>Custom project (over $1,500)</option>
                    <option>Press / interview</option>
                    <option>Just saying hi</option>
                  </select>
                </Field>

                <Field label="Your message" required hint={`${form.message.length} chars`}>
                  <textarea
                    value={form.message}
                    onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
                    placeholder="Tell me what you're working on, what you've seen that you love, and roughly when you'd want it delivered."
                    rows={6}
                    style={{ ...inputStyleC, resize: "vertical", minHeight: 140 }}
                  />
                </Field>

                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                  marginTop: 4,
                }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)" }}>
                    REPLY WITHIN 24H · OFTEN FASTER
                  </div>
                  <button
                    type="submit"
                    disabled={status !== "idle"}
                    className="btn btn-primary"
                    style={{ fontSize: 14, opacity: status === "idle" ? 1 : 0.7 }}
                  >
                    {status === "idle"   && <>Send message <span className="arr">→</span></>}
                    {status === "sending"&& <>Sending…</>}
                    {status === "sent"   && <>Sent · I'll reply soon ✓</>}
                  </button>
                </div>
              </form>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

const inputStyleC = {
  width: "100%",
  padding: "14px 16px",
  borderRadius: "var(--radius-sm)",
  background: "var(--glass)",
  border: "1px solid var(--line-2)",
  color: "var(--ink)",
  fontFamily: "var(--font-sans)",
  fontSize: 15,
  outline: "none",
};

function Field({ label, hint, required, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)" }}>
          {label.toUpperCase()} {required && <span style={{ color: "var(--p-amber)" }}>·</span>}
        </span>
        {hint && (
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.1em" }}>{hint}</span>
        )}
      </div>
      {children}
    </label>
  );
}

/* ─── Calendly card ─── */

function CalendlyCard() {
  return (
    <div className="glass glass-hi" style={{
      position: "relative",
      padding: "32px 28px 26px",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
    }}>
      {/* prism bloom */}
      <div style={{
        position: "absolute",
        right: -60, top: -40, width: 220, opacity: 0.55,
        filter: "blur(0.5px)",
        pointerEvents: "none",
        animation: "prismFloat 9s ease-in-out infinite",
      }}>
        <img src="assets/prism.png" alt="" style={{ width: "100%", display: "block" }} />
      </div>

      <div style={{ position: "relative" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>—  Book a call</div>
        <div style={{
          fontFamily: "var(--font-display)", fontSize: 38, fontWeight: 500,
          letterSpacing: "-0.03em", lineHeight: 0.95, marginBottom: 10,
        }}>
          <span className="serif">15 minutes,</span><br/>no pitch.
        </div>
        <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5, marginBottom: 22, maxWidth: 320 }}>
          Walk me through what you've got, I'll tell you whether I can help and what it'd cost.
        </div>

        {/* mini calendar preview */}
        <CalendarPreview />

        <button
          className="btn btn-primary"
          style={{ width: "100%", justifyContent: "center", marginTop: 18, fontSize: 14 }}
          onClick={() => window.open("https://calendly.com/visimaticnew/30min", "_blank", "noopener,noreferrer")}
        >
          Open Calendly <span className="arr">→</span>
        </button>
      </div>
    </div>
  );
}

function CalendarPreview() {
  // build a faux week strip
  const days = ["MON", "TUE", "WED", "THU", "FRI"];
  const dates = [12, 13, 14, 15, 16];
  const slots = [false, true, true, true, false]; // availability dots
  return (
    <div style={{
      padding: "14px 12px",
      borderRadius: "var(--radius-sm)",
      border: "1px solid var(--line-2)",
      background: "rgba(6,6,11,0.5)",
      display: "grid",
      gridTemplateColumns: "repeat(5, 1fr)",
      gap: 4,
    }}>
      {days.map((d, i) => (
        <div key={d} style={{
          padding: "10px 0", textAlign: "center",
          borderRight: i < 4 ? "1px dashed var(--line)" : "none",
        }}>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.14em",
            color: i === 1 ? "var(--p-cyan)" : "var(--ink-3)", marginBottom: 4,
          }}>
            {d}
          </div>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500,
            letterSpacing: "-0.02em",
            color: i === 1 ? "var(--ink)" : (slots[i] ? "var(--ink-2)" : "var(--ink-4)"),
          }}>
            {dates[i]}
          </div>
          <div style={{
            width: 6, height: 6, borderRadius: "50%",
            margin: "6px auto 0",
            background: slots[i]
              ? (i === 1 ? "var(--p-cyan)" : "var(--ink-3)")
              : "var(--line)",
            boxShadow: i === 1 ? "0 0 10px var(--p-cyan)" : "none",
          }} />
        </div>
      ))}
    </div>
  );
}

/* ─── email card ─── */

function EmailCard() {
  return (
    <div className="glass" style={{
      padding: "22px 24px",
      borderRadius: "var(--radius-sm)",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      gap: 16,
    }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 4 }}>Email · faster than carrier pigeon</div>
        <div style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: 26, color: "var(--ink)",
        }}>
          hello@visimatic.com
        </div>
      </div>
      <button style={{
        width: 38, height: 38, borderRadius: 10,
        background: "var(--glass-hi)", border: "1px solid var(--line-2)",
        color: "var(--ink)", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "center",
      }} title="Copy">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <rect x="3" y="3" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
          <path d="M3 3V2a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-1" stroke="currentColor" strokeWidth="1.2" />
        </svg>
      </button>
    </div>
  );
}

/* ─── socials ─── */

function SocialsCard() {
  const socials = [
    { name: "Instagram", handle: "@visimatic_", icon: "ig", url: "https://www.instagram.com/visimatic_/" },
    { name: "Dribbble",  handle: "/visimatic",  icon: "dr", url: "https://dribbble.com/visimatic" },
  ];
  return (
    <div className="glass" style={{
      padding: "22px 24px",
      borderRadius: "var(--radius-sm)",
    }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>—  Elsewhere</div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {socials.map((s, i) => (
          <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "12px 0",
            background: "transparent", border: 0,
            borderTop: i ? "1px solid var(--line)" : "none",
            color: "var(--ink)", cursor: "pointer",
            fontFamily: "inherit", fontSize: 14,
            textDecoration: "none",
          }}>
            <span style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <SocialIcon kind={s.icon} />
              {s.name}
            </span>
            <span style={{ color: "var(--ink-3)", fontFamily: "var(--font-mono)", fontSize: 12 }}>
              {s.handle} <span className="arr" style={{ marginLeft: 4 }}>→</span>
            </span>
          </a>
        ))}
      </div>
    </div>
  );
}

function SocialIcon({ kind }) {
  const c = "var(--ink-2)";
  if (kind === "ig") return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="11" height="11" rx="3" stroke={c} strokeWidth="1.2"/><circle cx="8" cy="8" r="2.5" stroke={c} strokeWidth="1.2"/><circle cx="11.5" cy="4.5" r="0.5" fill={c}/></svg>;
  if (kind === "dr") return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke={c} strokeWidth="1.2"/><path d="M3.2 5.8c2.6.6 6.5 1 9.3.3M2.7 10.6c2.4-2.2 6-3.2 9-2.4M6.2 2.6c1.8 2.4 3.6 6.6 4 10.7" stroke={c} strokeWidth="1.2" strokeLinecap="round" fill="none"/></svg>;
  return null;
}

Object.assign(window, { Contact });