// Step 5 — Improve Your Trip (secondary screen, reached from the Assessment CTA)

function EducationalResources() {
  return (
    <div className="usa-card">
      <div className="usa-card__header">
        <h3 className="usa-card__header-title">Learn more</h3>
      </div>
      <div className="usa-card__body">
        <div className="rs-edu-grid">
          <div className="rs-edu-tile">
            <p className="rs-edu-tile__eyebrow">Cold water</p>
            <p className="rs-edu-tile__title">Safety facts</p>
            <ul className="rs-edu-tile__list">
              <li>Cold shock within seconds</li>
              <li>1 in 5 deaths in first minute</li>
              <li>Muscle loss after 10–30 min</li>
              <li>Impairs breathing and judgment</li>
            </ul>
          </div>
          <div className="rs-edu-tile">
            <p className="rs-edu-tile__eyebrow">River safety</p>
            <p className="rs-edu-tile__title">General tips</p>
            <ul className="rs-edu-tile__list">
              <li>Always tell someone your plans</li>
              <li>Check weather before you go</li>
              <li>Never swim alone</li>
              <li>Know your exit points</li>
            </ul>
          </div>
        </div>
        <p style={{ fontSize: 'var(--fs-2)', color: 'var(--fg3)', marginTop: 'var(--sp-2)', marginBottom: 0 }}>
          Resource links to ACA, USGS, and Red Cross will be available in a future update.
        </p>
      </div>
    </div>);

}

function StepImprove({ data, onBack }) {
  const recs = getRecommendations(data);
  const activityRecs = data.activity ? getActivityRecs(data.activity) : [];
  const activityLabel = data.activity ? getActivityLabel(data.activity) : '';

  return (
    <div>
      <button type="button" className="rs-back-link" onClick={onBack} aria-label="Back to assessment">
        ← Back to assessment
      </button>
      <h2 className="rs-step-title">Improve your trip</h2>
      <p className="rs-step-desc">Detailed recommendations and resources to help you prepare for a safer visit.</p>

      {recs.length > 0 &&
      <div className="usa-card">
          <div className="usa-card__header">
            <h3 className="usa-card__header-title">Recommendations</h3>
          </div>
          <div className="usa-card__body">
            {recs.map((rec, i) => <div key={i} className="rs-rec-item">{rec}</div>)}
          </div>
        </div>
      }

      {activityRecs.length > 0 &&
      <div className="usa-card">
          <div className="usa-card__header">
            <h3 className="usa-card__header-title">{activityLabel} guidance</h3>
          </div>
          <div className="usa-card__body">
            <p className="usa-hint" style={{ marginBottom: 'var(--sp-2)' }}>
              Activity-specific recommendations for your planned river visit.
            </p>
            {activityRecs.map((rec, i) => <ActivityRecItem key={i} rec={rec} />)}
            <p style={{ fontSize: 'var(--fs-2)', color: 'var(--fg3)', marginTop: 'var(--sp-1)', marginBottom: 0 }}>
              Items marked <strong style={{ color: 'var(--theme-color-error)' }}>!</strong> are critical safety requirements for this activity.
            </p>
          </div>
        </div>
      }

      <EducationalResources />
    </div>);

}

Object.assign(window, { StepImprove });