/* global React, NAV_ITEMS */
// Homepage with 3 hero variations + sections index

function HeroA({ onNav }) {
  return (
    <section className="hero hero-a">
      <div className="container">
        <div className="grid">
          <div>
            <div className="kicker">Teaching Portfolio · SY 2026</div>
            <h1>Kade<br/>Bennett</h1>
            <p className="intro">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 className="intro">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 className="intro">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 className="intro">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>
            <dl className="meta">
              <div>
                <dt>Role</dt>
                <dd>10th Grade English &<br/>World Literature</dd>
              </div>
              <div>
                <dt>License</dt>
                <dd>Illinois PEL,<br/>English 9–12</dd>
              </div>
              <div>
                <dt>Location</dt>
                <dd>Chicago, IL</dd>
              </div>
            </dl>
          </div>
          <div className="portrait-frame">
            <img src="assets/kade-portrait.jpeg" alt="Kade Bennett" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroB({ onNav }) {
  return (
    <section className="hero hero-b">
      <div className="portrait-bleed" />
      <div className="portrait-label">[ Classroom / portrait photograph ]</div>
      <div className="container">
        <div className="eyebrow">Teaching Portfolio · Since 2022</div>
        <h1 style={{marginTop:20}}>Kade<br/>Bennett</h1>
        <p className="tagline">
          Building curriculum, discussion, and data practice for 10th grade English & World Literature
          at ITW David Speer Academy.
        </p>
      </div>
    </section>
  );
}

function HeroC({ onNav }) {
  return (
    <section className="hero hero-c">
      <div className="container">
        <div className="statement">
          Teaching<br/>
          <span className="em">English, </span>
          evidence,<br/>
          and the <a href="#/philosophy" onClick={(e)=>{e.preventDefault();onNav('/philosophy');}}>habits</a><br/>
          of careful reading.
        </div>
        <div className="bottom-row">
          <div className="portrait-small">
            <img src="assets/kade-portrait.jpeg" alt="Kade Bennett" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center top', display:'block'}} />
          </div>
          <p className="intro">
            Kade Bennett is an English teacher at ITW David Speer Academy in Chicago.
            Since 2022 he has taught 10th grade English and World Literature — general
            education and honors — with a focus on standards-aligned planning, classroom
            discussion, and data-driven instruction.
          </p>
        </div>
      </div>
    </section>
  );
}

const SECTION_CARDS = [
  { num: '02', path: '/philosophy',  title: 'Teaching Philosophy',
    blurb: 'The beliefs and commitments that shape what happens in the classroom.' },
  { num: '03', path: '/recognition', title: 'Recognition',
    blurb: 'Student-produced documentary, First Ascent awards, Exemplary Student Teacher.' },
  { num: '04', path: '/planning',    title: 'Standards-Aligned Planning',
    blurb: 'Backwards planning from Common Core / CCRS (ACT) to unit plans.' },
  { num: '05', path: '/curriculum',  title: 'Created Content and Curriculum',
    blurb: 'Scaffolded texts, discussion structures, ACT content, writing supports.' },
  { num: '06', path: '/data',        title: 'Data Analysis & Results',
    blurb: 'SY25 ACT scores, network-leading growth, data-driven instruction cycles.' },
  { num: '07', path: '/resume',      title: 'Resume',
    blurb: 'Full resume for SY 2026.' },
  { num: '08', path: '/letters',     title: 'Letters of Support',
    blurb: 'Letters from cooperating teacher and colleagues at Speer.' },
  { num: '09', path: '/contact',     title: 'Contact',
    blurb: 'Get in touch about collaboration, PD, or curriculum.' },
];


function Sections({ onNav }) {
  return (
    <section className="sections-index">
      <div className="container">
        <div className="head">
          <h2>The Portfolio</h2>
          <div style={{
            fontFamily: "'Oswald', Arial",
            fontSize: 12,
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            color: '#6b6b6b'
          }}>Six sections · Artifacts inside</div>
        </div>
        <div className="sections-grid">
          {SECTION_CARDS.map(s => (
            <a key={s.path} href={`#${s.path}`} className="section-card"
               onClick={(e) => { e.preventDefault(); onNav(s.path); }}>
              <div className="num">Section {s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.blurb}</p>
              <span className="arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedStrip({ onNav }) {
  return (
    <section className="block featured-strip" style={{borderBottom: '1px solid #e6e6e6'}}>
      <div className="container">
        <div className="featured-grid">
          <div>
            <div className="eyebrow" style={{color:'#6b6b6b'}}>Featured</div>
            <h2 style={{textTransform:'uppercase', marginTop:16}}>Recent<br/>Recognition</h2>
          </div>
          <div>
            <div style={{borderTop:'1px solid #111'}}>
              <a href="#/recognition/documentary" className="artifact-row" onClick={(e)=>{e.preventDefault();onNav('/recognition/documentary');}}>
                <span className="file-type">2024 · Video</span>
                <div>
                  <h3>Student-Produced Documentary</h3>
                  <div className="meta">Class of 2026 · Principal Jordan Kruger, Asst. Principal Lisette Hernandez</div>
                </div>
                <span className="go">View →</span>
              </a>
              <a href="#/recognition/first-ascent" className="artifact-row" onClick={(e)=>{e.preventDefault();onNav('/recognition/first-ascent');}}>
                <span className="file-type">2025 · Award</span>
                <div>
                  <h3>First Ascent — Equity & Growth</h3>
                  <div className="meta">Top 3 in the Noble Network for ACT growth</div>
                </div>
                <span className="go">View →</span>
              </a>
              <a href="#/recognition/exemplary" className="artifact-row" onClick={(e)=>{e.preventDefault();onNav('/recognition/exemplary');}}>
                <span className="file-type">2022 · Award</span>
                <div>
                  <h3>Exemplary Student Teacher</h3>
                  <div className="meta">NIU English Secondary Ed · Amboy High School</div>
                </div>
                <span className="go">View →</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ onNav, hero }) {
  return (
    <div>
      {hero === 'a' && <HeroA onNav={onNav} />}
      {hero === 'b' && <HeroB onNav={onNav} />}
      {hero === 'c' && <HeroC onNav={onNav} />}
      <Sections onNav={onNav} />
      <FeaturedStrip onNav={onNav} />
    </div>
  );
}

Object.assign(window, { Home });