/* global React, t */

function SupportPage({ setPage }) {
  const followerTiers = [
    {
      key: 'free_follower',
      pill: 'pill--follower',
    },
    {
      key: 'non_follower',
      pill: 'pill--nonfollower',
    },
  ];

  const supporterTiers = [
    { key: 'single_game_supporter', multiplier: null },
    { key: 'vorenka_supporter', multiplier: null },
    { key: 'velvet_city_supporter', multiplier: null },
    { key: 'shastegames_lover', multiplier: '1.5×' },
    { key: 'shastegames_core', multiplier: '3×' },
    { key: 'shastegames_master', multiplier: '5×' },
    { key: 'shastegames_fanatic', multiplier: '10×' },
  ];

  return (
    <div className="container fade-in">
      <div style={{ marginTop: 12 }}>
        <div className="eyebrow">{t('support.eyebrow')}</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 52px)', marginTop: 6 }}>
          {t('support.mission_title')}
        </h1>
        <p style={{ color: 'var(--muted)', marginTop: 10, maxWidth: 760 }}>{t('support.mission_body_1')}</p>
        <p style={{ color: 'var(--subtle)', marginTop: 8, maxWidth: 760 }}>{t('support.mission_body_2')}</p>
        <p style={{ color: 'var(--subtle)', marginTop: 8, maxWidth: 760 }}>{t('support.mission_body_3')}</p>
      </div>

      <section className="card" style={{ marginTop: 20, padding: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <h3>{t('support.followers_title')}</h3>
          <span className="tag">{t('support.followers_badge')}</span>
        </div>
        <p style={{ marginTop: 8, color: 'var(--subtle)' }}>{t('support.followers_intro')}</p>
        <div style={{ marginTop: 12, display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
          {followerTiers.map((tier) => (
            <article key={tier.key} className="card card--quiet" style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <strong>{t(`support.followers.${tier.key}.name`)}</strong>
                <span className={`pill ${tier.pill}`}>{t(`support.followers.${tier.key}.tag`)}</span>
              </div>
              <p style={{ color: 'var(--subtle)', marginTop: 8 }}>{t(`support.followers.${tier.key}.desc`)}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="card" style={{ marginTop: 14, padding: 18 }}>
        <h3>{t('support.tiers_title')}</h3>
        <p style={{ marginTop: 8, color: 'var(--subtle)' }}>{t('support.tiers_intro')}</p>

        <div style={{ marginTop: 12, display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
          {supporterTiers.map((tier) => (
            <article key={tier.key} className="card card--quiet" style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <strong>{t(`support.tiers.${tier.key}.name`)}</strong>
                {tier.multiplier && <span className="tag tag--coin">{t('support.coin_multiplier_label')} {tier.multiplier}</span>}
              </div>
              <ul style={{ margin: '10px 0 0', paddingLeft: 18, color: 'var(--subtle)', display: 'grid', gap: 4 }}>
                {[1, 2, 3, 4, 5, 6].map((idx) => {
                  const key = `support.tiers.${tier.key}.perk_${idx}`;
                  const text = t(key);
                  if (text === key) return null;
                  return <li key={key}>{text}</li>;
                })}
              </ul>
            </article>
          ))}
        </div>

        <a className="btn" href="https://www.patreon.com/c/Shaste" target="_blank" rel="noopener" style={{ marginTop: 14 }}>
          {t('support.cta')}
        </a>
      </section>

      <section className="card" style={{ marginTop: 14, padding: 18 }}>
        <h3>{t('support.free_help_title')}</h3>
        <p style={{ marginTop: 8, color: 'var(--subtle)' }}>{t('support.free_help_intro')}</p>
        <ul style={{ marginTop: 10, marginBottom: 0, paddingLeft: 18, display: 'grid', gap: 8, color: 'var(--subtle)' }}>
          <li>{t('support.free_help_item_1')}</li>
          <li>{t('support.free_help_item_2')}</li>
          <li>{t('support.free_help_item_3')}</li>
          <li>{t('support.free_help_item_4')}</li>
          <li>{t('support.free_help_item_5')}</li>
        </ul>
      </section>

      <button onClick={() => setPage('home')} className="btn btn--ghost" style={{ marginTop: 22 }}>
        {t('action.back_to_hub')}
      </button>
    </div>
  );
}

Object.assign(window, { SupportPage });