// Trove — subject visual identity
// Calm, distinct palette per subject + flat single-glyph icon.
// SUBJECTS maps canonical Supabase strings → { name, color, bg, accent, Icon }.

const SUBJECTS = {
  'English': {
    name: 'English', color: '#3D6B6B', bg: '#E5EFEF', accent: '#5C8989',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" {...p}>
      {/* An open book */}
      <path d="M4 8 Q10 6 16 9 Q22 6 28 8 L28 25 Q22 23 16 26 Q10 23 4 25 Z" fill="currentColor" opacity=".14"/>
      <path d="M4 8 Q10 6 16 9 Q22 6 28 8 L28 25 Q22 23 16 26 Q10 23 4 25 Z"/>
      <line x1="16" y1="9" x2="16" y2="26"/>
      {/* Page lines */}
      <line x1="7" y1="12" x2="13" y2="13" opacity=".55"/>
      <line x1="7" y1="16" x2="13" y2="17" opacity=".55"/>
      <line x1="7" y1="20" x2="12" y2="21" opacity=".55"/>
      <line x1="19" y1="13" x2="25" y2="12" opacity=".55"/>
      <line x1="19" y1="17" x2="25" y2="16" opacity=".55"/>
      <line x1="20" y1="21" x2="25" y2="20" opacity=".55"/>
    </svg>),
  },
  'Mathematics': {
    name: 'Maths', color: '#2A4D7A', bg: '#E3EAF3', accent: '#4C6D9A',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      {/* Plus */}
      <line x1="8" y1="5" x2="8" y2="13"/>
      <line x1="4" y1="9" x2="12" y2="9"/>
      {/* Minus */}
      <line x1="20" y1="9" x2="28" y2="9"/>
      {/* Multiply */}
      <line x1="5" y1="20" x2="11" y2="26"/>
      <line x1="11" y1="20" x2="5" y2="26"/>
      {/* Divide */}
      <line x1="20" y1="23" x2="28" y2="23"/>
      <circle cx="24" cy="19" r="1.3" fill="currentColor" stroke="none"/>
      <circle cx="24" cy="27" r="1.3" fill="currentColor" stroke="none"/>
    </svg>),
  },
  'Maths': { /* alias filled below */ },
  'Science': {
    name: 'Science', color: '#3F7A4D', bg: '#E5F0E8', accent: '#5E9970',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M13 6 L13 13 L7 25 Q7 28 11 28 L21 28 Q25 28 25 25 L19 13 L19 6"/>
      <line x1="11" y1="6" x2="21" y2="6"/>
      <circle cx="14" cy="22" r="1.2" fill="currentColor"/>
      <circle cx="18" cy="20" r="1" fill="currentColor"/>
    </svg>),
  },
  'Art and Design': {
    name: 'Art & Design', color: '#A04A4A', bg: '#F2E2E2', accent: '#BC6E6E',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <path d="M16 5 C9 5 4 10 4 16 C4 21 8 24 12 22 C13 21 13 19 12 18 C11 17 11 15 13 15 L19 15 C24 15 28 12 28 9 C28 6 24 5 16 5 Z" fill="currentColor" opacity=".15" stroke="currentColor"/>
      <circle cx="9" cy="13" r="1.4" fill="currentColor"/>
      <circle cx="13" cy="9" r="1.4" fill="currentColor"/>
      <circle cx="19" cy="9" r="1.4" fill="currentColor"/>
      <circle cx="23" cy="13" r="1.4" fill="currentColor"/>
    </svg>),
  },
  'Computing': {
    name: 'Computing', color: '#5C4A8E', bg: '#EAE5F2', accent: '#7E6BB0',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="11 11 6 16 11 21"/>
      <polyline points="21 11 26 16 21 21"/>
      <line x1="18" y1="8" x2="14" y2="24"/>
    </svg>),
  },
  'Design and Technology': {
    name: 'Design & Technology', color: '#9C7E3F', bg: '#F2EBD9', accent: '#B69B5C',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <path d="M16 4 L19 9 L25 9 L20.5 13 L22 19 L16 16 L10 19 L11.5 13 L7 9 L13 9 Z" fill="currentColor" opacity=".15"/>
      <circle cx="16" cy="22" r="3.5" fill="none"/>
      <line x1="16" y1="25.5" x2="16" y2="28"/>
      <line x1="12.5" y1="22" x2="10.5" y2="22"/>
      <line x1="19.5" y1="22" x2="21.5" y2="22"/>
    </svg>),
  },
  'Geography': {
    name: 'Geography', color: '#3D6B9A', bg: '#E3EBF3', accent: '#5C89B5',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="16" cy="16" r="11" fill="currentColor" opacity=".12"/>
      <circle cx="16" cy="16" r="11"/>
      <path d="M5 16 Q16 12 27 16" />
      <path d="M5 16 Q16 20 27 16" />
      <line x1="16" y1="5" x2="16" y2="27"/>
    </svg>),
  },
  'History': {
    name: 'History', color: '#8E5A2B', bg: '#F0E5D6', accent: '#A6794F',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <rect x="6" y="6" width="20" height="3" fill="currentColor" opacity=".15"/>
      <rect x="6" y="6" width="20" height="3"/>
      <rect x="6" y="23" width="20" height="3"/>
      <rect x="9" y="9" width="3.5" height="14"/>
      <rect x="14.25" y="9" width="3.5" height="14"/>
      <rect x="19.5" y="9" width="3.5" height="14"/>
    </svg>),
  },
  'Modern Foreign Languages': {
    name: 'Modern Foreign Languages', color: '#7A3F6B', bg: '#EFE2EB', accent: '#9C6090',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <text x="9" y="15" fontSize="9" fontWeight="700" fill="currentColor" fontFamily="Mulish,sans-serif">A</text>
      <text x="17" y="24" fontSize="9" fontWeight="700" fill="currentColor" fontFamily="Mulish,sans-serif">あ</text>
      <path d="M14 16 L18 21" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2 2"/>
    </svg>),
  },
  'Music': {
    name: 'Music', color: '#6B4A8E', bg: '#EBE3F2', accent: '#8E6FB0',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <path d="M12 21 L12 8 L24 6 L24 19"/>
      <ellipse cx="9.5" cy="21.5" rx="3.5" ry="2.5" fill="currentColor" opacity=".15" stroke="currentColor"/>
      <ellipse cx="21.5" cy="19.5" rx="3.5" ry="2.5" fill="currentColor" opacity=".15" stroke="currentColor"/>
      <line x1="12" y1="12" x2="24" y2="10"/>
    </svg>),
  },
  'Physical Education': {
    name: 'Physical Education', color: '#A0633A', bg: '#F2E5DA', accent: '#BC865E',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="16" cy="16" r="11" fill="currentColor" opacity=".12"/>
      <circle cx="16" cy="16" r="11"/>
      <path d="M16 5 Q11 16 16 27"/>
      <path d="M16 5 Q21 16 16 27"/>
      <path d="M5 16 L27 16"/>
    </svg>),
  },
  'Religious Education': {
    name: 'Religious Education', color: '#7E6B3F', bg: '#EFEBDB', accent: '#A39061',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <path d="M8 26 L8 14 L16 8 L24 14 L24 26 Z" fill="currentColor" opacity=".15" stroke="currentColor"/>
      <line x1="13" y1="26" x2="13" y2="18"/>
      <line x1="19" y1="26" x2="19" y2="18"/>
      <line x1="16" y1="11" x2="16" y2="15"/>
      <line x1="14" y1="13" x2="18" y2="13"/>
    </svg>),
  },
  'PSHE': {
    name: 'PSHE', color: '#A04A6B', bg: '#F2E2EA', accent: '#BC6E8E',
    Icon: (p) => (<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" {...p}>
      <path d="M16 26 C 8 21 5 16 5 12 C 5 8 9 6 12 6 C 14 6 15.5 7 16 9 C 16.5 7 18 6 20 6 C 23 6 27 8 27 12 C 27 16 24 21 16 26 Z" fill="currentColor" opacity=".15" stroke="currentColor"/>
    </svg>),
  },
};

// Aliases
SUBJECTS['Maths'] = SUBJECTS['Mathematics'];
SUBJECTS['Art & Design'] = SUBJECTS['Art and Design'];
SUBJECTS['Design & Technology'] = SUBJECTS['Design and Technology'];
SUBJECTS['DT'] = SUBJECTS['Design and Technology'];
SUBJECTS['RE'] = SUBJECTS['Religious Education'];
SUBJECTS['PE'] = SUBJECTS['Physical Education'];
SUBJECTS['MFL'] = SUBJECTS['Modern Foreign Languages'];

function getSubject(s) {
  return SUBJECTS[s] || { name: s || 'Resource', color: '#5D6B85', bg: '#E7E9EF', accent: '#7A8AA8', Icon: (p) => <svg viewBox="0 0 32 32" {...p}><circle cx="16" cy="16" r="6" fill="currentColor" opacity=".3"/></svg> };
}

window.SUBJECTS = SUBJECTS;
window.getSubject = getSubject;
