// solar-calc-calculator.jsx
// The 4-step calculator card. Bright white card on cream.
// Sage green for progress + UI. Amber appears only on the incentive band.
//
// Step flow:
//   0 — Electricity Basics (province, monthly bill)
//   1 — Facility Profile  (industry, size, roof type)
//   2 — Teaser + Lead Gate (visible savings range, blurred metrics, form)
//   3 — Calculating animation → Results
//
// State held by parent component <ScCalculator />.

// ----- Reusable bits -----------------------------------------

const ProgressRail = ({ step, labels }) => (
  <div className="solar-calc-progress-rail" style={{
    display: 'grid', gridTemplateColumns: `repeat(${labels.length}, 1fr)`,
    gap: 8, marginBottom: 0
  }}>
    {labels.map((label, i) => {
      const active = i <= step;
      const current = i === step;
      return (
        <div key={label} style={{
          display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 12
        }}>
          <div style={{
            height: 3, width: '100%',
            background: active ? SC_SAGE : 'rgba(15,33,51,0.10)',
            transition: 'background 280ms cubic-bezier(.2,0,0,1)'
          }} />
          <div className="solar-calc-progress-rail-item" style={{
            display: 'flex', alignItems: 'center', gap: 10
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: '50%',
              background: active ? SC_SAGE : '#fff',
              border: `1px solid ${active ? SC_SAGE : 'rgba(15,33,51,0.20)'}`,
              color: active ? '#fff' : 'var(--gi-graphite)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
              flexShrink: 0
            }}>{i + 1}</span>
            <span style={{
              fontFamily: 'var(--ff-mono)', fontSize: 10.5,
              letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500,
              color: current ? 'var(--gi-deep-ink)' : 'var(--gi-graphite)'
            }}>{label}</span>
          </div>
        </div>
      );
    })}
  </div>
);

const FieldLabel = ({ children, hint }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    marginBottom: 10
  }}>
    <label style={{
      fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
      textTransform: 'uppercase', fontWeight: 500, color: 'var(--gi-deep-ink)'
    }}>{children}</label>
    {hint && (
      <span style={{
        font: '400 12.5px/18px var(--ff-sans)', color: 'var(--gi-graphite)'
      }}>{hint}</span>
    )}
  </div>
);

const inputStyle = (focus) => ({
  width: '100%', padding: '14px 16px',
  background: '#fff',
  border: `1px solid ${focus ? SC_SAGE : 'rgba(15,33,51,0.16)'}`,
  borderRadius: 2,
  fontFamily: 'var(--ff-sans)', fontSize: 15,
  color: 'var(--gi-deep-ink)',
  outline: 'none',
  transition: 'border-color 180ms cubic-bezier(.2,0,0,1)',
  boxShadow: focus ? `0 0 0 3px ${SC_SAGE_SOFT}` : 'none'
});

const TextInput = ({ value, onChange, placeholder, type = 'text', ...rest }) => {
  const [focus, setFocus] = React.useState(false);
  return (
    <input
      type={type}
      value={value || ''}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      style={inputStyle(focus)}
      {...rest}
    />
  );
};

const Select = ({ value, onChange, options, placeholder }) => {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <select
        value={value || ''}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          ...inputStyle(focus),
          appearance: 'none', paddingRight: 44, cursor: 'pointer',
          color: value ? 'var(--gi-deep-ink)' : 'var(--gi-graphite)'
        }}>
        <option value="" disabled>{placeholder}</option>
        {options.map(o => (
          <option key={o.value || o} value={o.value || o}>{o.label || o}</option>
        ))}
      </select>
      <div aria-hidden="true" style={{
        position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
        color: 'var(--gi-slate)', pointerEvents: 'none'
      }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M3 6l5 5 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </div>
  );
};

// ----- Step 1: Electricity Basics ----------------------------

const Step1 = ({ data, setData, onNext, error }) => {
  return (
    <div>
      <h2 style={{
        font: '500 32px/38px var(--ff-sans)', letterSpacing: '-0.022em',
        color: 'var(--gi-deep-ink)', margin: '0 0 10px', textWrap: 'balance'
      }}>
        Your facility&rsquo;s electricity costs
      </h2>
      <p style={{
        font: '400 15px/24px var(--ff-sans)', color: 'var(--gi-slate)',
        margin: '0 0 32px', maxWidth: 520
      }}>
        Two numbers get us started — your province sets local utility rates and
        irradiance; your bill anchors the whole estimate.
      </p>

      <div style={{ display: 'grid', gap: 24 }}>
        <div>
          <FieldLabel>Province</FieldLabel>
          <Select
            value={data.province}
            onChange={(v) => setData({ ...data, province: v })}
            placeholder="Select your province"
            options={PROVINCES.map(p => ({ value: p.code, label: p.name + ' (' + p.code + ')' }))}
          />
        </div>

        <div>
          <FieldLabel hint="Commercial threshold — min $500/month">
            Average monthly electricity bill
          </FieldLabel>
          <div style={{ position: 'relative' }}>
            <span style={{
              position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)',
              font: '400 15px/22px var(--ff-sans)', color: 'var(--gi-slate)',
              pointerEvents: 'none'
            }}>CAD $</span>
            <input
              type="number"
              min={0}
              step={100}
              value={data.monthlyBill || ''}
              onChange={(e) => setData({ ...data, monthlyBill: e.target.value === '' ? '' : Number(e.target.value) })}
              placeholder="e.g. 9,500"
              style={{
                ...inputStyle(false),
                paddingLeft: 56
              }}
            />
          </div>
        </div>
      </div>

      {error && (
        <div style={{
          marginTop: 18, padding: '12px 14px',
          background: 'rgba(194,138,44,0.08)',
          border: '1px solid rgba(194,138,44,0.25)',
          color: '#8E6014',
          font: '400 13.5px/20px var(--ff-sans)',
          borderRadius: 2
        }}>{error}</div>
      )}

      <NavRow onNext={onNext} nextLabel="Continue · Facility profile" />
    </div>
  );
};

// ----- Step 2: Facility Profile -------------------------------

const Step2 = ({ data, setData, onNext, onBack, error }) => {
  return (
    <div>
      <h2 style={{
        font: '500 32px/38px var(--ff-sans)', letterSpacing: '-0.022em',
        color: 'var(--gi-deep-ink)', margin: '0 0 10px', textWrap: 'balance'
      }}>
        Tell us about your facility
      </h2>
      <p style={{
        font: '400 15px/24px var(--ff-sans)', color: 'var(--gi-slate)',
        margin: '0 0 32px', maxWidth: 520
      }}>
        Industry, size, and roof type help us frame the system — and route your
        estimate to the right specialist for first contact.
      </p>

      {/* Industry tiles */}
      <FieldLabel>Industry</FieldLabel>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
        marginBottom: 28
      }}>
        {INDUSTRIES.map(ind => {
          const active = data.industry === ind.id;
          return (
            <button
              key={ind.id}
              onClick={() => setData({ ...data, industry: ind.id })}
              style={{
                background: active ? SC_SAGE_TINT : '#fff',
                border: `1px solid ${active ? SC_SAGE : 'rgba(15,33,51,0.16)'}`,
                borderRadius: 2,
                padding: '18px 14px',
                cursor: 'pointer',
                textAlign: 'left',
                display: 'flex', alignItems: 'center', gap: 12,
                transition: 'background 180ms cubic-bezier(.2,0,0,1), border-color 180ms cubic-bezier(.2,0,0,1)',
                boxShadow: active ? `0 0 0 3px ${SC_SAGE_SOFT}` : 'none'
              }}>
              <i data-lucide={ind.icon} style={{
                width: 20, height: 20,
                color: active ? SC_SAGE : 'var(--gi-slate)', flexShrink: 0
              }} />
              <span style={{
                font: '500 14px/20px var(--ff-sans)',
                color: active ? 'var(--gi-deep-ink)' : 'var(--gi-deep-ink)',
                letterSpacing: '-0.005em'
              }}>{ind.label}</span>
            </button>
          );
        })}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div>
          <FieldLabel>Facility size</FieldLabel>
          <Select
            value={data.size}
            onChange={(v) => setData({ ...data, size: v })}
            placeholder="Select size"
            options={FACILITY_SIZES}
          />
        </div>
        <div>
          <FieldLabel>Roof type</FieldLabel>
          <Select
            value={data.roof}
            onChange={(v) => setData({ ...data, roof: v })}
            placeholder="Select roof type"
            options={ROOF_TYPES}
          />
        </div>
      </div>

      {error && (
        <div style={{
          marginTop: 18, padding: '12px 14px',
          background: 'rgba(194,138,44,0.08)',
          border: '1px solid rgba(194,138,44,0.25)',
          color: '#8E6014',
          font: '400 13.5px/20px var(--ff-sans)',
          borderRadius: 2
        }}>{error}</div>
      )}

      <NavRow onBack={onBack} onNext={onNext} nextLabel="See your estimate" />
    </div>
  );
};

// ----- Step 3: Teaser + Lead Gate ----------------------------

const Step3 = ({ data, setData, estimates, onSubmit, onBack, error }) => {
  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 500, color: SC_SAGE
      }}>
        <span aria-hidden="true" style={{
          width: 8, height: 8, background: SC_SAGE,
          boxShadow: `0 0 0 4px ${SC_SAGE_SOFT}`
        }} />
        Your estimate is ready
      </div>
      <h2 style={{
        font: '500 32px/38px var(--ff-sans)', letterSpacing: '-0.022em',
        color: 'var(--gi-deep-ink)', margin: '0 0 28px', textWrap: 'balance'
      }}>
        Here&rsquo;s your savings range — unlock the full estimate.
      </h2>

      {/* Teaser cards: savings visible, two others blurred */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        marginBottom: 28
      }}>
        <TeaserCard
          label="Annual savings"
          value={fmt$k(estimates.savings.low) + ' – ' + fmt$k(estimates.savings.high)}
          highlight
        />
        <TeaserCard label="System size" blurred />
        <TeaserCard label="Payback period" blurred />
      </div>

      {/* Lead gate explainer */}
      <div style={{
        display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14,
        padding: '18px 20px',
        background: SC_SAGE_TINT,
        border: `1px solid ${SC_SAGE_LINE}`,
        borderRadius: 2,
        marginBottom: 24
      }}>
        <i data-lucide="lock" style={{ width: 18, height: 18, color: SC_SAGE, marginTop: 2 }} />
        <div>
          <div style={{
            font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)',
            marginBottom: 6
          }}>Unlock your full estimate — including project cost range and incentive breakdown.</div>
          <div style={{
            font: '400 13.5px/20px var(--ff-sans)', color: 'var(--gi-slate)'
          }}>
            Your address lets us pull satellite roof data and precise local
            irradiance — so the number you get is specific to your building.
          </div>
        </div>
      </div>

      {/* Lead form — lean: business name + address required, plus reach-out */}
      <div style={{ display: 'grid', gap: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <FieldLabel hint="Required">Business name</FieldLabel>
            <TextInput
              value={data.businessName}
              onChange={(v) => setData({ ...data, businessName: v })}
              placeholder="e.g. Acme Manufacturing Inc."
            />
          </div>
          <div>
            <FieldLabel>Contact name</FieldLabel>
            <TextInput
              value={data.contactName}
              onChange={(v) => setData({ ...data, contactName: v })}
              placeholder="Optional"
            />
          </div>
        </div>

        <div>
          <FieldLabel hint="Required · Satellite roof analysis">
            Facility address
          </FieldLabel>
          <TextInput
            value={data.address}
            onChange={(v) => setData({ ...data, address: v })}
            placeholder="Street, city, province, postal code"
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <FieldLabel hint="Required">Work email</FieldLabel>
            <TextInput
              type="email"
              value={data.email}
              onChange={(v) => setData({ ...data, email: v })}
              placeholder="name@company.ca"
            />
          </div>
          <div>
            <FieldLabel hint="Required">Phone</FieldLabel>
            <TextInput
              type="tel"
              value={data.phone}
              onChange={(v) => setData({ ...data, phone: v })}
              placeholder="(000) 000-0000"
            />
          </div>
        </div>
      </div>

      <p style={{
        font: '400 12.5px/18px var(--ff-sans)',
        color: 'var(--gi-graphite)', margin: '20px 0 0', maxWidth: 620
      }}>
        Your information is used only to generate and deliver your site-specific
        estimate. No spam. No third-party sharing.
      </p>

      {error && (
        <div style={{
          marginTop: 18, padding: '12px 14px',
          background: 'rgba(194,138,44,0.08)',
          border: '1px solid rgba(194,138,44,0.25)',
          color: '#8E6014',
          font: '400 13.5px/20px var(--ff-sans)',
          borderRadius: 2
        }}>{error}</div>
      )}

      <NavRow onBack={onBack} onNext={onSubmit} nextLabel="Unlock full estimate" />
    </div>
  );
};

const TeaserCard = ({ label, value, blurred = false, highlight = false }) => (
  <div style={{
    background: highlight ? SC_SAGE_TINT : '#FBFBF9',
    border: `1px solid ${highlight ? SC_SAGE_LINE : 'rgba(15,33,51,0.10)'}`,
    padding: '20px 18px 18px',
    position: 'relative', overflow: 'hidden',
    minHeight: 124
  }}>
    {highlight && (
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: SC_SAGE
      }} />
    )}
    <div style={{
      fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
      textTransform: 'uppercase', fontWeight: 500,
      color: highlight ? SC_SAGE : 'var(--gi-graphite)',
      marginBottom: 14
    }}>{label}</div>

    {blurred ? (
      <div style={{ position: 'relative' }}>
        <div style={{
          font: '500 26px/32px var(--ff-sans)', letterSpacing: '-0.022em',
          color: 'var(--gi-deep-ink)',
          filter: 'blur(8px)',
          userSelect: 'none', pointerEvents: 'none'
        }}>$ ███ ███</div>
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--ff-mono)', fontSize: 10.5,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--gi-slate)'
        }}>
          <i data-lucide="lock" style={{ width: 14, height: 14 }} />
          Unlocks below
        </div>
      </div>
    ) : (
      <div style={{
        font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.022em',
        color: 'var(--gi-deep-ink)'
      }}>{value}</div>
    )}
  </div>
);

// ----- Step 4: Calculating + Results -------------------------

const Calculating = () => {
  const lines = [
    'Pulling provincial irradiance',
    'Sizing system to annual profile',
    'Applying incentive programs'
  ];
  return (
    <div style={{
      padding: '40px 0', display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 24, minHeight: 280, justifyContent: 'center'
    }}>
      <div aria-hidden="true" style={{
        width: 56, height: 56, borderRadius: '50%',
        border: `2px solid ${SC_SAGE_SOFT}`,
        borderTopColor: SC_SAGE,
        animation: 'sc-spin 900ms linear infinite'
      }} />
      <div style={{
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: SC_SAGE, fontWeight: 500
      }}>Analysing your facility data…</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, textAlign: 'center' }}>
        {lines.map((l, i) => (
          <li key={l} style={{
            font: '400 14px/24px var(--ff-sans)', color: 'var(--gi-slate)'
          }}>· {l}</li>
        ))}
      </ul>
    </div>
  );
};

const Results = ({ estimates, data, onReset }) => {
  const province = estimates.province;
  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 500, color: SC_SAGE
      }}>
        <span aria-hidden="true" style={{
          width: 8, height: 8, background: SC_SAGE,
          boxShadow: `0 0 0 4px ${SC_SAGE_SOFT}`
        }} />
        Site-specific estimate · {province.name}
      </div>
      <h2 style={{
        font: '500 32px/38px var(--ff-sans)', letterSpacing: '-0.022em',
        color: 'var(--gi-deep-ink)', margin: '0 0 8px', textWrap: 'balance'
      }}>
        Your estimated savings — full picture.
      </h2>
      <p style={{
        font: '400 14.5px/22px var(--ff-sans)', color: 'var(--gi-slate)',
        margin: '0 0 28px'
      }}>
        Directional ranges for {data.businessName || 'your facility'}. A
        specialist will review these numbers with you within one business day.
      </p>

      {/* 4 result cards */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
        marginBottom: 16
      }}>
        <ResultCard
          label="Annual electricity savings"
          value={fmt$k(estimates.savings.low) + ' – ' + fmt$k(estimates.savings.high)}
          sub="Per year, CAD"
          highlight
        />
        <ResultCard
          label="Estimated system size"
          value={Math.round(estimates.sizeKw.low) + ' – ' + Math.round(estimates.sizeKw.high) + ' kW'}
          sub="Sized to annual consumption profile"
        />
        <ResultCard
          label="Payback period"
          value={estimates.payback.low.toFixed(1) + ' – ' + estimates.payback.high.toFixed(1) + ' yrs'}
          sub="Net of 30% Clean Technology ITC"
        />
        <ResultCard
          label="25-year savings estimate"
          value={fmt$k(estimates.lifetime.low) + ' – ' + fmt$k(estimates.lifetime.high)}
          sub="Lifetime value, CAD"
        />
      </div>

      {/* Incentive band — this is the ONE amber moment on the page */}
      <div style={{
        marginTop: 16,
        background: 'var(--gi-wise-blue)',
        color: '#fff',
        padding: '24px 28px',
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24,
        alignItems: 'center'
      }}>
        <div style={{
          padding: '10px 16px',
          background: SC_AMBER_SOFT,
          color: SC_AMBER,
          fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          whiteSpace: 'nowrap'
        }}>
          Up to {fmt$k(estimates.incentive.high)} in incentives
        </div>
        <div style={{
          font: '400 14.5px/22px var(--ff-sans)',
          color: 'rgba(255,255,255,0.82)'
        }}>
          Applicable in {province.name}: <span style={{ color: '#fff', fontWeight: 500 }}>{province.programs}</span>. CCA Class 43.2 accelerated depreciation also applies.
        </div>
      </div>

      {/* Next step CTA */}
      <div style={{
        marginTop: 28, padding: '24px 28px',
        background: SC_SAGE_TINT,
        border: `1px solid ${SC_SAGE_LINE}`,
        borderRadius: 2,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap'
      }}>
        <div style={{
          font: '500 15px/22px var(--ff-sans)', color: 'var(--gi-deep-ink)',
          maxWidth: 540
        }}>
          A Green Integrations specialist will contact you within 1 business day
          to review this estimate and discuss a site-specific analysis.
        </div>
        <button onClick={onReset} style={{
          background: '#fff',
          color: 'var(--gi-deep-ink)',
          border: '1px solid rgba(15,33,51,0.18)',
          borderRadius: 2,
          padding: '12px 20px',
          fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
          cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 10
        }}>
          Start a new estimate
          <svg width="14" height="14" 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>

      {/* Disclaimer */}
      <p style={{
        font: 'italic 400 12px/18px var(--ff-sans)',
        color: 'var(--gi-graphite)', margin: '22px 0 0', maxWidth: 760
      }}>
        This estimate is directional only. Actual savings depend on your
        consumption profile, roof conditions, shading, utility rate structure,
        and project design. A site-specific analysis is required to produce a
        bankable projection. All figures in CAD.
      </p>
    </div>
  );
};

const ResultCard = ({ label, value, sub, highlight = false }) => (
  <div style={{
    background: '#fff',
    border: `1px solid ${highlight ? SC_SAGE_LINE : 'rgba(15,33,51,0.10)'}`,
    padding: '22px 22px 20px',
    position: 'relative'
  }}>
    {highlight && (
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: SC_SAGE
      }} />
    )}
    <div style={{
      fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
      textTransform: 'uppercase', fontWeight: 500,
      color: highlight ? SC_SAGE : 'var(--gi-graphite)', marginBottom: 14
    }}>{label}</div>
    <div style={{
      font: '500 32px/36px var(--ff-sans)', letterSpacing: '-0.026em',
      color: 'var(--gi-deep-ink)', marginBottom: 8
    }}>{value}</div>
    <div style={{
      font: '400 13px/20px var(--ff-sans)', color: 'var(--gi-slate)'
    }}>{sub}</div>
  </div>
);

// ----- Nav row -------------------------------------------------

const NavRow = ({ onBack, onNext, nextLabel }) => (
  <div className="solar-calc-nav-row" style={{
    marginTop: 32, paddingTop: 24,
    borderTop: '1px solid rgba(15,33,51,0.10)',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    gap: 14, flexWrap: 'wrap'
  }}>
    {onBack ? (
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', cursor: 'pointer',
        fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
        color: 'var(--gi-slate)',
        display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 0'
      }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M13 8H3M7 12l-4-4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        Back
      </button>
    ) : <span />}

    <button onClick={onNext} style={{
      background: 'var(--gi-soft-green)', color: '#fff',
      border: 'none', borderRadius: 2,
      padding: '14px 24px',
      fontFamily: 'var(--ff-sans)', fontSize: 14.5, fontWeight: 500,
      letterSpacing: '-0.003em', cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 12,
      transition: 'background 200ms cubic-bezier(.2,0,0,1)'
    }}
    onMouseOver={(e) => e.currentTarget.style.background = '#2E4A39'}
    onMouseOut={(e) => e.currentTarget.style.background = 'var(--gi-soft-green)'}>
      {nextLabel}
      <svg width="14" height="14" 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>
);

// ----- Top-level: ScCalculator section ------------------------

const ScCalculator = React.forwardRef((props, ref) => {
  const [step, setStep] = React.useState(0);
  const [error, setError] = React.useState('');
  const [calculating, setCalculating] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [data, setData] = React.useState({
    province: '', monthlyBill: '',
    industry: '', size: '', roof: '',
    businessName: '', contactName: '', address: '', email: '', phone: ''
  });

  const estimates = React.useMemo(() => calculateEstimates({
    provinceCode: data.province,
    monthlyBill: Number(data.monthlyBill) || 0
  }), [data.province, data.monthlyBill]);

  const handleStep1 = () => {
    setError('');
    if (!data.province) return setError('Please select your province.');
    if (!data.monthlyBill) return setError('Please enter your average monthly electricity bill.');
    if (Number(data.monthlyBill) < 500) return setError('This calculator is built for commercial facilities — monthly bills typically start at $500. For residential, please consult a residential installer.');
    setStep(1);
  };
  const handleStep2 = () => {
    setError('');
    if (!data.industry) return setError('Please choose an industry.');
    if (!data.size) return setError('Please select a facility size.');
    if (!data.roof) return setError('Please select a roof type.');
    setStep(2);
  };
  const handleSubmit = () => {
    setError('');
    if (!data.businessName.trim()) return setError('Business name is required.');
    if (!data.address.trim()) return setError('Facility address is required — it&rsquo;s how we generate a building-specific estimate.');
    if (!data.email.trim() || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) return setError('Please enter a valid work email.');
    if (!data.phone.trim()) return setError('Please enter a phone number.');
    setCalculating(true);
    setStep(3);
    setTimeout(() => {
      setCalculating(false);
      setDone(true);
      // GI Link Audit (Part 3, Key Event #3): solar_calc_complete.
      // Fires when the simulated calculation finishes and the user lands on
      // the results panel. Also doubles as a soft lead signal — by this point
      // the user has submitted business name, email, and phone in Step 3.
      if (window.GIGtm && typeof window.GIGtm.solarCalcComplete === 'function') {
        window.GIGtm.solarCalcComplete({
          location: 'res-solar-calculator',
          province: data.province || undefined,
          industry: data.industry || undefined,
          facility_size: data.size || undefined,
          roof_type: data.roof || undefined,
          monthly_bill: Number(data.monthlyBill) || undefined,
          estimated_savings: estimates && estimates.annualSavings || undefined,
          estimated_system_kw: estimates && estimates.systemKw || undefined
        });
        // The form on Step 3 collects business email + phone, which the
        // audit doc also classifies as a `generate_lead` moment.
        if (typeof window.GIGtm.generateLead === 'function') {
          window.GIGtm.generateLead({
            form_id: 'solar-calculator',
            form_location: 'res-solar-calculator',
            industry: data.industry || undefined,
            province: data.province || undefined
          });
        }
      }
    }, 2200);
  };
  const handleReset = () => {
    setStep(0); setError(''); setCalculating(false); setDone(false);
    setData({ province: '', monthlyBill: '', industry: '', size: '', roof: '',
              businessName: '', contactName: '', address: '', email: '', phone: '' });
    if (ref && ref.current) ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section data-gi-resp="calculator" ref={ref} id="calculator" data-screen-label="02 Calculator"
      style={{ background: 'var(--gi-paper-cream)', padding: '40px 0 128px' }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1160, margin: '0 auto', padding: '0 48px'
      }}>
        {/* Section running header */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingBottom: 16,
          borderBottom: '1px solid rgba(15,33,51,0.10)',
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--gi-graphite)', marginBottom: 32
        }}>
          <span>Estimate</span>
          <span>Step {Math.min(step + 1, 4)} of 04</span>
        </div>

        {/* Card */}
        <div style={{
          background: '#fff',
          border: '1px solid rgba(15,33,51,0.10)',
          boxShadow: '0 24px 60px -28px rgba(15,33,51,0.20), 0 4px 14px -8px rgba(15,33,51,0.06)',
          padding: '40px 48px 44px'
        }}>
          <ProgressRail step={step} labels={['Basics', 'Facility', 'Unlock', 'Results']} />

          <div style={{ marginTop: 36 }}>
            {step === 0 && <Step1 data={data} setData={setData} onNext={handleStep1} error={error} />}
            {step === 1 && <Step2 data={data} setData={setData} onNext={handleStep2} onBack={() => setStep(0)} error={error} />}
            {step === 2 && estimates && <Step3 data={data} setData={setData} estimates={estimates} onSubmit={handleSubmit} onBack={() => setStep(1)} error={error} />}
            {step === 3 && calculating && <Calculating />}
            {step === 3 && done && estimates && <Results estimates={estimates} data={data} onReset={handleReset} />}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes sc-spin { to { transform: rotate(360deg); } }
      `}</style>
    </section>
  );
});

Object.assign(window, { ScCalculator });