// Resume page
function PageResume({ visible }) {
  const S = window.SITE;
  return (
    <div className="page" data-screen-label="Resume">
      <section className="hero" style={{paddingBottom: 48}}>
        <div className="container">
          <div className="hero-meta">
            <span className="eyebrow">Resume · {S.role}</span>
            <span className="eyebrow">Updated · May 2026</span>
          </div>
          <h1 className="serif" style={{fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 1.0, letterSpacing: '-0.015em'}}>
            Satya <em style={{fontStyle: 'italic', color: 'var(--accent-2)'}}>Dillikar.</em>
          </h1>
          <p className="lede" style={{marginTop: 24, maxWidth: '52ch'}}>
            Principal Gen AI Architect · LLM Systems · Agentic AI · Cloud Infrastructure.
            Founder twice over. Twenty-plus years building enterprise-scale software.
          </p>
          <div className="flex gap-m" style={{marginTop: 32, flexWrap: 'wrap'}}>
            <a className="btn" href={S.links.linkedin} target="_blank" rel="noreferrer">
              LinkedIn <span className="arrow">↗</span>
            </a>
            <a className="btn ghost" href={S.links.email}>
              {S.email} <span className="arrow">→</span>
            </a>
            <button className="btn ghost" onClick={() => window.print()}>
              Print / PDF <span className="arrow">↓</span>
            </button>
          </div>
        </div>
      </section>

      {/* Quick facts ribbon */}
      {visible.stats && (
        <section style={{padding: 0}}>
          <div className="container wide" style={{padding: 0}}>
            <div className="data-row">
              {S.stats.map((s, i) => (
                <div key={i} className="data-cell">
                  <div className="num">{s.num}</div>
                  <div className="label" dangerouslySetInnerHTML={{__html: s.label}} />
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Skills */}
      {visible.skills && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">01 · Capabilities</div>
              <div>
                <h2>The <em>toolkit.</em></h2>
                <p className="blurb">
                  Where my hands are right now — and the older layers underneath that
                  still shape how I think about systems.
                </p>
              </div>
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 32}}>
              {Object.entries(S.skills).map(([cluster, items]) => (
                <div key={cluster}>
                  <span className="eyebrow">{cluster}</span>
                  <div className="role-tech" style={{marginTop: 14}}>
                    {items.map(it => <span key={it} className="tech-chip">{it}</span>)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Experience */}
      {visible.experience && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">02 · Experience</div>
              <div>
                <h2>Where the <em>work</em> has been.</h2>
                <p className="blurb">
                  Listed reverse-chronologically. Current roles marked with a dot.
                </p>
              </div>
            </div>

            <div>
              {S.experience.map((r, i) => (
                <article key={i} className={"role" + (r.current ? " current" : "")}>
                  <div>
                    <div className="role-when">
                      <span className="year">{r.years}</span>
                      {r.from} – {r.to}
                    </div>
                  </div>
                  <div>
                    <h3 className="role-title">{r.title}</h3>
                    <div className="role-company">
                      {r.company} <span className="dot">·</span> {r.location}
                    </div>
                    <ul>
                      {r.bullets.map((b, j) => <li key={j}>{b}</li>)}
                    </ul>
                    {r.tech && (
                      <div className="role-tech">
                        {r.tech.map(t => <span key={t} className="tech-chip">{t}</span>)}
                      </div>
                    )}
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Education */}
      {visible.education && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">03 · Education</div>
              <div>
                <h2>Where I <em>learned.</em></h2>
              </div>
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24}}>
              <div className="card">
                <span className="eyebrow">M.Tech · CSE</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 26}}>IIT Madras</h3>
                <p className="muted" style={{marginTop: 8, fontSize: 14}}>India · Indian Institute of Technology, Madras</p>
              </div>
              <div className="card">
                <span className="eyebrow">B.Tech · CSE · Gold Medalist</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 26}}>Osmania University</h3>
                <p className="muted" style={{marginTop: 8, fontSize: 14}}>India · Hyderabad</p>
              </div>
            </div>
            <div className="spacer-s"></div>
            <span className="eyebrow">Executive education</span>
            <div className="role-tech" style={{marginTop: 14}}>
              <span className="tech-chip">Stanford Executive Leadership</span>
              <span className="tech-chip">AWS Cloud Strategy for CTOs</span>
              <span className="tech-chip">Google Cloud Strategy for CTOs</span>
              <span className="tech-chip">DeepLearning.AI · Deep Learning Specialization</span>
              <span className="tech-chip">DeepLearning.AI · AI for Business Leaders</span>
            </div>
          </div>
        </section>
      )}

      {/* Awards */}
      {visible.awards && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">04 · Awards & Recognition</div>
              <div>
                <h2>A few <em>milestones.</em></h2>
              </div>
            </div>
            <ul style={{listStyle: 'none', padding: 0, margin: 0}}>
              {S.awards.map((a, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
                  padding: '20px 0', borderTop: '1px solid var(--rule)',
                  alignItems: 'baseline',
                }}>
                  <span style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)'}}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3}}>{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {/* Publications */}
      {visible.publications && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">05 · Publications</div>
              <div>
                <h2>Things I've <em>written.</em></h2>
              </div>
            </div>
            <ol style={{listStyle: 'none', padding: 0, margin: 0}}>
              {S.publications.map((p, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr',
                  gap: 24, padding: '20px 0', borderTop: '1px solid var(--rule)',
                }}>
                  <span style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)'}}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <a className="link" href={p.url} target="_blank" rel="noreferrer" style={{borderBottom: 'none'}}>
                    <div style={{fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3}}>{p.title}</div>
                    <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 6}}>
                      {p.venue} ↗
                    </div>
                  </a>
                </li>
              ))}
            </ol>
          </div>
        </section>
      )}

      {/* Volunteering */}
      {visible.volunteering && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">06 · Volunteering</div>
              <div>
                <h2>The work <em>off the clock.</em></h2>
              </div>
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24}}>
              <div className="card">
                <span className="eyebrow">2023 — Present</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 26}}>Coding Instructor · vGuru.org</h3>
                <p className="muted" style={{marginTop: 12}}>
                  Teaching kids ages 7–14 to code in Scratch, Python, Data Science,
                  and AI/ML through home-based and online programs.
                </p>
              </div>
              <div className="card">
                <span className="eyebrow">2020 — 2023</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 26}}>Coding Instructor · Bay Area After-school</h3>
                <p className="muted" style={{marginTop: 12}}>
                  Scratch, Python, and Arduino robotics for ages 7–14 in home-based
                  Bay Area programs.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      <section>
        <div className="container">
          <ConnectStrip />
        </div>
      </section>
    </div>
  );
}

window.PageResume = PageResume;