// brand-blue — logo 底下要不要放「Goodie Hunter」字樣,以及放的話長什麼樣。
//
// 這跟被砍掉的「登入 Goodie Hunter / 請輸入信箱與驗證碼以完成登入。」不是同一件事:
// 那兩行是說明句,這一行是識別。logo 是抽象光圈,它不會說自己叫什麼,
// 而使用者是從一封 email 點進來的 —— 落地畫面總得有個地方寫著它是什麼。

const MARK = '../../assets/brand/logo-mark.png';
const MARK_ASPECT = 447 / 519;   // 資產已裁到 alpha 邊界,寬高比是算的不是猜的
const MARK_HEIGHT = 88;

function Mark() {
  return (
    <img
      src={MARK} alt=""
      style={{ height: MARK_HEIGHT, width: Math.round(MARK_HEIGHT * MARK_ASPECT), display: 'block' }}
    />
  );
}

const VARIANTS = [
  {
    key: 'A', name: '只有 logo',
    note: '最乾淨。代價:整頁沒有一個字說得出這是什麼產品。',
    word: null,
  },
  {
    key: 'B', name: '字樣 20px / w700',
    note: '跟 logo 一樣有份量,兩者合起來像一個標誌。',
    word: { fontSize: 20, fontWeight: 700, color: '#1E293B', letterSpacing: -0.4, marginTop: 14 },
  },
  {
    key: 'C', name: '字樣 16px / w600 / 放寬字距',
    note: '低調的 wordmark 處理。logo 仍是主角,字只是把名字說出來。',
    word: { fontSize: 16, fontWeight: 600, color: '#64748B', letterSpacing: 1.2, marginTop: 12 },
  },
];

function VariantBlock({ variant }) {
  const P = window.BRAND_BLUE_PALETTE;
  const Field = window.BlueField;
  return (
    <div style={{ marginBottom: 34 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginBottom: 2 }}>
        <span style={{
          fontSize: 11, fontWeight: 700, color: P.card, background: P.ink2,
          borderRadius: 5, padding: '2px 6px',
        }}>{variant.key}</span>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: P.ink, letterSpacing: -0.2 }}>{variant.name}</span>
      </div>
      <div style={{ fontSize: 11.5, color: P.ink3, lineHeight: 1.5, letterSpacing: -0.1, marginBottom: 14 }}>
        {variant.note}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 32 }}>
        <Mark/>
        {variant.word && (
          <div style={{
            fontFamily: "'Plus Jakarta Sans', 'Noto Sans TC', sans-serif",
            ...variant.word,
          }}>Goodie Hunter</div>
        )}
      </div>

      <Field
        label="信箱" type="email" value="" onChange={() => {}}
        wrapperStyle={{ marginBottom: 12 }}
        inputStyle={{ fontSize: 16, letterSpacing: -0.2 }}
      />
      <Field
        label="驗證碼" type="text" inputMode="numeric" maxLength={6}
        value="" onChange={() => {}}
        wrapperStyle={{ marginBottom: 24, padding: '0 14px' }}
        inputStyle={{ fontSize: 16, letterSpacing: -0.2, fontVariantNumeric: 'tabular-nums' }}
        trailing={
          <button style={{
            flexShrink: 0, border: 'none', background: 'transparent', padding: '9px 0 9px 12px',
            color: P.brand, fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700,
            letterSpacing: -0.1, whiteSpace: 'nowrap',
          }}>發送驗證碼</button>
        }
      />
      <button style={{
        width: '100%', borderRadius: 13, padding: '15px', border: 'none',
        background: P.hairline, color: P.ink3,
        fontFamily: 'inherit', fontSize: 15.5, fontWeight: 700, letterSpacing: -0.2,
      }}>登入</button>
    </div>
  );
}

function WordmarkOptions() {
  const P = window.BRAND_BLUE_PALETTE;
  return (
    <div style={{ height: '100%', background: P.canvas, overflowY: 'auto' }}>
      <div style={{ padding: '78px 28px 40px', maxWidth: 440, margin: '0 auto', boxSizing: 'border-box' }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: P.ink, marginBottom: 4, letterSpacing: -0.2 }}>
          Logo 底下要不要放字樣
        </div>
        <div style={{ fontSize: 12.5, color: P.ink2, marginBottom: 24, lineHeight: 1.55, letterSpacing: -0.1 }}>
          logo 已換成去背版:沒有圓角、沒有陰影,寬高比 447:519(比寬還高)。
        </div>
        {VARIANTS.map(v => <VariantBlock key={v.key} variant={v}/>)}
      </div>
    </div>
  );
}

Object.assign(window, { WordmarkOptions });