---
import BaseLayout from '../../layouts/BaseLayout.astro';
import PageHeader from '../../components/PageHeader.astro';
import AnchorNav from '../../components/AnchorNav.astro';
import Eyebrow from '../../components/Eyebrow.astro';
import { getDict, localePath, type Lang } from '../../i18n';

export function getStaticPaths() {
  return [{ params: { lang: 'zh' } }, { params: { lang: 'en' } }];
}

const lang = Astro.params.lang as Lang;
const t = getDict(lang);

const anchorItems = [
  { id: 'requirements', tag: t.install_guide.eyebrows.requirements },
  { id: 'steps',        tag: t.install_guide.eyebrows.steps },
  { id: 'firefox',      tag: 'Firefox' },
  { id: 'faq',          tag: 'FAQ' },
  { id: 'next',         tag: t.install_guide.eyebrows.next },
];
---
<BaseLayout lang={lang} title={t.install_guide.title} description={t.install_guide.lead} path="/install-guide">
  <PageHeader
    title={t.install_guide.title}
    lead={t.install_guide.lead}
    divider={false}
  />

  <div class="mt-2 sm:mt-4">
    <AnchorNav items={anchorItems} />
  </div>

  <div class="container-wide mt-12 sm:mt-16 pb-24">
    <section id="requirements" class="mb-20 scroll-mt-20">
      <Eyebrow number="01">{t.install_guide.eyebrows.requirements}</Eyebrow>
      <h2 class="h-major mt-3">{t.install_guide.requirements_heading}</h2>
      <ul class="mt-7 space-y-3">
        {t.install_guide.requirements.map((r) => (
          <li
            class="flex items-start gap-3 rounded-lg p-4"
            style="border: 1px solid var(--border); background: var(--bg-elev);"
          >
            <span
              class="mt-[3px] inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full"
              style="background: var(--accent-soft); color: var(--accent);"
              aria-hidden
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7" /></svg>
            </span>
            <span class="text-[14px] leading-relaxed">{r}</span>
          </li>
        ))}
      </ul>
    </section>

    <section id="steps" class="mb-20 scroll-mt-20">
      <Eyebrow number="02">{t.install_guide.eyebrows.steps}</Eyebrow>
      <h2 class="h-major mt-3">{t.install_guide.steps_heading}</h2>
      <ol class="relative mt-7">
        <div
          class="absolute left-[27px] top-2 bottom-2 w-px hidden sm:block"
          style="background: var(--border);"
          aria-hidden
        ></div>
        {t.install_guide.steps.map((s) => (
          <li class="relative pl-0 sm:pl-20 mb-6 last:mb-0">
            <div
              class="absolute left-0 top-0 hidden sm:flex h-14 w-14 items-center justify-center rounded-full font-display text-[17px]"
              style="border: 1px solid var(--border-strong); background: var(--bg); color: var(--accent);"
            >
              {s.step}
            </div>
            <div
              class="rounded-xl p-5 sm:p-6"
              style="border: 1px solid var(--border); background: var(--bg-elev);"
            >
              <div class="sm:hidden font-mono text-[12px] uppercase tracking-[0.16em] mb-2" style="color: var(--accent);">Step {s.step}</div>
              <h3 class="h-minor">{s.title}</h3>
              <p class="mt-3 text-[14px] leading-relaxed" style="color: var(--fg-muted);">{s.body}</p>
              {s.code && (
                <div
                  class="mt-4 rounded-md px-3 py-2 font-mono text-[12.5px] break-all"
                  style="background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%); border: 1px solid var(--border); color: var(--fg);"
                >
                  {s.code.startsWith('http') ? (
                    <a href={s.code} target="_blank" rel="noopener" style="color: var(--accent);">{s.code}</a>
                  ) : s.code}
                </div>
              )}
            </div>
          </li>
        ))}
      </ol>
    </section>

    <section id="firefox" class="mb-20 scroll-mt-20">
      <Eyebrow number="03">Firefox</Eyebrow>
      <h2 class="h-major mt-3">{t.install_guide.firefox_heading}</h2>
      <div
        class="mt-7 rounded-xl p-5 sm:p-6 grid gap-4 sm:grid-cols-[auto_1fr] sm:items-start"
        style="border: 1px dashed var(--border-strong); background: color-mix(in oklab, var(--bg-elev) 85%, var(--accent-soft) 15%);"
      >
        <div>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="color: var(--accent);"><path d="M12 12a8 8 0 1 1-5.7-7.6c.4 1 .9 2 1.7 2.6 1.2 1 3 1 3 1s-.8 2 .3 3.6c1 1.5 3 2 5 1.7-.3 1.3-1.2 2.6-2.5 3.5"/></svg>
        </div>
        <p class="text-[13.5px] leading-relaxed" style="color: var(--fg-muted);">{t.install_guide.firefox_body}</p>
      </div>
    </section>

    <section id="faq" class="mb-20 scroll-mt-20">
      <Eyebrow number="04">FAQ</Eyebrow>
      <h2 class="h-major mt-3">{t.install_guide.troubleshoot_heading}</h2>
      <div class="mt-7 grid gap-3">
        {t.install_guide.troubleshoot.map((q) => (
          <details
            class="group rounded-lg px-5 py-4"
            style="border: 1px solid var(--border); background: var(--bg-elev);"
          >
            <summary class="flex cursor-pointer items-center justify-between list-none gap-4 text-[14px] font-medium">
              <span>{q.q}</span>
              <span
                class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full transition-transform group-open:rotate-45"
                style="border: 1px solid var(--border-strong); color: var(--fg-muted);"
                aria-hidden
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14" /></svg>
              </span>
            </summary>
            <p class="mt-3 text-[13.5px] leading-relaxed" style="color: var(--fg-muted);">{q.a}</p>
          </details>
        ))}
      </div>
    </section>

    <section id="next" class="scroll-mt-20">
      <div
        class="relative overflow-hidden rounded-2xl p-8 sm:p-10 bg-noise"
        style="border: 1px solid var(--border); background: linear-gradient(135deg, var(--bg-elev) 0%, color-mix(in oklab, var(--accent-soft) 55%, var(--bg-elev)) 100%);"
      >
        <div class="absolute inset-0 bg-grid opacity-30" aria-hidden></div>
        <div class="relative grid gap-6 lg:grid-cols-[1.4fr_auto] lg:items-center">
          <div>
            <div class="flex items-center gap-2 font-mono text-[12px] uppercase tracking-[0.16em]" style="color: var(--accent);">
              <span class="inline-block h-[6px] w-[6px] rounded-full" style="background: var(--accent);"></span>
              <span>{t.install_guide.eyebrows.next}</span>
            </div>
            <h2 class="mt-3 h-major">{t.install_guide.after_install_heading}</h2>
            <p class="mt-4 text-[14.5px] leading-relaxed max-w-2xl" style="color: var(--fg-muted);">{t.install_guide.after_install_body}</p>
          </div>
          <a
            href={localePath(lang, '/docs/getting-started')}
            class="inline-flex items-center gap-2 rounded-md px-5 py-3 font-medium text-[14px] justify-self-start lg:justify-self-end whitespace-nowrap"
            style="background: var(--accent); color: var(--accent-fg);"
          >
            {t.install_guide.next_cta}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
        </div>
      </div>
    </section>
  </div>
</BaseLayout>
