// gi-zoho-forms.jsx — shared, parameterized Zoho form engine
// =====================================================================
// ONE submit engine + thin presentation wrappers (modal | inline) for every
// Zoho form on the site. Design ported from form-popup.html.
//
// ARCHITECTURE (engine vs presentation — kept deliberately separate)
//   • useGiZohoForm(form)  — THE ENGINE. State + validation + native
//       hidden-iframe POST + zf_referrer_name + success/error. No markup.
//   • GiZohoModal          — modal presentation (overlay, focus-trap, ESC,
//       click-outside, scroll-lock, aria) wrapping the engine + generic fields.
//   • GiZohoNewsletterForm — inline presentation (no modal), bespoke dark-band
//       markup, same engine. Exposed on window for blog-page.jsx's SubscribeBand.
//
// ADD A FORM = one entry in GI_ZOHO_FORMS (triggerHref, htmlRecords action,
//   copy, fields[] of SEMANTIC types). No per-button edits, no new files.
//
// FIELD SCHEMA (semantic → verbatim Zoho names; renaming a name empties the
//   record per Zoho's own warning):
//   name    → Name_First + Name_Last           (First / Last)
//   email   → Email
//   phone   → PhoneNumber_countrycode          (compname PhoneNumber, fieldType 11)
//   message → MultiLine                        (textarea)
//   address → Address_AddressLine1/2, _City, _Region, _ZipCode, _Country(select)
//             — Country uses the ONE shared GI_ZF_COUNTRIES constant.
//   Each field has `required`. Each entry also: presentation, action, heading,
//   intro (lifted verbatim from the Zoho export), submit/success copy.
//
// TRIGGERING: one delegated document click matches <a href> against a form's
//   triggerHref (or [data-gi-form]) and opens the modal — ZERO button edits;
//   the href stays so JS-off / ⌘-click still reach the hosted form. The
//   newsletter is inline (rendered in the page), not delegate-triggered.
//
// SUBMIT: native multipart <form target=hidden-iframe>; the iframe `load` event
//   is the success signal (15s timeout + offline check = error). zf_redirect_url
//   stays blank so Zoho renders its thank-you into the hidden iframe.
//
// Wrapped in an IIFE (shared babel global scope). Exposes window.giZohoForms +
// window.GiZohoNewsletterForm. Self-mount + style inject are idempotent.

(function () {
  if (window.__giZohoFormsBooted) return;
  window.__giZohoFormsBooted = true;

  // ===================================================================
  // Shared country list (full Zoho option set; verbatim from the
  // Book a system inspection export). Used by every `address` field.
  // ===================================================================
  const GI_ZF_COUNTRIES = ["Afghanistan","Akrotiri","Albania","Algeria","American Samoa","Andorra","Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina","Armenia","Aruba","Ashmore and Cartier Islands","Australia","Austria","Azerbaijan","Bahrain","Bangladesh","Barbados","Bassas Da India","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burma","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Caribbean Netherlands","Cayman Islands","Central African Republic","Chad","Chile","China","Christmas Island","Clipperton Island","Cocos (Keeling) Islands","Colombia","Comoros","Cook Islands","Coral Sea Islands","Costa Rica","Cote D'Ivoire","Croatia","Cuba","Curaçao","Cyprus","Czech Republic","Democratic Republic of the Congo","Denmark","Dhekelia","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Europa Island","Falkland Islands (Islas Malvinas)","Faroe Islands","Federated States of Micronesia","Fiji","Finland","France","French Guiana","French Polynesia","French Southern and Antarctic Lands","Gabon","Gaza Strip","Georgia","Germany","Ghana","Gibraltar","Glorioso Islands","Greece","Greenland","Grenada","Guadeloupe","Guam","Guatemala","Guernsey","Guinea","Guinea-bissau","Guyana","Haiti","Heard Island and Mcdonald Islands","Holy See (Vatican City)","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Jan Mayen","Japan","Jersey","Jordan","Juan De Nova Island","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Martinique","Mauritania","Mauritius","Mayotte","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauru","Navassa Island","Nepal","Netherlands Antilles","Netherlands","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Niue","Norfolk Island","North Korea","Northern Mariana Islands","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paracel Islands","Paraguay","Peru","Philippines","Pitcairn Islands","Poland","Portugal","Puerto Rico","Qatar","Republic of the Congo","Reunion","Romania","Russia","Rwanda","Saint Barthélemy","Saint Helena","Saint Kitts and Nevis","Saint Lucia","Saint Martin","Saint Pierre and Miquelon","Saint Vincent and the Grenadines","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Sint Maarten","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Georgia and the South Sandwich Islands","South Korea","South Sudan","Spain","Spratly Islands","Sri Lanka","Sudan","Suriname","Svalbard","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","The Bahamas","The Gambia","Timor-leste","Togo","Tokelau","Tonga","Trinidad and Tobago","Tromelin Island","Tunisia","Turkey","Turkmenistan","Turks and Caicos Islands","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","Uruguay","Uzbekistan","Vanuatu","Venezuela","Vietnam","Virgin Islands","Wake Island","Wallis and Futuna","West Bank","Western Sahara","Yemen","Zambia","Zimbabwe","Åland Islands"];

  // ===================================================================
  // FORM REGISTRY — the only per-form surface
  // ===================================================================
  // action URLs are VERBATIM from each Zoho export. Several internal slugs are
  // intentionally mismatched to the label (Zoho form duplication) — DO NOT
  // "fix" them; the formperma token is the source of truth.
  const NAME  = { type: 'name',    required: true };
  const EMAIL = { type: 'email',   required: true };
  const PHONE = { type: 'phone',   required: true };
  const MSG   = { type: 'message', required: true };

  const GI_ZOHO_FORMS = {

    // 1 — Generic 20-min CTA (33 instances sitewide). [GENERIC stays generic.]
    'book-call': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/vjBUOoKTlKt4YAOW19oO',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaGovernmentSectorConsultation/formperma/03Y36VrGJLbcA2YJEaKdZB_cHxzG8A-M2lfFtBa9pLQ/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a 20-Minute Consultation',
      intro: 'Schedule a complimentary 20-minute call with our team to discuss your facility, energy goals, available incentives, and opportunities to reduce electricity costs and improve long-term energy performance.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 2 — Book a system inspection (solar maintenance). Has optional Address.
    'system-inspection': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/kl0IqSRr6mTi5yhN8CWX',
      action: 'https://forms.zohopublic.com/greenintegrations/form/Bookasysteminspection/formperma/rlSMU-5yNokjZeql3vQ5QHgIe51BoSsEJgRZ2x0d4NA/htmlRecords/submit',
      eyebrow: 'Existing System Owners',
      heading: 'Book a system inspection',
      intro: 'Schedule a professional inspection to verify system performance, identify potential issues, and help maximize the reliability and long-term value of your solar investment.',
      submitLabel: 'Request Inspection',
      successHeading: 'Your inspection request has been received.',
      successBody: 'Thank you. We will review your system details and respond within one business day.',
      fields: [NAME, EMAIL, PHONE, { type: 'address', required: false }, MSG],
    },

    // 3 — Book a Partner Call (partners page).
    'partner-call': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/8SSu2kceVHIK6aBPhv3V',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaPartnerCall/formperma/p_6Yo-gxN2FB8P10ZwqetFzRQwr-lHt7JZXx0pY6P4A/htmlRecords/submit',
      eyebrow: 'Partnerships',
      heading: 'Book a Partner Call',
      intro: 'Schedule a quick call to explore partnership opportunities, discuss collaboration ideas, and learn how we can create value together for commercial and industrial clients.',
      submitLabel: 'Request Call',
      successBody: 'Thank you. Our partnerships team will be in touch within one business day.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 4 — Become a Partner (partners page).
    'become-partner': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/Kyz6jnB2SOU0GYGErcdK',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BecomeaPartner/formperma/1X1X6T-zX1b8kpuglHby627LBf2sGH5c3yzcMblpZVo/htmlRecords/submit',
      eyebrow: 'Partner Program',
      heading: 'Become a Partner',
      intro: 'Join our network of trusted partners and explore opportunities to collaborate on energy projects, share expertise, and create value for clients across Canada.',
      submitLabel: 'Apply to Partner',
      successHeading: 'Your application has been received.',
      successBody: 'Thank you. Our partnerships team will review your details and respond within one business day.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 5 — Manufacturing (trigger is a forms.zohopublic VIEW link). [slug ok]
    'manufacturing': {
      presentation: 'modal',
      triggerHref: 'https://forms.zohopublic.com/greenintegrations/form/WebsiteManufacturing2026/formperma/wowT3kTsYRhwV-gkkHkkYkzsy_6-PByGwIWKcd37rxc',
      action: 'https://forms.zohopublic.com/greenintegrations/form/WebsiteManufacturing2026/formperma/23eIhqYBtz7CF77p4h7uR-izi6CGph2W-veshIWYB9I/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a Manufacturing Energy Consultation',
      intro: 'Book a complimentary manufacturing sector consultation to discuss your facility, electricity costs, available incentives, and opportunities to improve operational efficiency, reduce costs, and support long-term competitiveness.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 6 — Warehousing & Logistics. [action slug intentionally "Manufacturing"]
    'warehousing': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/BnwyQdPWyiVX0XNZ9Uap',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaManufacturingEnergyConsultation/formperma/WOERe_gLcposvPDn-W1cCbSrf5u5TWVfURANrp0-VvE/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a Warehousing & Logistics Energy Consultation',
      intro: 'Book a complimentary consultation to discuss your facility, electricity costs, available incentives, and opportunities to improve energy performance, reduce operating expenses, and support long-term operational efficiency.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 7 — Food & Beverage. [action slug intentionally "Warehousing"]
    'food-beverage': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/Ub3c8eUalGfwZwcRscVB',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaWarehousingLogisticsEnergyConsultation/formperma/IXCNcW6gCSSm9n0_NJ92q7Usrt_Y2dUOFy9gJ3IUmK0/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a Food & Beverage Energy Consultation',
      intro: 'Book a complimentary consultation to discuss your facility, electricity costs, available incentives, and opportunities to improve energy performance while supporting production efficiency, cost control, and long-term operational resilience.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 8 — Agriculture. [action slug intentionally "CIExperts...MalcolmDassin";
    //     export h2 is an internal label, so we use a clean user-facing heading.]
    'agriculture': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/YYeFcdEY5IaGNvoCVM0P',
      action: 'https://forms.zohopublic.com/greenintegrations/form/CIExpertsAgriculturalMalcolmDassin/formperma/Cu8IZ7tSdEuLqwy0eH8GRSISBYSCZ_UKPeNnTLiTjiU/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book an Agriculture Energy Consultation',
      intro: 'Book a complimentary agriculture sector consultation to discuss your operation, electricity costs, available incentives, and opportunities to improve energy performance while supporting long-term growth and profitability.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 9 — Commercial Real Estate. [action slug intentionally "FoodBeverage"]
    'cre': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/y0HdnM9j70rWzPLTWfsA',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaFoodBeverageEnergyConsultation/formperma/fXbxezbbhZ0iOu4y4OHSAqk38Hq9c2gDYqTH0V72r4w/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a Commercial Real Estate Consultation',
      intro: 'Book a complimentary consultation to discuss your property portfolio, electricity costs, available incentives, and opportunities to improve building performance, reduce operating expenses, and support long-term asset value.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 10 — Government / Institutional. [action slug intentionally "CommercialRealEstate"]
    'government': {
      presentation: 'modal',
      triggerHref: 'https://zfrmz.com/DFbsr7h1BGUMoyOYlJid',
      action: 'https://forms.zohopublic.com/greenintegrations/form/BookaCommercialRealEstateConsultation/formperma/zOVML-6FMKZGnbfQ0Olvk8HSmJiU2fsFxGz4JiJ_250/htmlRecords/submit',
      eyebrow: 'Complimentary Consultation',
      heading: 'Book a Government Sector Consultation',
      intro: 'Book a complimentary consultation to discuss your facility, energy objectives, available funding opportunities, and strategies to improve energy performance, reduce electricity costs, and support long-term sustainability goals.',
      fields: [NAME, EMAIL, PHONE, MSG],
    },

    // 11 — Newsletter. INLINE (rendered in blog-page SubscribeBand). Name + Email.
    'newsletter': {
      presentation: 'inline',
      action: 'https://forms.zohopublic.com/greenintegrations/form/Newsletter/formperma/j0a22LrDHKtKtVHSRuDM1O7hXOVYVygtHeRUFM_Wb70/htmlRecords/submit',
      heading: 'New Analysis. Once a Month.',
      intro: 'Stay informed with monthly insights on commercial and industrial energy in Canada.',
      submitLabel: 'Subscribe',
      fields: [NAME, EMAIL],
    },

  };

  // ===================================================================
  // Field expansion (semantic → concrete Zoho inputs) — single source of
  // truth shared by init / validation / rendering.
  // ===================================================================
  const fieldSpecs = (field) => {
    switch (field.type) {
      case 'name': return [
        { name: 'Name_First', label: 'First Name', kind: 'text', required: !!field.required, autoComplete: 'given-name', col: 'half' },
        { name: 'Name_Last',  label: 'Last Name',  kind: 'text', required: !!field.required, autoComplete: 'family-name', col: 'half' },
      ];
      case 'email': return [{ name: 'Email', label: 'Email', kind: 'email', required: !!field.required, autoComplete: 'email', col: 'half' }];
      case 'phone': return [{ name: 'PhoneNumber_countrycode', label: 'Phone Number', kind: 'tel', required: !!field.required, autoComplete: 'tel', col: 'half' }];
      case 'message': return [{ name: 'MultiLine', label: field.label || 'Leave us a few words', kind: 'textarea', required: !!field.required, col: 'full', maxLength: 65535, placeholder: field.placeholder || '' }];
      case 'address': return [
        { name: 'Address_AddressLine1', label: 'Street Address',          kind: 'text',   required: false, autoComplete: 'address-line1',  col: 'full' },
        { name: 'Address_AddressLine2', label: 'Address Line 2',          kind: 'text',   required: false, autoComplete: 'address-line2',  col: 'full' },
        { name: 'Address_City',         label: 'City',                    kind: 'text',   required: false, autoComplete: 'address-level2', col: 'half' },
        { name: 'Address_Region',       label: 'State / Region / Province', kind: 'text', required: false, autoComplete: 'address-level1', col: 'half' },
        { name: 'Address_ZipCode',      label: 'Postal / Zip Code',       kind: 'text',   required: false, autoComplete: 'postal-code',    col: 'half' },
        { name: 'Address_Country',      label: 'Country',                 kind: 'select', required: false, autoComplete: 'country-name',   col: 'half', options: GI_ZF_COUNTRIES, placeholder: '-Select-' },
      ];
      default: return [];
    }
  };
  const allSpecs = (form) => form.fields.reduce((a, f) => a.concat(fieldSpecs(f)), []);

  // ===================================================================
  // Helpers
  // ===================================================================
  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isValidPhone = (phone) => {
    const d = (phone || '').replace(/\D/g, '');
    return d.length === 10 || (d.length === 11 && d.startsWith('1'));
  };
  const validateSpec = (spec, raw) => {
    const val = (raw == null ? '' : String(raw)).trim();
    if (spec.kind === 'select') { if (spec.required && (!val || val === spec.placeholder)) return 'Please select an option'; return null; }
    if (spec.required && !val) return 'This field is required';
    if (val && spec.kind === 'email' && !EMAIL_RE.test(val)) return 'Please enter a valid email address';
    if (val && spec.kind === 'tel' && !isValidPhone(val)) return 'Please enter a valid phone number';
    return null;
  };
  // Mirror the hosted iframe's referrername logic: prefer the true top URL,
  // guard the cross-origin throw, cap length.
  const referrerUrl = () => {
    let url = '';
    try { url = (window.top && window.top.location && window.top.location.href) || window.location.href; }
    catch (e) { url = window.location.href; }
    if (typeof url !== 'string') url = '';
    return url.slice(0, 1800);
  };

  // ===================================================================
  // THE ENGINE — state + validation + native iframe POST + referrer.
  // Presentation-agnostic; both modal and inline wrappers consume it.
  // ===================================================================
  const useGiZohoForm = (form) => {
    const specs = React.useMemo(() => allSpecs(form), [form.key]);
    const [values, setValues] = React.useState(() => {
      const o = {}; specs.forEach((s) => { o[s.name] = s.kind === 'select' ? (s.placeholder || '') : ''; }); return o;
    });
    const [errors, setErrors] = React.useState({});
    const [sending, setSending] = React.useState(false);
    const [submitted, setSubmitted] = React.useState(false);
    const [formError, setFormError] = React.useState(null);
    const formRef = React.useRef(null);
    const pendingRef = React.useRef(false);
    const timeoutRef = React.useRef(null);
    const sinkName = 'gi-zf-sink-' + form.key;

    React.useEffect(() => () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }, []);

    const setField = (name) => (e) => {
      const v = e.target.value;
      setValues((p) => ({ ...p, [name]: v }));
      setErrors((p) => (p[name] ? { ...p, [name]: null } : p));
    };

    const onSubmit = (e) => {
      if (sending) { e.preventDefault(); return; }
      const next = {}; let first = null;
      specs.forEach((s) => { const err = validateSpec(s, values[s.name]); if (err) { next[s.name] = err; if (!first) first = s.name; } });
      setErrors(next);
      if (Object.keys(next).length) {
        e.preventDefault();
        const node = formRef.current && formRef.current.querySelector('[name="' + first + '"]');
        if (node) node.focus();
        return;
      }
      if (typeof navigator !== 'undefined' && navigator.onLine === false) {
        e.preventDefault();
        setFormError('You appear to be offline. Please check your connection and try again.');
        return;
      }
      if (window.GIGtm && typeof window.GIGtm.generateLead === 'function') {
        window.GIGtm.generateLead({ form_id: form.gtmFormId || form.key, form_location: window.GI_PAGE || 'site' });
      }
      // Valid → let the native multipart POST flow to the hidden iframe.
      setFormError(null);
      setSending(true);
      pendingRef.current = true;
      timeoutRef.current = setTimeout(() => {
        if (!pendingRef.current) return;
        pendingRef.current = false;
        setSending(false);
        setFormError('Something went wrong sending your request. Please try again, or email us directly.');
      }, 15000);
    };

    const onSinkLoad = () => {
      if (!pendingRef.current) return;   // ignore initial about:blank
      pendingRef.current = false;
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      setSending(false);
      setSubmitted(true);
    };

    return {
      values, errors, sending, submitted, formError, specs, setField, onSubmit, onSinkLoad, sinkName,
      formProps: { ref: formRef, action: form.action, method: 'post', encType: 'multipart/form-data', acceptCharset: 'UTF-8', target: sinkName, onSubmit, noValidate: true },
    };
  };

  // Hidden Zoho control inputs (verbatim names) + the off-screen sink iframe.
  const HiddenControls = () => (
    <React.Fragment>
      <input type="hidden" name="zf_referrer_name" value={referrerUrl()} readOnly />
      <input type="hidden" name="zf_redirect_url" value="" readOnly />
      <input type="hidden" name="zc_gad" value="" readOnly />
    </React.Fragment>
  );
  const Sink = ({ eng }) => (
    <iframe className="gi-zf-sink" name={eng.sinkName} title="Form submission target"
      onLoad={eng.onSinkLoad} tabIndex={-1} aria-hidden="true" />
  );

  // ===================================================================
  // Styles (scoped .gi-zf-*) — ported from form-popup.html
  // ===================================================================
  const injectStyles = () => {
    if (document.getElementById('gi-zoho-forms-css')) return;
    const style = document.createElement('style');
    style.id = 'gi-zoho-forms-css';
    style.textContent = `
.gi-zf-overlay{position:fixed;inset:0;z-index:11000;display:flex;align-items:flex-start;justify-content:center;
  padding:48px 24px;overflow-y:auto;background:rgba(15,33,51,0.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s cubic-bezier(.2,0,0,1);}
.gi-zf-overlay[data-open="true"]{opacity:1;}
.gi-zf-modal{position:relative;width:100%;max-width:760px;margin:auto;background:var(--gi-paper-cream,#F3F4F1);
  border-radius:20px;box-shadow:0 48px 96px -32px rgba(15,33,51,0.55),0 12px 32px -12px rgba(15,33,51,0.30);
  overflow:hidden;transform:translateY(16px) scale(.985);opacity:0;transition:transform .34s cubic-bezier(.2,0,0,1),opacity .34s cubic-bezier(.2,0,0,1);}
.gi-zf-overlay[data-open="true"] .gi-zf-modal{transform:translateY(0) scale(1);opacity:1;}
.gi-zf-close{position:absolute;top:18px;right:18px;z-index:5;width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid rgba(15,33,51,0.10);border-radius:999px;background:rgba(255,255,255,0.7);
  color:var(--gi-slate,#3A4A5C);cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.gi-zf-close:hover{background:#fff;color:var(--gi-deep-ink,#0F2133);border-color:rgba(15,33,51,0.18);}
.gi-zf-close:focus-visible{outline:2px solid var(--gi-soft-green,#375844);outline-offset:2px;}
.gi-zf-close svg{display:block;width:18px;height:18px;}
.gi-zf-header{padding:52px 56px 32px;text-align:center;}
.gi-zf-eyebrow{font-family:var(--ff-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gi-sage-accent,#5E8F6D);margin:0 0 14px;}
.gi-zf-title{font-family:var(--ff-sans,sans-serif);font-weight:500;font-size:clamp(26px,3.4vw,34px);line-height:1.12;
  letter-spacing:-.022em;color:var(--gi-deep-ink,#0F2133);margin:0 auto 16px;max-width:20ch;text-wrap:balance;}
.gi-zf-desc{font-family:var(--ff-sans,sans-serif);font-size:15.5px;line-height:25px;color:var(--gi-slate,#3A4A5C);margin:0 auto;max-width:56ch;}
.gi-zf-divider{height:1px;background:rgba(15,33,51,0.14);margin:0 56px;}
.gi-zf-card-wrap{padding:32px 40px 44px;}
.gi-zf-card{background:#fff;border-radius:16px;box-shadow:0 2px 4px rgba(15,33,51,0.05),0 16px 40px -16px rgba(15,33,51,0.18);padding:40px;}
.gi-zf-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;}
.gi-zf-field{display:flex;flex-direction:column;}
.gi-zf-field--full{grid-column:1 / -1;}
.gi-zf-label{font-family:var(--ff-mono,monospace);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gi-deep-ink,#0F2133);margin-bottom:10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.gi-zf-label .gi-zf-req{color:var(--gi-sage-accent,#5E8F6D);}
.gi-zf-label .gi-zf-opt{font-family:var(--ff-sans,sans-serif);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gi-graphite,#8E8E8E);}
.gi-zf-input,.gi-zf-textarea{font-family:var(--ff-sans,sans-serif);font-size:15px;color:var(--gi-deep-ink,#0F2133);width:100%;
  padding:13px 0;border:none;border-bottom:1.5px solid rgba(15,33,51,0.14);background:transparent;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .2s cubic-bezier(.2,0,0,1);border-radius:0;}
select.gi-zf-input{cursor:pointer;}
.gi-zf-input::placeholder,.gi-zf-textarea::placeholder{color:var(--gi-graphite,#8E8E8E);opacity:.8;}
.gi-zf-input:hover,.gi-zf-textarea:hover{border-bottom-color:rgba(15,33,51,0.28);}
.gi-zf-input:focus,.gi-zf-textarea:focus{border-bottom-color:var(--gi-soft-green,#375844);}
.gi-zf-textarea{padding:12px 0;min-height:108px;line-height:23px;resize:vertical;}
.gi-zf-field.is-invalid .gi-zf-input,.gi-zf-field.is-invalid .gi-zf-textarea{border-bottom-color:#B33A3A;}
.gi-zf-error{font-family:var(--ff-mono,monospace);font-size:10.5px;letter-spacing:.04em;color:#B33A3A;margin-top:8px;
  display:inline-flex;align-items:center;gap:6px;}
.gi-zf-footer{margin-top:34px;padding-top:28px;border-top:1px solid rgba(15,33,51,0.10);display:flex;flex-direction:column;
  align-items:center;gap:16px;text-align:center;}
.gi-zf-submit{font-family:var(--ff-sans,sans-serif);font-size:15px;font-weight:500;letter-spacing:-.003em;color:#fff;
  background:var(--gi-soft-green,#375844);border:none;border-radius:4px;padding:16px 34px;min-height:52px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:300px;transition:background .2s,opacity .2s;}
.gi-zf-submit:hover{background:var(--gi-soft-green-deep,#2E4A39);}
.gi-zf-submit:disabled{opacity:.7;cursor:default;}
.gi-zf-submit:focus-visible{outline:2px solid var(--gi-soft-green,#375844);outline-offset:3px;}
.gi-zf-submit svg{display:block;width:16px;height:16px;}
.gi-zf-privacy{font-family:var(--ff-sans,sans-serif);font-size:12.5px;line-height:18px;color:var(--gi-graphite,#8E8E8E);margin:0;max-width:42ch;}
.gi-zf-formerr{font-family:var(--ff-mono,monospace);font-size:11px;letter-spacing:.04em;color:#B33A3A;margin:0;max-width:46ch;}
.gi-zf-confirm{text-align:center;padding:8px 8px 4px;}
.gi-zf-confirm .gi-zf-check{width:60px;height:60px;margin:0 auto 24px;border-radius:999px;background:rgba(94,143,109,0.12);
  display:flex;align-items:center;justify-content:center;color:var(--gi-soft-green,#375844);}
.gi-zf-confirm .gi-zf-check svg{width:28px;height:28px;}
.gi-zf-confirm h3{font-family:var(--ff-sans,sans-serif);font-weight:500;font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;
  margin:0 0 14px;color:var(--gi-deep-ink,#0F2133);text-wrap:balance;}
.gi-zf-confirm p{font-family:var(--ff-sans,sans-serif);font-size:15.5px;line-height:25px;color:var(--gi-slate,#3A4A5C);margin:0 auto;max-width:50ch;}
.gi-zf-sink{position:absolute;width:0;height:0;border:0;opacity:0;pointer-events:none;}
@media (max-width:680px){
  .gi-zf-overlay{padding:0;align-items:stretch;}
  .gi-zf-modal{max-width:none;border-radius:0;min-height:100%;margin:0;overflow-y: auto;}
  .gi-zf-header{padding:64px 22px 28px;}
  .gi-zf-divider{margin:0 22px;}
  .gi-zf-card-wrap{padding:24px 16px 32px;}
  .gi-zf-card{padding:28px 20px 30px;border-radius:14px;}
  .gi-zf-grid{grid-template-columns:1fr;gap:24px;}
  .gi-zf-input,.gi-zf-textarea{padding:14px 0;font-size:16px;}
  .gi-zf-submit{max-width:none;}
  .gi-zf-close{top:14px;right:14px;}
}
@media (prefers-reduced-motion:reduce){.gi-zf-overlay,.gi-zf-modal{transition:none;}}
`;
    document.head.appendChild(style);
  };

  // ===================================================================
  // Shared field rendering (modal)
  // ===================================================================
  const AlertIcon = () => (
    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.3" />
      <path d="M8 5v3.5M8 11h.01" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
    </svg>
  );

  const FieldBlock = ({ spec, eng, formKey, inputRef, optional }) => {
    const invalid = !!eng.errors[spec.name];
    const id = 'gi-zf-' + formKey + '-' + spec.name;
    const errId = id + '-err';
    const common = {
      id, name: spec.name, value: eng.values[spec.name], onChange: eng.setField(spec.name),
      autoComplete: spec.autoComplete, placeholder: spec.placeholder || '',
      'aria-invalid': invalid ? 'true' : undefined, 'aria-describedby': invalid ? errId : undefined,
      ref: inputRef,
    };
    let control;
    if (spec.kind === 'textarea') {
      control = <textarea className="gi-zf-textarea" rows={4} maxLength={spec.maxLength || 65535} {...common} />;
    } else if (spec.kind === 'select') {
      control = (
        <select className="gi-zf-input" {...common}>
          {spec.placeholder && <option value={spec.placeholder}>{spec.placeholder}</option>}
          {spec.options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
      );
    } else {
      control = <input className="gi-zf-input" type={spec.kind === 'email' ? 'email' : spec.kind === 'tel' ? 'tel' : 'text'} maxLength={spec.maxLength || 255} {...common} />;
    }
    return (
      <div className={'gi-zf-field' + (spec.col === 'full' ? ' gi-zf-field--full' : '') + (invalid ? ' is-invalid' : '')}>
        <label className="gi-zf-label" htmlFor={id}>
          {spec.label}
          {spec.required && <span className="gi-zf-req" aria-hidden="true">*</span>}
          {optional && <span className="gi-zf-opt">Optional</span>}
        </label>
        {control}
        {invalid && <span className="gi-zf-error" id={errId}><AlertIcon />{eng.errors[spec.name]}</span>}
      </div>
    );
  };

  const ModalFields = ({ form, eng, firstRef }) => {
    const firstName = eng.specs[0] && eng.specs[0].name;
    const out = [];
    form.fields.forEach((f, fi) => {
      if (f.type === 'address') {
        out.push(
          <div className="gi-zf-field gi-zf-field--full" key={'addr-' + fi}>
            <label className="gi-zf-label">Address<span className="gi-zf-opt">Optional</span></label>
            <div className="gi-zf-grid" style={{ marginTop: 4 }}>
              {fieldSpecs(f).map((s) => (
                <FieldBlock key={s.name} spec={s} eng={eng} formKey={form.key}
                  inputRef={s.name === firstName ? firstRef : undefined} />
              ))}
            </div>
          </div>
        );
      } else {
        fieldSpecs(f).forEach((s) => out.push(
          <FieldBlock key={s.name} spec={s} eng={eng} formKey={form.key}
            inputRef={s.name === firstName ? firstRef : undefined} />
        ));
      }
    });
    return out;
  };

  // ===================================================================
  // PRESENTATION: Modal
  // ===================================================================
  const GiZohoModal = ({ form, triggerEl, onClose }) => {
    const eng = useGiZohoForm(form);
    const [shown, setShown] = React.useState(false);
    const overlayRef = React.useRef(null);
    const modalRef = React.useRef(null);
    const firstFieldRef = React.useRef(null);
    const closingRef = React.useRef(false);

    React.useEffect(() => {
      const prevOverflow = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      const raf = requestAnimationFrame(() => setShown(true));
      const focusT = setTimeout(() => { if (firstFieldRef.current) firstFieldRef.current.focus(); }, 80);
      return () => { document.body.style.overflow = prevOverflow; cancelAnimationFrame(raf); clearTimeout(focusT); };
    }, []);

    const requestClose = React.useCallback(() => {
      if (closingRef.current) return;
      closingRef.current = true;
      setShown(false);
      setTimeout(() => {
        if (triggerEl && typeof triggerEl.focus === 'function') triggerEl.focus();
        onClose();
      }, 320);
    }, [onClose, triggerEl]);

    const onKeyDown = (e) => {
      if (e.key === 'Escape') { e.stopPropagation(); requestClose(); return; }
      if (e.key !== 'Tab') return;
      const root = modalRef.current;
      if (!root) return;
      const f = Array.prototype.filter.call(
        root.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
        (el) => el.offsetParent !== null && !el.disabled
      );
      if (!f.length) return;
      const first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    };

    const titleId = 'gi-zf-title-' + form.key;
    const descId = 'gi-zf-desc-' + form.key;

    return (
      <div className="gi-zf-overlay" data-open={shown ? 'true' : 'false'} ref={overlayRef}
        role="dialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descId}
        onMouseDown={(e) => { if (e.target === overlayRef.current) requestClose(); }} onKeyDown={onKeyDown}>
        <div className="gi-zf-modal" role="document" ref={modalRef}>
          <button type="button" className="gi-zf-close" aria-label="Close form" onClick={requestClose}>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>
          </button>
          <Sink eng={eng} />
          {eng.submitted ? (
            <div className="gi-zf-header">
              <div className="gi-zf-confirm">
                <div className="gi-zf-check">
                  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 13l4 4 10-11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <h3>{form.successHeading || 'Your request has been received.'}</h3>
                <p>{form.successBody || 'Thank you. A member of our team will review your details and respond within one business day.'}</p>
              </div>
            </div>
          ) : (
            <React.Fragment>
              <header className="gi-zf-header">
                {form.eyebrow && <p className="gi-zf-eyebrow">{form.eyebrow}</p>}
                <h2 className="gi-zf-title" id={titleId}>{form.heading}</h2>
                {form.intro && <p className="gi-zf-desc" id={descId}>{form.intro}</p>}
              </header>
              <div className="gi-zf-divider" />
              <div className="gi-zf-card-wrap">
                <form className="gi-zf-card" {...eng.formProps}>
                  <HiddenControls />
                  <div className="gi-zf-grid">
                    <ModalFields form={form} eng={eng} firstRef={firstFieldRef} />
                  </div>
                  <div className="gi-zf-footer">
                    {eng.formError && <p className="gi-zf-formerr" role="alert">{eng.formError}</p>}
                    <button type="submit" className="gi-zf-submit" disabled={eng.sending}>
                      {eng.sending ? 'Submitting…' : (form.submitLabel || 'Submit Request')}
                      {!eng.sending && <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>}
                    </button>
                    <p className="gi-zf-privacy">{form.privacy || 'Your information will only be used to respond to your request.'}</p>
                  </div>
                </form>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  };

  // ===================================================================
  // PRESENTATION: Inline (newsletter) — bespoke dark-band markup, same engine.
  // Exposed on window so blog-page.jsx's SubscribeBand can render it.
  // ===================================================================
  const GiZohoNewsletterForm = () => {
    const form = React.useMemo(() => Object.assign({ key: 'newsletter' }, GI_ZOHO_FORMS['newsletter']), []);
    const eng = useGiZohoForm(form);

    if (eng.submitted) {
      return (
        <p role="status" style={{
          font: '500 15px/22px var(--ff-sans)', color: '#fff', margin: 0,
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{
            width: 24, height: 24, borderRadius: 999, flexShrink: 0,
            background: 'rgba(94,143,109,0.25)', color: '#A9D6B8',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 13l4 4 10-11" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
          Thanks — you're subscribed. New analysis lands in your inbox monthly.
        </p>
      );
    }

    const err = eng.errors;
    const dark = (name) => ({
      flex: '1 1 150px', minWidth: 120, padding: '14px 16px', borderRadius: 6,
      border: '1px solid ' + (err[name] ? '#E6736B' : 'rgba(255,255,255,0.20)'),
      background: 'rgba(255,255,255,0.06)', color: '#fff',
      fontFamily: 'var(--ff-sans)', fontSize: 14, outline: 'none',
    });
    const field = (name, ph, type, auto) => (
      <input type={type || 'text'} name={name} value={eng.values[name]} onChange={eng.setField(name)}
        placeholder={ph} autoComplete={auto} aria-label={ph} aria-invalid={err[name] ? 'true' : undefined}
        style={dark(name)} />
    );

    return (
      <form {...eng.formProps} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <Sink eng={eng} />
        <HiddenControls />
        {field('Name_First', 'First name', 'text', 'given-name')}
        {field('Name_Last', 'Last name', 'text', 'family-name')}
        {field('Email', 'Your work email', 'email', 'email')}
        <button type="submit" disabled={eng.sending} style={{
          padding: '14px 22px', borderRadius: 6, border: 'none', cursor: eng.sending ? 'default' : 'pointer',
          background: 'var(--gi-color-gold, #C9952E)', color: 'var(--gi-deep-ink, #0D1C35)',
          fontFamily: 'var(--ff-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.10em',
          textTransform: 'uppercase', opacity: eng.sending ? 0.75 : 1, whiteSpace: 'nowrap',
        }}>{eng.sending ? 'Submitting…' : (form.submitLabel || 'Subscribe')}</button>
        {(eng.formError || err.Name_First || err.Name_Last || err.Email) && (
          <p role="alert" style={{
            flexBasis: '100%', margin: '2px 0 0', fontFamily: 'var(--ff-mono)', fontSize: 11,
            letterSpacing: '0.04em', color: '#E6918A',
          }}>{eng.formError || 'Please enter your name and a valid email address.'}</p>
        )}
      </form>
    );
  };
  window.GiZohoNewsletterForm = GiZohoNewsletterForm;

  // ===================================================================
  // Host (singleton modal holder)
  // ===================================================================
  let hostApi = null;
  const GiZohoFormsHost = () => {
    const [state, setState] = React.useState({ key: null, triggerEl: null });
    React.useEffect(() => {
      hostApi = {
        open: (key, triggerEl) => setState({ key, triggerEl: triggerEl || null }),
        close: () => setState({ key: null, triggerEl: null }),
      };
      return () => { hostApi = null; };
    });
    if (!state.key) return null;
    const cfg = GI_ZOHO_FORMS[state.key];
    if (!cfg || cfg.presentation !== 'modal') return null;
    const form = Object.assign({ key: state.key }, cfg);
    return <GiZohoModal form={form} triggerEl={state.triggerEl} onClose={() => setState({ key: null, triggerEl: null })} />;
  };

  // ===================================================================
  // Public API + click delegate
  // ===================================================================
  const normHref = (h) => (h || '').replace(/\/+$/, '').trim();
  const HREF_TO_KEY = {};
  Object.keys(GI_ZOHO_FORMS).forEach((key) => {
    const cfg = GI_ZOHO_FORMS[key];
    if (cfg.presentation !== 'modal') return;
    const t = cfg.triggerHref;
    (Array.isArray(t) ? t : [t]).forEach((h) => { if (h) HREF_TO_KEY[normHref(h)] = key; });
  });

  const openForm = (key, triggerEl) => {
    const cfg = GI_ZOHO_FORMS[key];
    if (!cfg) { console.warn('[gi-zoho-forms] unknown form key:', key); return false; }
    if (cfg.presentation !== 'modal') return false;
    if (cfg.enabled === false || /REPLACE_WITH/.test(cfg.action || '')) {
      console.warn('[gi-zoho-forms] form "' + key + '" not enabled — following link instead.');
      return false;
    }
    if (!hostApi) return false;
    hostApi.open(key, triggerEl);
    return true;
  };

  window.giZohoForms = {
    open: openForm,
    close: () => hostApi && hostApi.close(),
    config: GI_ZOHO_FORMS,
    Newsletter: GiZohoNewsletterForm,
  };

  document.addEventListener('click', (e) => {
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    const el = e.target.closest && e.target.closest('a[href], [data-gi-form]');
    if (!el) return;
    let key = el.getAttribute('data-gi-form');
    if (!key) {
      const href = el.getAttribute('href');
      if (!href) return;
      key = HREF_TO_KEY[normHref(href)];
    }
    if (!key || !GI_ZOHO_FORMS[key]) return;
    if (openForm(key, el)) e.preventDefault();
  }, false);

  // ===================================================================
  // Self-mount once
  // ===================================================================
  const boot = () => {
    injectStyles();
    if (document.getElementById('gi-zoho-forms-root')) return;
    const mount = document.createElement('div');
    mount.id = 'gi-zoho-forms-root';
    document.body.appendChild(mount);
    ReactDOM.createRoot(mount).render(<GiZohoFormsHost />);
  };
  if (document.body) boot();
  else document.addEventListener('DOMContentLoaded', boot);

})();