/* stage2/steps.jsx — the 8 underwriting wizard steps.
   Globals: React, Portal, Field, Icon, TrustBanner, PlaidLink, FileUpload,
   DocuSignEmbedded. No import/export — one shared global scope.
   Each step: function StepX({ data, setField, errors, touched, onBlur,
     owners, setOwners, locations, setLocations, references, setReferences,
     applicationId, application }). Exposes: STAGE2_STEPS. */
/* eslint-disable */
const { useState: useS2 } = React;

/* ---------- shared option sets ---------- */
const S2_REVENUE_RANGES = [
  { v: "<$100k", l: "Under $100k" },
  { v: "$100k–250k", l: "$100k – $250k" },
  { v: "$250k–500k", l: "$250k – $500k" },
  { v: "$500k–1M", l: "$500k – $1M" },
  { v: "$1M–2.5M", l: "$1M – $2.5M" },
  { v: "$2.5M–5M", l: "$2.5M – $5M" },
  { v: "$5M+", l: "$5M+" },
];
const S2_GROSS_MARGIN = [
  { v: "<20%", l: "Under 20%" },
  { v: "20–35%", l: "20 – 35%" },
  { v: "35–50%", l: "35 – 50%" },
  { v: "50–65%", l: "50 – 65%" },
  { v: "65%+", l: "65%+" },
];
const S2_CASH_RESERVES = [
  { v: "<$25k", l: "Under $25k" },
  { v: "$25k–50k", l: "$25k – $50k" },
  { v: "$50k–100k", l: "$50k – $100k" },
  { v: "$100k–250k", l: "$100k – $250k" },
  { v: "$250k+", l: "$250k+" },
];
const S2_RENT_BUDGET = [
  { v: "<$3k", l: "Under $3k / mo" },
  { v: "$3k–5k", l: "$3k – $5k / mo" },
  { v: "$5k–8k", l: "$5k – $8k / mo" },
  { v: "$8k–12k", l: "$8k – $12k / mo" },
  { v: "$12k+", l: "$12k+ / mo" },
];
const S2_BUILDOUT_COST = [
  { v: "<$50k", l: "Under $50k" },
  { v: "$50k–150k", l: "$50k – $150k" },
  { v: "$150k–350k", l: "$150k – $350k" },
  { v: "$350k+", l: "$350k+" },
];
const S2_BUILDOUT_FINANCE = [
  { v: "Cash on hand", l: "Cash on hand" },
  { v: "SBA loan", l: "SBA loan" },
  { v: "Bank loan", l: "Bank loan" },
  { v: "Investor capital", l: "Investor capital" },
  { v: "Landlord TI", l: "Landlord TI" },
  { v: "Mix", l: "A mix" },
];
const S2_ENTITY_STRUCTURE = [
  { v: "LLC", l: "LLC" },
  { v: "S-Corporation", l: "S-Corporation" },
  { v: "C-Corporation", l: "C-Corporation" },
  { v: "Partnership", l: "Partnership" },
  { v: "Sole Proprietorship", l: "Sole Proprietorship" },
];
const S2_FISCAL_YEAR_END = [
  { v: "December", l: "December" },
  { v: "June", l: "June" },
  { v: "Other", l: "Other" },
];
const S2_LEASE_TYPE = [
  { v: "Owned", l: "Owned" },
  { v: "Leased-NNN", l: "Leased — NNN" },
  { v: "Leased-Gross", l: "Leased — Gross" },
  { v: "Other", l: "Other" },
];
const S2_US_STATES = [
  "AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA","HI","ID","IL","IN","IA",
  "KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ",
  "NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT",
  "VA","WA","WV","WI","WY","DC",
].map(function (s) { return { v: s, l: s }; });

/* ---------- small helpers ---------- */
function s2EinFormat(raw) {
  var d = (raw || "").replace(/\D/g, "").slice(0, 9);
  if (d.length <= 2) return d;
  return d.slice(0, 2) + "-" + d.slice(2);
}

/* small first-name helper for the welcome line */
function s2FirstName(application) {
  var a = application || {};
  var src = a.applicant_full_name || a.applicant_name || a.full_name || "";
  if (!src && a.entity_legal_name) src = "";
  var first = (src || "").trim().split(/\s+/)[0];
  return first || "there";
}

/* =========================================================
   STEP A — WELCOME
   ========================================================= */
function StepWelcome({ application }) {
  const checklist = Portal.c("stage2.welcomeChecklist", []);
  const title = Portal.tmpl(
    Portal.c("stage2.welcomeTitle", "Welcome, {firstName}."),
    { firstName: s2FirstName(application) }
  );
  return (
    <div className="step-shell">
      <div className="eyebrow brick">The financial picture</div>
      <h1 className="step-title h-display">{title}</h1>
      <p className="step-intro">
        {Portal.c("stage2.welcomeIntro", "Here's what we'll cover next:")}
      </p>
      <ul className="step-checklist">
        {(Array.isArray(checklist) ? checklist : []).map(function (item, i) {
          return (
            <li key={i}>
              <Icon name="check" size={16} /> {item}
            </li>
          );
        })}
      </ul>
      <p className="step-intro">{Portal.c("stage2.welcomeTime", "")}</p>
      <TrustBanner />
    </div>
  );
}

/* =========================================================
   STEP B — ENTITY / BUSINESS
   ========================================================= */
function StepEntity({ data, setField, errors, touched, onBlur }) {
  return (
    <div className="step-shell">
      <div className="eyebrow brick">Your business</div>
      <h1 className="step-title h-display">Tell us about the entity.</h1>
      <p className="step-intro">
        The legal entity that would sign the lease — exactly as it appears on
        your formation documents.
      </p>

      <Field name="entity_legal_name" label="Legal entity name" required
        value={data.entity_legal_name} error={errors.entity_legal_name}
        touched={touched.entity_legal_name} placeholder="As it appears on your formation docs"
        onChange={setField} onBlur={onBlur} />

      <Field name="entity_dba" label="DBA / trade name"
        value={data.entity_dba} error={errors.entity_dba} touched={touched.entity_dba}
        placeholder="If you operate under a different name"
        onChange={setField} onBlur={onBlur} />

      <div className="field-row">
        <Field name="entity_structure" label="Entity structure" type="select" required
          options={S2_ENTITY_STRUCTURE}
          value={data.entity_structure} error={errors.entity_structure}
          touched={touched.entity_structure} onChange={setField} onBlur={onBlur} />
        <Field name="entity_state" label="State of formation" type="select" required
          options={S2_US_STATES}
          value={data.entity_state} error={errors.entity_state}
          touched={touched.entity_state} onChange={setField} onBlur={onBlur} />
      </div>
    </div>
  );
}

/* =========================================================
   STEP C — OWNERS / GUARANTORS (repeating)
   ========================================================= */
function s2BlankOwner() {
  return { full_name: "", title: "", ownership_pct: "", email: "", phone: "", dob: "", personal_guaranty: true };
}

function StepOwners({ owners, setOwners }) {
  const list = (owners && owners.length) ? owners : [s2BlankOwner()];

  function update(i, name, val) {
    setOwners(list.map(function (o, idx) {
      return idx === i ? Object.assign({}, o, { [name]: val }) : o;
    }));
  }
  function add() {
    window.portalAnalytics && window.portalAnalytics.log("repeat_add", { step: "C", field: "owner" });
    setOwners(list.concat([s2BlankOwner()]));
  }
  function remove(i) {
    setOwners(list.filter(function (_, idx) { return idx !== i; }));
  }

  return (
    <div className="step-shell">
      <div className="eyebrow brick">Ownership</div>
      <h1 className="step-title h-display">Who owns the business?</h1>
      <p className="step-intro">Tell us about the principals behind the lease.</p>
      <div className="why-note">
        <Icon name="shield" size={15} /> Add a row for everyone who owns 20% or more.
      </div>

      {list.map(function (o, i) {
        return (
          <div className="repeat-block" key={i}>
            <div className="rb-head">
              <div className="rb-title">Owner {i + 1}</div>
              {list.length > 1 && (
                <button type="button" className="rb-remove" onClick={function () { remove(i); }}>
                  <Icon name="x" size={14} /> Remove
                </button>
              )}
            </div>

            <Field name={"owner_full_name_" + i} label="Full name" required
              value={o.full_name} onChange={function (n, v) { update(i, "full_name", v); }} />

            <div className="field-row">
              <Field name={"owner_title_" + i} label="Title"
                value={o.title} onChange={function (n, v) { update(i, "title", v); }} />
              <Field name={"owner_pct_" + i} label="Ownership %" type="text" inputmode="numeric" required
                value={o.ownership_pct} onChange={function (n, v) { update(i, "ownership_pct", v); }} />
            </div>

            <div className="field-row">
              <Field name={"owner_email_" + i} label="Email" type="email" required
                value={o.email} onChange={function (n, v) { update(i, "email", v); }} />
              <Field name={"owner_phone_" + i} label="Phone" type="tel" inputmode="tel" required
                value={o.phone}
                onChange={function (n, v) { update(i, "phone", Portal.formatPhone(v)); }} />
            </div>

            <Field name={"owner_dob_" + i} label="Date of birth" type="text" required
              placeholder="MM/DD/YYYY"
              help="Used only for a future credit check — never shown publicly"
              value={o.dob} onChange={function (n, v) { update(i, "dob", v); }} />

            <Field name={"owner_pg_" + i} type="checkbox"
              label="Will personally guarantee the lease"
              value={o.personal_guaranty}
              onChange={function (n, v) { update(i, "personal_guaranty", v); }} />
          </div>
        );
      })}

      <button type="button" className="repeat-add" onClick={add}>
        <Icon name="plus" size={15} /> Add owner
      </button>
    </div>
  );
}

/* =========================================================
   STEP D — EXISTING LOCATIONS (optional, repeating)
   ========================================================= */
function s2BlankLocation() {
  return { address: "", sf: "", year_opened: "", current_rent: "", lease_type: "", lease_expiration: "", annual_sales_range: "" };
}

function StepLocations({ locations, setLocations }) {
  const list = locations || [];

  function update(i, name, val) {
    setLocations(list.map(function (o, idx) {
      return idx === i ? Object.assign({}, o, { [name]: val }) : o;
    }));
  }
  function add() {
    window.portalAnalytics && window.portalAnalytics.log("repeat_add", { step: "D", field: "location" });
    setLocations(list.concat([s2BlankLocation()]));
  }
  function remove(i) {
    setLocations(list.filter(function (_, idx) { return idx !== i; }));
  }

  return (
    <div className="step-shell">
      <div className="eyebrow brick">Your locations</div>
      <h1 className="step-title h-display">Where else do you operate?</h1>
      <p className="step-intro">A quick picture of your existing footprint.</p>
      <div className="why-note">
        <Icon name="shield" size={15} /> Skip this if 505 Rose would be your first location.
      </div>

      {list.map(function (o, i) {
        return (
          <div className="repeat-block" key={i}>
            <div className="rb-head">
              <div className="rb-title">Location {i + 1}</div>
              <button type="button" className="rb-remove" onClick={function () { remove(i); }}>
                <Icon name="x" size={14} /> Remove
              </button>
            </div>

            <Field name={"loc_address_" + i} label="Address"
              value={o.address} onChange={function (n, v) { update(i, "address", v); }} />

            <div className="field-row">
              <Field name={"loc_sf_" + i} label="Square footage" type="text" inputmode="numeric"
                value={o.sf} onChange={function (n, v) { update(i, "sf", v); }} />
              <Field name={"loc_year_" + i} label="Year opened" type="text" inputmode="numeric"
                maxLength={4} placeholder="YYYY"
                value={o.year_opened} onChange={function (n, v) { update(i, "year_opened", v); }} />
            </div>

            <div className="field-row">
              <Field name={"loc_rent_" + i} label="Current rent"
                value={o.current_rent} onChange={function (n, v) { update(i, "current_rent", v); }} />
              <Field name={"loc_lease_type_" + i} label="Lease type" type="select"
                options={S2_LEASE_TYPE}
                value={o.lease_type} onChange={function (n, v) { update(i, "lease_type", v); }} />
            </div>

            <div className="field-row">
              <Field name={"loc_exp_" + i} label="Lease expiration" type="text"
                placeholder="MM/YYYY"
                value={o.lease_expiration} onChange={function (n, v) { update(i, "lease_expiration", v); }} />
              <Field name={"loc_sales_" + i} label="Annual sales" type="select"
                options={S2_REVENUE_RANGES}
                value={o.annual_sales_range} onChange={function (n, v) { update(i, "annual_sales_range", v); }} />
            </div>
          </div>
        );
      })}

      <button type="button" className="repeat-add" onClick={add}>
        <Icon name="plus" size={15} /> Add a location
      </button>
    </div>
  );
}

/* =========================================================
   STEP E — REFERENCES (3 fixed blocks)
   ========================================================= */
const S2_REF_BLOCKS = [
  { kind: "landlord", title: "Current Landlord" },
  { kind: "vendor", title: "Primary Vendor" },
  { kind: "bank", title: "Banking Relationship" },
];

function StepReferences({ references, setReferences }) {
  // Build a stable 3-row view keyed by ref_kind.
  function rowFor(kind) {
    var found = (references || []).find(function (r) { return r.ref_kind === kind; });
    return found || { ref_kind: kind, company: "", contact_name: "", phone: "", email: "", notes: "" };
  }

  function update(kind, name, val) {
    var others = (references || []).filter(function (r) { return r.ref_kind !== kind; });
    var row = Object.assign({}, rowFor(kind), { [name]: val, ref_kind: kind });
    // Preserve the fixed landlord/vendor/bank order.
    var next = S2_REF_BLOCKS.map(function (b) {
      return b.kind === kind ? row : (others.find(function (r) { return r.ref_kind === b.kind; }) || { ref_kind: b.kind, company: "", contact_name: "", phone: "", email: "", notes: "" });
    });
    setReferences(next);
  }

  return (
    <div className="step-shell">
      <div className="eyebrow brick">References</div>
      <h1 className="step-title h-display">Three people we can call.</h1>
      <p className="step-intro">Relationships that vouch for how you do business.</p>
      <div className="why-note">
        <Icon name="shield" size={15} /> We may contact your current landlord. We won't
        contact your vendor or bank without your explicit OK.
      </div>

      {S2_REF_BLOCKS.map(function (b) {
        var r = rowFor(b.kind);
        return (
          <div className="repeat-block" key={b.kind}>
            <div className="rb-head">
              <div className="rb-title">{b.title}</div>
            </div>

            <div className="field-row">
              <Field name={"ref_company_" + b.kind} label="Company"
                value={r.company} onChange={function (n, v) { update(b.kind, "company", v); }} />
              <Field name={"ref_contact_" + b.kind} label="Contact name"
                value={r.contact_name} onChange={function (n, v) { update(b.kind, "contact_name", v); }} />
            </div>

            <div className="field-row">
              <Field name={"ref_phone_" + b.kind} label="Phone" type="tel" inputmode="tel"
                value={r.phone}
                onChange={function (n, v) { update(b.kind, "phone", Portal.formatPhone(v)); }} />
              <Field name={"ref_email_" + b.kind} label="Email" type="email"
                value={r.email} onChange={function (n, v) { update(b.kind, "email", v); }} />
            </div>

            <Field name={"ref_notes_" + b.kind} label="Notes" type="textarea"
              value={r.notes} onChange={function (n, v) { update(b.kind, "notes", v); }} />
          </div>
        );
      })}
    </div>
  );
}

/* =========================================================
   STEP F — FINANCIALS
   ========================================================= */
function StepFinancials({ data, setField, errors, touched, onBlur }) {
  return (
    <div className="step-shell">
      <div className="eyebrow brick">The numbers</div>
      <h1 className="step-title h-display">A first-pass financial picture.</h1>
      <div className="why-note">
        <Icon name="shield" size={15} /> Ranges are fine — this is a first-pass picture,
        not your tax return.
      </div>

      <div className="field-row">
        <Field name="annual_revenue_range" label="Annual revenue" type="select" required
          options={S2_REVENUE_RANGES}
          value={data.annual_revenue_range} error={errors.annual_revenue_range}
          touched={touched.annual_revenue_range} onChange={setField} onBlur={onBlur} />
        <Field name="annual_revenue_proj_range" label="Projected this year" type="select" required
          options={S2_REVENUE_RANGES}
          value={data.annual_revenue_proj_range} error={errors.annual_revenue_proj_range}
          touched={touched.annual_revenue_proj_range} onChange={setField} onBlur={onBlur} />
      </div>

      <div className="field-row">
        <Field name="gross_margin_range" label="Gross margin" type="select" required
          options={S2_GROSS_MARGIN}
          value={data.gross_margin_range} error={errors.gross_margin_range}
          touched={touched.gross_margin_range} onChange={setField} onBlur={onBlur} />
        <Field name="cash_reserves_range" label="Cash reserves" type="select" required
          options={S2_CASH_RESERVES}
          value={data.cash_reserves_range} error={errors.cash_reserves_range}
          touched={touched.cash_reserves_range} onChange={setField} onBlur={onBlur} />
      </div>

      <div className="field-row">
        <Field name="monthly_rent_budget_range" label="Monthly rent budget" type="select" required
          options={S2_RENT_BUDGET}
          value={data.monthly_rent_budget_range} error={errors.monthly_rent_budget_range}
          touched={touched.monthly_rent_budget_range} onChange={setField} onBlur={onBlur} />
        <Field name="buildout_cost_range" label="Expected build-out cost" type="select" required
          options={S2_BUILDOUT_COST}
          value={data.buildout_cost_range} error={errors.buildout_cost_range}
          touched={touched.buildout_cost_range} onChange={setField} onBlur={onBlur} />
      </div>

      <Field name="buildout_finance_method" label="How would you finance the build-out?"
        type="select" required options={S2_BUILDOUT_FINANCE}
        value={data.buildout_finance_method} error={errors.buildout_finance_method}
        touched={touched.buildout_finance_method} onChange={setField} onBlur={onBlur} />

      <Field name="hours_of_operation" label="Hours of operation" type="textarea"
        value={data.hours_of_operation} error={errors.hours_of_operation}
        touched={touched.hours_of_operation}
        placeholder="e.g. Tue–Sun, 11a–10p"
        onChange={setField} onBlur={onBlur} />

      <Field name="business_plan_summary" label="The concept" type="textarea"
        value={data.business_plan_summary} error={errors.business_plan_summary}
        touched={touched.business_plan_summary}
        help="2–3 sentences on the concept"
        onChange={setField} onBlur={onBlur} />
    </div>
  );
}

/* =========================================================
   STEP G — DOCUMENTS
   ========================================================= */
const S2_DOC_ROWS = [
  { type: "personal_tax", label: "Personal tax returns", why: "2 most recent personal tax returns" },
  { type: "business_tax", label: "Business tax returns", why: "2 most recent business tax returns" },
  { type: "pnl", label: "Profit & loss", why: "Current P&L — YTD + prior year" },
  { type: "balance_sheet", label: "Balance sheet", why: "Current balance sheet" },
  { type: "id", label: "Government photo ID", why: "Government photo ID — each guarantor", accept: "image/*", capture: "environment" },
  { type: "formation", label: "Formation documents", why: "Entity formation docs" },
  { type: "business_plan", label: "Business plan", why: "Business plan — optional" },
];

function StepDocuments({ applicationId, application }) {
  const [docs, setDocs] = useS2([]);

  function onUploaded(doc) {
    setDocs(function (d) { return d.concat([doc]); });
    window.portalAnalytics && window.portalAnalytics.log("doc_uploaded", {
      step: "G", application_id: applicationId, metadata: { type: doc && doc.document_type },
    });
  }
  function onLinked(meta) {
    window.portalAnalytics && window.portalAnalytics.log("plaid_linked", {
      step: "G", application_id: applicationId, metadata: meta || {},
    });
  }

  return (
    <div className="step-shell">
      <div className="eyebrow brick">Documents</div>
      <h1 className="step-title h-display">The supporting paperwork.</h1>
      <p className="step-intro">
        The fastest path is linking your bank securely with Plaid — no PDFs to dig up.
        You can also upload files directly, or send these later.
      </p>

      <div className="repeat-block">
        <div className="rb-head">
          <div className="rb-title"><Icon name="bank" size={16} /> Link your bank with Plaid</div>
        </div>
        <p className="step-intro" style={{ marginTop: 4 }}>
          Read-only access to your statements. We never see your login.
        </p>
        {typeof PlaidLink !== "undefined"
          ? <PlaidLink applicationId={applicationId} onLinked={onLinked} />
          : <div className="why-note">Bank linking is being set up.</div>}
      </div>

      <div className="or-divider"><span>or upload documents</span></div>

      {S2_DOC_ROWS.map(function (row) {
        return typeof FileUpload !== "undefined" ? (
          <FileUpload key={row.type}
            applicationId={applicationId}
            documentType={row.type}
            label={row.label}
            why={row.why}
            accept={row.accept}
            capture={row.capture}
            onUploaded={onUploaded} />
        ) : (
          <div className="why-note" key={row.type}>
            <Icon name="file" size={14} /> {row.label} — {row.why}
          </div>
        );
      })}

      <div className="why-note">
        <Icon name="clock" size={15} /> No need to have everything ready — you can also
        send these later.
      </div>
    </div>
  );
}

/* =========================================================
   STEP H — CERTIFY + SIGN
   ========================================================= */
const S2_DISCLOSURES = [
  { yKey: "disclosure_bankruptcy_y", xKey: "disclosure_bankruptcy_explain", q: "Has the entity or any owner filed for bankruptcy in the last 7 years?" },
  { yKey: "disclosure_foreclosure_y", xKey: "disclosure_foreclosure_explain", q: "Has the entity or any owner been through a foreclosure?" },
  { yKey: "disclosure_eviction_y", xKey: "disclosure_eviction_explain", q: "Has the entity or any owner been evicted from a commercial space?" },
  { yKey: "disclosure_assignment_y", xKey: "disclosure_assignment_explain", q: "Has the entity made an assignment for the benefit of creditors?" },
];

function StepCertify({ data, setField, errors, touched, onBlur, applicationId, application, onSigned }) {
  function setYesNo(key, val) {
    setField(key, val);
    window.portalAnalytics && window.portalAnalytics.log("disclosure_set", {
      step: "H", field: key, metadata: { value: val },
    });
  }

  return (
    <div className="step-shell">
      <div className="eyebrow brick">Certify &amp; sign</div>
      <h1 className="step-title h-display">A few last questions, then your signature.</h1>
      <p className="step-intro">
        A yes here doesn't disqualify you — it just lets us understand the full picture.
      </p>

      {S2_DISCLOSURES.map(function (d) {
        var yes = data[d.yKey] === true;
        var no = data[d.yKey] === false;
        return (
          <div className="disc-row" key={d.yKey}>
            <div className="dq">{d.q}</div>
            <div className="disc-toggle">
              <button type="button" className={Portal.cx("btn sm", yes && "on-yes")}
                onClick={function () { setYesNo(d.yKey, true); }}>Yes</button>
              <button type="button" className={Portal.cx("btn sm", no && "on-no")}
                onClick={function () { setYesNo(d.yKey, false); }}>No</button>
            </div>
            {yes && (
              <Field name={d.xKey} label="Please explain" type="textarea"
                value={data[d.xKey]} error={errors[d.xKey]} touched={touched[d.xKey]}
                onChange={setField} onBlur={onBlur} />
            )}
          </div>
        );
      })}

      <Field name="certify_accuracy" type="checkbox"
        label="I certify the information is accurate and authorize verification."
        value={data.certify_accuracy} onChange={setField} />

      <div className="repeat-block">
        <div className="rb-head">
          <div className="rb-title"><Icon name="pen" size={16} /> Sign your application</div>
        </div>
        {typeof DocuSignEmbedded !== "undefined"
          ? <DocuSignEmbedded applicationId={applicationId} application={application} onSigned={onSigned} />
          : <div className="why-note">Signing is being set up. You can still submit and we'll send the signature request by email.</div>}
      </div>
    </div>
  );
}

/* =========================================================
   ORDERED STEP REGISTRY (drives the wizard + validation)
   `fields` = REQUIRED applications-row field names per step.
   Child-array steps (C/D/E) validate internally; C requires ≥1 owner.
   ========================================================= */
const STAGE2_STEPS = [
  { key: "A", label: "Welcome", Comp: StepWelcome, fields: [] },
  { key: "B", label: "Business", Comp: StepEntity, fields: ["entity_legal_name", "entity_structure", "entity_state"] },
  { key: "C", label: "Ownership", Comp: StepOwners, fields: [] },
  { key: "D", label: "Locations", Comp: StepLocations, fields: [] },
  { key: "E", label: "References", Comp: StepReferences, fields: [] },
  { key: "F", label: "Financials", Comp: StepFinancials, fields: ["annual_revenue_range", "annual_revenue_proj_range", "gross_margin_range", "cash_reserves_range", "monthly_rent_budget_range", "buildout_cost_range", "buildout_finance_method"] },
  { key: "G", label: "Documents", Comp: StepDocuments, fields: [] },
  { key: "H", label: "Certify", Comp: StepCertify, fields: [] },
];