{[
{ icon: "message-circle", label: ar ? "واتساب الأعمال" : "WhatsApp Business", value: BUSINESS.whatsappDisplay, href: whatsappHref(), aria: ar ? "تواصل مع إنك ستوديو عبر واتساب" : "Contact INK Studio on WhatsApp" },
{ icon: "mail", label: ar ? "البريد الإلكتروني" : "Email", value: BUSINESS.email, href: emailHref(), aria: ar ? "راسل إنك ستوديو عبر البريد الإلكتروني" : "Email INK Studio" },
{ icon: "instagram", label: ar ? "إنستغرام" : "Instagram", value: `@${BUSINESS.instagramHandle}`, href: instagramHref(), aria: ar ? "إنك ستوديو على إنستغرام" : "INK Studio on Instagram" },
{ icon: "music-2", label: ar ? "تيك توك" : "TikTok", value: `@${BUSINESS.tiktokHandle}`, href: tiktokHref(), aria: ar ? "إنك ستوديو على تيك توك" : "INK Studio on TikTok" },
{ icon: "map-pin", label: ar ? "الاستوديو" : "Studio", value: ar ? BUSINESS.studio.ar : BUSINESS.studio.en },
].map((it, idx) => (
))}
{/* --size-display-md is scoped to this row only (a local CSS
custom-property override, not a global token edit) — on
mobile the design system's default 56px display size made
this compact stat pair read as oversized and cramped next
to the page's own edge, worse than the intro heading right
above it; shrinking it here only touches these two values. */}
{children}
{/* ripple — one-shot, centred on whichever field just gained focus */}
{!reduced ? (
{!sky ? (
) : null}
);
}
function Contact({ lang, target }) {
const ar = lang === "ar";
const narrow = useIsNarrow();
const reduced = useReducedMotion();
const [confirm, setConfirm] = React.useState(false);
const [svc, setSvc] = React.useState({ media: false, motion: false, print: false, custom3d: false });
const [when, setWhen] = React.useState("Within a month");
const [budget, setBudget] = React.useState("Not sure yet");
// Arriving here from a Home service card or a Services CTA: preselect
// that service through the SAME setSvc setter a manual checkbox click
// uses, so the beaver's hat reaction fires exactly as it would for a
// manual selection — never a separate/fake selection path.
React.useEffect(() => {
if (target && Object.prototype.hasOwnProperty.call(svc, target)) {
setSvc((prev) => ({ ...prev, [target]: true }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target]);
const [focusedField, setFocusedField] = React.useState(null);
const [typingPulse, setTypingPulse] = React.useState(0);
// form: the normal interactive form.
// submitting: confirmed, the brief is being folded into its send-off
// form — the sheet's own idle motion stops here but the cinematic
// sequence hasn't started yet.
// success: the brief is folded, sent airborne and ready — this is what
// starts the paper-plane send-off, the beaver's salute and the camera
// ascent. It does NOT mean INK Studio has received anything yet: actual
// delivery only happens once the visitor presses Send inside WhatsApp,
// via the CTA the final screen hands them (see waUrl below).
const [sendPhase, setSendPhase] = React.useState("form");
const formRef = React.useRef(null);
const sheetWrapRef = React.useRef(null);
const sectionRef = React.useRef(null);
const [snapshot, setSnapshot] = React.useState(null);
// On narrow, the stacked single-column layout makes this section far
// taller than one screen, so the sky/"YOUR IDEA IS READY." reveal — built
// to sit centered in a single viewport-height stage (see
// MobileAscentSky's ascent transform) — can land mostly above whatever
// the visitor had scrolled to while filling the form. Starting the
// scroll the instant "submitting" begins (rather than waiting for
// "success") gives one continuous, unhurried glide the full ~2s+ of the
// fold/launch/ascent sequence to run, so the page is already gliding
// upward while the plane is still mid-flight rather than jump-cutting
// once it's done. One continuous motion is the "camera transition" the
// mobile pass calls for, not a jump-cut.
React.useEffect(() => {
if (!narrow || reduced || sendPhase === "form") return;
const section = sectionRef.current;
if (!section) return;
const rect = section.getBoundingClientRect();
const sectionTop = rect.top + window.scrollY;
const target = Math.max(0, sectionTop + rect.height * 0.5 - window.innerHeight / 2);
window.scrollTo({ top: target, behavior: "smooth" });
}, [narrow, reduced, sendPhase]);
const budgetIndex = Math.max(0, BUDGET_OPTIONS.indexOf(budget));
const onFormFocusCapture = (e) => { if (e.target && e.target.id) setFocusedField(e.target.id); };
const onFormBlurCapture = (e) => { setFocusedField((f) => (f === (e.target && e.target.id) ? null : f)); };
const onFormKeyDownCapture = () => setTypingPulse((p) => p + 1);
// This static prototype has no backend to actually deliver the enquiry
// to, so instead of pretending a request was sent, the confirmed form
// values are captured once here and handed to the visitor as a
// pre-filled WhatsApp message on the final screen — they press Send
// inside WhatsApp themselves. The short delay below is only the existing
// fold-in beat before the cinematic sequence starts, not a network call.
const captureSnapshot = () => {
const el = formRef.current;
const val = (id) => { const node = el && el.querySelector(`#${id}`); return node ? node.value.trim() : ""; };
return {
name: val("n"),
organisation: val("o"),
email: val("e"),
whatsapp: val("p"),
services: SERVICE_LIST.filter((s) => svc[s.key]).map((s) => s.key),
budget,
when,
brief: val("brief"),
};
};
const onFormSubmit = (e) => {
e.preventDefault();
const el = formRef.current;
const name = el.querySelector("#n");
const email = el.querySelector("#e");
if (!name.value.trim()) { name.focus(); return; }
// Email is optional, but if the visitor did type one, it should still
// look like a real address rather than being sent along malformed.
if (email.value.trim() && !isValidEmail(email.value.trim())) { email.focus(); return; }
if (!Object.values(svc).some(Boolean)) { el.querySelector("#c1").focus(); return; }
setConfirm(true);
};
const sendEnquiry = async () => {
const snap = captureSnapshot();
setConfirm(false);
setFocusedField(null);
setSendPhase("submitting");
await new Promise((resolve) => setTimeout(resolve, reduced ? 120 : 420));
setSnapshot(snap);
setSendPhase("success");
};
const dir = ar ? "rtl" : "ltr";
const success = sendPhase === "success";
const waUrl = React.useMemo(() => (snapshot ? whatsappHref(buildWhatsAppMessage(ar, snapshot)) : null), [snapshot, ar]);
return (
{sky ? (
// aria-label on the wrapper (with the two visual lines hidden
// from the accessibility tree) rather than two adjacent block
// divs, which would otherwise concatenate as "IDEARECEIVED."
// with no word boundary for assistive tech.
) : (
{ar ? "فكرتك جاهزة." : "YOUR IDEA IS READY."}
)}
{/* the red line: for "sky" this is a genuine handwritten/
calligraphic display face (Caveat / Aref Ruqaa — see
tokens/fonts.css), not the site sans-serif italicized, so it
actually contrasts with the hero the way the reference's
script line contrasts with its oversized wordmark. Nested
one level deeper than the entrance-animated line itself so
the later idle drift (a separate transform, on this wrapper)
never fights the entrance's own translateY. */}
{ar ? "أرسلها لنا." : "Send it our way."}
{ar ? "ملخص مشروعك جاهز على واتساب." : "Your project brief is ready on WhatsApp."}
{/* Single-shot entrance only (no infinite keyframe on this element
itself) so the button settles and stays completely still —
it just rides the same very subtle whole-composition
"breathe" as everything else in the sky variant. */}
) : (
// Same specular-highlight treatment as the Home hero's حبر mark
// (see Home.jsx's arGlow0-3 gradients) — reused verbatim, just
// scaled down with the rest of this smaller watermark, so the
// Studio wordmark reads as the same brand treatment, not a
// flatter one-off.
)}
: null}
{copy.blocks.map((b, i) => (
))}
{b.n}
{b.title}
{b.list ? (
{b.list.map((w) => (
{w}
))}
) : (
b.body.map((p, pi) => (
{p}
)) )}