// Home page
function PageHome({ go, visible }) {
  const S = window.SITE;
  return (
    <div className="page" data-screen-label="Home">
      {/* Hero --------------------------------------------------- */}
      <section className="hero">
        <div className="container">
          <div className="hero-meta">
            <span className="eyebrow">Portfolio · est. MMXXIV</span>
            <span className="eyebrow">{S.location} · 37.7749° N</span>
          </div>

          <div className="display">
            Satya<br/>
            <em>Dillikar.</em>
          </div>

          <div className="hero-sub">
            <p className="lede">
              {S.role}. I design and ship Gen AI, agentic systems, and cloud platforms
              at enterprise scale — twenty years turning ambitious ideas into production
              software that runs in the real world.
            </p>
            <div className="flex gap-m" style={{flexWrap: 'wrap'}}>
              <a className="btn" href={S.links.linkedin} target="_blank" rel="noreferrer">
                Connect on LinkedIn <span className="arrow">→</span>
              </a>
              <a className="btn ghost" href={S.links.github} target="_blank" rel="noreferrer">
                GitHub <span className="arrow">↗</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Stats data row --------------------------------------- */}
      {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>
      )}

      {/* Now / current work ----------------------------------- */}
      {visible.now && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">01 · Now</div>
              <div>
                <h2>What I'm <em>building</em></h2>
                <p className="blurb">
                  Two things have my full attention this year: a conversational AI
                  platform for personal growth, and a nonprofit teaching kids to code
                  with AI in the loop.
                </p>
              </div>
            </div>

            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24}}>
              <div className="card">
                <span className="eyebrow">Kailasa.app · 2025 →</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 28}}>Conversational AI for personal growth.</h3>
                <p style={{marginTop: 12, color: 'var(--ink-2)'}}>
                  Full Gen AI stack — multi-layer prompting, persona-aware
                  generation, vector memory, agentic routing. Shipped iOS, Android, Web.
                </p>
                <div className="role-tech" style={{marginTop: 16}}>
                  {["LangChain", "LangGraph", "Pinecone", "OpenAI"].map(t => (
                    <span key={t} className="tech-chip">{t}</span>
                  ))}
                </div>
              </div>
              <div className="card">
                <span className="eyebrow">CodeCircle.org · 2025 →</span>
                <h3 className="serif" style={{marginTop: 12, fontSize: 28}}>Teaching kids to code, with AI as the tutor.</h3>
                <p style={{marginTop: 12, color: 'var(--ink-2)'}}>
                  Nonprofit. Intelligent tutoring system built on structured prompts
                  and function-calling. Browser runtime. Kubernetes at nonprofit cost.
                </p>
                <div className="role-tech" style={{marginTop: 16}}>
                  {["LLMs", "Function Calling", "Kubernetes", "Education"].map(t => (
                    <span key={t} className="tech-chip">{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Selected work preview -------------------------------- */}
      {visible.work && (
        <section>
          <div className="container">
            <div className="section-head">
              <div className="num">02 · Track Record</div>
              <div>
                <h2>Twenty years of <em>shipping at scale.</em></h2>
                <p className="blurb">
                  From Broadcom's silicon to VMware's Tanzu platform to founding my
                  own ventures — a partial list of where the work has been.
                </p>
              </div>
            </div>
            <div className="post-list">
              {[
                {when: "2025—", title: "Kailasa.app", desc: "Founder & Chief Architect", tag: "Founding"},
                {when: "2025—", title: "CodeCircle.org", desc: "Founder & Chief Architect (Nonprofit)", tag: "Founding"},
                {when: "2023—", title: "Stealth Startup", desc: "Chief Architect · Interim CTO — Cybersecurity × Gen AI", tag: "Advisory"},
                {when: "2017—23", title: "VMware", desc: "Technical Director (Central Org) — Tanzu, partner ecosystem, $500M+ ARR", tag: "Leadership"},
                {when: "2016—17", title: "Brocade", desc: "Technical Director — SLX-OS, BGP/EVPN", tag: "Leadership"},
                {when: "2013—16", title: "Ciena", desc: "Senior Engineering Leader — MPLS, Ethernet", tag: "Leadership"},
              ].map((r, i) => (
                <div key={i} className="post-row" onClick={() => go("resume")}>
                  <div className="post-date">{r.when}</div>
                  <div>
                    <div className="post-title">{r.title}</div>
                    <div className="post-excerpt">{r.desc}</div>
                  </div>
                  <div className="post-read">{r.tag} →</div>
                </div>
              ))}
            </div>
            <div className="spacer-s"></div>
            <div className="flex gap-m" style={{marginTop: 24}}>
              <button className="btn ghost" onClick={() => go("resume")}>
                Full resume <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </section>
      )}

      {/* Writing teaser --------------------------------------- */}
      {visible.writing && (() => {
        const featured = S.postGroups[0].posts[0];
        const recent = S.postGroups.flatMap(g => g.posts.map(p => ({...p, group: g.label}))).slice(0, 4);
        return (
          <section>
            <div className="container">
              <div className="section-head">
                <div className="num">03 · Writing</div>
                <div>
                  <h2>Notes, in <em>longhand.</em></h2>
                  <p className="blurb">
                    Engineering, leadership, personal finance, the occasional life
                    lesson. New pieces published to softbuild.dev.
                  </p>
                </div>
              </div>
              <div className="featured-post">
                <div className="visual">
                  "Should I learn<br/>Go Lang?"
                </div>
                <div className="col gap-m" style={{justifyContent: 'center'}}>
                  <span className="eyebrow">{featured.date} · Technical</span>
                  <h2 className="serif" style={{marginTop: 4}}>{featured.title}</h2>
                  <p className="lede" style={{color: 'var(--ink-2)'}}>{featured.excerpt}</p>
                  <div>
                    <button className="btn ghost" onClick={() => featured.slug ? go("post:" + featured.slug) : window.open(featured.url, "_blank")}>
                      Read essay <span className="arrow">→</span>
                    </button>
                  </div>
                </div>
              </div>
              <div className="spacer"></div>
              <div className="post-list">
                {recent.map((p, i) => (
                  <a
                    key={i}
                    href={p.slug ? ("#post:" + p.slug) : p.url}
                    target={p.slug ? undefined : "_blank"}
                    rel={p.slug ? undefined : "noreferrer"}
                    onClick={p.slug ? (e) => { e.preventDefault(); go("post:" + p.slug); } : undefined}
                    className="post-row"
                    style={{textDecoration: 'none', color: 'inherit'}}
                  >
                    <div className="post-date">{p.date}</div>
                    <div>
                      <div className="post-title">{p.title}</div>
                      <div className="post-excerpt">{p.excerpt}</div>
                    </div>
                    <div className="post-read">#{p.group} {p.slug ? '→' : '↗'}</div>
                  </a>
                ))}
              </div>
              <div className="spacer-s"></div>
              <button className="btn ghost" onClick={() => go("blog")}>
                All writing <span className="arrow">→</span>
              </button>
            </div>
          </section>
        );
      })()}

      {/* Connect strip --------------------------------------- */}
      <section>
        <div className="container">
          <div className="section-head">
            <div className="num">04 · Get in touch</div>
            <div>
              <h2>Let's <em>talk.</em></h2>
              <p className="blurb">
                I advise founders, mentor engineers, and take on a small number of
                fractional CTO engagements each year. The fastest way to reach me is
                LinkedIn or email.
              </p>
            </div>
          </div>
          <ConnectStrip />
        </div>
      </section>
    </div>
  );
}

window.PageHome = PageHome;