// Contact — 3-step multi-step form with thank-you modal

// ─── Static data (values stay English for DB consistency) ────────────────────

const REQUEST_TYPES = [
  "Branding",
  "Website / Landing Page",
  "UI / Product Design",
  "Social / Marketing",
  "Motion / Video",
  "Other",
];
const REQUEST_TYPES_DAR = [
  "البراندينغ",
  "الموقع / الصفحة",
  "تصميم UI",
  "سوشيال / ماركتينغ",
  "موشن / فيديو",
  "أخرى",
];

const TIMELINES = ["No rush", "This week", "Urgent"];
const TIMELINES_DAR = ["ما كاينش استعجال", "الجمعة هاذي", "بزربة"];

const CONTACT_METHODS = [
  { value: "whatsapp", label: "WhatsApp",       dar: "واتساب"          },
  { value: "phone",    label: "Phone",           dar: "تيليفون"         },
  { value: "meet",     label: "Google Meet",     dar: "Google Meet"    },
  { value: "zoom",     label: "Zoom",            dar: "زوم"             },
  { value: "teams",    label: "Microsoft Teams", dar: "Microsoft Teams" },
];

const ERRORS = {
  required:   { en: 'Required',                fr: 'Requis',              darija: 'مطلوب'                      },
  email:      { en: 'Enter a valid email',     fr: 'Email invalide',      darija: 'بريد إلكتروني غير صالح'    },
  selectType: { en: 'Select a type',           fr: 'Choisir un type',     darija: 'اختار نوع'                  },
  invalidUrl: { en: 'Invalid URL',             fr: 'URL invalide',        darija: 'رابط غير صالح'              },
};

const MAX_FILE_BYTES = 5 * 1024 * 1024;

const isValidUrl = (s) => /^https?:\/\/.+\..+/.test(s.trim());

const formatFileSize = (bytes) => {
  if (bytes < 1024)        return bytes + " B";
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + " KB";
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
};

// ─── Shared micro-components ──────────────────────────────────────────────────

const RemoveBtn = ({ onClick, label }) => (
  <button type="button" className="ag-remove-btn" onClick={onClick} aria-label={label}>
    <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
    </svg>
  </button>
);

const AddAction = ({ onClick, label }) => (
  <button type="button" className="ag-add-action" onClick={onClick}>
    <span className="ag-add-action__plus">+</span>
    {label}
  </button>
);

const StepIndicator = ({ current, total }) => (
  <div className="ag-steps">
    {Array.from({ length: total }, (_, i) => (
      <span
        key={i}
        className={"ag-steps__dot" + (i + 1 === current ? " is-active" : i + 1 < current ? " is-done" : "")}
        aria-hidden="true"
      />
    ))}
    <span className="ag-steps__label">Step {current} / {total}</span>
  </div>
);

// ─── Form steps ───────────────────────────────────────────────────────────────

const Step1 = ({ data, set, errors, lang }) => (
  <div className="ag-step-content">
    <div className="ag-field">
      <label htmlFor="cf-name">
        {i18({ en: "Your name", fr: "Votre nom", darija: "سميتك" }, lang)}
      </label>
      <input
        id="cf-name" type="text" required
        value={data.name} onChange={set("name")}
        placeholder={i18({ en: "Riley Chen", fr: "Marie Dupont", darija: "محمد أمين" }, lang)}
        aria-invalid={!!errors.name}
      />
      {errors.name && <span className="ag-field__error">{errors.name}</span>}
    </div>

    <div className="ag-field">
      <label htmlFor="cf-email">
        {i18({ en: "Work email", fr: "Email pro", darija: "إيميل الخدمة" }, lang)}
      </label>
      <input
        id="cf-email" type="email" required
        value={data.email} onChange={set("email")}
        placeholder="riley@company.com"
        aria-invalid={!!errors.email}
      />
      {errors.email && <span className="ag-field__error">{errors.email}</span>}
    </div>

    <div className="ag-field">
      <label htmlFor="cf-company">
        {i18({ en: "Company", fr: "Entreprise", darija: "الشركة" }, lang)}
        {' '}<span className="ag-field__optional">
          ({i18({ en: "optional", fr: "optionnel", darija: "اختياري" }, lang)})
        </span>
      </label>
      <input
        id="cf-company" type="text"
        value={data.company} onChange={set("company")}
        placeholder={i18({ en: "Acme Inc.", fr: "Acme SARL", darija: "اسم الشركة ديالك" }, lang)}
      />
    </div>

    <p className="ag-contact__microcopy">
      {i18({ en: "Takes less than a minute.", fr: "Moins d'une minute.", darija: "ما يأخذش حتى دقيقة." }, lang)}
    </p>
  </div>
);

const Step2 = ({ data, set, errors, lang }) => (
  <div className="ag-step-content">
    <div className="ag-field">
      <label htmlFor="cf-type">
        {i18({ en: "Type of request", fr: "Type de demande", darija: "نوع الطلب" }, lang)}
      </label>
      <select id="cf-type" required value={data.requestType} onChange={set("requestType")} aria-invalid={!!errors.requestType}>
        <option value="" disabled>
          {i18({ en: "Select…", fr: "Choisir…", darija: "اختار…" }, lang)}
        </option>
        {REQUEST_TYPES.map((t, idx) => (
          <option key={t} value={t}>
            {lang === 'dar' ? (REQUEST_TYPES_DAR[idx] || t) : t}
          </option>
        ))}
      </select>
      {errors.requestType && <span className="ag-field__error">{errors.requestType}</span>}
    </div>

    <div className="ag-field">
      <label htmlFor="cf-desc">
        {i18({ en: "What should we design?", fr: "Que faut-il concevoir ?", darija: "شنو بغيتي نصممو؟" }, lang)}
      </label>
      <textarea
        id="cf-desc" required rows="4"
        value={data.description} onChange={set("description")}
        placeholder={i18({
          en: "Be clear and simple. What do you need and what's the goal?",
          fr: "Soyez clair et simple. De quoi avez-vous besoin et quel est l'objectif ?",
          darija: "كون واضح وبسيط. شنو محتاج وشنو هو الهدف؟",
        }, lang)}
        aria-invalid={!!errors.description}
      />
      {errors.description && <span className="ag-field__error">{errors.description}</span>}
    </div>

    <div className="ag-field">
      <label htmlFor="cf-timeline">
        {i18({ en: "Timeline", fr: "Délai", darija: "الوقت" }, lang)}
      </label>
      <select id="cf-timeline" value={data.timeline} onChange={set("timeline")}>
        <option value="" disabled>
          {i18({ en: "Select…", fr: "Choisir…", darija: "اختار…" }, lang)}
        </option>
        {TIMELINES.map((t, idx) => (
          <option key={t} value={t}>
            {lang === 'dar' ? (TIMELINES_DAR[idx] || t) : t}
          </option>
        ))}
      </select>
    </div>
  </div>
);

const Step3 = ({ data, set, errors, links, setLinks, files, setFiles, onAddFiles, lang }) => {
  const needsNumber = ["whatsapp", "phone"].includes(data.contactMethod);
  const needsEmail  = ["meet", "zoom", "teams"].includes(data.contactMethod);
  const setLink    = (i, v) => setLinks((ls) => ls.map((l, j) => j === i ? v : l));
  const removeLink = (i)    => setLinks((ls) => ls.filter((_, j) => j !== i));
  const addLink    = ()     => setLinks((ls) => [...ls, ""]);
  const removeFile = (id)   => setFiles((fs) => fs.filter((f) => f.id !== id));

  return (
    <div className="ag-step-content">
      <div className="ag-field">
        <label>
          {i18({ en: "Reference links", fr: "Liens de référence", darija: "روابط مرجعية" }, lang)}
          {' '}<span className="ag-field__optional">
            ({i18({ en: "optional", fr: "optionnel", darija: "اختياري" }, lang)})
          </span>
        </label>
        {links.map((link, i) => (
          <div key={i} className="ag-link-row">
            <input
              type="url" value={link}
              onChange={(e) => setLink(i, e.target.value)}
              placeholder="https://…"
              aria-invalid={!!(errors[`link_${i}`])}
            />
            {links.length > 1 && (
              <RemoveBtn onClick={() => removeLink(i)} label={`Remove link ${i + 1}`}/>
            )}
            {errors[`link_${i}`] && <span className="ag-field__error">{errors[`link_${i}`]}</span>}
          </div>
        ))}
        <AddAction
          onClick={addLink}
          label={i18({ en: "Add another link", fr: "Ajouter un lien", darija: "زيد رابط" }, lang)}
        />
      </div>

      <div className="ag-field ag-field--attach">
        <label className="ag-attach" onClick={onAddFiles} style={{ cursor: "pointer" }}>
          <span className="ag-attach__chip">
            <span className="ag-attach__plus">+</span>
            {files.length === 0
              ? i18({ en: "Attach a brief or deck (optional)", fr: "Joindre un brief (optionnel)", darija: "ضم ملف أو بريف (اختياري)" }, lang)
              : i18({ en: "Add another file", fr: "Ajouter un fichier", darija: "زيد ملف" }, lang)
            }
          </span>
        </label>
        {files.length > 0 && (
          <ul className="ag-file-list">
            {files.map((f) => (
              <li key={f.id} className="ag-file-item">
                <span className="ag-file-item__name">{f.name}</span>
                <span className="ag-file-item__size">{formatFileSize(f.size)}</span>
                <RemoveBtn onClick={() => removeFile(f.id)} label={`Remove ${f.name}`}/>
              </li>
            ))}
          </ul>
        )}
        {errors.files && <span className="ag-field__error">{errors.files}</span>}
      </div>

      <div className="ag-field">
        <label>
          {i18({ en: "Do you want a quick call?", fr: "Souhaitez-vous un appel rapide ?", darija: "بغيتي اتصال قصير؟" }, lang)}
        </label>
        <div className="ag-radio-group">
          {[
            {
              value: "no",
              label: i18({ en: "No, just start the request", fr: "Non, démarrer la demande", darija: "لا، بدا الطلب فقط" }, lang),
            },
            {
              value: "yes",
              label: i18({ en: "Yes, I'd like a quick call", fr: "Oui, un appel rapide", darija: "إيه، بغيت اتصال قصير" }, lang),
            },
          ].map((opt) => (
            <label key={opt.value} className={"ag-radio-opt" + (data.callPref === opt.value ? " is-selected" : "")}>
              <input type="radio" name="callPref" value={opt.value} checked={data.callPref === opt.value} onChange={set("callPref")}/>
              <span className="ag-radio-opt__dot" aria-hidden="true"/>
              {opt.label}
            </label>
          ))}
        </div>
      </div>

      {data.callPref === "yes" && (
        <div className="ag-step-reveal">
          <div className="ag-field">
            <label htmlFor="cf-contact-method">
              {i18({ en: "Preferred contact method", fr: "Méthode de contact", darija: "طريقة التواصل المفضلة" }, lang)}
            </label>
            <select id="cf-contact-method" value={data.contactMethod} onChange={set("contactMethod")}>
              <option value="" disabled>
                {i18({ en: "Select…", fr: "Choisir…", darija: "اختار…" }, lang)}
              </option>
              {CONTACT_METHODS.map((m) => (
                <option key={m.value} value={m.value}>
                  {lang === 'dar' ? m.dar : m.label}
                </option>
              ))}
            </select>
          </div>

          {needsNumber && (
            <div className="ag-step-reveal">
              <div className="ag-field">
                <label htmlFor="cf-contact-number">
                  {data.contactMethod === "whatsapp"
                    ? i18({ en: "WhatsApp number", fr: "Numéro WhatsApp", darija: "رقم الواتساب" }, lang)
                    : i18({ en: "Phone number",    fr: "Numéro de téléphone", darija: "رقم التيليفون" }, lang)
                  }
                </label>
                <input id="cf-contact-number" type="tel" value={data.contactNumber} onChange={set("contactNumber")} placeholder="+212 6 00 00 00 00"/>
              </div>
            </div>
          )}

          {needsEmail && (
            <div className="ag-step-reveal">
              <div className="ag-field">
                <label htmlFor="cf-meet-email">
                  {i18({ en: "Email for meeting invite", fr: "Email pour l'invitation", darija: "إيميل لدعوة الاجتماع" }, lang)}
                  {' '}<span className="ag-field__optional">
                    ({i18({ en: "optional", fr: "optionnel", darija: "اختياري" }, lang)})
                  </span>
                </label>
                <input id="cf-meet-email" type="email" value={data.meetEmail} onChange={set("meetEmail")} placeholder={data.email || "email@company.com"}/>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

// ─── Thank-you modal ──────────────────────────────────────────────────────────

const ThankYouModal = ({ onClose, onBookCall, lang = 'en' }) => (
  <div className="ag-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
    <div className="ag-modal">
      <button type="button" className="ag-modal__close" onClick={onClose} aria-label="Close">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
      <div className="ag-modal__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20,6 9,17 4,12"/>
        </svg>
      </div>
      <h2 className="ag-modal__title" id="modal-title">{t('contact.successTitle', lang)}</h2>
      <p className="ag-modal__sub">{t('contact.successDesc', lang)}</p>
      <div className="ag-modal__cta">
        <p className="ag-modal__cta-text">{t('contact.ctaText', lang)}</p>
        <Button variant="dark" onClick={() => { onClose(); onBookCall(); }}>
          {t('contact.cta', lang)}
        </Button>
        <p className="ag-modal__cta-note">{t('contact.ctaNote', lang)}</p>
      </div>
    </div>
  </div>
);

// ─── Contact ──────────────────────────────────────────────────────────────────

const Contact = ({ lang = 'en' }) => {
  const TOTAL        = 3;
  const fileInputRef = React.useRef(null);

  const [step,        setStep]        = React.useState(1);
  const [dir,         setDir]         = React.useState("forward");
  const [data,        setData]        = React.useState({
    name: "", email: "", company: "", requestType: "", description: "",
    timeline: "", callPref: "", contactMethod: "", contactNumber: "", meetEmail: "",
  });
  const [links,       setLinks]       = React.useState([""]);
  const [files,       setFiles]       = React.useState([]);
  const [errors,      setErrors]      = React.useState({});
  const [submitting,   setSubmitting]   = React.useState(false);
  const [showModal,    setShowModal]    = React.useState(false);
  const [showBooking,  setShowBooking]  = React.useState(false);
  const [submitError,  setSubmitError]  = React.useState('');

  const set = (k) => (e) => {
    const v = e.target.value;
    setData((d) => {
      const update = { [k]: v };
      if (k === "contactMethod" && ["meet", "zoom", "teams"].includes(v) && !d.meetEmail) {
        update.meetEmail = d.email;
      }
      return { ...d, ...update };
    });
    setErrors((prev) => ({ ...prev, [k]: "" }));
  };

  const handleAddFiles = () => fileInputRef.current?.click();

  const onFileChange = (e) => {
    const picked    = Array.from(e.target.files || []);
    const oversized = picked.filter((f) => f.size > MAX_FILE_BYTES).map((f) => f.name);
    if (oversized.length) {
      setErrors((prev) => ({ ...prev, files: `File(s) exceed 5 MB: ${oversized.join(", ")}` }));
      e.target.value = "";
      return;
    }
    setErrors((prev) => ({ ...prev, files: "" }));
    setFiles((prev) => [...prev, ...picked.map((f) => ({ id: Date.now() + Math.random(), name: f.name, size: f.size, file: f }))]);
    e.target.value = "";
  };

  const validate = (s) => {
    const errs = {};
    if (s === 1) {
      if (!data.name.trim())  errs.name  = i18(ERRORS.required, lang);
      if (!data.email.trim()) errs.email = i18(ERRORS.required, lang);
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = i18(ERRORS.email, lang);
    }
    if (s === 2) {
      if (!data.requestType)        errs.requestType = i18(ERRORS.selectType, lang);
      if (!data.description.trim()) errs.description = i18(ERRORS.required, lang);
    }
    if (s === 3) {
      links.forEach((l, i) => { if (l.trim() && !isValidUrl(l)) errs[`link_${i}`] = i18(ERRORS.invalidUrl, lang); });
    }
    return errs;
  };

  const next = () => {
    const errs = validate(step);
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setDir("forward");
    setStep((s) => s + 1);
  };

  const back = () => {
    setDir("back");
    setStep((s) => s - 1);
    setErrors({});
  };

  const submit = async (e) => {
    e.preventDefault();
    const errs = validate(3);
    if (Object.keys(errs).length) { setErrors(errs); return; }

    setSubmitting(true);
    setSubmitError('');

    const validLinks = links.filter(l => l.trim());
    const descFull   = validLinks.length
      ? data.description + '\n\nReferences:\n' + validLinks.join('\n')
      : data.description;

    const fileUrls = [];
    for (const f of files) {
      if (!f.file) continue;
      const safeName = f.name.replace(/[^a-zA-Z0-9._-]/g, '_');
      const path = `${Date.now()}-${Math.random().toString(36).slice(2)}-${safeName}`;
      const upRes = await fetch(
        `${SUPABASE_URL}/storage/v1/object/request-attachments/${path}`,
        {
          method: 'POST',
          headers: {
            'apikey':        SUPABASE_ANON_KEY,
            'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
            'Content-Type':  f.file.type || 'application/octet-stream',
          },
          body: f.file,
        }
      );
      if (upRes.ok) {
        fileUrls.push(`${SUPABASE_URL}/storage/v1/object/public/request-attachments/${path}`);
      }
    }

    const contactValue = ['whatsapp', 'phone'].includes(data.contactMethod)
      ? data.contactNumber
      : ['meet', 'zoom', 'teams'].includes(data.contactMethod)
      ? data.meetEmail
      : null;

    const payload = {
      name:           data.name.trim(),
      email:          data.email.trim(),
      company:        data.company.trim() || null,
      service:        data.requestType,
      timeline:       data.timeline       || null,
      description:    descFull,
      status:         'new',
      submitted_from: 'request_form',
      call_pref:      data.callPref       || null,
      contact_method: data.contactMethod  || null,
      contact_value:  contactValue        || null,
      attachments:    fileUrls.length ? fileUrls : null,
    };

    // Use raw fetch with return=minimal to avoid SDK sending Prefer:return=representation
    // which triggers a SELECT after INSERT and fails against the anon SELECT RLS policy.
    const res = await fetch(`${SUPABASE_URL}/rest/v1/requests`, {
      method: 'POST',
      headers: {
        'Content-Type':  'application/json',
        'apikey':        SUPABASE_ANON_KEY,
        'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
        'Prefer':        'return=minimal',
      },
      body: JSON.stringify(payload),
    });

    setSubmitting(false);

    if (!res.ok) {
      setSubmitError(i18({ en: 'Something went wrong. Please try again.', fr: 'Une erreur est survenue. Réessayez.', darija: 'وقع مشكل. عاود المحاولة.' }, lang));
      return;
    }

    window.analytics?.formSubmit('contact_request');
    setData({ name: "", email: "", company: "", requestType: "", description: "", timeline: "", callPref: "", contactMethod: "", contactNumber: "", meetEmail: "" });
    setLinks([""]);
    setFiles([]);
    setStep(1);
    setErrors({});
    setShowModal(true);
  };

  return (
    <>
      <input ref={fileInputRef} type="file" multiple hidden onChange={onFileChange} accept="*"/>

      <section className="ag-contact" id="ag-section-contact">
        <div className="ag-contact__bg" style={{ backgroundImage: "url('assets/contact-bg.jpg')" }}/>
        <div className="ag-contact__inner">
          <aside className="ag-contact__sidebar">
            <EyebrowPill withSparkle>
              {i18({ en: "Start a Project", fr: "Démarrer un projet", darija: "بدا مشروع" }, lang)}
            </EyebrowPill>
            <h2 className="ag-contact__title">
              {i18({ en: "Tell us what\nyou're shipping.", fr: "Dites-nous ce\nque vous créez.", darija: "قولنا شنو\nخاصك تصنع." }, lang)
                .split('\n').map((line, i) => <React.Fragment key={i}>{line}{i === 0 && <br/>}</React.Fragment>)}
            </h2>
            <p className="ag-contact__lede">
              {i18({ en: "We reply within one business day with a 30-min discovery slot.", fr: "Nous répondons sous un jour ouvrable avec un créneau de 30 min.", darija: "كنجاوبو فنهار خدمة واحد ب30 دقيقة ديال اتصال." }, lang)}
            </p>
            <ul className="ag-contact__meta">
              <li>
                <span>{i18({ en: "Email", fr: "Email", darija: "الإيميل" }, lang)}</span>
                <strong>hello@wablan.com</strong>
              </li>
              <li>
                <span>{i18({ en: "HQ", fr: "Siège", darija: "المقر" }, lang)}</span>
                <strong>{i18({ en: "Casablanca, Morocco", fr: "Casablanca, Maroc", darija: "الدار البيضاء، المغرب" }, lang)}</strong>
              </li>
              <li>
                <span>{i18({ en: "Hours", fr: "Horaires", darija: "الأوقات" }, lang)}</span>
                <strong>{i18({ en: "Mon–Fri, 9–6 ET", fr: "Lun–Ven, 9–18 ET", darija: "الاثنين–الجمعة، 9–6" }, lang)}</strong>
              </li>
            </ul>
          </aside>

          <div className={(lang === 'dar' || lang === 'ar') ? 'contact--rtl' : ''}>
            <form className="ag-contact__form ag-contact__form--steps" onSubmit={submit} noValidate>
              <StepIndicator current={step} total={TOTAL}/>

              <div className={"ag-step-wrap ag-step-wrap--" + dir} key={step}>
                {step === 1 && <Step1 data={data} set={set} errors={errors} lang={lang}/>}
                {step === 2 && <Step2 data={data} set={set} errors={errors} lang={lang}/>}
                {step === 3 && <Step3 data={data} set={set} errors={errors} links={links} setLinks={setLinks} files={files} setFiles={setFiles} onAddFiles={handleAddFiles} lang={lang}/>}
              </div>

              <div className="ag-contact__nav">
                <div>
                  {step > 1 && (
                    <Button variant="light" onClick={back}>
                      {i18({ en: "Back", fr: "Retour", darija: "رجع" }, lang)}
                    </Button>
                  )}
                </div>
                <div className="ag-contact__nav-right">
                  {step < TOTAL ? (
                    <Button variant="dark" onClick={next}>
                      {i18({ en: "Continue", fr: "Continuer", darija: "كمل" }, lang)}
                    </Button>
                  ) : (
                    <div className="ag-contact__submit-group">
                      {submitError && (
                        <p style={{ color: 'rgb(220,38,38)', fontSize: '13px', margin: '0 0 8px', textAlign: (lang === 'dar' || lang === 'ar') ? 'right' : 'left' }}>
                          {submitError}
                        </p>
                      )}
                      <p className="ag-contact__trust">
                        {i18({ en: "No commitment required. We'll confirm everything before starting.", fr: "Aucun engagement. Nous confirmons tout avant de commencer.", darija: "ما كاينش التزام. كنأكدو كلشي قبل نبدأو." }, lang)}
                      </p>
                      <Button variant="accent" type="submit" disabled={submitting}>
                        {submitting
                          ? i18({ en: "Submitting…", fr: "Envoi en cours…", darija: "كيتصيفط…" }, lang)
                          : i18({ en: "Submit Request", fr: "Envoyer la demande", darija: "صيفط الطلب" }, lang)
                        }
                      </Button>
                      <p className="ag-contact__microcopy">
                        {i18({ en: "We'll review your request and get back to you quickly.", fr: "Nous examinerons votre demande et vous répondrons rapidement.", darija: "كنراجعو طلبك ونرجعو عليك بزربة." }, lang)}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>

      {showModal   && <ThankYouModal onClose={() => setShowModal(false)} onBookCall={() => setShowBooking(true)} lang={lang}/>}
      {showBooking && <BookingModal onClose={() => setShowBooking(false)} />}
    </>
  );
};

window.Contact = Contact;