// Section 3 — What steps can you take each turn?
// Simple, non-clickable, non-button action list + valid/invalid examples.

const TURN_ACTIONS = [
  {
    id: 'draw',
    name: 'Draw',
    zh: '摸牌',
    pinyin: 'mō pái',
    en: '"feel for a tile"',
    when: 'Always — it starts your turn',
    desc: 'Take one tile from the wall. Your hand now has 14 tiles.',
    example: ['bing-5'],
    exampleNote: 'one new tile',
  },
  {
    id: 'discard',
    name: 'Discard',
    zh: '打牌',
    pinyin: 'dǎ pái',
    en: '"strike the tile"',
    when: 'End of your turn',
    desc: 'Throw away one tile face-up. Your hand returns to 13.',
    example: ['wan-1'],
    exampleNote: 'one tile out',
  },
  {
    id: 'chow',
    name: 'Chow',
    zh: '吃',
    pinyin: 'chī',
    en: '"eat"',
    when: 'Only from the player on your left',
    desc: 'Claim a just-discarded tile to complete a run of three in one suit.',
    example: ['tiao-3', 'tiao-4', 'tiao-5'],
    exampleNote: '3–4–5 bamboo',
  },
  {
    id: 'pung',
    name: 'Pung',
    zh: '碰',
    pinyin: 'pèng',
    en: '"bump"',
    when: 'From any player',
    desc: 'Claim a discard to complete a triplet. Beats chow.',
    example: ['bing-7', 'bing-7', 'bing-7'],
    exampleNote: 'three 7-dots',
  },
  {
    id: 'kong',
    name: 'Kong',
    zh: '杠',
    pinyin: 'gàng',
    en: '"bar"',
    when: 'From any discard, or concealed in your hand',
    desc: 'Four of a kind. Draw a replacement tile from the dead wall.',
    example: ['east', 'east', 'east', 'east'],
    exampleNote: 'four East winds',
  },
  {
    id: 'hu',
    name: 'Hu · Mahjong!',
    zh: '胡',
    pinyin: 'hú',
    en: '"complete"',
    when: 'When your hand would be complete',
    desc: 'Declare win. Ends the hand. Highest priority — beats everyone.',
    example: ['red', 'red'],
    exampleNote: 'final pair lands',
  },
];

const SET_EXAMPLES = [
  {
    kind: 'Chow (chī) · 吃',
    desc: 'Three tiles in a row, same suit.',
    valid: [
      { tiles: ['wan-4', 'wan-5', 'wan-6'], note: 'Clean run in Characters' },
      { tiles: ['tiao-1', 'tiao-2', 'tiao-3'], note: 'Lowest run in Bamboo' },
      { tiles: ['bing-7', 'bing-8', 'bing-9'], note: 'Run including terminal 9' },
    ],
    invalid: [
      { tiles: ['wan-1', 'wan-2', 'tiao-3'], note: 'Mixed suits — not allowed' },
      { tiles: ['bing-2', 'bing-4', 'bing-6'], note: 'Not consecutive' },
      { tiles: ['east', 'south', 'west'], note: 'Honors can never form a chow' },
    ],
  },
  {
    kind: 'Pung (pèng) · 碰',
    desc: 'Three identical tiles.',
    valid: [
      { tiles: ['wan-5', 'wan-5', 'wan-5'], note: 'Triple 5 of Characters' },
      { tiles: ['east', 'east', 'east'], note: 'Triple East Wind' },
      { tiles: ['red', 'red', 'red'], note: 'Triple Red Dragon — scoring!' },
    ],
    invalid: [
      { tiles: ['wan-5', 'wan-5', 'wan-6'], note: 'Only two match — this is a pair + one' },
      { tiles: ['tiao-3', 'bing-3', 'wan-3'], note: 'Same number across suits doesn\'t count' },
      { tiles: ['east', 'south', 'east'], note: 'Two East ≠ three East' },
    ],
  },
  {
    kind: 'Kong (gàng) · 杠',
    desc: 'Four of the same tile. Earns a bonus draw.',
    valid: [
      { tiles: ['tiao-4', 'tiao-4', 'tiao-4', 'tiao-4'], note: 'All four 4-bamboos' },
      { tiles: ['white', 'white', 'white', 'white'], note: 'Concealed kong of White Dragon' },
    ],
    invalid: [
      { tiles: ['bing-2', 'bing-2', 'bing-2', 'bing-3'], note: 'One tile is different' },
      { tiles: ['wan-7', 'wan-7', 'wan-7'], note: 'Only three — this is a pung' },
    ],
  },
  {
    kind: 'Pair · 对 (the "eyes")',
    desc: 'Two identical tiles. Every winning hand has exactly one.',
    valid: [
      { tiles: ['green', 'green'], note: 'Pair of Green Dragons' },
      { tiles: ['bing-5', 'bing-5'], note: 'Any two of the same' },
    ],
    invalid: [
      { tiles: ['bing-5', 'bing-6'], note: 'Different tiles — not a pair' },
      { tiles: ['east', 'west'], note: 'Different winds — not a pair' },
    ],
  },
];

function SectionActions() {
  const variant = React.useContext(VariantContext);
  return (
    <section id="section-actions" className="mj-section" data-screen-label="04 Actions">
      <div className="mj-section-head">
        <div className="mj-kicker">Section 04 · Your turn</div>
        <h2 className="mj-h2">What can you do each turn?</h2>
        <p className="mj-lede">
          On your turn you always draw then discard. Between turns, you can interrupt to <em>claim</em> another player's discard — if you can use it to complete a set.
        </p>
      </div>

      {/* Simple, non-button list of actions */}
      <div className="mj-action-list">
        {[...TURN_ACTIONS, ...(variant === 'taiwan' ? [{
          id: 'flower',
          name: 'Reveal Flower / Season',
          zh: '補花',
          pinyin: 'bǔ huā',
          en: '"replenish flower"',
          when: 'Immediately on drawing a bonus tile',
          desc: 'Show the flower or season tile, set it aside face-up, then draw a replacement from the dead wall. It never enters your hand.',
          example: ['mei', 'spring'],
          exampleNote: 'reveal & replace',
        }] : [])].map((a) => (
          <div key={a.id} className="mj-action-row">
            <div className="mj-action-zh-col">
              <div className="mj-action-zh">{a.zh}</div>
              <div className="mj-action-pinyin">{a.pinyin}</div>
              <div className="mj-action-lit">{a.en}</div>
            </div>
            <div className="mj-action-main">
              <div className="mj-action-name">{a.name}</div>
              <div className="mj-action-desc">{a.desc}</div>
            </div>
            <div className="mj-action-example">
              {a.example.map((t, i) => <Tile key={i} id={t} size="sm" />)}
            </div>
            <div className="mj-action-when-col">{a.when}</div>
          </div>
        ))}
      </div>

      {/* Priority explainer */}
      <div className="mj-priority">
        <div className="mj-priority-h">What if two players want the same discard?</div>
        <div className="mj-priority-ladder">
          <div className="mj-prio-row">
            <div className="mj-prio-rank">1</div>
            <div className="mj-prio-name">Hu (win)</div>
            <div className="mj-prio-desc">Always wins — if the discarded tile completes your hand, you win immediately.</div>
          </div>
          <div className="mj-prio-row">
            <div className="mj-prio-rank">2</div>
            <div className="mj-prio-name">Pung / Kong</div>
            <div className="mj-prio-desc">Anyone, any seat — beats chow.</div>
          </div>
          <div className="mj-prio-row">
            <div className="mj-prio-rank">3</div>
            <div className="mj-prio-name">Chow</div>
            <div className="mj-prio-desc">Only the next player (to the discarder's right).</div>
          </div>
        </div>
      </div>

      {/* Valid vs invalid — tabbed, single block */}
      <div className="mj-vi-head">
        <h3 className="mj-h3">Valid vs. invalid sets</h3>
        <p className="mj-vi-sub">A set is the building block of a winning hand. Here's what counts — and what doesn't.</p>
      </div>

      <ValidInvalidTabs />
    </section>
  );
}

function ValidInvalidTabs() {
  const [idx, setIdx] = React.useState(0);
  const ex = SET_EXAMPLES[idx];
  return (
    <div className="mj-vi-block">
      <div className="mj-vi-tabs">
        {SET_EXAMPLES.map((e, i) => (
          <button
            key={i}
            className={`mj-vi-tab ${idx === i ? 'is-active' : ''}`}
            onClick={() => setIdx(i)}
          >{e.kind}</button>
        ))}
      </div>
      <div className="mj-vi-desc mj-vi-block-desc">{ex.desc}</div>
      <div className="mj-vi-cols">
        <div className="mj-vi-col mj-vi-valid">
          <div className="mj-vi-col-head">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M2 7l3.5 3.5L12 4"/></svg>
            Valid
          </div>
          {ex.valid.map((v, vi) => (
            <div key={vi} className="mj-vi-example">
              <div className="mj-vi-tiles">
                {v.tiles.map((t, ti) => <Tile key={ti} id={t} size="sm" />)}
              </div>
              <div className="mj-vi-note">{v.note}</div>
            </div>
          ))}
        </div>
        <div className="mj-vi-col mj-vi-invalid">
          <div className="mj-vi-col-head">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M3 3l8 8M11 3l-8 8"/></svg>
            Not valid
          </div>
          {ex.invalid.map((v, vi) => (
            <div key={vi} className="mj-vi-example">
              <div className="mj-vi-tiles">
                {v.tiles.map((t, ti) => <Tile key={ti} id={t} size="sm" />)}
              </div>
              <div className="mj-vi-note">{v.note}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SectionActions, TURN_ACTIONS });