/* ============================================================
   SECTIONS 3 — Trayectoria (experiencia + educación), Contacto
   ============================================================ */

/* ---------- Trayectoria ---------- */
function Trayectoria({ refMap, onDownloadCV }) {
  return (
    <section id="trayectoria" ref={(el) => { if (refMap) refMap.current['trayectoria'] = el; }} style={{ background: 'var(--color-surface)', padding: 'clamp(64px, 9vh, 112px) 0', borderTop: '1px solid var(--color-border)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 clamp(20px, 4vw, 44px)' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 'clamp(36px, 5vh, 52px)' }}>
            <SectionHead eyebrow="Trayectoria" title="Experiencia laboral" />
            <Button variant="secondary" iconRight={<Icon name="download" size={15} />} onClick={onDownloadCV}>Descargar CV</Button>
          </div>
        </Reveal>
        <div className="tray-grid" style={{ display: 'grid', gridTemplateColumns: '1.55fr 0.85fr', gap: 'clamp(36px, 5vw, 72px)', alignItems: 'start' }}>
          <div>
            {EXPERIENCE.map((e, i) => (
              <Reveal key={i} delay={i * 50}><ExperienceItem {...e} /></Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <aside className="tray-aside" style={{ display: 'flex', flexDirection: 'column', gap: 32, position: 'sticky', top: 96 }}>
              <div>
                <SectionLabel variant="band" style={{ marginBottom: 18 }}>Educación</SectionLabel>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {EDUCATION.map(([t, s], i) => (
                    <li key={i}>
                      <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--color-heading)', lineHeight: 1.3 }}>{t}</div>
                      <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', marginTop: 2, letterSpacing: 'var(--tracking-wide)' }}>{s}</div>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <SectionLabel variant="band" style={{ marginBottom: 18 }}>Idiomas</SectionLabel>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {LANGUAGES.map(([t, s], i) => (
                    <li key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid var(--color-border)', paddingBottom: 10 }}>
                      <span style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--color-heading)' }}>{t}</span>
                      <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>{s}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </aside>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contacto ---------- */
function Contact({ refMap, onDownloadCV }) {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contacto" ref={(el) => { if (refMap) refMap.current['contacto'] = el; }} style={{ background: 'var(--color-primary)', color: 'var(--color-text-on-dark)' }}>
      <div className="contact-grid" style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(64px, 9vh, 104px) clamp(20px, 4vw, 44px)', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(40px, 6vw, 80px)' }}>
        <Reveal>
          <div>
            <SectionLabel variant="eyebrow" style={{ marginBottom: 18 }}>Hablamos</SectionLabel>
            <h2 style={{ margin: 0, fontWeight: 'var(--weight-bold)', fontSize: 'clamp(30px, 4.4vw, 52px)', letterSpacing: 'var(--tracking-tight)', color: 'var(--white)', maxWidth: 480, lineHeight: 1.04, textWrap: 'balance' }}>
              Diseño y ejecución para tu equipo o tu proyecto
            </h2>
            <p style={{ margin: '20px 0 30px', maxWidth: 460, fontWeight: 'var(--weight-light)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--navy-100)' }}>
              Abierta a roles de <strong style={{ fontWeight: 'var(--weight-semibold)', color: 'var(--white)' }}>Project Manager, coordinación de obra, interiorismo o diseño técnico</strong>. Si crees que encajo en tu equipo, escríbeme.
            </p>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 28, padding: '8px 14px', borderRadius: 'var(--radius-full)', background: 'rgba(255,255,255,0.06)', border: '1px solid var(--color-border-inverse)' }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--color-accent)', flexShrink: 0 }} />
              <span style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-wide)', color: 'var(--white)' }}>Barcelona · disponibilidad inmediata</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <ContactRow inverse icon={<Icon name="mail" />} label="Email" value="yan.trotta.work@gmail.com" href="mailto:yan.trotta.work@gmail.com" />
              <ContactRow inverse icon={<Icon name="linkedin" />} label="LinkedIn" value="in/yantrotta" href="https://www.linkedin.com/in/yantrotta/" />
              <ContactRow inverse icon={<Icon name="phone" />} label="Teléfono" value="+34 622 772 260" href="tel:+34622772260" />
            </div>
            <div style={{ marginTop: 32 }}>
              <Button variant="accent" iconRight={<Icon name="download" size={15} />} onClick={onDownloadCV}>Descargar CV</Button>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 16, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--color-border-inverse)', borderRadius: 'var(--radius-xl)', padding: 'clamp(22px, 3vw, 34px)' }}>
            <p style={{ margin: '0 0 4px', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--white)' }}>¿Hablamos?</p>
            <Field label="Empresa / Contacto" placeholder="Empresa o tu nombre" />
            <Field label="Email" placeholder="tu@empresa.com" type="email" />
            <Field label="Mensaje" placeholder="Cuéntame sobre el rol o el equipo…" textarea />
            <Button variant="accent" type="submit" iconRight={<Icon name={sent ? 'check' : 'arrow-right'} size={15} />} style={{ marginTop: 6, alignSelf: 'flex-start' }}>
              {sent ? 'Mensaje enviado' : 'Enviar mensaje'}
            </Button>
          </form>
        </Reveal>
      </div>
      <div style={{ borderTop: '1px solid var(--color-border-inverse)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '22px clamp(20px, 4vw, 44px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--navy-300)', letterSpacing: 'var(--tracking-wide)' }}>© 2026 Yan Trotta · Interior &amp; Set Designer · Project Manager</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontWeight: 'var(--weight-black)', fontSize: 'var(--text-sm)', letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--white)' }}>Yan Trotta</span>
            <span style={{ width: 18, height: 3, background: 'var(--color-accent)' }} />
          </span>
        </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, type = 'text', textarea }) {
  const [f, setF] = React.useState(false);
  const base = { fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--white)', background: 'rgba(255,255,255,0.06)',
    border: `1px solid ${f ? 'var(--color-accent)' : 'var(--color-border-inverse)'}`, borderRadius: 'var(--radius-md)', padding: '12px 14px', outline: 'none', width: '100%', boxSizing: 'border-box', transition: 'border-color var(--dur-fast)' };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--navy-300)' }}>{label}</span>
      {textarea
        ? <textarea rows={4} placeholder={placeholder} onFocus={() => setF(true)} onBlur={() => setF(false)} style={{ ...base, resize: 'vertical' }} />
        : <input type={type} placeholder={placeholder} onFocus={() => setF(true)} onBlur={() => setF(false)} style={base} />}
    </label>
  );
}

Object.assign(window, { Trayectoria, Contact });