// AboutSection — hero identity block: name, role @ university, social
// buttons, profile portrait, bio prose, and a research-area chip row.
const { Button: AButton, Badge: ABadge } = window.WINTELAcademicDesignSystem_045d4f;

function AboutSection({ data, onNavigate }) {
  const p = data.person;
  return (
    <section style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', paddingBottom: '0.5rem', borderBottom: '1px solid var(--border-subtle, rgba(120,120,120,0.18))' }}>
        <img className="wintel-logo wintel-logo--light" src={(window.__resources && window.__resources.logoLight) || 'assets/wintel-logo.svg'} alt="WiNTEL — Wireless Intelligence & Networked Sensing Laboratory" style={{ height: 250, width: 'auto', maxWidth: '100%' }} />
        <img className="wintel-logo wintel-logo--dark" src={(window.__resources && window.__resources.logoDark) || 'assets/wintel-logo-dark.svg'} alt="WiNTEL — Wireless Intelligence & Networked Sensing Laboratory" style={{ height: 250, width: 'auto', maxWidth: '100%' }} />
        {onNavigate ? (
          <div style={{ position: 'absolute', top: 0, right: 0 }}>
            <AButton variant="default" size="sm" onClick={() => onNavigate('contact')}
              style={{ background: '#ea541f', borderColor: '#ea541f', color: '#ffffff' }}>
              <i className="ri-send-plane-line" style={{ fontSize: 14 }} /> Apply
            </AButton>
          </div>
        ) : null}
      </div>
      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', gap: '2rem', flexWrap: 'wrap-reverse' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: '1 1 260px' }}>
          <h1 style={{ margin: 0, fontSize: 'var(--text-4xl)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>{p.name}</h1>
          <h2 style={{ margin: 0, fontSize: 'var(--text-xl)', fontWeight: 500, color: 'var(--text-primary)' }}>
            {p.role}
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.15rem', fontSize: 'var(--text-base)', color: 'var(--text-muted)', fontWeight: 300, lineHeight: 'var(--leading-snug)' }}>
            {p.affiliations.map((a, i) => (
              <p key={i} style={{ margin: 0 }}>
                {a.prefix || ''}
                {a.url ? (
                  <a href={a.url} target="_blank" rel="noopener noreferrer"
                     style={{ color: 'var(--text-body)', textDecoration: 'underline', textDecorationColor: 'var(--link-decoration)', textUnderlineOffset: '2px' }}>
                    {a.text}
                  </a>
                ) : a.text}
              </p>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.6rem', marginTop: '0.35rem', fontSize: 'var(--text-base)', color: 'var(--text-muted)', fontWeight: 300, lineHeight: 'var(--leading-snug)' }}>
            <i className="ri-map-pin-2-line" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0, marginTop: '0.15rem' }} />
            <span>
              4005 Mountbatten Bdg. (53), Salisbury Rd.,<br />
              Southampton SO17 1BJ, UK
              <a href="https://maps.app.goo.gl/iqoDhBAP1rka5bmc7" target="_blank" rel="noopener noreferrer"
                 aria-label="Open in Google Maps"
                 style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', marginLeft: '0.5rem', whiteSpace: 'nowrap', color: 'var(--accent)', textDecoration: 'none', fontWeight: 500, verticalAlign: 'baseline' }}>
                <i className="ri-map-pin-line" style={{ fontSize: 14 }} /> Map
              </a>
            </span>
          </div>
          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'nowrap', marginTop: '0.5rem' }}>
            {p.social.map((s) => (
              <AButton key={s.name} variant="outline" size="sm" href={s.url} target="_blank" aria-label={s.name}>
                <SocialIcon icon={s.icon} />
              </AButton>
            ))}
          </div>
        </div>
        <img src={(window.__resources && window.__resources.profileImg) || p.profile} alt={p.name}
          fetchpriority="high" decoding="async" width="220" height="275"
          style={{ width: 220, alignSelf: 'stretch', objectFit: 'cover', objectPosition: 'center top', borderRadius: 'var(--radius-md)', flexShrink: 0 }} />
      </div>
      <article style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <p style={{ margin: 0, fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)', textWrap: 'pretty' }}>{p.bio}</p>
        {p.bio2 ? <p style={{ margin: 0, fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)', textWrap: 'pretty' }}>{p.bio2}</p> : null}
      </article>
      <BlogShowcase data={data} onNavigate={onNavigate} />
    </section>
  );
}

// BlogShowcase — auto-advancing slideshow of recent blog posts. Pulls every
// non-draft post that has a lead image from data.blog, so adding a new post
// (with a figure) automatically appears here. "Read more" opens that exact
// post in the Research view.
function leadImage(post) {
  const fig = (post.body || []).find((b) => b && b.fig);
  if (!fig) return null;
  return (fig.resId && window.__resources && window.__resources[fig.resId]) || fig.fig;
}

function BlogShowcase({ data, onNavigate }) {
  const slides = (data.blog || [])
    .filter((p) => !p.draft && leadImage(p))
    .map((p) => ({ post: p, img: leadImage(p) }));
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;

  React.useEffect(() => {
    if (paused || n <= 1) return undefined;
    const id = setInterval(() => setI((v) => (v + 1) % n), 5000);
    return () => clearInterval(id);
  }, [paused, n]);

  if (!n) return null;
  const go = (idx) => setI((idx + n) % n);
  const openPost = (post) => {
    window.__researchOpen = post.title;
    if (onNavigate) onNavigate('research');
  };

  return (
    <section aria-label="From the research blog"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: '1rem' }}>
        <h3 style={{ margin: 0, fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-semibold)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>From the Research Blog</h3>
        <button type="button" onClick={() => onNavigate && onNavigate('research')}
          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--accent)' }}>
          All posts <i className="ri-arrow-right-line" style={{ fontSize: 13, verticalAlign: '-1px' }} />
        </button>
      </div>

      <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-default)', background: '#0b0d10', aspectRatio: '16 / 9' }}>
        {slides.map((s, idx) => (
          <div key={idx} aria-hidden={idx !== i}
            style={{ position: 'absolute', inset: 0, opacity: idx === i ? 1 : 0, transition: 'opacity 600ms var(--ease-standard)', pointerEvents: idx === i ? 'auto' : 'none' }}>
            <img src={s.img} alt="" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(7,9,12,0.94) 0%, rgba(7,9,12,0.78) 28%, rgba(7,9,12,0.34) 60%, rgba(7,9,12,0.05) 100%)' }} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: '0.7rem', padding: 'clamp(1.1rem, 3.5vw, 2.2rem)', maxWidth: '92%' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.65rem' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', padding: '0.2rem 0.6rem', borderRadius: '999px', background: 'var(--accent)', color: '#fff', fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-semibold)', letterSpacing: '0.02em' }}>{s.post.tag}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'rgba(255,255,255,0.7)' }}>{s.post.date}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 'clamp(1rem, 4vw, 2.5rem)', width: '100%' }}>
                <h4 style={{ margin: 0, flex: 1, fontSize: 'clamp(1.05rem, 2.6vw, 1.6rem)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-tight)', color: '#fff', lineHeight: 'var(--leading-tight)', textWrap: 'balance' }}>{s.post.title}</h4>
                <button type="button" onClick={() => openPost(s.post)}
                  style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: '0.4rem', padding: '0.5rem 0.95rem', borderRadius: 'var(--radius-md)', border: '1px solid rgba(255,255,255,0.35)', background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(4px)', color: '#fff', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', cursor: 'pointer', whiteSpace: 'nowrap' }}>
                  Read more <i className="ri-arrow-right-line" style={{ fontSize: 15 }} />
                </button>
              </div>
            </div>
          </div>
        ))}

        {n > 1 ? (
          <React.Fragment>
            <button type="button" aria-label="Previous post" onClick={() => go(i - 1)}
              style={{ position: 'absolute', top: '50%', left: '0.6rem', transform: 'translateY(-50%)', width: '2rem', height: '2rem', borderRadius: '999px', border: '1px solid rgba(255,255,255,0.25)', background: 'rgba(7,9,12,0.45)', color: '#fff', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="ri-arrow-left-s-line" style={{ fontSize: 20 }} />
            </button>
            <button type="button" aria-label="Next post" onClick={() => go(i + 1)}
              style={{ position: 'absolute', top: '50%', right: '0.6rem', transform: 'translateY(-50%)', width: '2rem', height: '2rem', borderRadius: '999px', border: '1px solid rgba(255,255,255,0.25)', background: 'rgba(7,9,12,0.45)', color: '#fff', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="ri-arrow-right-s-line" style={{ fontSize: 20 }} />
            </button>
            <div style={{ position: 'absolute', bottom: '0.7rem', right: '0.9rem', display: 'flex', gap: '0.4rem' }}>
              {slides.map((_, idx) => (
                <button key={idx} type="button" aria-label={'Go to slide ' + (idx + 1)} onClick={() => go(idx)}
                  style={{ width: idx === i ? '1.4rem' : '0.5rem', height: '0.5rem', borderRadius: '999px', border: 'none', padding: 0, cursor: 'pointer', background: idx === i ? '#fff' : 'rgba(255,255,255,0.45)', transition: 'width 300ms var(--ease-standard)' }} />
              ))}
            </div>
          </React.Fragment>
        ) : null}
      </div>
    </section>
  );
}

Object.assign(window, { AboutSection });
