{% extends "!page.html" %}

{% block body -%}
  {% if pagename != "index" %}
    <script>
      document.body.classList.add("mxl-docs");
    </script>
  {% endif %}
  {{ super() }}
{%- endblock body %}

{% block content %}
  {% if pagename == "index" %}
    <script>
      document.body.classList.add("mxl-landing", "mxl-landing-simple");
    </script>
    <a class="mxl-skip-link" href="#mxl-main">Skip to content</a>

    <div class="mxl-simple-shell">
      <header class="mxl-simple-topbar">
        <a class="mxl-simple-brand" href="{{ pathto('index') }}" aria-label="FermiLink home">
          <img
            src="{{ pathto('_static/img/mark-light.svg', 1) }}"
            alt=""
            loading="eager"
            decoding="async"
          />
          <span>FermiLink</span>
        </a>

        <nav class="mxl-simple-nav" aria-label="Documentation links">
          <a href="https://github.com/TaoELi/FermiLink" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a href="{{ pathto('overview') }}">Docs</a>
          <a href="{{ pathto('scientific_packages') }}">Packages</a>
          <a href="http://project-optimization.fermilink.org/">Optimization</a>
          <a class="mxl-simple-nav__cta" href="{{ pathto('quickstart') }}">Get started</a>
        </nav>
      </header>

      <main id="mxl-main" class="mxl-simple-main">
        <div class="mxl-hero-wrapper">
          {# ── Hero section ── #}
          <section class="mxl-simple-hero">
            <h1>The autonomous scientific computing agent</h1>
            <p class="mxl-simple-lead">
              Write a <code>goal.md</code>, <b>FermiLink</b> runs it autonomously on your laptop or HPC cluster.
            </p>

            <div class="mxl-install-block" aria-label="Install FermiLink">
              <div class="mxl-install-tabs" role="tablist" aria-label="Install options">
                <button type="button" role="tab" aria-selected="true">pip</button>
              </div>
              <div class="mxl-install-panel">
                <button
                  type="button"
                  class="mxl-install-command mxl-install-copy"
                  data-copy="pip install fermilink"
                  aria-label="Copy install command"
                >
                  <code><span class="mxl-install-prompt" aria-hidden="true">$</span> pip install <span class="mxl-install-highlight">fermilink</span></code>
                  <span class="mxl-install-copy-label" aria-hidden="true">Copy</span>
                </button>
              </div>
            </div>
          </section>

          {# ── Capability: Package Knowledge Base ── #}
          <section class="mxl-cap">
            <div class="mxl-cap__head">
              <h2 class="mxl-cap__title">
                <a href="{{ pathto('tutorial_knowledge_base') }}" class="mxl-cap__link">Knowledge Base Manager</a>
                <span class="mxl-cap__badge">stable</span>
              </h2>
              <p class="mxl-cap__desc"><b>FermiLink</b> provides an easy solution to manage package knowledge and skills, then leaves you free to work interactively with any AI agent.</p>
              <div class="mxl-cap__cmds" aria-label="Package management commands">
                <code>fermilink install &lt;pkg-id&gt;</code>
                <code>fermilink init &lt;pkg-id&gt;</code>
              </div>
            </div>
          </section>

          {# ── Capability: Autonomous Simulations ── #}
          <section class="mxl-cap">
            <div class="mxl-cap__head">
              <h2 class="mxl-cap__title">
                <a href="{{ pathto('tutorial_laptop') }}" class="mxl-cap__link">Autonomous Simulations</a>
                <span class="mxl-cap__badge">stable</span>
              </h2>
              <p class="mxl-cap__desc">Describe a <b>simulation goal</b>, <b>FermiLink</b> picks the right package and then performs the simulation across multi-day HPC campaigns.</p>
            </div>
            <div class="mxl-cap__demo">
              {# ── Quickstart cartoon: three commands ── #}
              <section class="po-cartoon po-cartoon--quickstart" aria-label="Quickstart in three commands">
                <div class="po-term" role="presentation">
                  <div class="po-term-bar">
                    <span class="po-term-dot po-term-dot--r" aria-hidden="true"></span>
                    <span class="po-term-dot po-term-dot--y" aria-hidden="true"></span>
                    <span class="po-term-dot po-term-dot--g" aria-hidden="true"></span>
                    <span class="po-term-title">fermilink &mdash; quickstart</span>
                  </div>
                  <div class="po-term-body po-term-body--quickstart">
                    <div class="po-qs-step">
                      <div class="po-term-line">
                        <span class="po-qs-num">1</span>
                        <span class="po-term-prompt">$</span>
                        <span class="po-qs-cmd"></span><span class="po-term-cursor po-qs-cursor" aria-hidden="true"></span>
                      </div>
                    </div>
                    <div class="po-qs-step">
                      <div class="po-term-line">
                        <span class="po-qs-num">2</span>
                        <span class="po-term-prompt">$</span>
                        <span class="po-qs-cmd"></span><span class="po-term-cursor po-qs-cursor" aria-hidden="true"></span>
                      </div>
                    </div>
                    <div class="po-qs-step">
                      <div class="po-term-line">
                        <span class="po-qs-num">3</span>
                        <span class="po-term-prompt">$</span>
                        <span class="po-qs-cmd"></span><span class="po-term-cursor po-qs-cursor" aria-hidden="true"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </section>

          {# ── Capability: Code Optimization ── #}
          <section class="mxl-cap">
            <div class="mxl-cap__head">
              <h2 class="mxl-cap__title">
                <a href="{{ pathto('optimize') }}" class="mxl-cap__link">Code Optimization</a>
                <span class="mxl-cap__badge">beta</span>
              </h2>
              <p class="mxl-cap__desc">Apply <b>FermiLink</b> to your existing scientific code with a <b>performance goal</b>. It iteratively modifies hot paths and runs deterministic benchmarks.</p>
            </div>
            <div class="mxl-cap__demo">
              {# ── Animated terminal cartoon (mirrors project-optimization hero) ── #}
              <section class="po-cartoon" aria-label="Animated optimize run">
                <div class="po-term" role="presentation">
                  <div class="po-term-bar">
                    <span class="po-term-dot po-term-dot--r" aria-hidden="true"></span>
                    <span class="po-term-dot po-term-dot--y" aria-hidden="true"></span>
                    <span class="po-term-dot po-term-dot--g" aria-hidden="true"></span>
                    <span class="po-term-title">fermilink &mdash; optimize</span>
                  </div>
                  <div class="po-term-body">
                    <div class="po-term-line">
                      <span class="po-term-prompt">$</span>
                      <span class="po-term-cmd"></span><span class="po-term-cursor" aria-hidden="true"></span>
                    </div>
                    <div class="po-term-line po-term-dots" aria-hidden="true"></div>
                    <div class="po-term-chart" aria-hidden="true">
                      <div class="po-chart-caption">
                        <span class="po-chart-caption-label">runtime</span>
                        <span class="po-chart-caption-arrow">&darr;</span>
                        <span class="po-chart-caption-sub">across accepted iterations</span>
                      </div>
                      <svg viewBox="0 0 320 150" class="po-trend" role="img" aria-label="Runtime decreasing across optimize iterations">
                        <g class="po-trend-grid">
                          <line x1="44" y1="24" x2="302" y2="24"/>
                          <line x1="44" y1="54" x2="302" y2="54"/>
                          <line x1="44" y1="84" x2="302" y2="84"/>
                          <line x1="44" y1="114" x2="302" y2="114"/>
                        </g>
                        <line class="po-trend-axis" x1="44" y1="16" x2="44" y2="120"/>
                        <line class="po-trend-axis" x1="44" y1="120" x2="304" y2="120"/>
                        <text class="po-trend-tick" x="40" y="27" text-anchor="end">1.0x</text>
                        <text class="po-trend-tick" x="40" y="87" text-anchor="end">0.7x</text>
                        <text class="po-trend-tick" x="40" y="122" text-anchor="end">0.5x</text>
                        <text class="po-trend-tick" x="44" y="134" text-anchor="start">iter&nbsp;0</text>
                        <text class="po-trend-tick" x="304" y="134" text-anchor="end">iter&nbsp;8</text>
                        <text class="po-trend-axis-label" x="12" y="16" text-anchor="start">runtime</text>
                        <path class="po-trend-area" d="M 54 30 L 84 36 L 114 54 L 144 76 L 174 94 L 204 106 L 234 112 L 264 115 L 294 116 L 294 120 L 54 120 Z"/>
                        <path class="po-trend-line" d="M 54 30 L 84 36 L 114 54 L 144 76 L 174 94 L 204 106 L 234 112 L 264 115 L 294 116"/>
                        <g class="po-trend-points">
                          <circle cx="54"  cy="30"  r="3.2" style="--i:0"/>
                          <circle cx="84"  cy="36"  r="3.2" style="--i:1"/>
                          <circle cx="114" cy="54"  r="3.2" style="--i:2"/>
                          <circle cx="144" cy="76"  r="3.2" style="--i:3"/>
                          <circle cx="174" cy="94"  r="3.2" style="--i:4"/>
                          <circle cx="204" cy="106" r="3.2" style="--i:5"/>
                          <circle cx="234" cy="112" r="3.2" style="--i:6"/>
                          <circle cx="264" cy="115" r="3.2" style="--i:7"/>
                          <circle cx="294" cy="116" r="3.2" style="--i:8"/>
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </section>

          {# ── Video demos (disabled until videos are ready) ──
          <section class="mxl-how-section">
            <h2 class="mxl-section-title">See it in action</h2>
            <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;width:100%;">
              <div>
                <h3 style="color:#fff;font-size:1.05rem;margin:0 0 0.8rem;text-align:center;">HPC Simulations</h3>
                <div class="video-container" style="border:1px solid rgba(140,208,255,0.12);">
                  <iframe
                    src="https://www.youtube.com/embed/REPLACE_WITH_HPC_VIDEO_ID"
                    title="FermiLink HPC simulation demo"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
              </div>
              <div>
                <h3 style="color:#fff;font-size:1.05rem;margin:0 0 0.8rem;text-align:center;">Code Optimization</h3>
                <div class="video-container" style="border:1px solid rgba(140,208,255,0.12);">
                  <iframe
                    src="https://www.youtube.com/embed/REPLACE_WITH_OPTIMIZE_VIDEO_ID"
                    title="FermiLink code optimization demo"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
              </div>
            </div>
          </section>
          #}

          {# ── Three ways to interact ── #}
          <section class="mxl-how-section">
            <h2 class="mxl-section-title">Three ways to interact</h2>
            <div class="mxl-feature-grid" style="grid-template-columns:repeat(3,1fr);">
              <a href="{{ pathto('usage') }}" class="mxl-feature-card" style="text-align:center;text-decoration:none;color:inherit;cursor:pointer;">
                <div class="mxl-feature-icon" style="margin:0 auto 0.6rem;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
                </div>
                <h3>Command line</h3>
                <p>Most powerful way for advanced users</p>
              </a>
              <a href="{{ pathto('usage_web_ui') }}" class="mxl-feature-card" style="text-align:center;text-decoration:none;color:inherit;cursor:pointer;">
                <div class="mxl-feature-icon" style="margin:0 auto 0.6rem;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <h3>Web UI</h3>
                <p>ChatGPT-style browser interface</p>
              </a>
              <a href="{{ pathto('usage_chatting_apps') }}" class="mxl-feature-card" style="text-align:center;text-decoration:none;color:inherit;cursor:pointer;">
                <div class="mxl-feature-icon" style="margin:0 auto 0.6rem;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                </div>
                <h3>Telegram bot</h3>
                <p>Monitor from your phone</p>
              </a>
            </div>
          </section>

          {# ── Footer ── #}
          <footer class="mxl-landing-foot">
            <div class="mxl-landing-foot__inner">
              <span class="mxl-landing-foot__brand">FermiLink</span>
              <span class="mxl-landing-foot__copyright">Copyright &#169; {{ copyright }}</span>
            </div>
          </footer>
        </div>
      </main>
    </div>

    <script>
    (function () {
      // Copy-to-clipboard for the hero install command.
      var copyBtn = document.querySelector(".mxl-install-copy");
      if (copyBtn && navigator.clipboard) {
        copyBtn.addEventListener("click", function () {
          var text = copyBtn.getAttribute("data-copy") || "";
          navigator.clipboard.writeText(text).then(function () {
            var label = copyBtn.querySelector(".mxl-install-copy-label");
            if (!label) return;
            var prev = label.textContent;
            label.textContent = "Copied";
            setTimeout(function () { label.textContent = prev; }, 1400);
          }).catch(function () {});
        });
      }

      // Render the landing-page terminal examples as static snapshots.
      var qsSteps = document.querySelectorAll(".po-qs-step");
      var qsCmds = document.querySelectorAll(".po-qs-cmd");
      if (qsSteps.length === 3 && qsCmds.length === 3) {
        var QS_STEPS = [
          { cmd: "fermilink loop goal.md" },
          { cmd: "fermilink reproduce goal.md" },
          { cmd: "fermilink research goal.md" }
        ];

        qsSteps.forEach(function (step, i) {
          step.classList.add("po-qs-step--visible");
          qsCmds[i].textContent = QS_STEPS[i].cmd;
        });
      }

      var cmdEl = document.querySelector(".po-term-cmd");
      var dotsEl = document.querySelector(".po-term-dots");
      var chartEl = document.querySelector(".po-term-chart");
      if (!cmdEl || !dotsEl || !chartEl) return;

      cmdEl.textContent = "fermilink optimize goal.md";
      dotsEl.textContent = "...";
      chartEl.classList.add("po-term-chart--visible");
    })();
    </script>
  {% else %}
    <nav class="mxl-doc-topbar" aria-label="Documentation">
      <a class="mxl-doc-topbar__brand" href="{{ pathto('index') }}" aria-label="FermiLink home">
        <img src="{{ pathto('_static/img/mark-light.svg', 1) }}" alt="" loading="eager" decoding="async" />
        <span>FermiLink</span>
      </a>
      <div class="mxl-doc-topbar__links">
        <a href="{{ pathto('overview') }}">Docs</a>
        <a href="{{ pathto('quickstart') }}">Quickstart</a>
        <a href="{{ pathto('scientific_packages') }}">Packages</a>
        <a href="http://project-optimization.fermilink.org/">Optimization</a>
        <a href="https://github.com/TaoELi/FermiLink" target="_blank" rel="noopener noreferrer">GitHub</a>
      </div>
    </nav>
    {{ body }}
  {% endif %}
{% endblock %}

{# Drop Furo's "Made with Sphinx and @pradyunsg's Furo" line; keep Next/Prev
   nav, the copyright from conf.py, and any right-side icons. #}
{% block footer %}
<div class="related-pages">
  {% if next -%}
    <a class="next-page" href="{{ next.link }}">
      <div class="page-info">
        <div class="context">
          <span>{{ _("Next") }}</span>
        </div>
        <div class="title">{{ next.title }}</div>
      </div>
      <svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
    </a>
  {%- endif %}
  {% if prev -%}
    <a class="prev-page" href="{{ prev.link }}">
      <svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
      <div class="page-info">
        <div class="context">
          <span>{{ _("Previous") }}</span>
        </div>
        {% if prev.link == pathto(master_doc) %}
        <div class="title">{{ _("Home") }}</div>
        {% else %}
        <div class="title">{{ prev.title }}</div>
        {% endif %}
      </div>
    </a>
  {%- endif %}
</div>
<div class="bottom-of-page">
  <div class="left-details">
    {%- if show_copyright %}
    <div class="copyright">
      {%- if hasdoc('copyright') %}
        {% trans path=pathto('copyright'), copyright=copyright|e -%}
          <a href="{{ path }}">Copyright</a> &#169; {{ copyright }}
        {%- endtrans %}
      {%- else %}
        {% trans copyright=copyright|e -%}
          Copyright &#169; {{ copyright }}
        {%- endtrans %}
      {%- endif %}
    </div>
    {%- endif %}
    {%- if last_updated -%}
    <div class="last-updated">
      {% trans last_updated=last_updated|e -%}
        Last updated on {{ last_updated }}
      {%- endtrans -%}
    </div>
    {%- endif %}
  </div>
  <div class="right-details">
    {% if theme_footer_icons -%}
    <div class="icons">
      {% for icon_dict in theme_footer_icons -%}
      <a class="muted-link {{ icon_dict.class }}" href="{{ icon_dict.url }}" aria-label="{{ icon_dict.name }}">
        {{- icon_dict.html -}}
      </a>
      {% endfor %}
    </div>
    {%- endif %}
  </div>
</div>
{% endblock footer %}