// contact-form.jsx — Facility Review Request form
// Style departure from homepage forms: feels like a quiet engineering intake
// rather than a sales pop. White card, mono labels, restrained focus state.

const FREE_DOMAINS = new Set([
'gmail.com', 'googlemail.com', 'yahoo.com', 'yahoo.ca', 'yahoo.co.uk',
'outlook.com', 'hotmail.com', 'hotmail.ca', 'live.com', 'msn.com',
'icloud.com', 'me.com', 'mac.com', 'protonmail.com', 'proton.me',
'aol.com', 'mail.com', 'ymail.com', 'rogers.com', 'bell.net', 'shaw.ca',
'sympatico.ca', 'telus.net']);


const isBusinessEmail = (email) => {
  if (!email || !email.includes('@')) return false;
  const domain = email.split('@')[1]?.toLowerCase();
  return domain && !FREE_DOMAINS.has(domain);
};

const isValidPhone = (phone) => {
  if (!phone) return false;
  const digits = phone.replace(/\D/g, '');
  // North American: 10 digits, or 11 with leading 1
  return digits.length === 10 || digits.length === 11 && digits.startsWith('1');
};

// ---------- Field primitives ----------
const FieldLabel = ({ children, hint, htmlFor }) =>
<label htmlFor={htmlFor} style={{
  fontFamily: 'var(--ff-mono)', fontSize: 10.5, fontWeight: 500,
  letterSpacing: '0.14em', textTransform: 'uppercase',
  color: 'var(--gi-deep-ink)', display: 'block', marginBottom: 10,
  borderBottom: 'none'
}}>
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
      <span>{children}</span>
      {hint &&
    <span style={{
      fontFamily: 'var(--ff-sans)', fontSize: 11, fontWeight: 400,
      letterSpacing: '0', textTransform: 'none',
      color: 'var(--gi-graphite)'
    }}>{hint}</span>
    }
    </span>
  </label>;


const fieldBase = {
  fontFamily: 'var(--ff-sans)', fontSize: 14.5, color: 'var(--gi-deep-ink)',
  padding: '14px 0', border: 'none',
  borderBottom: '1.5px solid rgba(15,33,51,0.14)',
  background: 'transparent', width: '100%', outline: 'none',
  transition: 'border-color 200ms cubic-bezier(.2,0,0,1)',
  appearance: 'none', WebkitAppearance: 'none'
};

const TextInput = React.forwardRef(({ error, onChange, ...props }, ref) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <input
      ref={ref}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      onChange={onChange}
      style={{
        ...fieldBase,
        borderBottomColor: error ? '#B33A3A' : focused ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.14)'
      }}
      {...props} />);


});

const Select = ({ id, name, value, onChange, error, children, required, placeholder }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <select
        id={id} name={name} value={value} onChange={onChange} required={required}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          ...fieldBase,
          paddingRight: 32, cursor: 'pointer',
          color: value ? 'var(--gi-deep-ink)' : 'var(--gi-graphite)',
          borderBottomColor: error ? '#B33A3A' : focused ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.14)'
        }}>
        
        {placeholder && <option value="" disabled>{placeholder}</option>}
        {children}
      </select>
      <i data-lucide="chevron-down" style={{
        position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)',
        width: 16, height: 16, strokeWidth: 1.5, color: 'var(--gi-graphite)',
        pointerEvents: 'none'
      }} />
    </div>);

};

const Textarea = ({ id, name, value, onChange, placeholder, maxLength }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <div>
      <textarea
        id={id} name={name} value={value} onChange={onChange}
        placeholder={placeholder} maxLength={maxLength}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          ...fieldBase,
          padding: '12px 0',
          borderBottomColor: focused ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.14)',
          resize: 'none', minHeight: 78, lineHeight: '22px',
          fontSize: 14
        }} />
      
      <div style={{
        display: 'flex', justifyContent: 'flex-end', marginTop: 6,
        fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.06em',
        color: 'var(--gi-graphite)'
      }}>
        {value.length}/{maxLength}
      </div>
    </div>);

};

// ---------- Goals checkbox stack ----------
const GoalCheckbox = ({ value, label, checked, onChange }) =>
<label style={{
  display: 'flex', alignItems: 'center', gap: 14,
  padding: '14px 16px',
  border: `1px solid ${checked ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.12)'}`,
  background: checked ? 'rgba(94,143,109,0.06)' : 'transparent',
  cursor: 'pointer', transition: 'all 200ms cubic-bezier(.2,0,0,1)',
  borderRadius: 2
}}>
    <input
    type="checkbox"
    checked={checked}
    onChange={() => onChange(value)}
    style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }} />
  
    <span style={{
    width: 16, height: 16, flexShrink: 0,
    border: `1.5px solid ${checked ? 'var(--gi-soft-green)' : 'rgba(15,33,51,0.28)'}`,
    background: checked ? 'var(--gi-soft-green)' : 'transparent',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 200ms cubic-bezier(.2,0,0,1)'
  }}>
      {checked &&
    <svg width="10" height="8" viewBox="0 0 12 10" fill="none">
          <polyline points="1,5 4.5,8.5 11,1" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    }
    </span>
    <span style={{
    fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 400,
    color: 'var(--gi-deep-ink)', letterSpacing: '-0.003em'
  }}>{label}</span>
  </label>;


// ---------- Main form ----------
const FacilityReviewForm = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [values, setValues] = React.useState({
    firstName: '', lastName: '', industry: '', province: '', spend: '',
    email: '', phone: '', context: ''
  });
  const [goals, setGoals] = React.useState([]);
  const [errors, setErrors] = React.useState({});
  const [sending, setSending] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);

  const update = (k) => (e) => {
    setValues((v) => ({ ...v, [k]: e.target.value }));
    if (errors[k]) setErrors((er) => ({ ...er, [k]: null }));
  };

  const toggleGoal = (g) => {
    setGoals((arr) => arr.includes(g) ? arr.filter((x) => x !== g) : [...arr, g]);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (sending) return;
    const next = {};
    if (!values.firstName.trim()) next.firstName = 'First name required';
    if (!values.lastName.trim()) next.lastName = 'Last name required';
    if (!values.industry) next.industry = 'Please select your industry';
    if (!values.province) next.province = 'Please select your province';
    if (!values.spend) next.spend = 'Please select your spend range';
    if (!values.email) next.email = 'Business email required';else
    if (!isBusinessEmail(values.email)) next.email = 'Please use your business email address';
    if (!values.phone) next.phone = 'Phone number required';else
    if (!isValidPhone(values.phone)) next.phone = 'Please enter a valid phone number';
    setErrors(next);
    if (Object.keys(next).length > 0) return;

    // GI Link Audit (Part 3, Key Event #1): generate_lead.
    // Fires once on successful client-side validation — a leading indicator
    // (form-completion intent), independent of the Zoho round-trip below.
    if (window.GIGtm && typeof window.GIGtm.generateLead === 'function') {
      window.GIGtm.generateLead({
        form_id: 'facility-review-request',
        form_location: 'contact-page',
        industry: values.industry || undefined,
        province: values.province || undefined,
        spend_range: values.spend || undefined,
        goals: goals.length ? goals.join('|') : undefined
      });
    }

    // Map our internal slugs to the EXACT Zoho dropdown option values — Zoho
    // rejects any value not in its option list. Kept local (not top-level) so
    // they can't collide in the shared babel global scope.
    const INDUSTRY_TO_ZOHO = {
      'manufacturing': 'Manufacturing',
      'food-beverage': 'Food & Beverage',
      'warehousing': 'Warehousing & Logistics',
      'solar-maintenance': 'Solar maintenance',
      'energy-audit': 'Energy Audit',
      'agriculture': 'Agriculture',
      'commercial-real-estate': 'Commercial Real Estate',
      'municipal': 'Municipal / Institutional',
      'other': 'Other C&I'
    };
    // NOTE: "Nva Scotia" is a typo in the Zoho form's own option list. It must
    // be sent verbatim or the value won't match. Fix it in Zoho, then update here.
    const PROVINCE_TO_ZOHO = {
      'ontario': 'Ontario',
      'alberta': 'Alberta',
      'nova-scotia': 'Nva Scotia',
      'bc': 'British Columbia',
      'saskatchewan': 'Saskatchewan',
      'quebec': 'Quebec',
      'manitoba': 'Manitoba',
      'new-brunswick': 'New Brunswick',
      'newfoundland-and-labrador': 'Newfoundland and Labrador',
      'prince-edward-island': 'Prince Edward Island'
    };
    const SPEND_TO_ZOHO = {
      'under-5k': '< $5k / month',
      '5k-10k': '$5 - 10k / month',
      '10k-25k': '$10 - 25k / month',
      '25k-75k': '$25 - 75k / month',
      '75k-plus': '$75k+ / month'
    };
    const GOAL_TO_ZOHO = {
      'cost-reduction': 'Reduce electricity costs',
      'solar-feasibility': 'Solar or storage feasibility',
      'compliance': 'Compliance readiness (BEPS / ESG)',
      'full-review': 'Full energy review',
      'incentives': 'Incentive eligibility',
      'storage': 'Storage & resilience'
    };

    // Zoho Forms submit endpoint — from the form's "Source Code" embed. NOTE:
    // this formperma differs from the public/iframe link; /htmlRecords/submit is
    // the URL that actually records entries.
    const ZOHO_ACTION = 'https://forms.zohopublic.com/greenintegrations/form/StartYourAssesment/formperma/vsvhoAZGo1FNMLpAbsBA-N3hCFNSwI5F7K7Dab_gmpg/htmlRecords/submit';

    // Field names are taken verbatim from the Zoho embed — renaming or dropping
    // them silently empties the value on submission.
    const fd = new FormData();
    fd.append('zf_referrer_name', '');
    fd.append('zf_redirect_url', '');
    fd.append('zc_gad', '');
    fd.append('Name_First', values.firstName.trim());
    fd.append('Name_Last', values.lastName.trim());
    fd.append('Dropdown1', INDUSTRY_TO_ZOHO[values.industry] || values.industry);
    fd.append('Dropdown2', PROVINCE_TO_ZOHO[values.province] || values.province);
    fd.append('Dropdown3', SPEND_TO_ZOHO[values.spend] || values.spend);
    // MultipleChoice is a multi-select — append once per chosen goal, mirroring
    // a native <select multiple> submission.
    goals.forEach((g) => fd.append('MultipleChoice', GOAL_TO_ZOHO[g] || g));
    fd.append('Email', values.email.trim());
    fd.append('PhoneNumber_countrycode', values.phone.trim());
    fd.append('MultiLine', values.context.trim());

    setSending(true);
    setSubmitError(null);
    // multipart/form-data is a CORS-safelisted content type, so this "simple"
    // POST reaches Zoho with no preflight. The response is opaque (no-cors), so
    // we confirm optimistically and surface only a network-level failure.
    fetch(ZOHO_ACTION, { method: 'POST', body: fd, mode: 'no-cors' })
      .then(() => { setSending(false); setSubmitted(true); })
      .catch(() => {
        setSending(false);
        setSubmitError('Something went wrong sending your request. Please try again, or email us directly.');
      });
  };

  React.useEffect(() => {
    if (submitted) window.scrollTo({ top: window.scrollY - 40, behavior: 'smooth' });
  }, [submitted]);

  if (submitted) return <Confirmation />;

  return (
    <div data-gi-resp="form-card" style={{
      background: '#fff',
      padding: '56px 56px 48px',
      boxShadow: '0 40px 80px -32px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.20)',
      position: 'relative'
    }}>
      {/* Header strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        paddingBottom: 22, marginBottom: 36,
        borderBottom: '1px solid rgba(15,33,51,0.10)'
      }} data-gi-resp="form-card-header-strip">
        <div>
          <div data-gi-resp="form-card-header" style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10.5, fontWeight: 500,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--gi-sage-accent)', marginBottom: 10
          }}>
            Form · 09 fields · ~3 min
          </div>
          <h3 style={{
            font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.018em',
            color: 'var(--gi-deep-ink)', margin: 0
          }}>Facility Review Request</h3>
        </div>
        <div style={{
          fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
          color: 'var(--gi-graphite)', textTransform: 'uppercase',
          textAlign: 'right'
        }}>
          Required ·<span style={{ color: 'var(--gi-soft-green)', marginLeft: 6 }}>7 fields</span>
        </div>
      </div>

      <form onSubmit={onSubmit} noValidate>
        <div data-gi-resp="form-fields" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: '32px 40px'
        }}>
          {/* First name */}
          <div>
            <FieldLabel htmlFor="firstName">01 · First name</FieldLabel>
            <TextInput id="firstName" name="firstName" type="text"
              placeholder="Jane"
              value={values.firstName} onChange={update('firstName')}
              error={errors.firstName} autoComplete="given-name" required />
            {errors.firstName && <FieldError>{errors.firstName}</FieldError>}
          </div>

          {/* Last name */}
          <div>
            <FieldLabel htmlFor="lastName">02 · Last name</FieldLabel>
            <TextInput id="lastName" name="lastName" type="text"
              placeholder="Doe"
              value={values.lastName} onChange={update('lastName')}
              error={errors.lastName} autoComplete="family-name" required />
            {errors.lastName && <FieldError>{errors.lastName}</FieldError>}
          </div>

          {/* Industry */}
          <div>
            <FieldLabel htmlFor="industry">03 · Facility Type</FieldLabel>
            <Select id="industry" name="industry" value={values.industry}
              onChange={update('industry')} error={errors.industry} required
              placeholder="Select your industry">
              <option value="manufacturing">Manufacturing</option>
              <option value="food-beverage">Food &amp; Beverage</option>
              <option value="warehousing">Warehousing &amp; Logistics</option>
              <option value="solar-maintenance">Solar maintenance</option>
              <option value="energy-audit">Energy Audit</option>
              <option value="agriculture">Agriculture</option>
              <option value="commercial-real-estate">Commercial Real Estate</option>
              <option value="municipal">Municipal / Institutional</option>
              <option value="other">Other C&amp;I</option>
            </Select>
            {errors.industry && <FieldError>{errors.industry}</FieldError>}
          </div>

          {/* Province */}
          <div>
            <FieldLabel htmlFor="province">04 · Province</FieldLabel>
            <Select id="province" name="province" value={values.province}
              onChange={update('province')} error={errors.province} required
              placeholder="Select your province">
              <option value="ontario">Ontario</option>
              <option value="alberta">Alberta</option>
              <option value="nova-scotia">Nova Scotia</option>
              <option value="bc">British Columbia</option>
              <option value="saskatchewan">Saskatchewan</option>
              <option value="quebec">Quebec</option>
              <option value="manitoba">Manitoba</option>
              <option value="new-brunswick">New Brunswick</option>
              <option value="newfoundland-and-labrador">Newfoundland and Labrador</option>
              <option value="prince-edward-island">Prince Edward Island</option>
            </Select>
            {errors.province && <FieldError>{errors.province}</FieldError>}
          </div>

          {/* Spend */}
          <div style={{ gridColumn: '1 / -1' }}>
            <FieldLabel htmlFor="spend">05 · Monthly electricity spend</FieldLabel>
            <SpendSelector value={values.spend} onChange={(v) => {
              setValues((vs) => ({ ...vs, spend: v }));
              if (errors.spend) setErrors((er) => ({ ...er, spend: null }));
            }} error={errors.spend} />
            {errors.spend && <FieldError>{errors.spend}</FieldError>}
          </div>

          {/* Goals */}
          <div style={{ gridColumn: '1 / -1' }}>
            <FieldLabel hint="Select all that apply">06 · What are your energy goals?</FieldLabel>
            <div data-gi-resp="form-goals" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: 10, marginTop: 4
            }}>
              <GoalCheckbox value="cost-reduction" label="Reduce electricity costs"
                checked={goals.includes('cost-reduction')} onChange={toggleGoal} />
              <GoalCheckbox value="solar-feasibility" label="Solar or storage feasibility"
                checked={goals.includes('solar-feasibility')} onChange={toggleGoal} />
              <GoalCheckbox value="compliance" label="Compliance readiness (BEPS / ESG)"
                checked={goals.includes('compliance')} onChange={toggleGoal} />
              <GoalCheckbox value="full-review" label="Full energy review"
                checked={goals.includes('full-review')} onChange={toggleGoal} />
              <GoalCheckbox value="incentives" label="Incentive eligibility"
                checked={goals.includes('incentives')} onChange={toggleGoal} />
              <GoalCheckbox value="storage" label="Storage &amp; resilience"
                checked={goals.includes('storage')} onChange={toggleGoal} />
            </div>
          </div>

          {/* Email */}
          <div>
            <FieldLabel htmlFor="email" hint="Business domain only">
              07 · Business email
            </FieldLabel>
            <TextInput id="email" name="email" type="email"
              placeholder="you@yourcompany.com"
              value={values.email} onChange={update('email')}
              error={errors.email} autoComplete="email" required />
            {errors.email && <FieldError>{errors.email}</FieldError>}
          </div>

          {/* Phone */}
          <div>
            <FieldLabel htmlFor="phone">08 · Phone</FieldLabel>
            <TextInput id="phone" name="phone" type="tel"
              placeholder="(555) 123-4567"
              value={values.phone} onChange={update('phone')}
              error={errors.phone} autoComplete="tel" required />
            {errors.phone && <FieldError>{errors.phone}</FieldError>}
          </div>

          {/* Context */}
          <div style={{ gridColumn: '1 / -1' }}>
            <FieldLabel htmlFor="context" hint="Optional · improves specificity of what we return">
              09 · Company name &amp; context
            </FieldLabel>
            <Textarea id="context" name="context" value={values.context}
              onChange={update('context')} maxLength={200}
              placeholder="Facility size, operational hours, or anything useful for our initial review." />
          </div>

          {/* Footer / submit */}
          {submitError && (
            <div style={{ gridColumn: '1 / -1' }}>
              <FieldError>{submitError}</FieldError>
            </div>
          )}
          <div style={{
            gridColumn: '1 / -1', marginTop: 16,
            paddingTop: 28, borderTop: '1px solid rgba(15,33,51,0.10)',
            display: 'grid', gridTemplateColumns: '1fr auto',
            gap: 32, alignItems: 'center'
          }}>
            <button data-gi-resp="form-card-submit" type="submit" disabled={sending} style={{
              fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
              letterSpacing: '-0.003em',
              padding: '16px 28px',
              background: sending ? 'var(--gi-graphite)' : 'var(--gi-soft-green)', color: '#fff',
              border: 'none', cursor: sending ? 'default' : 'pointer', borderRadius: 2,
              opacity: sending ? 0.8 : 1,
              display: 'inline-flex', alignItems: 'center', gap: 12,
              transition: 'background 200ms cubic-bezier(.2,0,0,1)'
            }}
              onMouseOver={(e) => { if (!sending) e.currentTarget.style.background = '#2E4A39'; }}
              onMouseOut={(e) => { if (!sending) e.currentTarget.style.background = 'var(--gi-soft-green)'; }}>
              {sending ? 'Submitting…' : 'Submit for review'}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </form>
    </div>);

};

const FieldError = ({ children }) =>
<div style={{
  fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 400,
  letterSpacing: '0.04em',
  color: '#B33A3A', marginTop: 8,
  display: 'inline-flex', alignItems: 'center', gap: 6
}}>
    <i data-lucide="alert-circle" style={{ width: 12, height: 12, strokeWidth: 1.75 }} />
    {children}
  </div>;


// ---------- Spend selector — segmented for visual variety vs select ----------
const SpendSelector = ({ value, onChange, error }) => {
  const ranges = [
  { v: 'under-5k', label: '< $5k', sub: 'Under 5,000' },
  { v: '5k-10k', label: '$5–10k', sub: '5,000–10,000' },
  { v: '10k-25k', label: '$10–25k', sub: '10,000–25,000' },
  { v: '25k-75k', label: '$25–75k', sub: '25,000–75,000' },
  { v: '75k-plus', label: '$75k+', sub: '75,000+' }];

  return (
    <div data-gi-resp="spend-selector" style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      border: `1px solid ${error ? '#B33A3A' : 'rgba(15,33,51,0.14)'}`,
      marginTop: 4
    }}>
      {ranges.map((r, i) =>
      <button key={r.v} type="button"
        onClick={() => onChange(r.v)}
        style={{
          padding: '14px 8px',
          border: 'none',
          borderRight: i < ranges.length - 1 ? '1px solid rgba(15,33,51,0.10)' : 'none',
          background: value === r.v ? 'var(--gi-deep-ink)' : '#fff',
          color: value === r.v ? '#fff' : 'var(--gi-deep-ink)',
          cursor: 'pointer', transition: 'all 200ms cubic-bezier(.2,0,0,1)',
          textAlign: 'center'
        }}>
          <div style={{
          fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
          marginBottom: 2
        }}>{r.label}</div>
          <div style={{
          fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.10em',
          opacity: value === r.v ? 0.65 : 0.45, textTransform: 'uppercase'
        }}>/ month</div>
        </button>
      )}
    </div>);

};

// ---------- Confirmation state ----------
const Confirmation = () =>
<div style={{
  background: '#fff',
  padding: '64px 56px',
  boxShadow: '0 40px 80px -32px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.20)'
}}>
    <div style={{
    fontFamily: 'var(--ff-mono)', fontSize: 10.5, fontWeight: 500,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--gi-sage-accent)', marginBottom: 20
  }}>Submission received · 16:42 EST</div>
    <h3 style={{
    font: '500 36px/42px var(--ff-sans)', letterSpacing: '-0.022em',
    color: 'var(--gi-deep-ink)', margin: '0 0 20px', textWrap: 'balance'
  }}>Your facility is queued for review.</h3>
    <p style={{
    font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
    margin: '0 0 12px', maxWidth: 560
  }}>
      We review every submission before responding — which is what lets us come
      back with something specific to your facility rather than a generic reply.
    </p>
    <p style={{
    font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
    margin: 0, maxWidth: 560
  }}>You'll hear from us within one business day.</p>

    <hr style={{
    border: 0, borderTop: '1px solid rgba(15,33,51,0.10)',
    margin: '40px 0 32px'
  }} />

    <div style={{
    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
    color: 'var(--gi-graphite)', textTransform: 'uppercase', marginBottom: 20
  }}>While you wait</div>

    <div data-gi-resp="confirm-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(15,33,51,0.08)' }}>
      {[
    // GI Link Audit (Fix 4): "While you wait" resource cards now route to real internal pages.
    // BEPS guide doesn't exist yet — falls back to /resources/insights/ for now.
    { t: 'Canadian Incentives Guide', d: 'Federal, provincial, and utility programs for C&I facilities. Updated quarterly.', href: '/resources/rebates-and-incentives/' },
    { t: 'BEPS + ESG Compliance Guide', d: 'What compliance requires, the timeline, and how an energy baseline helps.', href: '/resources/insights/' },
    { t: 'Commercial Solar Financing', d: 'Payment structures, zero-down options, and how financing aligns with savings.', href: '/resources/payment-plans/' },
    { t: 'Completed Projects', d: 'Outcomes from C&I installations across Ontario, Alberta, and Nova Scotia.', href: '/projects/' }].
    map((r) =>
    <a key={r.t} href={r.href}
      data-gtm-event="cta_click"
      data-gtm-label={r.t}
      data-gtm-location="contact-while-you-wait"
      data-gtm-stage="consideration"
      style={{
        background: '#fff', padding: '24px 24px',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
        alignItems: 'center', textDecoration: 'none', border: 'none',
        transition: 'background 200ms cubic-bezier(.2,0,0,1)'
      }}
    onMouseOver={(e) => e.currentTarget.style.background = 'rgba(94,143,109,0.06)'}
    onMouseOut={(e) => e.currentTarget.style.background = '#fff'}>
          <div>
            <div style={{
        fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
        color: 'var(--gi-deep-ink)', marginBottom: 4
      }}>{r.t}</div>
            <div style={{
        fontFamily: 'var(--ff-sans)', fontSize: 13, lineHeight: '20px',
        color: 'var(--gi-slate)'
      }}>{r.d}</div>
          </div>
          <i data-lucide="arrow-up-right" style={{
      width: 18, height: 18, strokeWidth: 1.5,
      color: 'var(--gi-sage-accent)'
    }} />
        </a>
    )}
    </div>
  </div>;


Object.assign(window, { FacilityReviewForm });