feat(i18n): reconcile multilingual pages and shared forms

www/src/components/FormShell.astro

@@ -1,21 +1,24 @@
 ---
 import Button from './Button.astro';
 import ContactObfuscation from './ContactObfuscation.astro';
-const { title = 'Schedule Your Free Consultation', showBackground = false } = Astro.props;
+import { formMessages } from '../utils/form-messages';
+const { lang = 'en', showBackground = false } = Astro.props;
+const text = formMessages(lang);
+const title = Astro.props.title ?? text.heading;
 ---
 <section class:list={['form-section', { 'form-section-background': showBackground }]} aria-labelledby="form-title">
   <div class="container form-grid">
-    <div><p class="eyebrow">Get started</p><h2 id="form-title">{title}</h2><p>Tell our client advocates how we can help. Submission is disabled until a production form backend is selected.</p></div>
+    <div><p class="eyebrow">{text.eyebrow}</p><h2 id="form-title">{title}</h2><p>{text.intro}</p></div>
     <form class="form" method="post" action="">
       <!-- TODO: Wire this form to Netlify Forms, a custom API endpoint, or another backend service. -->
       <!-- TODO: Add spam protection before production launch. -->
-      <label>Parent or guardian name<input name="name" autocomplete="name" /></label>
-      <label>Email<input type="email" name="email" autocomplete="email" /></label>
-      <label>Phone<input type="tel" name="phone" autocomplete="tel" /></label>
-      <label>Service of interest<select name="service"><option>ABA Therapy</option><option>Autism Evaluation</option><option>Learner Social Club</option><option>Other</option></select></label>
-      <label>How can we help?<textarea name="message" rows="5"></textarea></label>
-      <Button type="submit" disabled aria-describedby="form-note">Submit</Button>
-      <p id="form-note" class="form-note">Online submission is not yet connected. Please call <ContactObfuscation phone="(480) 687-7099" hrefValue="+14806877099" obfuscatedText="9907-786 (084)" />.</p>
+      <label>{text.name}<input name="name" autocomplete="name" /></label>
+      <label>{text.email}<input type="email" name="email" autocomplete="email" /></label>
+      <label>{text.phone}<input type="tel" name="phone" autocomplete="tel" /></label>
+      <label>{text.service}<select name="service">{text.options.map((label) => <option>{label}</option>)}</select></label>
+      <label>{text.message}<textarea name="message" rows="5"></textarea></label>
+      <Button type="submit" disabled aria-describedby="form-note">{text.submit}</Button>
+      <p id="form-note" class="form-note">{text.disabled} <ContactObfuscation phone="(480) 687-7099" hrefValue="+14806877099" obfuscatedText="9907-786 (084)" />.</p>
     </form>
   </div>
 </section>