// SuccessScreen — shown after successful intake submission.

function SuccessScreen({ data, priorityTier }) {
  const { React } = window;

  const DEPLOY_LABELS = {
    managed_cloud:      'managed cloud',
    self_hosted:        'self-hosted',
    air_gapped:         'air-gapped',
    decoupled_platform: 'decoupled platform',
    byoc:               'bring-your-own-cloud',
    on_prem:            'on-premises',
  };

  const TIMELINE_LABELS = {
    asap:                 'ASAP',
    within_30_days:       'within 30 days',
    next_quarter:         'next quarter',
    exploring_no_timeline: 'exploring — no timeline',
  };

  const rows = [
    { key: 'company', val: data.company || '—' },
    { key: 'deploy mode', val: DEPLOY_LABELS[data.deployMode] || data.deployMode || '—' },
    { key: 'environment', val: data.environment || '—' },
    { key: 'target types', val: (data.targetTypes || []).join(', ') || '—' },
    { key: 'timeline', val: TIMELINE_LABELS[data.timeline] || data.timeline || '—' },
  ];

  if (priorityTier) {
    rows.push({ key: 'priority', val: priorityTier.toUpperCase() });
  }

  return (
    <div className="intake-success">
      <div className="success-icon">✓</div>
      <h2 className="success-title">you're in the queue</h2>
      <p className="success-sub">
        someone from the sekura team will be in touch within 1 business day.<br />
        check your inbox at <strong>{data.workEmail}</strong>.
      </p>

      <div className="success-summary">
        {rows.map(r => (
          <div key={r.key} className="summary-row">
            <span className="summary-key">{r.key}</span>
            <span className="summary-val">{r.val}</span>
          </div>
        ))}
      </div>

      <a href="#product" className="success-back">← back to product</a>
    </div>
  );
}

window.SuccessScreen = SuccessScreen;