function App() {
  const CATEGORY_ICONS = {
    users: 'fa-users',
    need: 'fa-heart',
    experience: 'fa-shapes',
    ai: 'fa-brain',
  };

  const {
    step,
    setStep,
    selected,
    setSelected,
    notes,
    setNotes,
    categoryOrder,
    uiStrings,
    loading,
    error,
    configMeta,
    activeSlug,
    getCards,
    handleDrawRandom,
    handleToggleCard,
    currentCategory,
    isReview,
    markdown,
    handleCopy,
    buildInstruction,
  } = window.useIdeaFoundryState();

  const deckSubtitle =
    configMeta?.slugLabel || (activeSlug !== 'default' ? activeSlug : '');

  return (
    <div>        
      <header>
        <div className="title-block">
          <h1>{uiStrings.heading || uiStrings.appTitle || ''}</h1>
          {deckSubtitle ? (
            <div className="deck-subtitle">{deckSubtitle}</div>
          ) : null}
        </div>
            
      </header>
      <p></p>
      {loading && <p>{uiStrings.loading || ''}</p>}
      {error && !loading && <p style={{ color: 'red' }}>{error}</p>}
      <div className="stepper-wrapper">
        <div className="stepper">
          {categoryOrder.map((c, idx) => (
            <div
              key={c.key}
              className={
                'step' + (step === idx ? ' active' : '') +
                (step > idx ? ' completed' : '')
              }
              style={{ '--accent-local': c.color }}
              onClick={() => setStep(idx)}
            >
              <div className="step-label">
                <i
                  className={`fa-solid ${
                    c.icon || CATEGORY_ICONS[c.key] || 'fa-layer-group'
                  } step-icon`}
                  aria-hidden="true"
                ></i>
                {c.label}
              </div>
              {(selected[c.key] || []).length > 0 && (
                <div className="step-chips">
                  {(selected[c.key] || []).map((item) => (
                    <span key={item.title} className="step-chip">
                      {item.icon ? (
                        <i
                          className={`fa-solid ${item.icon} selection-icon`}
                          aria-hidden="true"
                        ></i>
                      ) : null}
                      <span className="selection-chip-text">{item.title}</span>
                      <button
                        className="chip-close"
                        aria-label={uiStrings?.clearSelection || 'Deselect'}
                        onClick={(e) => {
                          e.stopPropagation();
                          handleToggleCard(c.key, item);
                        }}
                        type="button"
                      >
                        <i className="fa-solid fa-xmark" aria-hidden="true"></i>
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="stepper-actions actions">
          {step > 0 && (
            <button
              className="btn-secondary"
              onClick={() => setStep(step - 1)}
              type="button"
            >
              <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>{' '}
              {uiStrings.back || ''}
            </button>
          )}
          {!isReview && (
            <button
              className="btn-primary"
              onClick={() => setStep(step + 1)}
              type="button"
            >
              <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>{' '}
              {uiStrings.next || ''}
            </button>
          )}
          <button
            className="btn-secondary"
            onClick={() => setStep(categoryOrder.length)}
            type="button"
          >
            <i className="fa-solid fa-clipboard-list" aria-hidden="true"></i>{' '}
            {uiStrings.stepperReview || ''}
          </button>
        </div>
      </div>
      {!isReview ? (
        <div className="wizard">
          <h2>{currentCategory?.label || ''}</h2>
          {buildInstruction()}
          <div className="actions">
            <button
              className="btn-category"
              style={{ '--accent-local': currentCategory?.color }}
              onClick={() => handleDrawRandom(currentCategory?.key)}
            >
              {uiStrings.drawRandom || ''}
            </button>
            <button
              className="btn-category"
              style={{ '--accent-local': currentCategory?.color }}
              onClick={() => {
                setSelected((prev) => {
                  const clone = { ...prev };
                  if (currentCategory?.key) {
                    clone[currentCategory.key] = [];
                  }
                  return clone;
                });
              }}
            >
              {uiStrings.clearSelection || ''}
            </button>
          </div>
          <div className="card-grid">
            {!loading &&
              !error &&
              currentCategory &&
              getCards(currentCategory.key).map((card) => {
                const selectedList = selected[currentCategory.key] || [];
                const isSelected = selectedList.some(
                  (sel) => sel.title === card.title
                );
                return (
                  <div
                    key={card.title}
                    className={
                      `card-item theme-${currentCategory.key}${
                        isSelected ? ' selected' : ''
                      }`
                    }
                    style={{
                      '--accent-local': currentCategory.color,
                    }}
                    onClick={() => handleToggleCard(currentCategory.key, card)}
                  >
                    <h3>
                      <i
                        className={`fa-solid ${
                          card.icon || 'fa-layer-group'
                        } icon`}
                        aria-hidden="true"
                      ></i>{' '}
                      {card.title}
                    </h3>
                    <p>{card.description}</p>
                  </div>
                );
              })}
          </div>
          <div className="actions">
            {step > 0 && (
              <button
                className="btn-secondary"
                onClick={() => setStep(step - 1)}
              >
                {uiStrings.back || ''}
              </button>
            )}
            <button className="btn-primary" onClick={() => setStep(step + 1)}>
              {uiStrings.next || ''}
            </button>
          </div>
        </div>
      ) : (
        <div className="wizard">
          <h2>{uiStrings.reviewHeading || ''}</h2>
          {categoryOrder.map(({ key, label }) => (
            <div key={key} style={{ marginBottom: '1rem' }}>
              <h3>{label}</h3>
              {selected[key].length === 0 ? (
                <p style={{ color: '#999' }}>{uiStrings.noSelections || ''}</p>
              ) : (
                <ul>
                  {selected[key].map((item) => (
                    <li key={item.title}>
                      <strong>{item.title}</strong>
                      {item.description ? ` — ${item.description}` : ''}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
          <div style={{ marginTop: '1rem' }}>
            <h3>{uiStrings.notesLabel || ''}</h3>
            <textarea
              className="note-area"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder={uiStrings.notesPlaceholder || ''}
            ></textarea>
          </div>
          <div style={{ marginTop: '1rem' }}>
            <h3>{uiStrings.generatedPromptLabel || ''}</h3>
            <pre className="markdown-output">{markdown}</pre>
            <button className="btn-primary" onClick={handleCopy}>
              {uiStrings.copyButton || ''}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));