/* global React, PageHead */
// Artifact detail template — one per linked file

const { useEffect } = React;

const ARTIFACT_DATA = {
  'documentary': {
    section: 'Recognition',
    sectionPath: '/recognition',
    type: 'Video',
    title: '2024 Student-Produced Documentary',
    year: '2024',
    course: 'Advisory · Class of 2026',
    artifact: 'Student-made short film',
    tags: ['Student voice', 'Relationship', 'Advisory'],
    body: [
      "Throughout my 4 years at ITW David Speer Academy, one of my proudest pieces of recognition is a student-made documentary about me. The students featured in the documentary are members of the class of 2026, so I taught them during my second year at Speer. Some of the students that appear in the video are also members of my Advisory class that I advised from 2022 to 2026. Additionally, the current principal at Speer Academy, Jordan Kruger, and assistant principal of academics, Lisette Hernandez, appear in the video.",
    ],
    embed: 'video:assets/documentary.mp4',
  },
  'first-ascent': {
    section: 'Recognition',
    sectionPath: '/recognition',
    type: 'Award',
    title: 'SY 2025 First Ascent Awards',
    year: '2025',
    course: '10th Grade English · World Literature',
    artifact: 'Speer Academy First Ascent Award (2 categories)',
    tags: ['ACT Growth', 'Equity', 'Noble Network'],
    body: [
      'In 2025, I was recognized by Speer Academy in their "First Ascent" Award in two categories: Equity and Growth. In the 2024-2025 school year, my classes were top 3 in the Noble Network for ACT growth. Additionally, my students with diverse learning needs (DL, IEP, 504, BIP), students who speak multiple languages (ML/ESL), and students within the racial/ethnic minority of Speer all also achieved top 3 growth in the charter network.',
    ],
    embed: 'pdf:assets/first-ascent.pdf',
  },
  'exemplary': {
    section: 'Recognition',
    sectionPath: '/recognition',
    type: 'Award',
    title: 'Exemplary Student Teacher Award',
    year: '2022',
    course: 'Student Teaching · Amboy High School',
    artifact: 'NIU Exemplary Student Teacher recognition',
    tags: ['NIU', 'Student Teaching', 'English Sec. Ed.'],
    body: [
      "During my first semester as a teacher in 2022, I was awarded the Exemplary Student Teacher award by my cooperating supervisor and the Professors of English Secondary Education at NIU for my time as a student teacher at Amboy High School in 2021.",
    ],
    embed: 'pdf:assets/exemplary.pdf',
  },
  'unit-standards': {
    section: 'Planning', sectionPath: '/planning', type: 'PDF',
    title: 'World Lit Q1 LTP — Unit Standards',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'World Lit Q1 LTP- BennettCOPY — Unit Standards.pdf',
    tags: ['CCRS', 'Common Core', 'Backwards Planning'],
    body: ["Long-term plan standards mapping for Q1 of World Literature — every unit, every week of instruction tied to Common Core / CCRS (ACT) standards before any lesson is drafted."],
    embed: 'pdf:assets/unit-standards.pdf',
  },
  'units-at-glance': {
    section: 'Planning', sectionPath: '/planning', type: 'PDF',
    title: 'Units at a Glance — S1 SY26',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'Units at a Glance — Semester 1',
    tags: ['Unit Plan', 'S1 SY26'],
    body: ["One-page overview of every unit in Semester 1 SY26: anchor texts, focus standards, major assessments, and culminating tasks."],
    embed: 'pdf:assets/units-at-glance.pdf',
  },
  'vision-classroom': {
    section: 'Planning', sectionPath: '/planning', type: 'PDF',
    title: 'Vision of Classroom Structure',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'Vision of Classroom Structure',
    tags: ['Routines', 'Culture', 'Procedures'],
    body: ["The procedural and cultural backbone of the classroom — entry routines, participation norms, grouping structures, and the roles students play across a given week."],
    embed: 'pdf:assets/vision-classroom.pdf',
  },
  'othello-notebook': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'KB Othello Notebook ’25',
    year: 'SY25', course: '10th Grade English',
    artifact: 'Student-facing scaffolded reading notebook',
    tags: ['Shakespeare', 'Scaffolding', 'Close Reading'],
    body: ['Here is an example of the "Othello Notebook." It includes sections that help students understand the background, structure, themes, characters, and content of the play. Students would use this to record important lines from the play that would ultimately help them select quotes for their essay.'],
    embed: 'pdf:assets/othello-notebook.pdf',
  },
  'othello-act-it-out': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Othello II,iii Act It Out Packet',
    year: 'SY25', course: '10th Grade English',
    artifact: 'Small-group performance project packet',
    tags: ['Shakespeare', 'Project', 'Performance'],
    body: ["In addition to reading, notes, and reading comprehension worksheets, I believe that it is important for students to see the play acted out. While sometimes watching the 1995 movie version is acceptable for comparison, I have tried to find ways for students to act out the best scenes in the classroom for their peers. Within classes of up to 38, that has presented challenges. I have attached one section of an \"Act It Out\" Packet that I have created that would be given to groups. Students divide up lines and acting duties and perform a scene from Othello. This activity has been one of my favorites at Speer because it is engaging and memorable – it is not often that students are reading lines aloud with emotion and using foam swords to battle in English class."],
    embed: 'pdf:assets/othello-act-it-out.pdf',
  },
  'sticky-note': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Sticky Note Discussion Expectations',
    year: 'SY26', course: 'All sections',
    artifact: 'Expectations Slide, Steps, and Tips',
    tags: ['Discussion', 'Accountability'],
    body: ['In the "sticky note" model, I have small groups work on answering a question before having students verbally participate. This model helps ensure that all students are tracking their group because anyone in the group could be picked to give their group\'s answer.'],
    embed: 'pdf:assets/sticky-note.pdf',
  },
  '3-questions': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: '3 Questions — Class Structure & Facilitation',
    year: 'SY26', course: 'Honors World Literature',
    artifact: '3 Questions Class Structure and Facilitation (PDF)',
    tags: ['Discussion', 'Honors', 'Argumentation'],
    body: ['In the "3 Questions" model, whole class participation is necessary. This allows for students to argue to come to a consensus. I primarily use this method in honors classes to have students include evidence to defend their answers.'],
    embed: 'pdf:assets/3-questions.pdf',
  },
  'oedipus-jigsaw': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Oedipus Rex Theme Jigsaw',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'Oedipus Rex Theme Jigsaw worksheet',
    tags: ['Jigsaw', 'Theme', 'Group Work'],
    body: ["I frequently use the Jigsaw method in worksheets/notes so that students have to verbally present their work while it is projected for other students. This method allows for students to gain multiple groups' perspectives in a short amount of time."],
    embed: 'pdf:assets/oedipus-jigsaw.pdf',
  },
  'mg-prework': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Prework',
    year: 'SY26', course: 'World Literature',
    artifact: 'Socratic Seminar prework document',
    tags: ['Socratic', 'Evidence', 'Prework'],
    body: ['In the prework document, I have students respond to both prompts. In their responses, they need multiple page numbers to ensure that no one can "steal" their evidence and leave them without an opportunity to participate.'],
    embed: 'pdf:assets/mg-prework.pdf',
  },
  'student-tracking': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Student Tracking',
    year: 'SY26', course: 'All sections',
    artifact: 'Outside-circle participation tracker',
    tags: ['Socratic', 'Self-assessment', 'Peer Tracking'],
    body: ['With such large sections, I have created a tracking document for students who are on the "outside" of the Socratic Seminar to follow a student who is actively participating. This worksheet also allows students to assess themselves and each other on their participation, which has improved students\' participation from one Socratic Seminar to the next.'],
    embed: 'pdf:assets/student-tracking.pdf',
  },
  'teacher-tracking': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Teacher Tracking',
    year: 'SY26', course: 'All sections',
    artifact: 'Real-time participation grading tool',
    tags: ['Socratic', 'Transparent Grading'],
    body: ["While students participate in the circle, I present my clipboard that includes all of their names as they are in the circle. I track the students' participation with symbols so that students can see how they are being graded by me in real time."],
    embed: 'pdf:assets/teacher-tracking.pdf',
  },
  'act-do-now': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'SLIDES',
    title: 'ACT 2-Tiered Do Now',
    year: 'SY26', course: 'All sections',
    artifact: 'ACT 2-Tiered Do Now — Google Slides',
    tags: ['ACT', 'Do Now', 'Daily Skill'],
    body: ['Each class period starts with a Do Now, which is almost always 1-3 ACT skills. In this artifact, this is a differentiated ACT do now that accommodates students at different levels of mastery. With this example of a two-tiered Do Now, I would check students\' progress on the frontside of the halfsheet until they answered all parts correctly while students who have mastered the skill can push their understanding further with the backside of the paper with a "bonus" question that practiced a more advanced application.'],
    embed: 'pdf:assets/act-do-now.pdf',
  },
  'oedipus-embed': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Oedipus Rex — Text & Embedded Questions',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'Student-facing text with embedded comprehension/analysis',
    tags: ['Embedded Questions', 'Close Reading'],
    body: ["In my created curriculums, I also included ACT-style questions intermixed with other literature questions (reading comprehension, quote analysis, theme analysis, etc). This artifact contains a packet for Oedipus Rex that includes the text and embedded vocabulary and structure notes, reading comprehension and analysis questions, and ACT practice questions."],
    embed: 'pdf:assets/oedipus-embed.pdf',
  },
  'skills-check': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: '5.7 WL10 Skills Check',
    year: 'SY26', course: '10th Grade World Literature',
    artifact: 'Interim skills check',
    tags: ['Assessment', 'Interim'],
    body: ['Besides interim exams, students in the Noble network took biweekly "Skills Checks" which focused on around 5 ACT skills. I co-created supplemental "Skills Checks" with my colleague to support students in their ACT growth. This artifact shows a "Skills Check" that I created in 2025 that focused on the standards SST 501, PUN 503, TOD 603, PUN 404, KLA 505, ORG 601, SST 601, ORG 501, USG 404, and ORG 502.'],
    embed: 'pdf:assets/skills-check.pdf',
  },
  'othello-essay-accommodated': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Othello Analytical Essay — Accommodated (IEP+ML)',
    year: 'SY24', course: '10th Grade English',
    artifact: 'Accommodated Student Copy_ Othello Analytical Essay\'24.pdf',
    tags: ['Writing', 'Differentiation', 'IEP', 'ML'],
    body: ["Accommodated version of the Othello analytical essay for students with IEPs and multilingual learners, featuring sentence frames, graphic organizers, and clear step-by-step directions."],
    embed: 'pdf:assets/othello-essay-accommodated.pdf',
  },
  'othello-essay-gened': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Othello Analytical Essay — Gen Ed (SY26)',
    year: 'SY26', course: '10th Grade English',
    artifact: 'Othello Analytical Essay SY26 - Google Docs.pdf',
    tags: ['Writing', 'General Education'],
    body: ["General education version of the Othello analytical essay for SY26."],
    embed: 'pdf:assets/othello-essay-gened.pdf',
  },
  'othello-essay-honors': {
    section: 'Curriculum', sectionPath: '/curriculum', type: 'PDF',
    title: 'Othello Analytical Essay — Honors (SY26)',
    year: 'SY26', course: '10th Grade English · Honors',
    artifact: 'Othello Analytical Essay Honors SY26 - Google Docs.pdf',
    tags: ['Writing', 'Honors', 'Differentiation'],
    body: ["Honors version of the Othello analytical essay with an elevated prompt requiring more sophisticated argumentation and evidence integration."],
    embed: 'pdf:assets/othello-essay-honors.pdf',
  },
  'interim-analysis': {
    section: 'Data', sectionPath: '/data', type: 'Sheets',
    title: 'English SY26 SM2 Interim Analysis',
    year: 'SY26', course: '10th Grade English',
    artifact: 'Standards-level interim breakdown',
    tags: ['DDI', 'Interim', 'Action Steps'],
    body: ["Standards-level breakdown of interim performance. Each row is a standard, each column is a section, and each cell triggers a specific action step for the next data-driven instruction cycle."],
    embed: 'pdf:assets/interim-analysis.pdf',
  },
  'parallel-structure': {
    section: 'Data', sectionPath: '/data', type: 'PDF',
    title: 'Parallel Structure Re-Teach',
    year: 'SY26', course: '10th Grade English',
    artifact: 'Targeted re-teach lesson',
    tags: ['Re-Teach', 'Grammar', 'DDI'],
    body: ["A targeted re-teach lesson on parallel structure, generated directly from interim analysis where students demonstrated this specific skill gap."],
    embed: 'pdf:assets/parallel-structure.pdf',
  },
};

function ArtifactPage({ slug, onNav }) {
  const a = ARTIFACT_DATA[slug];

  useEffect(() => { window.scrollTo(0, 0); }, [slug]);

  if (!a) {
    return (
      <div>
        <PageHead
          crumbs={[{label:'Home', path:'/'},{label:'Not Found'}]}
          title="Artifact Not Found"
          subtitle={`No artifact registered at "/artifact/${slug}".`}
        />
      </div>
    );
  }

  return (
    <div>
      <PageHead
        crumbs={[
          { label:'Home', path:'/' },
          { label: a.section, path: a.sectionPath },
          { label: a.title },
        ]}
        title={a.title}
      />
      <div className="container">
        <div className="article">
          <dl className="meta-strip">
            <div><dt>Type</dt><dd>{a.type}</dd></div>
            <div><dt>Year</dt><dd>{a.year}</dd></div>
            <div><dt>Course</dt><dd>{a.course}</dd></div>
            <div><dt>Artifact</dt><dd>{a.artifact}</dd></div>
          </dl>

          <div className="tag-list">
            {a.tags.map(t => <span key={t} className="tag">{t}</span>)}
          </div>

          <div className="prose" style={{maxWidth: '68ch'}}>
            {a.body.map((p,i) => <p key={i}>{p}</p>)}
          </div>

          <div className="embed-shell">
            {a.embed.startsWith('video:') ? (
              <video
                controls
                controlsList="nodownload"
                preload="metadata"
                playsInline
                onContextMenu={(e) => e.preventDefault()}
                style={{width: '100%', maxWidth: '100%', display: 'block', borderRadius: 4, background: '#000'}}
              >
                <source src={a.embed.replace('video:', '')} type="video/mp4" />
                Your browser does not support the video tag.
              </video>
            ) : a.embed.startsWith('pdf:') ? (
              <iframe
                src={a.embed.replace('pdf:', '')}
                style={{width: '100%', height: '100%', border: 'none'}}
                title={a.title}
              />
            ) : (
              <div className="label">[ {a.embed} ]</div>
            )}
          </div>

          <div style={{
            marginTop: 64,
            paddingTop: 32,
            borderTop: '1px solid #111',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <a href={`#${a.sectionPath}`} onClick={(e)=>{e.preventDefault();onNav(a.sectionPath);}}
               style={{
                 fontFamily: "'Oswald', Arial",
                 fontSize: 13,
                 letterSpacing: '0.16em',
                 textTransform: 'uppercase'
               }}>← Back to {a.section}</a>
            {!a.embed.startsWith('video:') && (
              <a
                href={a.embed.startsWith('pdf:') ? a.embed.replace('pdf:', '') : '#'}
                target={a.embed.startsWith('pdf:') ? '_blank' : undefined}
                rel={a.embed.startsWith('pdf:') ? 'noopener noreferrer' : undefined}
                onClick={(e) => { if (!a.embed.startsWith('pdf:')) e.preventDefault(); }}
                style={{
                  fontFamily: "'Oswald', Arial",
                  fontSize: 13,
                  letterSpacing: '0.16em',
                  textTransform: 'uppercase'
                }}>{a.embed.startsWith('pdf:') ? 'Open PDF →' : 'Download file →'}</a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ArtifactPage, ARTIFACT_DATA });
