// sections/Landing.jsx — index page: hero, PI & Vision, the tracklist.
// v2 "Liner Notes" — the box-set becomes an album-sleeve tracklist.

function LinerLabel({ children, color, chip }) {
  // Small-caps eyebrow with a pastel chip. `color` (legacy) tints the text;
  // `chip` sets the square's fill — falls back to coral.
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 10,
      fontFamily: 'var(--font-body)',
      fontSize: 12,
      fontWeight: 700,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--c-whisper)',
      marginBottom: 16
    }}>
      <div style={{ width: 10, height: 10, background: chip || color || 'var(--p-coral)', flexShrink: 0 }}></div>
      {children}
    </div>);

}

function TrackRow({ section, index, onSelect }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={() => onSelect(section.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        alignItems: 'baseline',
        gap: 16,
        padding: '20px 4px',
        borderBottom: '1px solid var(--c-border)',
        cursor: 'pointer',
        background: hover ? '#FAFBFC' : 'transparent',
        transition: 'background 160ms'
      }}>
      <span style={{
        width: 12, height: 12,
        background: section.accent,
        alignSelf: 'center',
        flexShrink: 0,
        transform: hover ? 'rotate(45deg)' : 'rotate(0deg)',
        transition: 'transform 280ms var(--ease-spring)'
      }}></span>
      <span style={{
        fontFamily: 'var(--font-body)',
        fontSize: 12,
        fontWeight: 600,
        letterSpacing: '0.12em',
        textTransform: 'uppercase',
        color: 'var(--c-whisper)',
        width: 58,
        flexShrink: 0
      }}>Side {section.side}</span>
      <span className="track-title" style={{
        fontFamily: 'var(--font-display)',
        fontSize: 24,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        color: hover ? section.accentInk : 'var(--c-smoke)',
        transition: 'color 160ms',
        whiteSpace: 'nowrap'
      }}>{section.title}</span>
      <span className="desktop-only" style={{
        fontFamily: 'var(--font-body)',
        fontSize: 13.5,
        color: 'var(--c-whisper)',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        minWidth: 0,
        flexShrink: 1
      }}>{section.tagline}</span>
      <span style={{
        flex: 1,
        borderBottom: '1px dotted #C2C8CE',
        transform: 'translateY(-5px)',
        minWidth: 24
      }}></span>
      <span style={{
        fontFamily: 'var(--font-body)',
        fontSize: 12.5,
        color: 'var(--c-whisper)',
        fontVariantNumeric: 'tabular-nums',
        flexShrink: 0
      }}>{String(index + 1).padStart(2, '0')}</span>
      <span style={{
        fontFamily: 'var(--font-body)',
        fontSize: 15,
        color: hover ? section.accentInk : 'var(--c-muted)',
        transform: hover ? 'translateX(4px)' : 'translateX(0)',
        transition: 'transform 200ms var(--ease-spring), color 160ms',
        flexShrink: 0
      }}>→</span>
    </div>);

}

// Flat tape card — the calm descendant of the skeuomorphic cassette.
function TapeCard({ section, onSelect }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={() => onSelect(section.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#FFFFFF',
        border: `1px solid ${hover ? 'var(--c-smoke)' : 'var(--c-border)'}`,
        padding: 22,
        cursor: 'pointer',
        transition: 'border-color 180ms, transform 240ms var(--ease-spring)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        display: 'flex',
        flexDirection: 'column',
        gap: 14
      }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--c-whisper)' }}>
          Side {section.side}
        </span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--c-muted)', letterSpacing: '0.08em' }}>
          {section.type}
        </span>
      </div>

      {/* flat tape: label strip + two line reels */}
      <div style={{ border: '1.5px solid var(--c-smoke)', padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ background: section.accent, padding: '10px 12px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--c-smoke)', lineHeight: 1.1 }}>
            {section.title}
          </div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(31,36,42,0.65)', marginTop: 3 }}>
            {section.sublabel}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14, padding: '2px 0 4px' }}>
          {[0, 1].map((i) =>
          <div key={i} style={{
            width: 26, height: 26,
            borderRadius: '50%',
            border: '1.5px dashed var(--c-smoke)',
            animation: hover ? 'reel-spin 4s linear infinite' : 'none'
          }}></div>
          )}
        </div>
      </div>

      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--c-whisper)', lineHeight: 1.6, flex: 1 }}>
        {section.tagline}
      </div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: hover ? section.accentInk : 'var(--c-whisper)',
        display: 'flex', alignItems: 'center', gap: 8, transition: 'color 160ms'
      }}>
        Play <span style={{ transform: hover ? 'translateX(3px)' : 'none', transition: 'transform 200ms var(--ease-spring)' }}>→</span>
      </div>
    </div>);

}

// Self-ranked competence across the five TU/e expertise areas.
function EaRanking() {
  const items = [
  ['01', 'MDC', 'Math, Data & Computing'],
  ['02', 'T&R', 'Technology & Realization'],
  ['03', 'U&S', 'User & Society'],
  ['04', 'B&E', 'Business & Entrepreneurship'],
  ['05', 'C&A', 'Creativity & Aesthetics']];

  return (
    <div data-noword="true" style={{ marginTop: 40 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, borderTop: '1px solid var(--c-border)', paddingTop: 14, marginBottom: 16 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--c-whisper)' }}>
          Self-ranked competence
        </span>
        <div style={{ flex: 1 }}></div>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--c-muted)' }}>
          All at a decent level
        </span>
      </div>
      <div className="ea-rank" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', border: '1px solid var(--c-border)', background: '#FFFFFF' }}>
        {items.map(([rank, code, name], i) =>
        <div key={code} style={{
          padding: '16px 18px 18px',
          borderRight: i < items.length - 1 ? '1px solid var(--c-border)' : 'none',
          display: 'flex', flexDirection: 'column', gap: 7
        }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: i === 0 ? 'var(--ink-sky)' : 'var(--c-muted)', fontVariantNumeric: 'tabular-nums' }}>{rank}</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--c-smoke)', lineHeight: 1 }}>{code}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--c-whisper)', lineHeight: 1.35 }}>{name}</span>
          </div>
        )}
      </div>
    </div>);

}

// One reference point in the Inspiration grid: image slot + name + reflection.
function InspirationCard({ slotId, placeholder, name, meta, chip, children }) {
  return (
    <div style={{ border: '1px solid var(--c-border)', background: '#FFFFFF', display: 'flex', flexDirection: 'column' }}>
      <image-slot
        id={slotId}
        shape="rect"
        placeholder={placeholder}
        style={{ width: '100%', aspectRatio: '4 / 3', display: 'block', background: '#F2F5F9', borderBottom: '1px solid var(--c-border)' }}>
      </image-slot>
      <div style={{ padding: '18px 20px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
          <span style={{ width: 9, height: 9, background: chip, flexShrink: 0 }}></span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--c-smoke)' }}>{name}</span>
        </div>
        <div data-noword="true" style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--c-muted)', marginBottom: 12 }}>{meta}</div>
        <p style={{ marginBottom: 0 }}>{children}</p>
      </div>
    </div>);

}

function LandingSection({ sections, onSelect, caseOpen, editorialStyle }) {
  return (
    <div className="fade-key" data-screen-label="Index / Landing">
      {/* HERO */}
      <section style={{ position: 'relative', padding: '88px 0 32px' }}>
        <LinerLabel chip="var(--p-coral)">FBP Portfolio · 2023–2026</LinerLabel>

        <div className="g-split" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 56,
          alignItems: 'end'
        }}>
          <div>
            <h1 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(3.2rem, 8.5vw, 6.2rem)',
              fontWeight: 700,
              lineHeight: 0.95,
              letterSpacing: '-0.035em',
              color: 'var(--c-smoke)',
              marginBottom: 8
            }}>
              Merijn<br />Verhaak
            </h1>
            <div style={{
              fontFamily: 'var(--font-body)',
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: '0.14em',
              color: 'var(--c-whisper)',
              textTransform: 'uppercase',
              marginTop: 28,
              display: 'flex',
              flexWrap: 'wrap',
              gap: '4px 14px'
            }}>
              <span>Industrial Design</span>
              <span style={{ color: 'var(--c-muted)' }}>·</span>
              <span>TU/e</span>
              <span style={{ color: 'var(--c-muted)' }}>·</span>
              <span>2023–2026</span>
            </div>
          </div>

          <div>
            <p data-prose style={{
              fontFamily: 'var(--font-body)',
              fontSize: 17,
              lineHeight: 1.65,
              color: 'var(--c-cream)',
              maxWidth: '40ch'
            }}>Welcome to my Graduation portfolio. I'll try to strike a combination between FBP reflections and the bachelor. 

            </p>
          </div>
        </div>
      </section>

      {/* A1 · VISION */}
      <section style={{ padding: '56px 0 12px' }}>
        <div style={{ borderTop: '2px solid var(--c-smoke)', paddingTop: 22 }}>
          <LinerLabel chip="var(--p-coral)">A1 · Vision</LinerLabel>
          <div className="g-split" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 1fr)',
            gap: 56,
            alignItems: 'start'
          }}>
            <div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(2.3rem, 4.4vw, 3.3rem)',
                fontWeight: 700,
                lineHeight: 1.03,
                letterSpacing: '-0.03em',
                color: 'var(--c-smoke)',
                marginBottom: 22,
                maxWidth: '15ch'
              }}>
                People in control of their technology.
              </h2>
              <p data-prose>I want to let users be in control of their technology, addressing the space between total rejection of technology and passive acceptance.</p>
              <p data-prose>In my first semester of industrial design I hit a breaking point from the self-hatred I carried in my forming years, and something had to change. I am not alone in my struggle with mental health, especially when social media and algorithms have had a negative impact on the wellbeing of younger adults (Haidt, 2024). Digital minimalism has risen as a counter movement to the exploitative patterns of big tech: algorithm-based content, infinite scroll, short form content, and AI that is too kind and keeps asking follow-up questions (Newport, 2019). All of it to keep you paying with your attention (Williams, 2018).</p>
              <p data-prose>I am building a healthier relationship with technology by curating my algorithms, avoiding manipulative patterns, and instructing AI not to be sycophantic or ask continuing questions. That is why I want to make design interventions that help people use technology intentionally, not compulsively. With intentionality comes friction, and not every user has the time or need for it. My FBP is a direct expression of this: a physical AI tutor device inspired by the Socratic method. It takes away the screen, gives the user agency over when and how to engage through conversation, and uses Socratic questioning instead of giving direct answers.</p>
            </div>
            <aside style={{ borderLeft: '3px solid var(--p-coral)', paddingLeft: 26, marginTop: 6 }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(1.5rem, 2.3vw, 2rem)',
                fontWeight: 600,
                lineHeight: 1.28,
                letterSpacing: '-0.02em',
                color: 'var(--c-smoke)'
              }}>
                Help people use technology <span style={{ color: 'var(--ink-coral)' }}>intentionally</span>, not compulsively.
              </div>
              <div style={{ marginTop: 28 }}>
                <EvidenceSlot id="vision-fig" height={300} caption="Myself" />
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* A2 · PROFESSIONAL IDENTITY */}
      <section style={{ padding: '40px 0 12px' }}>
        <div style={{ borderTop: '2px solid var(--c-smoke)', paddingTop: 22 }}>
          <LinerLabel chip="var(--p-sky)">A2 · Professional Identity</LinerLabel>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(2rem, 3.6vw, 2.7rem)',
            fontWeight: 700,
            lineHeight: 1.04,
            letterSpacing: '-0.028em',
            color: 'var(--c-smoke)',
            marginBottom: 24
          }}>
            A curiosity-driven generalist.
          </h2>
          <div className="g-split" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 1fr)',
            gap: 56,
            alignItems: 'start'
          }}>
            <div>
              <p data-prose>I am a generalist driven by curiosity to get a basic understanding of most topics, drawing inspiration from areas that don't fully overlap but combine in a unique way. Even in year 1 I called myself a jack of all trades; what improved since is analyzing why and how that works, making me a curiosity-driven generalist.</p>
              <p data-prose>My perfectionism was a big hurdle. It made me struggle to find an identity and vision that felt like me. I wanted to keep my self-critical attitude, but the mindset was negative because I treated mistakes as failures. My answer keeps that sharpness while shifting the mindset: kintsugi, based on the wabi-sabi philosophy of embracing imperfection (Koren, 2008), I read as a metaphor for iteration, where breaking and mending things makes something more beautiful.</p>
              <p data-prose>I developed a nuanced stance on AI. I place real importance on the agency of work: using AI as a tool to realize your ideas is fine, as long as every design decision remains yours.</p>
              <p data-prose>I still have difficulties reaching out to people, something that has been part of me forever, though during my studies I started to improve and trust others to do their work.</p>
              <p data-prose>I struggle with visual storytelling, while I am good at explaining things and getting an idea across. This semester I became a PI&V mentor, which I enjoy and which lets me explore why I like explaining things and sharing knowledge. My EA ranking is MDC, T&R, U&S, B&E, C&A.</p>
            </div>
            <aside style={{ borderLeft: '3px solid var(--p-sky)', paddingLeft: 26, marginTop: 6 }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(1.5rem, 2.3vw, 2rem)',
                fontWeight: 600,
                lineHeight: 1.28,
                letterSpacing: '-0.02em',
                color: 'var(--c-smoke)'
              }}>
                I view kintsugi as a metaphor for <span style={{ color: 'var(--ink-sky)' }}>iteration</span>, where through breaking things and mending them you create something even more beautiful.
              </div>
              <div style={{ marginTop: 28 }}>
                <EvidenceSlot id="pi-fig" height={300} caption="Myself" />
              </div>
            </aside>
          </div>
          <EaRanking />
        </div>
      </section>

      {/* A3 · Into the FBP — PI&V + Courses, side by side */}
      <section style={{ padding: '40px 0 12px' }}>
        <div style={{ borderTop: '2px solid var(--c-smoke)', paddingTop: 22 }}>
          <LinerLabel chip="var(--p-sage)">A3 · Into the FBP</LinerLabel>
          <div className="g-split" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
            gap: 48,
            alignItems: 'start'
          }}>
            {/* How my PI&V framed my FBP */}
            <div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(1.7rem, 2.8vw, 2.2rem)',
                fontWeight: 700,
                lineHeight: 1.06,
                letterSpacing: '-0.025em',
                color: 'var(--c-smoke)',
                marginBottom: 18,
                maxWidth: '18ch'
              }}>How my PI&V framed my FBP.</h2>
              <p data-prose>My motivation for choosing PI&V as the reflective lens to center the tutor around, was because of my 1st year where I struggled with defining my vision to now where I feel a lot more confident and shared my knowledge as a mentor to help newer students.</p>
              <p data-prose>The expert interviews helped me position my prototype in the wider PI&V ecosystem as a pre-coaching tool rather than a replacement for coaching, which resolved the concern about undermining community learning. This was due to the threat of the Socratic tutor replacing the in-person student meetings, and this was fair. In my opinion the most important part of PI&V is the humanity of it.</p>
            </div>

            {/* How courses fed the FBP */}
            <div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(1.7rem, 2.8vw, 2.2rem)',
                fontWeight: 700,
                lineHeight: 1.06,
                letterSpacing: '-0.025em',
                color: 'var(--c-smoke)',
                marginBottom: 18,
                maxWidth: '18ch'
              }}>How courses fed the FBP.</h2>
              <p data-prose>The system prompt for the tutor was my first real system prompt engineering, getting an AI to reply exactly how I wanted. I consider this interaction design, since it is the main way the user engages with the tutor, and it is also where I aimed to invoke a behavioural change in how users reflect, which points back to CBL P1 and my recycling project.</p>
              <p data-prose>To define the core vision I did a lot of literature review to base my claims (see Figure 3). First in Design & Research, which is also where I did thematic analysis for the first time, using probe kits instead of interviews (Braun & Clarke, 2006). Both were how I integrated U&S into the project, since I started valuing a well-researched problem statement in CBL P3.</p>
              <p data-prose>The system diagram built on the speech-to-speech pipeline I made in CBL P3, this time mixing local models with APIs and using OOCSI (Funk, 2019), which was covered extensively in Designing Connected Experiences along with system diagramming (see Figure 4). I have used OOCSI over 5 courses. MDC is the role I am confident executing in a project.</p>
              <p data-prose>CAD modelling for shape exploration and the bookmark prototype is a skill I started in Designing Actuated Systems and has become my way of visual communication instead of sketching, combining T&R and C&A.</p>
              <p data-prose>To work out how the service should run I made a service model blueprint connecting the system diagram to the intended user experience, something I first did in Design Innovation Methods. The cost analysis is part of the FBP, but I could have integrated B&E better; it is more of a box-check that could be done properly.</p>
            </div>
          </div>

          {/* Course evidence — pictures from the courses that fed the FBP */}
          <div className="g-gallery" style={{
            marginTop: 36,
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 24
          }}>
            <EvidenceSlot id="course-fig-1" aspect="4/3" caption="Design & Research Final Deliverable about how I would conduct these types of projects." />
            <EvidenceSlot id="course-fig-2" aspect="4/3" caption="System Diagram made during Designing Connected Experiences" />
            <EvidenceSlot id="course-fig-3" aspect="4/3" caption="CAD model of mechanism I made during Designing Actuated Systems" />
          </div>
        </div>
      </section>

      {/* THE TRACKLIST */}
      <section style={{ padding: '48px 0 96px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, borderBottom: '2px solid var(--c-smoke)', paddingBottom: 14, marginBottom: 4 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--c-whisper)' }}>
            B · The Tapes
          </span>
          <div style={{ flex: 1 }}></div>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--c-muted)', textTransform: 'uppercase' }}>
            03 sides
          </span>
        </div>

        {caseOpen ?
        <div>
            {sections.map((s, i) =>
          <TrackRow key={s.id} section={s} index={i} onSelect={onSelect} />
          )}
          </div> :

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
          gap: 20,
          marginTop: 24
        }}>
            {sections.map((s) =>
          <TapeCard key={s.id} section={s} onSelect={onSelect} />
          )}
          </div>
        }

        <div data-noword="true" style={{
          marginTop: 28,
          fontFamily: 'var(--font-body)',
          fontSize: 13.5,
          color: 'var(--c-whisper)',
          lineHeight: 1.7
        }}>
          Click a side to play it. <span style={{ color: 'var(--ink-coral)', fontWeight: 600 }}>⏏ Eject</span> brings you back to this index.
        </div>
      </section>
    </div>);

}

window.LandingSection = LandingSection;
window.LinerLabel = LinerLabel;