/* Variant D — Scholarly Index (final)
   Responsive, animated, full publication archive with index badges. */

/* ── Responsive + animation styles ── */
const _dStyle = document.createElement('style');
_dStyle.textContent = `
  .ao-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .ao-fade.visible { opacity: 1; transform: none; }

  .d-pub-link { color: #1b1a17; text-decoration: none; border-bottom: 1px solid rgba(27,26,23,0.2); transition: color 0.2s ease, border-color 0.2s ease; }
  .d-pub-link:hover { color: #1e3a5f; border-color: #1e3a5f; }

  @media (max-width: 900px) {
    .d-hero-grid  { grid-template-columns: 1fr !important; }
    .d-res-grid   { grid-template-columns: 1fr 1fr !important; }
    .d-exp-grid   { grid-template-columns: 1fr !important; }
    .d-pub-grid   { grid-template-columns: 1fr !important; gap: 16px !important; }
    .d-pub-year   { font-size: 32px !important; margin-bottom: 8px !important; }
    .d-vid-grid   { grid-template-columns: 1fr !important; }
    .d-contact    { grid-template-columns: 1fr !important; }
    .d-root       { padding: 32px 24px 64px !important; }
    .d-h1         { font-size: 44px !important; }
    .d-stat-grid  { grid-template-columns: 1fr 1fr !important; }
    .d-teach-grid { grid-template-columns: 1fr auto !important; }
    .d-link-row   { gap: 14px !important; }
    .d-link-row a { font-size: 11px !important; }
    .d-pub-head   { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  }
  @media (max-width: 560px) {
    .d-res-grid   { grid-template-columns: 1fr !important; }
    .d-h1         { font-size: 34px !important; }
    .d-pub-tags   { display: none !important; }
  }
  .d-link-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .d-link-row a { font-family: "JetBrains Mono", monospace; font-size: 12px; text-decoration: none; padding-bottom: 2px; }
`;
document.head.appendChild(_dStyle);

/* ── IntersectionObserver for fade-ins ── */
function useFadeIn() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.ao-fade');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('visible'));
      return;
    }
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
    }, { threshold: 0.08 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function VariantD({ lang, setLang }) {
  const d = window.AO_DATA;
  const t = d.i18n[lang];
  const ACC = '#1e3a5f';
  const INK = '#1b1a17';
  const LINE = 'rgba(27,26,23,0.14)';
  const serif = { fontFamily: '"Source Serif 4", Georgia, serif' };
  const mono  = { fontFamily: '"JetBrains Mono", monospace' };

  useFadeIn();

  const byYear = {};
  d.publications.forEach(p => {
    if (!byYear[p.year]) byYear[p.year] = [];
    byYear[p.year].push(p);
  });
  const years = Object.keys(byYear).map(Number).sort((a, b) => b - a);

  const indexColor = { 'SCI': '#1e3a5f', 'SSCI': '#5a1e3a', 'Scopus': '#1e5a2d', 'ESCI': '#5a4a1e' };

  return (
    <div className="d-root" style={{
      fontFamily: '"Inter", -apple-system, sans-serif',
      background: '#f3f1ec', color: INK,
      width: '100%', maxWidth: 1240, minHeight: '100vh',
      padding: '64px 96px 80px', boxSizing: 'border-box', margin: '0 auto',
    }}>

      {/* ── Header ── */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingBottom: 20, borderBottom: `1px solid ${LINE}`, marginBottom: 48,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src={d.profile.photo} style={{
            width: 36, height: 36, borderRadius: '50%',
            objectFit: 'cover', border: `1px solid ${LINE}`,
          }} alt="Abdullah Önden"/>
          <div style={{ fontSize: 15, fontWeight: 500 }}>Abdullah Önden</div>
        </div>
        <div className="ao-lang">
          <button className={lang === 'tr' ? 'active' : ''} onClick={() => setLang('tr')}>TR</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>

      {/* ── Hero ── */}
      <div className="d-hero-grid ao-fade" style={{
        display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 64, marginBottom: 80,
      }}>
        <div>
          <div style={{ ...mono, fontSize: 11, color: ACC, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 24, fontWeight: 500 }}>
            {t.role} · {t.affiliation}
          </div>
          <h1 className="d-h1" style={{
            ...serif, fontSize: 68, fontWeight: 400, letterSpacing: -1.4,
            lineHeight: 1.02, margin: '0 0 32px', color: INK,
          }}>
            {lang === 'tr'
              ? <><em style={{ color: ACC, fontStyle: 'italic' }}>Yönetim bilişim sistemleri</em>,<br/>karar destek, ve<br/>üretken yapay zeka üzerine araştırma.</>
              : <>Research on <em style={{ color: ACC, fontStyle: 'italic' }}>management<br/>information systems</em>,<br/>decision support, and generative AI.</>}
          </h1>
          <div style={{ ...serif, fontSize: 18, lineHeight: 1.6, color: '#3d3b35', maxWidth: 620, marginBottom: 36 }}>
            {t.intro}
          </div>
          <div className="d-link-row">
            {[
              { label: '→ Google Scholar', href: d.profile.scholar },
              { label: '→ LinkedIn',       href: d.profile.linkedin },
              { label: '→ Twitter',        href: d.profile.twitter },
              { label: '→ Instagram',      href: d.profile.instagram },
            ].map(l => (
              <a key={l.label} href={l.href} target="_blank" rel="noopener"
                 style={{ color: ACC, borderBottom: `1px solid ${ACC}` }}>{l.label}</a>
            ))}
          </div>
        </div>

        {/* Index card */}
        <div style={{
          background: '#fbf9f3', border: `1px solid ${LINE}`, borderRadius: 2,
          padding: '28px 30px',
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            paddingBottom: 12, borderBottom: `2px solid ${INK}`, marginBottom: 20,
          }}>
            <div style={{ ...mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              {lang === 'tr' ? 'Hızlı bakış' : 'At a glance'}
            </div>
            <div style={{ ...mono, fontSize: 10, color: '#8a857b' }}>§ 01</div>
          </div>
          {[
            { k: lang === 'tr' ? 'Kurum'   : 'Affiliation', v: lang === 'tr' ? 'İstanbul Üniversitesi' : 'Istanbul University' },
            { k: lang === 'tr' ? 'Bölüm'   : 'Department',  v: lang === 'tr' ? 'Bilgisayar Mühendisliği' : 'Computer Engineering' },
            { k: lang === 'tr' ? 'Alanlar' : 'Fields',      v: 'MIS · MCDM · AI' },
            { k: lang === 'tr' ? 'Girişim' : 'Company',     v: 'Fabrikod' },
            { k: lang === 'tr' ? 'Şehir'   : 'Based in',    v: lang === 'tr' ? 'İstanbul' : 'Istanbul' },
            { k: lang === 'tr' ? 'Dil'     : 'Languages',   v: 'TR · EN' },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '90px 1fr',
              padding: '8px 0', alignItems: 'center', borderBottom: `1px solid rgba(27,26,23,0.06)`,
            }}>
              <div style={{ ...mono, fontSize: 10, color: '#8a857b', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{r.k}</div>
              <div style={{ ...serif, fontSize: 15 }}>{r.v}</div>
            </div>
          ))}
          <div style={{ marginTop: 20 }}>
            <div style={{ ...mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
              {t.sections.now}
            </div>
            {t.now.map((n, i) => (
              <div key={i} style={{ ...serif, fontSize: 13, lineHeight: 1.55, padding: '8px 0', borderBottom: `1px solid rgba(27,26,23,0.06)`, display: 'flex', gap: 8 }}>
                <span style={{ ...mono, fontSize: 10, color: ACC, fontWeight: 600, flexShrink: 0, marginTop: 3 }}>—</span>
                {n}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── Research ── */}
      <div className="ao-fade">
        <SectionHeadD num="02" title={t.sections.research}/>
        <div className="d-res-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginBottom: 96, marginTop: 32 }}>
          {t.research.map((r, i) => (
            <div key={i} style={{ paddingBottom: 20, borderBottom: `2px solid ${INK}` }}>
              <div style={{ ...mono, fontSize: 11, color: ACC, fontWeight: 600, letterSpacing: '0.1em', marginBottom: 12 }}>
                0{i+1} / 0{t.research.length}
              </div>
              <div style={{ ...serif, fontSize: 20, fontWeight: 500, letterSpacing: -0.3, lineHeight: 1.2, marginBottom: 10 }}>{r.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: '#4a4740' }}>{r.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Publications ── */}
      <div className="ao-fade">
        <SectionHeadD num="03" title={t.sections.publications}/>
        <div className="d-pub-head" style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
          <a href={d.profile.scholar} target="_blank" rel="noopener"
            style={{ ...mono, fontSize: 12, color: ACC, textDecoration: 'none', borderBottom: `1px solid ${ACC}`, paddingBottom: 2 }}>
            {t.sections.publicationsAll} →
          </a>
        </div>
        <div style={{ marginTop: 32, marginBottom: 96 }}>
          {years.map(y => (
            <div key={y} className="d-pub-grid" style={{
              display: 'grid', gridTemplateColumns: '110px 1fr',
              gap: 32, padding: '24px 0', borderTop: `1px solid ${LINE}`,
            }}>
              <div className="d-pub-year" style={{ ...serif, fontSize: 48, fontWeight: 400, letterSpacing: -1, color: ACC, lineHeight: 1 }}>{y}</div>
              <div>
                {byYear[y].map((p, i) => (
                  <div key={i} style={{
                    padding: '14px 0',
                    borderTop: i === 0 ? 'none' : `1px dashed ${LINE}`,
                    display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
                  }}>
                    <div>
                      <div style={{ ...serif, fontSize: 16, lineHeight: 1.35, marginBottom: 5, fontWeight: 500 }}>
                        {p.doi
                          ? <a href={p.doi.startsWith('http') ? p.doi : `https://doi.org/${p.doi}`} target="_blank" rel="noopener" className="d-pub-link">
                              {p.title}
                            </a>
                          : p.title}
                      </div>
                      <div style={{ ...mono, fontSize: 11, color: '#6a665b', lineHeight: 1.6 }}>
                        {p.authors.map((a, j) => (
                          <span key={j} style={{
                            color: a.toLowerCase().includes('abdullah önden') ? INK : 'inherit',
                            fontWeight: a.toLowerCase().includes('abdullah önden') ? 600 : 400,
                          }}>
                            {a}{j < p.authors.length - 1 ? ' · ' : ''}
                          </span>
                        ))}
                      </div>
                      <div style={{ ...mono, fontSize: 11, color: '#4a4740', marginTop: 4 }}>
                        <em>{p.venue}</em>{p.volume ? `, ${p.volume}` : ''}{p.publisher ? ` · ${p.publisher}` : ''}
                      </div>
                    </div>
                    <div className="d-pub-tags" style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end', minWidth: 80 }}>
                      {p.flag && (
                        <span style={{
                          ...mono, fontSize: 10, padding: '2px 8px',
                          background: indexColor[p.flag] || ACC, color: '#fff',
                          letterSpacing: '0.06em', fontWeight: 600,
                        }}>{p.flag}</span>
                      )}
                      {(p.tags || []).slice(0, 2).map((tag, j) => (
                        <span key={j} style={{
                          ...mono, fontSize: 10, padding: '2px 8px',
                          border: `1px solid ${LINE}`, color: '#6a665b',
                          letterSpacing: '0.04em', textTransform: 'uppercase',
                        }}>{tag}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── YouTube ── */}
      <div className="ao-fade" style={{ marginBottom: 96 }}>
        <SectionHeadD num="04" title={lang === 'tr' ? 'Medya' : 'Media'}/>
        <div className="d-vid-grid" style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div>
            <div style={{
              position: 'relative', width: '100%', paddingBottom: '56.25%',
              background: '#1b1a17', borderRadius: 4, overflow: 'hidden',
            }}>
              <iframe
                src="https://www.youtube.com/embed/cJ7WEZC-JVo"
                title="Bilişim Vadisi'nden Silikon Vadisi'ne"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
              />
            </div>
          </div>
          <div>
            <div style={{
              position: 'relative', width: '100%', paddingBottom: '56.25%',
              background: '#1b1a17', borderRadius: 4, overflow: 'hidden',
            }}>
              <iframe
                src="https://www.youtube.com/embed/1ByLuGV1hk4"
                title="YouTube Video"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
              />
            </div>
          </div>
        </div>
      </div>

      {/* ── Experience + Teaching ── */}
      <div className="d-exp-grid ao-fade" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, marginBottom: 96 }}>
        <div>
          <SectionHeadD num="05" title={t.sections.experience}/>
          <div style={{ marginTop: 24 }}>
            {t.experience.map((e, i) => (
              <div key={i} style={{ padding: '20px 0', borderTop: `1px solid ${LINE}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 16 }}>
                  <div style={{ ...serif, fontSize: 19, fontWeight: 500 }}>{e.role}</div>
                  <div style={{ ...mono, fontSize: 11, color: '#8a857b', letterSpacing: '0.08em', flexShrink: 0 }}>{e.period}</div>
                </div>
                <div style={{ ...mono, fontSize: 11, color: ACC, letterSpacing: '0.05em', marginBottom: 8, textTransform: 'uppercase' }}>{e.org}</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, color: '#4a4740' }}>{e.desc}</div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SectionHeadD num="06" title={t.sections.teaching}/>
          <div style={{ marginTop: 24 }}>
            {t.teaching.map((c, i) => (
              <div key={i} className="d-teach-grid" style={{
                padding: '11px 0', borderTop: `1px solid ${LINE}`,
                display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'baseline',
              }}>
                <div style={{ ...serif, fontSize: 14 }}>{c.name}</div>
                <div style={{ ...mono, fontSize: 10, color: '#8a857b', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c.level}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28 }}>
            <div style={{ ...mono, fontSize: 11, color: '#8a857b', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>
              {t.sections.stack}
            </div>
            <div style={{ ...mono, fontSize: 12, lineHeight: 2.2, color: '#4a4740' }}>
              {d.stack.map(s => s.name).join(' · ')}
            </div>
          </div>
        </div>
      </div>

      {/* ── Contact ── */}
      <div className="d-contact ao-fade" style={{
        borderTop: `2px solid ${INK}`, borderBottom: `2px solid ${INK}`,
        padding: '32px 0', marginBottom: 32,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center',
      }}>
        <div>
          <div style={{ ...mono, fontSize: 11, color: ACC, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
            § 07 — {t.sections.contact}
          </div>
          <div style={{ ...serif, fontSize: 26, lineHeight: 1.35, letterSpacing: -0.3, maxWidth: 480 }}>
            {t.contactNote}
          </div>
        </div>
        <div style={{ ...mono, fontSize: 13 }}>
          <ContactRowD label="Scholar"   val="scholar.google / CBtbUnEAAAAJ" href={d.profile.scholar}/>
          <ContactRowD label="LinkedIn"  val="/in/abdullahonden"              href={d.profile.linkedin}/>
          <ContactRowD label="Twitter"   val="@abdullahonden"                 href={d.profile.twitter}/>
          <ContactRowD label="Instagram" val="@abdonden"                      href={d.profile.instagram}/>
        </div>
      </div>

      <div style={{
        ...mono, fontSize: 10, color: '#8a857b', letterSpacing: '0.1em',
        textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between',
      }}>
        <div>© 2026 Abdullah Önden</div>
        <div>{lang === 'tr' ? 'İstanbul\'da hazırlandı' : 'Made in İstanbul'}</div>
      </div>
    </div>
  );
}

function SectionHeadD({ num, title, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 12, borderBottom: '2px solid #1b1a17',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
        <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 13, color: '#1e3a5f', fontWeight: 600, letterSpacing: '0.1em' }}>§ {num}</span>
        <span style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontSize: 34, fontWeight: 400, letterSpacing: -0.6 }}>{title}</span>
      </div>
      {right}
    </div>
  );
}

function ContactRowD({ label, val, href }) {
  return (
    <a href={href} target="_blank" rel="noopener" style={{
      display: 'grid', gridTemplateColumns: '80px 1fr auto',
      padding: '9px 0', borderBottom: '1px dashed rgba(27,26,23,0.14)',
      fontSize: 13, color: '#1b1a17', textDecoration: 'none', alignItems: 'baseline',
    }}>
      <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: '#8a857b', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</span>
      <span>{val}</span>
      <span style={{ color: '#1e3a5f' }}>→</span>
    </a>
  );
}

window.VariantD = VariantD;