/* global React */
// Interior section pages

function PageHead({ crumbs, title, subtitle }) {
  return (
    <section className="page-head">
      <div className="container">
        <div className="crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span>·</span>}
              {c.path ? (
                <a href={`#${c.path}`}>{c.label}</a>
              ) : (
                <span>{c.label}</span>
              )}
            </React.Fragment>
          ))}
        </div>
        <h1>{title}</h1>
        {subtitle && <p className="subtitle">{subtitle}</p>}
      </div>
    </section>
  );
}

/* ---- Profile Page (dedicated) ---- */
function ProfilePage({ onNav }) {
  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Profile" }]}
        title="Profile & Welcome"
        subtitle="Four years in the classroom, built on a foundation of student teaching, an English Secondary Education degree, and a commitment to standards-aligned instruction."
      />
      <div className="container">
        <div className="split">
          <div className="sticky">About · Credentials</div>
          <div className="prose">
            <p>
              My name is Kade Bennett, and I hold a Bachelor of Arts in English Secondary Education from Northern Illinois University. I hold a Professional Educator's License in Illinois for English grades 9-12. I have been a teacher since January 2022.
            </p>
            <p>
              After my student teaching experience where I taught English 11 and English 12 classes at Amboy High School in Fall 2021, I started my teaching career at Amboy Junior High School teaching eighth grade English for the spring semester in 2022.
            </p>
            <p>
              In August of 2022 I was hired at ITW David Speer Academy (in the Noble Network of Charter Schools), which serves students primarily from the neighborhoods of Belmont Cragin and Austin on Chicago's Northwest side. At Speer, I have taught 10th grade English and World Literature with both general education and honors sections.
            </p>
            <p>
              This website contains my resume and artifacts that represent my teaching philosophy; recognition of achievements; skills in curriculum planning, creation, and differentiation; and data analysis of my students' results and outcomes.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Philosophy Page ---- */
function PhilosophyPage({ onNav }) {
  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Philosophy" }]}
        title="Teaching Philosophy"
        subtitle="The commitments that shape planning, discussion, and assessment in my classroom."
      />
      <div className="container">
        <div className="split">
          <div className="sticky">Core Beliefs</div>
          <div className="prose">
            <p>
              I chose to become an educator because I wanted to choose a career that would allow me to
              serve my community and positively impact others. At first, being a teacher was not what I
              pictured for my future, but I found that teaching English enables me to achieve my goals in
              community service by both allowing me to advocate for my students and providing me an opportunity to help them elevate their own voices through teaching writing and critical thinking so that they can grow and make their own impacts.
            </p>
            <p>
              Throughout my studies in English, I have better understood the world around me, so it is my goal to help teach students to become more aware and respectful of perspectives that differ from their own. In the classroom, I love creating opportunities for student-centered discussions, and I have used that passion to continue to create new activities to engage students in authentic discussion. I have also worked to share these with my colleagues by leading professional developments to help other teachers create more opportunities for discussion in their classrooms. As someone who is passionate about writing, I also enjoy teaching writing to students to give them opportunities to communicate their ideas effectively.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Recognition Page ---- */
function RecognitionPage({ onNav }) {
  const awards = [
    {
      year: "2025",
      yearSub: "First Ascent",
      title: "Equity & Growth Awards",
      path: "/recognition/first-ascent",
      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. 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.',
    },
    {
      year: "2024",
      yearSub: "Student-Produced",
      title: "Student Documentary",
      path: "/recognition/documentary",
      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 when they were freshmen until their graduation in 2026. The current principal, Jordan Kruger, and assistant principal of academics, Lisette Hernandez, also appear in the video.",
    },
    {
      year: "2022",
      yearSub: "NIU Award",
      title: "Exemplary Student Teacher",
      path: "/recognition/exemplary",
      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.",
    },
  ];

  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Recognition" }]}
        title="Recognition"
        subtitle="Recognition I've received from students, colleagues, and my teacher-prep institution."
      />
      <div className="container">
        {awards.map((a) => (
          <a
            key={a.path}
            href={`#${a.path}`}
            className="award-card"
            onClick={(e) => {
              e.preventDefault();
              onNav(a.path);
            }}
            style={{ display: "grid", textDecoration: "none", color: "#111" }}
          >
            <div>
              <div className="year">
                {a.year}
                <small>{a.yearSub}</small>
              </div>
            </div>
            <div>
              <h3>{a.title}</h3>
              <p style={{ fontSize: 16, color: "#3a3a3a", maxWidth: "62ch" }}>
                {a.body}
              </p>
              <div
                style={{
                  marginTop: 20,
                  fontFamily: "'Oswald', Arial",
                  fontSize: 13,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                }}
              >
                Read the artifact →
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

/* ---- Planning Page ---- */
function PlanningPage({ onNav }) {
  const items = [
    {
      path: "/artifact/unit-standards",
      type: "PDF",
      title: "World Lit Q1 LTP — Unit Standards",
      meta: "Common Core / CCRS (ACT) mapping · SY26",
    },
    {
      path: "/artifact/units-at-glance",
      type: "PDF",
      title: "Units at a Glance — S1 SY26",
      meta: "Quarter-by-quarter unit architecture",
    },
    {
      path: "/artifact/vision-classroom",
      type: "PDF",
      title: "Vision of Classroom Structure",
      meta: "Routines, procedures, and roles",
    },
  ];
  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Planning" }]}
        title="Standards Aligned Backwards Planning"
        subtitle='In these artifacts, I have included my unit plans for Q1 SY25-26. In it, I have outlined the Common Core and ACT standards that were taught and assessed in the first unit. Additionally, I have included the overall structure of the unit and featured texts and activities with "Units at a Glance." In Vision of Classroom Structures, I have laid out the routines and procedures that were present in my classroom day-to-day.'
      />
      <div className="container">
        <div className="split">
          <div className="sticky">Artifacts · 3</div>
          <div>
            <div className="artifact-list">
              {items.map((i) => (
                <a
                  key={i.path}
                  href={`#${i.path}`}
                  className="artifact-row"
                  onClick={(e) => {
                    e.preventDefault();
                    onNav(i.path);
                  }}
                >
                  <span className="file-type">{i.type}</span>
                  <div>
                    <h3>{i.title}</h3>
                    <div className="meta">{i.meta}</div>
                  </div>
                  <span className="go">Open →</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Curriculum Page ---- */
function CurriculumPage({ onNav }) {
  const groups = [
    {
      heading: "Scaffolding Difficult Texts: Othello",
      blurb: "I am passionate about providing students with exposure to texts that will challenge them. When I started at Speer, I pushed for a Shakespeare text to be included in the curriculum. Since that first year, I have continued to teach Othello to sophomores and it has become standard in the 10th grade curriculum. I have included two materials that I have created that demonstrate classroom structures and activities that I use to help students access more challenging texts.",
      items: [
        {
          path: "/artifact/othello-notebook",
          type: "PDF",
          title: "KB Othello Notebook \u201925",
          meta: "Student-facing notes and scaffolds",
        },
        {
          path: "/artifact/othello-act-it-out",
          type: "PDF",
          title: "Othello II,iii Act It Out Packet",
          meta: "Project · Small-group performance",
        },
      ],
    },
    {
      heading: "Classroom Discussion Structures",
      blurb:
        "In my English and World Literature classes, I prioritize activities that allow for discussion and verbal participation. As I continue to grow as an educator, I have worked to improve my classroom structures and procedures to help encourage and track student participation. In Fall of 2025, I led a professional development with 2 other colleagues about supporting student discussion in classrooms across subjects. I have included artifacts that show types of discussion models that I use in my classroom.",
      items: [
        {
          path: "/artifact/sticky-note",
          type: "PDF",
          title: "Sticky Note Discussion Expectations",
          meta: "Small-group → whole-class accountability",
        },
        {
          path: "/artifact/3-questions",
          type: "PDF",
          title: "3 Questions Class Structure",
          meta: "Consensus-building for honors classes",
        },
        {
          path: "/artifact/oedipus-jigsaw",
          type: "PDF",
          title: "Oedipus Rex Theme Jigsaw",
          meta: "Multi-perspective group work",
        },
      ],
    },
    {
      heading: "Socratic Seminars",
      blurb:
        "I really enjoy Socratic Seminars because it really shifts the conversation onto the students exclusively. Over the past school year, I have worked to provide more supports to help socratic seminars run smoothly with more students supporting their ideas with evidence from the text. I have included the following artifacts to show how I have adapted my materials to support stronger seminars.",
      items: [
        {
          path: "/artifact/mg-prework",
          type: "PDF",
          title: "Prework",
          meta: "Evidence prompts with page-number requirement",
        },
        {
          path: "/artifact/student-tracking",
          type: "PDF",
          title: "Student Tracking",
          meta: "Outside-circle participation + self-assessment",
        },
        {
          path: "/artifact/teacher-tracking",
          type: "PDF",
          title: "Teacher Tracking",
          meta: "Real-time symbol-based participation grading",
        },
      ],
    },
    {
      heading: "ACT Content",
      blurb: "In addition to Common Core, I have aligned my curriculum to include ACT standards practice. I have provided artifacts that show the variety of activities that I have used to practice ACT skills with my students.",
      items: [
        {
          path: "/artifact/act-do-now",
          type: "SLIDES",
          title: "ACT 2-Tiered Do Now",
          meta: "Daily skill warmup",
        },
        {
          path: "/artifact/oedipus-embed",
          type: "PDF",
          title: "Oedipus Rex Text + Embedded Questions",
          meta: "Student-facing SY26",
        },
        {
          path: "/artifact/skills-check",
          type: "PDF",
          title: "5.7 WL10 Skills Check",
          meta: "Interim skill check",
        },
      ],
    },
    {
      heading: "Writing Supports (IEP+ML + Gen Ed + Honors)",
      blurb: "I have included these artifacts to show who I have created materials to show how I have created scaffolds and accommodations to help support students in their writing. In these samples, I demonstrate how I accommodate students who need clear directions and graphic organizers and how I differentiate between a general education and honors course prompt. I have students write on paper in their outlines and rough drafts so that I can track student progress throughout the class periods and to track their progress to cut down on the use of generative AI.",
      items: [
        {
          path: "/artifact/othello-essay-accommodated",
          type: "PDF",
          title: "Othello Analytical Essay — Accommodated (IEP+ML)",
          meta: "SY24 · IEP and multilingual learner version",
        },
        {
          path: "/artifact/othello-essay-gened",
          type: "PDF",
          title: "Othello Analytical Essay — Gen Ed (SY26)",
          meta: "SY26 · General education version",
        },
        {
          path: "/artifact/othello-essay-honors",
          type: "PDF",
          title: "Othello Analytical Essay — Honors (SY26)",
          meta: "SY26 · Honors version",
        },
      ],
    },
  ];

  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Curriculum" }]}
        title="Created Content and Curriculum"
        subtitle="Scaffolded texts, discussion structures, ACT skill work, and differentiated writing supports built for my classes at Speer."
      />
      <div className="container">
        {groups.map((g, idx) => (
          <div
            className="split"
            key={idx}
            style={idx === groups.length - 1 ? { borderBottom: "none" } : null}
          >
            <div className="sticky">
              {String(idx + 1).padStart(2, "0")} · {g.heading.split(":")[0]}
            </div>
            <div>
              <h2>{g.heading}</h2>
              {g.blurb && (
                <p
                  style={{
                    color: "#3a3a3a",
                    maxWidth: "62ch",
                    marginBottom: 24,
                  }}
                >
                  {g.blurb}
                </p>
              )}
              <div className="artifact-list">
                {g.items.map((i) => (
                  <a
                    key={i.path}
                    href={`#${i.path}`}
                    className="artifact-row"
                    onClick={(e) => {
                      e.preventDefault();
                      onNav(i.path);
                    }}
                  >
                    <span className="file-type">{i.type}</span>
                    <div>
                      <h3>{i.title}</h3>
                      <div className="meta">{i.meta}</div>
                    </div>
                    <span className="go">Open →</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- Data Page ---- */
function DataPage({ onNav }) {
  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Data" }]}
        title="Data Analysis & Results"
        subtitle="Student outcomes from SY25 and data-driven instruction artifacts from SY26."
      />
      <div className="container">
        <div className="split">
          <div className="sticky">SY25 · ACT Scores</div>
          <div>
            <h2>SY25 ACT Scores & Growth</h2>
            <p style={{ color: "#3a3a3a", maxWidth: "62ch" }}>
              In 2024–2025, my classes were top 3 in the Noble Network for ACT
              growth across multiple student subgroups. The summary below
              reflects that year's results.
            </p>

            <div className="stat-grid">
              <div className="stat">
                <div className="num">Top 3</div>
                <div className="label">
                  <strong>Network Growth</strong>ACT score growth across Noble
                  Network, 2024–2025
                </div>
              </div>
<div className="stat">
                <div className="num">14.1</div>
                <div className="label">
                  <strong>Avg. ACT Score</strong>vs. 15 college readiness benchmark
                </div>
              </div>
              <div className="stat">
                <div className="num">2</div>
                <div className="label">
                  <strong>First Ascent Awards</strong>Equity · Growth
                </div>
              </div>
            </div>

            <h3 style={{ marginTop: 56 }}>
              SY25 ACT English Scores by Section
            </h3>
            {(() => {
              const MAX = 18;
              const REF = 14.1;
              const rows = [
                {
                  label: "Period 1",
                  course: "Honors World Literature",
                  score: 16.7,
                  honors: true,
                },
                {
                  label: "Period 3",
                  course: "Honors World Literature",
                  score: 15.8,
                  honors: true,
                },
                {
                  label: "Period 4",
                  course: "World Literature",
                  score: 12.0,
                  honors: false,
                },
                {
                  label: "Period 5",
                  course: "World Literature",
                  score: 11.0,
                  honors: false,
                },
                {
                  label: "Total",
                  course: "",
                  score: 14.1,
                  honors: false,
                  isTotal: true,
                },
              ];
              return (
                <div style={{ marginTop: 16 }}>
                  {/* Legend */}
                  <div
                    style={{
                      display: "flex",
                      gap: 24,
                      marginBottom: 16,
                      fontFamily: "'Oswald', Arial",
                      fontSize: 12,
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                    }}
                  >
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 6 }}
                    >
                      <div
                        style={{
                          width: 14,
                          height: 14,
                          background: "#4472C4",
                          borderRadius: 2,
                        }}
                      />
                      Honors World Literature
                    </div>
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 6 }}
                    >
                      <div
                        style={{
                          width: 14,
                          height: 14,
                          background: "#ED7D31",
                          borderRadius: 2,
                        }}
                      />
                      World Literature
                    </div>
                  </div>
                  {/* Chart */}
                  <div style={{ position: "relative" }}>
                    {rows.map((r, i) => (
                      <div
                        key={i}
                        style={{
                          display: "grid",
                          gridTemplateColumns: "160px 1fr 40px",
                          alignItems: "center",
                          gap: 12,
                          padding: "5px 0",
                          borderTop: r.isTotal ? "1px solid #ccc" : "none",
                          marginTop: r.isTotal ? 4 : 0,
                        }}
                      >
                        <div
                          style={{
                            fontSize: 13,
                            color: "#3a3a3a",
                            lineHeight: 1.3,
                          }}
                        >
                          {r.label}
                          {r.course && (
                            <div
                              style={{
                                fontSize: 11,
                                color: "#6b6b6b",
                                fontFamily: "'Oswald', Arial",
                                textTransform: "uppercase",
                                letterSpacing: "0.08em",
                              }}
                            >
                              {r.course}
                            </div>
                          )}
                        </div>
                        <div style={{ position: "relative", height: 28 }}>
                          {/* Reference line */}
                          <div
                            style={{
                              position: "absolute",
                              left: (REF / MAX) * 100 + "%",
                              top: 0,
                              bottom: 0,
                              width: 1,
                              borderLeft: "1.5px dashed #aaa",
                              zIndex: 2,
                            }}
                          />
                          {/* Bar */}
                          <div
                            style={{
                              position: "absolute",
                              top: 4,
                              bottom: 4,
                              left: 0,
                              width: (r.score / MAX) * 100 + "%",
                              background: r.honors ? "#4472C4" : "#ED7D31",
                              borderRadius: 2,
                              transition: "width 0.6s ease",
                            }}
                          />
                        </div>
                        <div
                          style={{
                            fontSize: 13,
                            fontFamily: "'Oswald', Arial",
                            fontWeight: 500,
                            color: "#111",
                          }}
                        >
                          {r.score}
                        </div>
                      </div>
                    ))}
                  </div>
                  <p
                    style={{
                      fontSize: 12,
                      color: "#6b6b6b",
                      marginTop: 12,
                      fontFamily: "'Oswald', Arial",
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                    }}
                  >
                    Post ACT10 · All breakout groups · Dashed line = total
                    average (14.1)
                  </p>
                </div>
              );
            })()}

            <h3 style={{ marginTop: 56 }}>
              SY25 ACT English Growth by Section
            </h3>
            {(() => {
              const MAX = 4.0;
              const rows = [
                {
                  label: "Period 1",
                  course: "Honors World Literature",
                  score: 3.8,
                  color: "#4472C4",
                },
                {
                  label: "Period 3",
                  course: "Honors World Literature",
                  score: 2.9,
                  color: "#4472C4",
                },
                {
                  label: "Period 4",
                  course: "World Literature",
                  score: 1.7,
                  color: "#9DC3C1",
                },
                {
                  label: "Period 5",
                  course: "World Literature",
                  score: 0.9,
                  color: "#ED7D31",
                },
              ];
              return (
                <div style={{ marginTop: 16 }}>
                  <div
                    style={{
                      display: "flex",
                      gap: 24,
                      marginBottom: 16,
                      fontFamily: "'Oswald', Arial",
                      fontSize: 12,
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                    }}
                  >
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 6 }}
                    >
                      <div
                        style={{
                          width: 14,
                          height: 14,
                          background: "#4472C4",
                          borderRadius: 2,
                        }}
                      />
                      Honors World Literature
                    </div>
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 6 }}
                    >
                      <div
                        style={{
                          width: 14,
                          height: 14,
                          background: "#9DC3C1",
                          borderRadius: 2,
                        }}
                      />
                      World Literature
                    </div>
                  </div>
                  <div>
                    {rows.map((r, i) => (
                      <div
                        key={i}
                        style={{
                          display: "grid",
                          gridTemplateColumns: "160px 1fr 40px",
                          alignItems: "center",
                          gap: 12,
                          padding: "5px 0",
                        }}
                      >
                        <div
                          style={{
                            fontSize: 13,
                            color: "#3a3a3a",
                            lineHeight: 1.3,
                          }}
                        >
                          {r.label}
                          <div
                            style={{
                              fontSize: 11,
                              color: "#6b6b6b",
                              fontFamily: "'Oswald', Arial",
                              textTransform: "uppercase",
                              letterSpacing: "0.08em",
                            }}
                          >
                            {r.course}
                          </div>
                        </div>
                        <div style={{ position: "relative", height: 28 }}>
                          <div
                            style={{
                              position: "absolute",
                              top: 4,
                              bottom: 4,
                              left: 0,
                              width: (r.score / MAX) * 100 + "%",
                              background: r.color,
                              borderRadius: 2,
                              transition: "width 0.6s ease",
                            }}
                          />
                        </div>
                        <div
                          style={{
                            fontSize: 13,
                            fontFamily: "'Oswald', Arial",
                            fontWeight: 500,
                            color: "#111",
                          }}
                        >
                          {r.score}
                        </div>
                      </div>
                    ))}
                  </div>
                  {/* X-axis */}
                  <div
                    style={{
                      display: "grid",
                      gridTemplateColumns: "160px 1fr 40px",
                      gap: 12,
                      marginTop: 4,
                    }}
                  >
                    <div />
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        fontFamily: "'Oswald', Arial",
                        fontSize: 11,
                        color: "#6b6b6b",
                        letterSpacing: "0.08em",
                      }}
                    >
                      {[0.0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0].map(
                        (v) => (
                          <span key={v}>{v.toFixed(1)}</span>
                        ),
                      )}
                    </div>
                    <div />
                  </div>
                  <p
                    style={{
                      fontSize: 12,
                      color: "#6b6b6b",
                      marginTop: 12,
                      fontFamily: "'Oswald', Arial",
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                    }}
                  >
                    ACT10 growth · English · Breakout group 10
                  </p>
                </div>
              );
            })()}
          </div>
        </div>

        <div className="split">
          <div className="sticky">Data-Driven Instruction</div>
          <div>
            <h2>Data Analysis for Data Driven Instruction</h2>
            <p style={{ color: "#3a3a3a", maxWidth: "62ch" }}>
              Noble has students take quarterly interim exams to track progress of ACT skills. I have attached artifacts that show an interim analysis that I completed where I analyzed student performance and created a plan with my colleague to reteach and review parallel structure (SST 701) based on students' misconceptions in conjunction with colon usage (PUN 502), which was next on our network ACT skill pacing plan.
            </p>
            <div className="artifact-list">
              <a
                href="#/artifact/interim-analysis"
                className="artifact-row"
                onClick={(e) => {
                  e.preventDefault();
                  onNav("/artifact/interim-analysis");
                }}
              >
                <span className="file-type">Sheets</span>
                <div>
                  <h3>English SY26 SM2 Interim Analysis</h3>
                  <div className="meta">
                    Standards-level breakdown · Action steps per section
                  </div>
                </div>
                <span className="go">Open →</span>
              </a>
              <a
                href="#/artifact/parallel-structure"
                className="artifact-row"
                onClick={(e) => {
                  e.preventDefault();
                  onNav("/artifact/parallel-structure");
                }}
              >
                <span className="file-type">PDF</span>
                <div>
                  <h3>Parallel Structure Re-Teach</h3>
                  <div className="meta">
                    Targeted lesson built from interim analysis
                  </div>
                </div>
                <span className="go">Open →</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Resume Page ---- */
function ResumePage({ onNav }) {
  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Resume" }]}
        title="Resume"
      />
      <div className="container">
        <div className="article">
          <div className="embed-shell">
            <iframe
              src="assets/resume.pdf"
              style={{ width: '100%', height: '100%', border: 'none' }}
              title="Kade Bennett Resume"
            />
          </div>
          <div style={{ marginTop: 32, paddingTop: 32, borderTop: '1px solid #111' }}>
            <a
              href="assets/resume.pdf"
              target="_blank"
              rel="noopener noreferrer"
              style={{ fontFamily: "'Oswald', Arial", fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase' }}
            >Open PDF →</a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Letters of Support Page ---- */
function LettersPage({ onNav }) {
  const letters = [
    {
      name: 'Elise Sivaja',
      title: 'Co-planning Teacher, Interim Dean of Instruction English',
      years: '2023, 2024',
      file: 'assets/lor-sivaja.pdf',
    },
    {
      name: 'Elizabeth Scriven',
      title: 'Cooperating Teacher',
      years: '',
      file: 'assets/lor-scriven.pdf',
    },
  ];
  return (
    <div>
      <PageHead
        crumbs={[{ label: 'Home', path: '/' }, { label: 'Letters of Support' }]}
        title="Letters of Support"
      />
      <div className="container">
        {letters.map((l, idx) => (
          <div className="split" key={idx} style={idx === letters.length - 1 ? { borderBottom: 'none' } : null}>
            <div className="sticky">
              <div style={{ fontWeight: 600 }}>{l.name}</div>
              <div style={{ fontSize: 13, color: '#6b6b6b', marginTop: 4 }}>{l.title}{l.years ? ` · ${l.years}` : ''}</div>
            </div>
            <div className="article" style={{ paddingTop: 0 }}>
              <div className="embed-shell">
                <iframe src={l.file} style={{ width: '100%', height: '100%', border: 'none' }} title={`Letter from ${l.name}`} />
              </div>
              <div style={{ marginTop: 24 }}>
                <a href={l.file} target="_blank" rel="noopener noreferrer"
                   style={{ fontFamily: "'Oswald', Arial", fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                  Open PDF →
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- Contact Page ---- */
function ContactPage({ onNav }) {
  const [copied, setCopied] = React.useState(false);
  const email = 'kade.matthew.bennett@gmail.com';

  const copyEmail = () => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 2000); };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(email).then(done).catch(() => fallback());
    } else {
      fallback();
    }
    function fallback() {
      const el = document.createElement('textarea');
      el.value = email;
      el.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
      document.body.appendChild(el);
      el.focus(); el.select();
      try { document.execCommand('copy'); done(); } catch(e) {}
      document.body.removeChild(el);
    }
  };

  return (
    <div>
      <PageHead
        crumbs={[{ label: "Home", path: "/" }, { label: "Contact" }]}
        title="Contact"
        subtitle="Reach out about collaboration, professional development, curriculum, or just to say hello."
      />
      <div className="container">
        <div className="contact-single">

          <button
            onClick={copyEmail}
            title="Copy email address"
            style={{
              display: 'inline-flex',
              alignItems: 'baseline',
              gap: 10,
              background: 'none',
              border: 'none',
              padding: 0,
              cursor: 'pointer',
              textAlign: 'left',
              fontSize: 'clamp(20px, 4vw, 56px)',
            }}
          >
            <span className="email-xl">
              kade.matthew.bennett@gmail.com
            </span>
            <span style={{
              display: 'inline-flex',
              alignItems: 'center',
              color: copied ? '#2a7a4f' : '#6b6b6b',
              transition: 'color 0.2s ease',
              fontSize: 'inherit',
              lineHeight: 1,
            }}>
              {copied ? (
                <svg width="0.6em" height="0.6em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              ) : (
                <svg width="0.6em" height="0.6em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                </svg>
              )}
            </span>
          </button>

          <ul className="contact-list">
            <li>
              <span className="k">School</span>
              <span className="v">ITW David Speer Academy</span>
            </li>
            <li>
              <span className="k">Network</span>
              <span className="v">Noble Network of Charter Schools</span>
            </li>
            <li>
              <span className="k">City</span>
              <span className="v">Chicago, IL</span>
            </li>
            <li>
              <span className="k">LinkedIn</span>
              <span className="v">
                <a href="https://www.linkedin.com/in/kadebennett/" target="_blank" rel="noopener noreferrer">/in/kadebennett</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ProfilePage,
  PhilosophyPage,
  ResumePage,
  LettersPage,
  RecognitionPage,
  PlanningPage,
  CurriculumPage,
  DataPage,
  ContactPage,
  PageHead,
});