(() => {
  /* global React */
  const { Section, Eyebrow, Icon, PageShell, pageStatus } = window;

  // Order roughly follows the site nav, then auxiliary pages.
  const PAGES = [
    { label: 'Home', file: 'index.html', note: 'Marketing homepage' },
    { label: 'Plans', file: 'plans.html', note: 'Plans & pricing' },
    { label: 'Services', file: 'services.html', note: 'Custom services' },
    { label: 'Case Studies', file: 'case-studies.html', note: 'Portfolio + plan filters' },
    { label: 'Get Swapps', file: 'get-swapps.html', note: 'Guided survey / contact' },
    { label: 'Login', file: 'login.html', note: 'App sign-in' },
    { label: 'Service Scope & Terms', file: 'service-scope.html', note: 'Scope & terms' },
    { label: 'Legacy', file: 'legacy.html', note: 'Legacy layout reference' },
    { label: 'Resources', file: 'resources.html', note: 'Articles, support, FAQ' },
    { label: 'About Us', file: 'about-us.html', note: 'Company, contact, careers' },
  ];

  // Production URL each wireframe maps to under swapps.com (login lives on the app).
  const prodUrl = (file) =>
    file === 'index.html' ? 'https://swapps.com/' :
    file === 'login.html' ? 'https://app.swapps.com/swapps-login/' :
    `https://swapps.com/${file.replace('.html', '')}/`;

  function StatusPill({ status }) {
    const live = status === 'live';
    return (
      <span
        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${
        live ? 'border-emerald-300 bg-emerald-50 text-emerald-700' : 'border-amber-300 bg-amber-50 text-amber-700'}`
        }>
        <span className={`h-1.5 w-1.5 rounded-full ${live ? 'bg-emerald-500' : 'bg-amber-500'}`} />
        {status}
      </span>);

  }

  function SitemapPage() {
    const live = PAGES.filter((p) => pageStatus(p.file) === 'live').length;
    const draft = PAGES.length - live;
    return (
      <PageShell>
        <Section tone="paper" className="!pt-12">
          <div className="max-w-3xl">
            <Eyebrow>wireframe index</Eyebrow>
            <h1 className="mt-5 text-[40px] font-semibold leading-[1.1] tracking-tight md:text-[48px]">Pages &amp; status</h1>
            <p className="mt-5 text-[16px] leading-relaxed text-zinc-600">
              Every wireframe in this prototype, its current state, and the production URL it maps to under swapps.com.
            </p>
            <div className="mt-5 flex items-center gap-3 text-sm text-zinc-500">
              <span><span className="font-medium text-zinc-900">{PAGES.length}</span> pages</span>
              <span aria-hidden>·</span>
              <span><span className="font-medium text-emerald-700">{live}</span> live</span>
              <span aria-hidden>·</span>
              <span><span className="font-medium text-amber-700">{draft}</span> draft</span>
            </div>
          </div>
        </Section>

        <Section tone="cloud" className="!pt-0">
          <div className="overflow-x-auto rounded-xl border border-zinc-200 bg-white">
            <table className="w-full min-w-[640px] text-left text-sm">
              <thead>
                <tr className="bg-zinc-100 text-[11px] uppercase tracking-[0.16em] text-zinc-600">
                  <th className="px-5 py-4">Page</th>
                  <th className="px-5 py-4">Status</th>
                  <th className="px-5 py-4">Wireframe</th>
                  <th className="px-5 py-4">Production (swapps.com)</th>
                </tr>
              </thead>
              <tbody>
                {PAGES.map((p) => {
                  const status = pageStatus(p.file);
                  const prod = prodUrl(p.file);
                  return (
                    <tr key={p.file} className="border-t border-zinc-200">
                      <td className="px-5 py-4">
                        <div className="font-medium text-zinc-900">{p.label}</div>
                        <div className="text-[12px] text-zinc-500">{p.note}</div>
                      </td>
                      <td className="px-5 py-4"><StatusPill status={status} /></td>
                      <td className="px-5 py-4">
                        <a href={p.file} className="inline-flex items-center gap-1 font-medium text-zinc-900 underline-offset-2 hover:underline">
                          Open <Icon name="arrow-up-right" size={13} />
                        </a>
                      </td>
                      <td className="px-5 py-4">
                        <a href={prod} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-zinc-600 underline-offset-2 hover:text-zinc-900 hover:underline">
                          {prod.replace('https://', '')} <Icon name="external-link" size={13} />
                        </a>
                      </td>
                    </tr>);

                })}
              </tbody>
            </table>
          </div>
          <p className="annot mt-4 text-[11px]">
            Draft = still being designed. Production URLs are the intended swapps.com paths; draft pages may not be live yet.
          </p>
        </Section>
      </PageShell>);

  }

  window.SitemapPage = SitemapPage;
})();