// How to Play modal — editorial newspaper-styled rules screen.
// Masthead eyebrow → serif H1 → italic lede → §I Guessing → §II Tile Color
// → callout → §III Winning & Losing → footer.

function SentinelHeadline({ compact = false }) {
  const C = window.COLORS;
  return (
    <div style={{ marginBottom: compact ? 10 : 14 }}>
      <div style={{
        height: 1,
        background: 'rgba(175, 136, 204, 0.35)',
        marginBottom: compact ? 6 : 8,
      }} />
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: compact ? 10 : 14,
      }}>
        <span style={{
          fontFamily: "'Lora', Georgia, serif",
          fontSize: compact ? 9 : 11,
          color: C.aurora,
          letterSpacing: '0.1em',
        }}>✦</span>
        <h2 style={{
          fontFamily: "'Lora', Georgia, serif",
          fontSize: compact ? 15 : 19,
          fontWeight: 500,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: C.white,
          margin: 0,
          textAlign: 'center',
        }}>THE DAILY SENTINEL</h2>
        <span style={{
          fontFamily: "'Lora', Georgia, serif",
          fontSize: compact ? 9 : 11,
          color: C.aurora,
          letterSpacing: '0.1em',
        }}>✦</span>
      </div>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: compact ? 6 : 8,
        gap: 14,
      }}>
        <div style={{ flex: 1, height: 1, background: 'rgba(175, 136, 204, 0.35)' }} />
        <div style={{
          fontFamily: "'Noto Sans', sans-serif",
          fontSize: compact ? 8 : 9,
          letterSpacing: '0.32em',
          textTransform: 'uppercase',
          color: C.whiteFaint,
          fontWeight: 500,
        }}>Vol. I · Rules of Play</div>
        <div style={{ flex: 1, height: 1, background: 'rgba(175, 136, 204, 0.35)' }} />
      </div>
    </div>
  );
}

function HowToPlayModal({ open, onClose, compact = false }) {
  const C = window.COLORS;
  if (!open) return null;

  const SectionDivider = ({ numeral, label }) => (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '28px 1fr',
      columnGap: 14,
      alignItems: 'baseline',
      margin: compact ? '14px 0 6px' : '18px 0 8px',
    }}>
      <span style={{
        fontFamily: "'Lora', Georgia, serif",
        fontStyle: 'italic',
        fontSize: 13,
        fontWeight: 500,
        color: C.aurora,
        letterSpacing: '0.04em',
        textAlign: 'right',
      }}>{numeral}.</span>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <h3 style={{
          fontFamily: "'Lora', Georgia, serif",
          fontSize: compact ? 15 : 16,
          lineHeight: 1.1,
          fontWeight: 500,
          color: C.white,
          margin: 0,
          letterSpacing: '0.005em',
        }}>{label}</h3>
        <div style={{
          flex: 1,
          height: 1,
          background: 'linear-gradient(to right, rgba(175, 136, 204, 0.32), rgba(175, 136, 204, 0))',
          transform: 'translateY(-3px)',
        }} />
      </div>
    </div>
  );

  const Bullet = ({ children }) => (
    <div style={{ display: 'flex', gap: 12, marginBottom: compact ? 4 : 5 }}>
      <div style={{
        width: 5, height: 5, borderRadius: '50%',
        background: C.aurora,
        marginTop: 9,
        flexShrink: 0,
      }} />
      <div style={{
        fontFamily: "'Noto Sans', sans-serif",
        fontSize: compact ? 13 : 13.5,
        lineHeight: compact ? 1.5 : 1.55,
        color: 'rgba(248, 248, 243, 0.85)',
        textWrap: 'pretty',
      }}>{children}</div>
    </div>
  );

  const LegendRow = ({ state, label }) => {
    let bg, color, border;
    if (state === 'correct') { bg = C.guardian; color = C.white; border = C.guardian; }
    else if (state === 'present') { bg = C.aurora; color = C.bg; border = C.aurora; }
    else { bg = C.charcoal; color = 'rgba(248, 248, 243, 0.5)'; border = C.charcoal; }
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: compact ? 7 : 9 }}>
        <div style={{
          width: compact ? 32 : 36, height: compact ? 32 : 36,
          background: bg,
          border: `1.5px solid ${border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: "'Noto Sans', sans-serif",
          fontSize: compact ? 14 : 16,
          fontWeight: 600,
          color,
          flexShrink: 0,
        }}>A</div>
        <div style={{
          fontFamily: "'Noto Sans', sans-serif",
          fontSize: compact ? 13 : 13.5,
          fontWeight: 500,
          color: C.white,
          letterSpacing: '0.01em',
        }}>{label}</div>
      </div>
    );
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(10, 11, 22, 0.72)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        zIndex: 50,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: compact ? 12 : 24,
        boxSizing: 'border-box',
        animation: 'sentinel-fade-in 220ms ease',
      }}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: '#1a1c2e',
          border: '1px solid rgba(175, 136, 204, 0.18)',
          boxShadow: '0 24px 80px rgba(0, 0, 0, 0.5)',
          width: '100%',
          maxWidth: 520,
          maxHeight: '90vh',
          overflowY: 'auto',
          padding: compact ? '22px 22px 22px' : '28px 40px 28px',
          position: 'relative',
          color: C.white,
          boxSizing: 'border-box',
          animation: 'sentinel-slide-up 280ms cubic-bezier(.2,.7,.3,1)',
        }}>
        <button
          onClick={onClose}
          style={{
            position: 'absolute',
            top: 18, right: 18,
            width: 32, height: 32,
            background: 'transparent',
            border: '1px solid rgba(248, 248, 243, 0.12)',
            color: C.whiteDim,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 150ms ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.aurora; e.currentTarget.style.color = C.aurora; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(248, 248, 243, 0.12)'; e.currentTarget.style.color = C.whiteDim; }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            <path d="M2 2l8 8M10 2l-8 8" />
          </svg>
        </button>

        <SentinelHeadline compact={compact} />

        <h1 style={{
          fontFamily: "'Lora', Georgia, serif",
          lineHeight: 1.1,
          fontWeight: 500,
          letterSpacing: '-0.01em',
          margin: 0,
          color: C.white,
          fontSize: compact ? 22 : 26,
        }}>How to Play</h1>

        <p style={{
          fontFamily: "'Lora', Georgia, serif",
          fontStyle: 'italic',
          fontSize: compact ? 13.5 : 14.5,
          lineHeight: 1.5,
          color: C.whiteDim,
          marginTop: compact ? 8 : 10,
          marginBottom: 0,
          textWrap: 'pretty',
        }}>
          A trivia question appears at the top. Your job is to guess the answer — one word, 4 to 9 letters long.
        </p>

        <SectionDivider numeral="I" label="Guessing" />
        <Bullet>You don't know how long the answer is — that's part of the puzzle</Bullet>
        <Bullet>Every guess must be a real English dictionary word</Bullet>
        <Bullet>Exception: if you know the answer, you can always guess it — even if it's a proper noun like a name or place</Bullet>
        <Bullet>You have 8 guesses, marked by the letters <strong style={{ fontFamily: "'Lora', Georgia, serif", color: C.aurora, fontWeight: 500 }}>S·E·N·T·I·N·E·L</strong> on the left</Bullet>

        <SectionDivider numeral="II" label="Tile Color" />
        <LegendRow state="correct" label="Right letter, right position" />
        <LegendRow state="present" label="Right letter, wrong position" />
        <LegendRow state="absent" label="Letter not in the answer" />

        <div style={{
          marginTop: compact ? 10 : 14,
          padding: compact ? '10px 14px' : '12px 16px',
          background: 'rgba(175, 136, 204, 0.06)',
          borderLeft: `2px solid ${C.aurora}`,
        }}>
          <div style={{
            fontFamily: "'Noto Sans', sans-serif",
            fontSize: 10,
            letterSpacing: '0.24em',
            textTransform: 'uppercase',
            color: C.aurora,
            fontWeight: 600,
            marginBottom: 5,
          }}>A note on duplicate letters</div>
          <div style={{
            fontFamily: "'Lora', Georgia, serif",
            fontSize: compact ? 12.5 : 13,
            lineHeight: 1.5,
            color: 'rgba(248, 248, 243, 0.8)',
            textWrap: 'pretty',
          }}>
            Duplicate letters are handled fairly — if you guess two E's and the answer only has one, only one E will highlight.
          </div>
        </div>

        <SectionDivider numeral="III" label="Winning & Losing" />
        <Bullet>Guess the exact answer to win</Bullet>
        <Bullet>Use all 8 guesses without the right answer and the word is revealed</Bullet>

        <div style={{
          marginTop: compact ? 12 : 16,
          paddingTop: compact ? 10 : 12,
          borderTop: `1px solid ${C.border}`,
          fontFamily: "'Lora', Georgia, serif",
          fontStyle: 'italic',
          fontSize: 12.5,
          color: C.whiteFaint,
          textAlign: 'center',
          letterSpacing: '0.01em',
        }}>A new puzzle every day.</div>
      </div>
    </div>
  );
}

Object.assign(window, { HowToPlayModal, SentinelHeadline });