// Shared components and helpers
const { useState, useEffect, useMemo, useRef } = React;

function Logo() {
  return (
    <a className="logo" href="https://www.pointmaxing.com.au" aria-label="Point Maxing — back to homepage">
      <img src="assets/point-maxing-logo-cropped.png" alt="Point Maxing" />
    </a>
  );
}

function Progress({ step }) {
  const steps = ['01 · Profile', '02 · History', '03 · Strategy'];
  const pct = (step / 3) * 100;
  return (
    <div className="progress">
      <div className="progress-steps">
        {steps.map((s, i) => (
          <div
            key={s}
            className={
              'step ' +
              (i + 1 === step ? 'active' : i + 1 < step ? 'done' : '')
            }
          >
            {s}
          </div>
        ))}
      </div>
      <div className="progress-track">
        <div className="progress-fill" style={{ width: pct + '%' }} />
      </div>
    </div>
  );
}

function RadioCards({ value, onChange, options }) {
  return (
    <div className="radio-grid">
      {options.map(opt => (
        <button
          key={opt.id}
          type="button"
          className={'radio-card ' + (value === opt.id ? 'selected' : '')}
          onClick={() => onChange(opt.id)}
        >
          <div className="rc-check" />
          <div className="rc-title">{opt.label}</div>
          {opt.sub && <div className="rc-sub">{opt.sub}</div>}
        </button>
      ))}
    </div>
  );
}

function IssuerBadge({ issuer, name }) {
  const tone = window.ISSUER_TONES[issuer] || { bg: '#333', fg: '#fff' };
  // Use initials of name (up to 3 letters) instead of issuer brand name to avoid copying logos
  const initials = name
    .replace(/\(.*?\)/g, '')
    .split(' ')
    .filter(w => w.length > 1)
    .slice(0, 2)
    .map(w => w[0])
    .join('');
  return (
    <div className="rc-issuer" style={{ background: tone.bg, color: tone.fg }}>
      {initials}
    </div>
  );
}

function IssuerSwatch({ issuer }) {
  const tone = window.ISSUER_TONES[issuer] || { bg: '#333' };
  return (
    <div
      className="swatch"
      style={{
        background: `linear-gradient(135deg, ${tone.bg}, ${tone.dot})`,
      }}
    />
  );
}

function DisclaimerBar() {
  return (
    <div className="disclaimer-bar" role="note">
      <strong>Not financial advice.</strong> Point Maxing provides general information only and does not
      take account of your personal circumstances. Always check current card terms and consider seeking
      licensed financial advice before applying.
    </div>
  );
}

Object.assign(window, { Logo, Progress, RadioCards, IssuerBadge, IssuerSwatch, DisclaimerBar });