---
// Free edition: the canonical download bar. Pro edition: a "live preview" bar
// with a locked Get Pro CTA + free download. Visible only on the author's
// deploy (PUBLIC_TEMPLATE_HUB_URL set); blank for cloning users.
import { isPro } from '../data/edition';
import IconDownload from './icons/IconDownload.astro';
const slug = 'photographer-portfolio';
const hub = import.meta.env.PUBLIC_TEMPLATE_HUB_URL;
if (!hub) return null;
const staticZip = `${hub}/downloads/${slug}-static.zip`;
const sourceZip = `${hub}/downloads/${slug}-source.zip`;
const shop = import.meta.env.PUBLIC_SHOP_URL || 'https://shop.allanninal.dev';
const proUrl = `${shop}/t/${slug}/`;
---
{isPro ? (
  <aside class="border-t border-gray-200 bg-ink" aria-label="Pro edition — live preview">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="flex-1">
        <p class="eyebrow text-white/50">Pro edition · live preview</p>
        <p class="mt-1 text-sm text-white/90 max-w-2xl">
          You're previewing the <strong class="text-white">Pro</strong> edition — the Prints &amp; Licensing page, a commercial no-attribution license, and lifetime updates. The free version you can download is more limited.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <a href={proUrl} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-full bg-white text-ink hover:bg-gray-100 transition-colors" target="_blank" rel="noopener noreferrer">
          <span aria-hidden="true">🔒</span> Pro Static HTML &rarr;
        </a>
        <a href={proUrl} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-full bg-white text-ink hover:bg-gray-100 transition-colors" target="_blank" rel="noopener noreferrer">
          <span aria-hidden="true">🔒</span> Pro Astro &rarr;
        </a>
        <a href={staticZip} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-full border border-white/30 text-white hover:border-white/60 transition-colors" download>
          <IconDownload size={14} /> Free Static HTML
        </a>
        <a href={sourceZip} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-full border border-white/30 text-white hover:border-white/60 transition-colors" download>
          <IconDownload size={14} /> Free Astro
        </a>
        <a href={hub} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm text-white/60 hover:text-white transition-colors">
          All 365 &rarr;
        </a>
      </div>
    </div>
  </aside>
) : (
  <aside class="border-t border-gray-200 bg-gray-50" aria-label="Free template — download or fork">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="flex-1">
        <p class="eyebrow text-ink-secondary">
          Free MIT template &middot; Day 16 of 365
        </p>
        <p class="mt-1 text-sm text-ink max-w-2xl">
          You're looking at a demo. Download the built static files (drop on any host &mdash; no Astro needed) or grab the full source to customize.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <a href={staticZip} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-full bg-accent text-white hover:bg-accent-dark transition-colors" download>
          <IconDownload size={14} /> Download static (HTML/CSS/JS)
        </a>
        <a href={sourceZip} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-full border border-gray-300 text-ink hover:border-gray-400 transition-colors" download>
          <IconDownload size={14} /> Source (Astro)
        </a>
        <a href={hub} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm text-ink-secondary hover:text-ink transition-colors">
          All 365 &rarr;
        </a>
        <a href={proUrl} class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-accent hover:underline transition-colors" target="_blank" rel="noopener noreferrer">
          Get Pro &rarr;
        </a>
      </div>
    </div>
  </aside>
)}
