// sections/Present.jsx — the FBP (Elenchus), expertise areas, growth.
// Honest skeleton: facts from the report stay; reflections are Todo slots.

function PresentSection({ editorialStyle }) {
  const ACC = SECTIONS[1].accent;
  const ACC_INK = SECTIONS[1].accentInk;
  return (
    <div className="fade-key" data-screen-label="Side B · The Present">
      <SectionMast section={SECTIONS[1]} subtitle="My progress over the years and reflecting on my FBP. It has been a real journey." />

      {/* B2 · Self-ranked competence — shift across portfolios */}
      <div style={{ padding: '8px 0 56px', borderTop: '1px solid var(--c-border)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8, paddingTop: 24 }}>
          <LinerLabel chip={ACC}>B2 · Self-Ranked Competence · The Shift</LinerLabel>
          <div style={{ flex: 1, height: 1, background: 'var(--c-border)', marginBottom: 10 }}></div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--c-muted)', textTransform: 'uppercase' }}>
            Four snapshots
          </div>
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 12, marginTop: 8, maxWidth: '24ch' }}>
          How my emphasis moved
        </h3>
        <p data-prose style={{ marginBottom: 22 }}>How I rank the five expertise areas against each other has shifted from year to year. Step through the snapshots: Year 1, Year 2, B3.1 to now or hover an area to follow its line: MDC works its way to the top while T&R, after holding the lead for three years, eases into second.</p>
        <RankShift />
        <p data-prose style={{ marginTop: 22 }}>MDC moved to the front this year because it is where I resonate most, especially through my FBP. However, it is a home base rather than where I want to stay. T&amp;R held the lead for three years, but I have started moving away from specializing in it towards using T&amp;R and MDC as a framing for problems on a societal scale. That shift is the direction I am carrying into my master's.</p>
      </div>

      {/* B3 · Expertise meters — at-a-glance summary */}
      <div style={{ padding: '8px 0 56px', borderTop: '1px solid var(--c-border)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8, paddingTop: 24 }}>
          <LinerLabel chip={ACC}>B3 · Five Expertise Areas · Overview</LinerLabel>
          <div style={{ flex: 1, height: 1, background: 'var(--c-border)', marginBottom: 10 }}></div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--c-muted)', textTransform: 'uppercase' }}>
            Self-assessed
          </div>
        </div>
        <p data-noword="true" style={{ maxWidth: '62ch' }}>A summary of where each expertise area sits at the end of the bachelor, drawn from the self-assessments in the write-ups below. All sit at a decent level; the meters and ranking show how they compare.</p>

        <div style={{ marginTop: 18 }}>
          <ExpertiseMeters expertise={EXPERTISE} />
        </div>
      </div>

      {/* B3 — B7 · Per-expertise dedicated sections */}
      {EXPERTISE_LONG.map((ea, i) =>
      <ExpertiseSection key={ea.id} index={i + 4} area={ea} />
      )}

      {/* B9 · Design-Research Process */}
      <div style={{ padding: '32px 0 56px', borderTop: '1px solid var(--c-border)' }}>
        <LinerLabel chip={ACC}>B9 · Design-Research Process</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 18, marginTop: 8, maxWidth: '24ch' }}>
          How I run a project
        </h3>
        <div className="g-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 56 }}>
          <div style={{ maxWidth: '62ch' }}>
            <p data-prose>My FBP was also a way to discover and put into words what my process is actually like. Of the processes I have experienced, the RTDP fit best. I am self-reflective in my writing and making, as the EAs show. I am happy with my discipline in bringing coachable material each week, which improved the process and the feedback, since my coach had time to prepare. Next time I want to send it earlier, since I usually send it late the evening before the meeting.</p>
            <p data-prose>DRP is at a similar stage to U&S: I have grown a lot but still have room. I can align with the RTDP, but it is not exactly my process (Hummels & Frens, 2009). I tend to lock onto the next step when I have it in mind and don't explore other options until something forces me to (see Figure 20). In my FBP, coach meetings and expert interviews gave me those alternative perspectives. This is a weak point and shows I still have to discover what my own process is.</p>
            <p data-prose>For my internship I combined the double diamond (Design Council, 2005) with CROW's innovation process, to make it easy to understand for people unfamiliar with design processes while still describing the concept visually (see Figure 21). The next step is to combine two research processes into my own, or build one from scratch, and the best opportunity is the design research project next semester, on my own and with another year of experience.</p>
            <p data-prose>I also prefer working in groups for the opposing perspectives they bring. That points to where I want to head: using expert and stakeholder interviews as a regular source in my projects.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <EvidenceSlot id="process-fig-1" height={200} caption="RTDP process for FBP" />
            <EvidenceSlot id="process-fig-2" height={200} caption="Innovation Process made during internship" />
          </div>
        </div>
      </div>

      {/* B10 · Professional Skills */}
      <div style={{ padding: '32px 0 56px', borderTop: '1px solid var(--c-border)' }}>
        <LinerLabel chip={ACC}>B10 · Professional Skills</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 18, marginTop: 8, maxWidth: '24ch' }}>
          Professional skills
        </h3>
        <div className="g-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 56 }}>
          <div style={{ maxWidth: '62ch' }}>
            <p data-prose>At the start of my bachelor I was insecure about presenting and leading; over the years I gained the confidence to lead groups, and this year became more proactive in contacting stakeholders. Being part of ARTIFICE on the AI debate, I developed a more nuanced understanding of AI and can explain it to a layman. During my internship I visited stakeholders one-on-one to understand their perspective.</p>
            <p data-prose>In my FBP I did 3 expert interviews, which clarified my problem statement and raised their concern that my AI tutor could replace in-person coaching. Their input led me to frame the design as a supportive tool that prepares students for meetings rather than a replacement.</p>
            <p data-prose>Sourcing users for testing remains a weakness. I was not proactive enough recruiting participants, and got no tests done on demo day despite setting up the option. This is on me; it left me unable to test my hypothesis, which breaks the research aspect of my project.</p>
          </div>
          <div>
            <EvidenceSlot id="skills-fig-1" height={200} caption="Presenting during my internship for stakeholders" />
          </div>
        </div>
      </div>

      {/* B12 · Overall Growth */}
      <div style={{ padding: '32px 0 96px', borderTop: '1px solid var(--c-border)' }}>
        <LinerLabel chip={ACC}>B12 · Overall Growth</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 16, maxWidth: '20ch' }}>
          Overall growth
        </h3>
        <div style={{ maxWidth: '64ch' }}>
          <p data-prose>When I started Industrial Design I treated every mistake as a failure, and that perfectionism broke me. I learned how to reframe these mistakes as opportunities for improvement and iteration and this became my core mentality of always wanting to improve, but not blaming myself for every mistake. I became the strongest in T&R and MDC, and I remain confident in integrating this into a project whether it'd be to inform my decision from that perspective or to use it to prototype.</p>
          <p data-prose>I am proud that I deliberately started putting myself in uncomfortable situations to grow and face my fears. As well as the drive to frame problems around core societal needs with U&S, the business and policy interests that I discovered unexpectedly during my internship, and above all else starting to reach out to people for interviews, user tests, and help. Instead of narrowing my world, I am in the process of opening up, and this opening up will form the last keystone for me as a generalist. And this is how I will head into my master's degree.</p>
        </div>
      </div>
    </div>);

}

/* ───────────────────────────────────────────────────────────────────────── */

function ExpertiseSection({ index, area }) {
  const figures = area.figures || [];
  // First N figures sit alongside the prose; the rest spill into a full-width
  // gallery underneath so the layout doesn't end with a long empty left column.
  const ALONGSIDE = Math.min(2, figures.length);
  const alongside = figures.slice(0, ALONGSIDE);
  const below = figures.slice(ALONGSIDE);

  return (
    <div style={{ padding: '32px 0 56px', borderTop: '1px solid var(--c-border)' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 4 }}>
        <LinerLabel chip={SECTIONS[1].accent}>B{index} · Expertise Area</LinerLabel>
        <div style={{ flex: 1, height: 1, background: 'var(--c-border)', marginBottom: 10 }}></div>
      </div>

      <h3 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 34,
        fontWeight: 700,
        lineHeight: 1.05,
        letterSpacing: '-0.025em',
        color: 'var(--c-smoke)',
        marginBottom: 26,
        marginTop: 8
      }}>
        {area.label}
      </h3>

      {/* Top block: prose + first 2 figures alongside */}
      <div className="g-split" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.25fr) minmax(0, 1fr)',
        gap: 48,
        alignItems: 'start'
      }}>
        <div style={{ maxWidth: '58ch' }}>
          {area.paragraphs.map((p, i) =>
          <p key={i} data-prose dangerouslySetInnerHTML={{ __html: p }}></p>
          )}
          {area.todo && <Todo>{area.todo}</Todo>}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {alongside.map((f, i) => f.kind === 'video' ?
          <VideoSlot key={f.id} id={f.id} caption={f.caption} src={f.src} aspect="16/9" /> :
          <EvidenceSlot key={f.id} id={f.id} caption={f.caption} height={210} />)}
        </div>
      </div>

      {/* Overflow gallery: remaining figures span full width below the text */}
      {below.length > 0 &&
      <div className="g-gallery" style={{
        marginTop: 32,
        display: 'grid',
        gridTemplateColumns: `repeat(${Math.min(3, below.length)}, minmax(0, 1fr))`,
        gap: 24
      }}>
          {below.map((f) => f.kind === 'video' ?
        <VideoSlot key={f.id} id={f.id} caption={f.caption} src={f.src} aspect="16/9" /> :
        <EvidenceSlot key={f.id} id={f.id} caption={f.caption} aspect="4/3" />)}
        </div>
      }
    </div>);

}

/* ───────────────────────────────────────────────────────────────────────── */

// Five coarse levels for the self-assessment — clickable so Merijn can set
// each rating directly. Stored per area in localStorage under
// 'expertise-level:<id>' (1–5, or cleared by re-clicking the current level).
const LEVEL_WORDS = ['', 'Emerging', 'Developing', 'Proficient', 'Strong', 'Leading'];

function ExpertiseMeters({ expertise }) {
  const [levels, setLevels] = React.useState(() => {
    const out = {};
    for (const e of expertise) {
      let v = null;
      try {const s = localStorage.getItem('expertise-level:' + e.id);if (s != null) v = parseInt(s, 10);} catch (err) {}
      if (v == null && e.level != null) v = Math.max(1, Math.min(5, Math.round(e.level / 20)));
      out[e.id] = v;
    }
    return out;
  });
  const editable = !!(window.omelette && window.omelette.writeFile);

  const setLevel = (id, v) => {
    setLevels((prev) => {
      const next = prev[id] === v ? null : v; // click the current level again to clear
      try {
        if (next == null) localStorage.removeItem('expertise-level:' + id);else
        localStorage.setItem('expertise-level:' + id, String(next));
      } catch (err) {}
      return { ...prev, [id]: next };
    });
  };

  return (
    <div style={{
      background: '#FFFFFF',
      border: '1px solid var(--c-border)',
      padding: '12px 28px'
    }}>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {expertise.map((e, idx) => {
          const lvl = levels[e.id];
          return (
            <div key={e.id} className="meter-row" style={{
              display: 'grid',
              gridTemplateColumns: '230px 1fr 110px',
              gap: 28,
              alignItems: 'center',
              padding: '16px 0',
              borderBottom: idx < expertise.length - 1 ? '1px solid var(--c-border)' : 'none'
            }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--c-smoke)', letterSpacing: '-0.015em' }}>
                  {e.label}
                </div>
                <div data-noword="true" style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: lvl == null ? 'var(--ink-butter)' : 'var(--c-whisper)', lineHeight: 1.55, marginTop: 4 }}>
                  {e.note}
                </div>
              </div>
              <Meter value={lvl} editable={editable} onSet={(v) => setLevel(e.id, v)} />
              <div data-noword="true" style={{
                fontFamily: 'var(--font-body)',
                fontSize: 12.5,
                fontWeight: 600,
                color: lvl == null ? 'var(--c-muted)' : 'var(--ink-sky)',
                letterSpacing: '0.08em',
                textAlign: 'right',
                textTransform: 'uppercase'
              }}>
                {lvl == null ? '—' : LEVEL_WORDS[lvl]}
              </div>
            </div>);

        })}
      </div>
    </div>);

}

function Meter({ value, editable, onSet }) {
  const segments = 5;
  return (
    <div role={editable ? 'group' : undefined} style={{ display: 'flex', gap: 8, height: 22, alignItems: 'center' }}>
      {Array.from({ length: segments }).map((_, i) => {
        const n = i + 1;
        const active = value != null && n <= value;
        const seg =
        <div style={{
          width: '100%',
          height: 14,
          background: active ? 'var(--p-sky)' : '#EBEFF3',
          border: `1px solid ${active ? '#5E9BD4' : '#DDE3E9'}`,
          transition: 'background 200ms ease-out, border-color 200ms ease-out'
        }}></div>;

        return editable ?
        <button
          key={i}
          type="button"
          onClick={() => onSet(n)}
          title={LEVEL_WORDS[n] + (value === n ? ' · click to clear' : '')}
          style={{ appearance: 'none', border: 0, background: 'transparent', padding: 0, margin: 0, cursor: 'pointer', flex: 1, height: 22, display: 'flex', alignItems: 'center' }}>
          {seg}</button> :

        <div key={i} style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center' }}>{seg}</div>;

      })}
    </div>);

}

window.PresentSection = PresentSection;