// sections/Past.jsx — honest skeleton: real beats only, write-ups to come.
function PastSection({ editorialStyle }) {
  return (
    <div className="fade-key" data-screen-label="Side A · The Past">
      <SectionMast section={SECTIONS[0]} subtitle="Where I came from: before industrial design, and the bachelor years before the FBP." />

      {/* A1 · Before ID */}
      <div className="g-split" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)',
        gap: 56,
        padding: '12px 0 56px'
      }}>
        <div>
          <LinerLabel chip={SECTIONS[0].accent}>A1 · Before ID</LinerLabel>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 38,
            fontWeight: 700,
            lineHeight: 1.05,
            letterSpacing: '-0.025em',
            color: 'var(--c-smoke)',
            marginBottom: 18
          }}>
            Where I came from
          </h2>
          <p data-prose>I had a relatively artsy upbringing; my mother is a goldsmith, which gave me artisan activities early in life. My dad is an engineer turned manager, so my path sits between the two: I started ID as the connection of art and engineering, and now want to move toward a creative approach to management.</p>
          <p data-prose>Year 1 was my breaking point, facing my flaws head-on; in year 2 I worked on fixing them and finding a vision, while my work drew me toward societal problems; year 3 continued that line while I kept addressing my shortcomings, without fully fixing them.</p>
        </div>

        <div>
          <EvidenceSlot id="past-origin" height={300} caption="Looking Back" />
        </div>
      </div>

      {/* A2 · Timeline */}
      <div style={{ padding: '8px 0 64px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28 }}>
          <LinerLabel chip={SECTIONS[0].accent}>A2 · Timeline</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' }}>
            to 2026
          </div>
        </div>

        <Timeline accent={SECTIONS[0]} events={[
        { year: 'Early', label: 'Craft', body: 'Artisan work at my mother\'s goldsmith bench.' },
        { year: 'High School', label: 'Breadth', body: 'Graduated high school with ten subjects.' },
        { year: '2023 Sep', label: 'TU/e', body: 'Started Industrial Design, drawn in by an interest in car design.' },
        { year: 'Q3 23/24', label: 'CONTENTNESS', body: 'Creative programming was the first course where I was truly content with my work.' },
        { year: 'Q1 24/25', label: 'Aesthetics of Interaction', body: 'Discovered my passion for interaction design, and wrote my first coherent vision around this' },
        { year: 'Q1-Q2 24/25', label: 'Gondry', body: 'First time doing a well defined project about a societal problem' },
        { year: 'Q3 24/25', label: 'Designing Connected Experiences', body: 'Learning OOCSI and making system diagrams' },
        { year: 'Q4 24/25', label: 'Designing Actuated Systems', body: 'CAD modeling and first time using ML in prototype' },
        { year: 'Q1-Q2 25/26', label: 'CROW Internship', body: 'Visiting stakeholders, working in multifaceted stakeholder groups and making a document that will be published' }]
        } />
      </div>

    </div>);

}

function Timeline({ events, accent }) {
  const chip = accent && accent.accent || 'var(--p-sage)';
  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        position: 'absolute',
        left: 8, top: 8, bottom: 8,
        width: 1, background: 'var(--c-border)'
      }}></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {events.map((e, i) =>
        <div key={i} style={{
          display: 'grid',
          gridTemplateColumns: '90px 1fr',
          gap: 24,
          alignItems: 'baseline',
          position: 'relative',
          paddingLeft: 36
        }}>
            <div style={{
            position: 'absolute',
            left: 3, top: 7,
            width: 11, height: 11,
            background: e.todo ? 'transparent' : chip,
            border: e.todo ? '1.5px solid var(--c-muted)' : 'none'
          }}></div>
            <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 21,
            fontWeight: 700,
            color: e.todo ? 'var(--c-muted)' : 'var(--c-smoke)',
            letterSpacing: '-0.02em',
            gridColumn: '1'
          }}>
              {e.year}
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', color: e.todo ? 'var(--c-muted)' : 'var(--ink-sage)', textTransform: 'uppercase', marginBottom: 6 }}>
                {e.label}
              </div>
              <div data-noword={e.todo ? 'true' : undefined} style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: e.todo ? 'var(--ink-butter)' : 'var(--c-cream)', lineHeight: 1.65 }}>
                {e.body}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

window.PastSection = PastSection;

function SectionMast({ section, subtitle }) {
  return (
    <section style={{ position: 'relative', padding: '72px 0 40px' }}>
      <LinerLabel chip={section.accent}>{section.eyebrow}</LinerLabel>
      <h1 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(3.2rem, 8vw, 5.5rem)',
        fontWeight: 700,
        lineHeight: 0.96,
        letterSpacing: '-0.035em',
        color: 'var(--c-smoke)',
        marginBottom: 20
      }}>
        {section.title}
      </h1>
      <p style={{
        fontFamily: 'var(--font-body)',
        fontSize: 17,
        color: 'var(--c-whisper)',
        maxWidth: '54ch',
        lineHeight: 1.65
      }}>
        {subtitle}
      </p>
    </section>);

}
window.SectionMast = SectionMast;