// JOAQUINA — editorial CV layout, echoing page 3's huge red titulars + dense tech text
function Joaquina() {
  return (
    <section id="joaquina" data-screen-label="04 Detrás" style={{
      position: 'relative', padding: '140px 48px 140px',
      background: 'var(--paper)'
    }}>
      <PageNumber n={4} label="CV" />
      <SectionLabel idx={3} title="Detrás de Nomen" kicker="Gestora de estéticas · Trend forecaster" />

      {/* The iconic huge 'ALBORNOZ / Joaquina' stack */}
      <div className="cv-stack" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 360px)',
        gap: 60, alignItems: 'start', marginBottom: 80
      }}>
        <style>{`
          @media (max-width: 900px){ .cv-stack { grid-template-columns: 1fr !important; } }
        `}</style>

        <div>
          <h2 className="display" style={{
            margin: 0, color: 'var(--red)',
            lineHeight: 0.82, letterSpacing: '-0.04em', fontWeight: 400,
            fontSize: 'clamp(72px, 14vw, 160px)'
          }}>ALBORNOZ</h2>
          <h3 style={{
            fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(38px, 6vw, 72px)',
            margin: 0, marginTop: 6, color: 'var(--ink)',
            letterSpacing: '-0.01em', lineHeight: 1
          }}>Joaquina</h3>

          <p style={{
            marginTop: 30, fontSize: 15, lineHeight: 1.55, maxWidth: 560
          }}>
            Estudiante de Licenciatura en Diseño y Gestión de Estéticas para la Moda,
            diseñadora en formación con enfoque en moda, dirección de arte y trend
            forecasting. Experiencia en styling, conceptualización visual, investigación
            de consumo futuro y producción de campañas. Busco integrarme a equipos
            creativos que trabajen desde lo estético y estratégico — con sensibilidad
            contemporánea y visión de futuro.
          </p>
        </div>

        <figure style={{ margin: 0, position: 'relative', aspectRatio: '3/4', overflow: 'hidden' }}>
          <img src="assets/imagery/joaquina-portrait.png" alt="Joaquina Albornoz"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <figcaption style={{
            position: 'absolute', bottom: 12, left: 12, right: 12,
            background: 'rgba(255,255,255,.92)', padding: '10px 12px',
            fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
            display: 'flex', justifyContent: 'space-between'
          }}>
            <span>RETRATO · </span>
            <span style={{ color: 'var(--red)' }}>2026</span>
          </figcaption>
        </figure>
      </div>

      {/* Dense editorial CV grid — echoes PDF page 3 */}
      <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 28 }}>
        <div className="cv-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 32
        }}>
          <style>{`
            @media (max-width: 900px){ .cv-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 560px){ .cv-grid { grid-template-columns: 1fr !important; } }
          `}</style>

          <CVBlock
            heading="Experiencia"
            heavy="Willis Towers Watson"
            sub="Analista de reaseguros Ssr."
            years="2021 — 2024"
            detail="Derecho internacional, reaseguros, gestión documental, soporte operativo. Trabajo en equipo y optimización de procesos." />
          
          <CVBlock
            heading="Freelance"
            heavy="Producción visual"
            sub="Styling · Branding · Contenido"
            years="2021 — Act."
            detail="Estilismo y dirección de arte para campañas y lookbooks. Desarrollo de moodboards, asistencia en producción y escenarios conceptuales." />
          
          <CVBlock
            heading="Educación"
            heavy="UADE"
            sub="Lic. en Diseño y Gestión de Estéticas para la Moda"
            years="2021 — Act."
            detail="Certificaciones en Domestika e Inside Studios — Styling, dirección de arte, community management y marketing digital." />
          
          <CVBlock
            heading="Capacidades"
            heavy="Forecasting"
            sub="Dirección de arte · Branding · Eventos"
            years="Estratégico"
            detail="Photoshop · Illustrator · InDesign · Microsoft 365 · Behance · Instagram · TikTok. Inglés avanzado (oral y escrito)." />
          
        </div>
      </div>

      {/* Bottom phrases strip — from PDF page 5 */}
      <div style={{
        marginTop: 80,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20
      }} className="phrases">
        <style>{`
          @media (max-width: 760px){ .phrases { grid-template-columns: 1fr !important; } }
        `}</style>
        <Phrase big="Diseño" small="funcional." />
        <Phrase big="Traducción" small="visual." color />
        <Phrase big="Expresar" small="fuerte y claro." />
      </div>
    </section>);

}

function CVBlock({ heading, heavy, sub, years, detail }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: 'var(--red)', marginBottom: 8 }}>§ {heading}</div>
      <h4 className="titular" style={{ margin: 0, fontSize: 26, fontWeight: 600 }}>{heavy}</h4>
      <div style={{ fontSize: 13, marginTop: 4, opacity: .85 }}>{sub}</div>
      <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 10, opacity: .55 }}>{years}</div>
      <p style={{ fontSize: 13, lineHeight: 1.55, marginTop: 10, opacity: .85 }}>{detail}</p>
    </div>);

}

function Phrase({ big, small, color }) {
  return (
    <div style={{
      border: '1px solid var(--ink)', padding: '22px 20px 20px',
      background: color ? 'var(--red)' : 'transparent',
      color: color ? '#fff' : 'var(--ink)'
    }}>
      <div className="display" style={{
        fontSize: 'clamp(36px, 5vw, 54px)', fontWeight: 400,
        lineHeight: 0.95, letterSpacing: '-0.03em'
      }}>{big}</div>
      <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 20, marginTop: 2 }}>{small}</div>
    </div>);

}

Object.assign(window, { Joaquina });