(function () {
  const root = document.getElementById("photoforge-app");
  const config = JSON.parse(document.getElementById("photoforge-config")?.textContent || "{}");
  const assets = config.assets || {};

  const VIEWS = {
    LANDING: "landing",
    AUTH: "auth",
    IDLE: "idle",
    TEXT: "text_input",
    ANALYZING: "analyzing",
    DESCRIPTION: "description_ready",
    GENERATING: "generating",
    COMPLETE: "complete",
  };

  const LEGAL_CONTENT = {
    contact: {
      title: "Contact Us",
      content: `
        <p>Ask us anything, or share your feedback. We usually answer within the same business day.</p>
        <p><a href="mailto:support@rekognize.io" class="text-zinc-900 underline decoration-dotted dark:text-white">support@rekognize.io</a></p>
      `,
    },
    privacy: {
      title: "Privacy Policy",
      content: `
        <p>We only collect the content you upload, your email (if provided), and basic technical data needed to operate the site. We use this information solely to run and improve photoforge.io and do not sell your data. Limited third-party services may process data on our behalf. You can request access or deletion of your data anytime through our Contact Us page. This site is not intended for children under 13. We may update this policy, and the latest version will always be posted here.</p>
      `,
    },
    terms: {
      title: "Terms of Service",
      content: `
        <p>By using <strong>PhotoForge</strong>, you agree to use the site lawfully and not misuse, disrupt, or copy the service. All site content is owned by <strong>Rekognize OU</strong>. The service is provided as is, without warranties, and we are not liable for any indirect or consequential damages. We may change these terms or suspend access at any time. Estonian law applies. For questions, visit our Contact Us page.</p>
      `,
    },
    cookies: {
      title: "Cookie Policy",
      content: `
        <p><strong>PhotoForge</strong> uses essential cookies to operate the site. Optional analytics cookies may be used only with your consent. You can disable cookies in your browser, but some features may not work. Third-party services we use may set their own cookies. For questions, see our Contact Us page.</p>
      `,
    },
  };

  const state = {
    view: VIEWS.LANDING,
    isSubmitting: false,
    inputImage: null,
    photoUuid: null,
    description: "",
    outputImages: [],
    progress: 0,
    error: null,
    userEmail: config.user?.email || null,
    theme: localStorage.getItem("photoforge-theme") || "light",
    count: 1,
    imageStyle: "natural",
    imageQuality: "standard",
    gallery: [],
    uploadedImages: [],
    showGallery: false,
    showPurchase: false,
    selectedPurchaseTier: "sm",
    credits: Number.isFinite(config.user?.credits) ? config.user.credits : 0,
    activeLegalPage: null,
    authSent: false,
    purchaseMode: "select",
    clientSecret: null,
    stripePublicKey: null,
  };

  let progressTimer = null;
  let generationTarget = 0;
  let checkoutInstance = null;
  let mountedClientSecret = null;
  let stripeInstance = null;

  function html(value) {
    return String(value ?? "")
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function icon(name, classes = "h-5 w-5") {
    return `<i data-lucide="${name}" class="${classes}"></i>`;
  }

  function tooltip(label, content) {
    return `
      <span class="group/tooltip relative inline-flex">
        ${content}
        <span class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-black/80 px-2 py-1 text-[10px] text-white opacity-0 backdrop-blur-md transition-opacity group-hover/tooltip:opacity-100">
          ${html(label)}
          <span class="absolute left-1/2 top-full -mt-1 -translate-x-1/2 border-4 border-transparent border-t-black/80"></span>
        </span>
      </span>
    `;
  }

  function getCookie(name) {
    return document.cookie
      .split(";")
      .map((cookie) => cookie.trim())
      .find((cookie) => cookie.startsWith(`${name}=`))
      ?.slice(name.length + 1) || "";
  }

  function csrfHeaders() {
    const token = getCookie("csrftoken") || document.querySelector('meta[name="csrf-token"]')?.content || "";
    return token ? { "X-CSRFToken": decodeURIComponent(token) } : {};
  }

  async function readJsonResponse(response) {
    const contentType = response.headers.get("content-type") || "";
    const payload = contentType.includes("application/json") ? await response.json() : {};
    if (!response.ok) {
      const message = payload.error || payload.detail || response.statusText || "Request failed";
      const error = new Error(message);
      error.payload = payload;
      error.status = response.status;
      throw error;
    }
    return payload;
  }

  function setView(view) {
    if (![VIEWS.ANALYZING, VIEWS.GENERATING].includes(view)) {
      clearProgressTimer();
    }
    state.view = view;
    enforceAuthGuard();
    render();
  }

  function enforceAuthGuard() {
    if (!state.userEmail && ![VIEWS.LANDING, VIEWS.AUTH].includes(state.view)) {
      state.view = VIEWS.LANDING;
    }
  }

  function resetFlow() {
    clearProgressTimer();
    state.view = VIEWS.IDLE;
    state.inputImage = null;
    state.photoUuid = null;
    state.description = "";
    state.outputImages = [];
    state.progress = 0;
    state.count = 1;
    state.imageStyle = "natural";
    state.imageQuality = "standard";
    render();
  }

  function showError(message, returnView = VIEWS.LANDING) {
    state.error = message;
    render();
    window.setTimeout(() => {
      state.error = null;
      if (returnView) {
        state.view = returnView;
        if (returnView === VIEWS.LANDING) {
          state.inputImage = null;
        }
      }
      render();
    }, 3000);
  }

  function updateProgressUi() {
    const circle = root.querySelector("[data-progress-circle]");
    if (circle) {
      const circumference = 283;
      circle.style.strokeDashoffset = String(circumference - (circumference * state.progress) / 100);
    }
    const bar = root.querySelector("[data-progress-bar]");
    if (bar) {
      bar.style.width = `${Math.max(0, Math.min(100, state.progress))}%`;
    }
  }

  function clearProgressTimer() {
    if (progressTimer) {
      window.clearInterval(progressTimer);
      progressTimer = null;
    }
  }

  function startProgressTimer(kind) {
    clearProgressTimer();
    progressTimer = window.setInterval(() => {
      const target = kind === VIEWS.ANALYZING ? 95 : generationTarget;
      const diff = target - state.progress;
      if (diff > 0.1) {
        state.progress += diff * 0.01;
        updateProgressUi();
      }
    }, 100);
  }

  async function checkAuth() {
    try {
      const response = await fetch("/api/profiles/me", { credentials: "same-origin" });
      if (!response.ok) {
        state.userEmail = null;
        state.credits = 0;
        enforceAuthGuard();
        render();
        return;
      }
      const data = await response.json();
      state.userEmail = data.email;
      state.credits = data.credits ?? state.credits;
      render();
      await fetchGallery();
    } catch (_error) {
      render();
    }
  }

  async function fetchGallery() {
    if (!state.userEmail) {
      state.gallery = [];
      render();
      return;
    }
    try {
      const response = await fetch("/api/photos/gallery", { credentials: "same-origin" });
      const data = await readJsonResponse(response);
      state.gallery = data.map((item) => ({
        id: String(item.id),
        imageUrl: item.photo_url || "",
        description: item.description || "",
        sourceImage: item.source_photo_url || "",
        style: item.params?.style || "natural",
        quality: item.params?.quality || "standard",
        createdAt: new Date(item.created).getTime(),
      }));
      render();
    } catch (error) {
      console.error("Gallery fetch failed", error);
    }
  }

  async function handleLogout() {
    try {
      await fetch("/api/profiles/auth/logout", {
        method: "POST",
        credentials: "same-origin",
        headers: { ...csrfHeaders(), "Content-Type": "application/json" },
      });
    } catch (error) {
      console.error(error);
    }
    state.userEmail = null;
    state.credits = 0;
    state.gallery = [];
    state.view = VIEWS.LANDING;
    render();
  }

  async function requestLogin(email) {
    state.isSubmitting = true;
    render();
    try {
      const response = await fetch("/api/profiles/auth/email", {
        method: "POST",
        credentials: "same-origin",
        headers: { ...csrfHeaders(), "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      await readJsonResponse(response);
      state.authSent = true;
    } catch (error) {
      window.alert("Failed to send login link. Please try again.");
    } finally {
      state.isSubmitting = false;
      render();
    }
  }

  async function processSelectedFile(file, previewUrl = null) {
    if (!file) return;

    state.inputImage = previewUrl || URL.createObjectURL(file);
    state.photoUuid = null;
    state.description = "";
    state.outputImages = [];
    state.progress = 0;
    state.view = VIEWS.ANALYZING;
    render();
    startProgressTimer(VIEWS.ANALYZING);

    try {
      const formData = new FormData();
      formData.append("photo", file);
      const uploadResponse = await fetch("/api/photos/upload", {
        method: "POST",
        credentials: "same-origin",
        headers: csrfHeaders(),
        body: formData,
      });
      const uploadData = await readJsonResponse(uploadResponse);
      state.photoUuid = uploadData.uuid;

      const uploaded = {
        id: uploadData.uuid,
        url: state.inputImage,
        createdAt: Date.now(),
        description: "",
      };
      state.uploadedImages = [uploaded, ...state.uploadedImages.filter((item) => item.id !== uploaded.id)].slice(0, 10);

      const describeResponse = await fetch(`/api/photos/describe/${uploadData.uuid}`, {
        method: "POST",
        credentials: "same-origin",
        headers: csrfHeaders(),
      });
      const describeData = await readJsonResponse(describeResponse);
      state.description = describeData.description || "";
      state.uploadedImages = state.uploadedImages.map((item) =>
        item.id === uploadData.uuid ? { ...item, description: state.description } : item,
      );
      state.progress = 100;
      clearProgressTimer();
      state.view = VIEWS.DESCRIPTION;
      render();
    } catch (error) {
      console.error("Processing failed", error);
      clearProgressTimer();
      const code = error.payload?.code;
      if (code === "auth_required") {
        state.view = VIEWS.AUTH;
        state.error = "Please sign in before uploading an image.";
        render();
        return;
      }
      showError(error.message || "Failed to process image.");
    }
  }

  async function processImageUrl(url) {
    state.showGallery = false;
    state.inputImage = url;
    state.photoUuid = null;
    state.description = "";
    state.outputImages = [];
    state.progress = 0;
    state.view = VIEWS.ANALYZING;
    render();
    startProgressTimer(VIEWS.ANALYZING);

    try {
      const response = await fetch(url, { credentials: "same-origin" });
      if (!response.ok) throw new Error("Could not load source image.");
      const blob = await response.blob();
      const extension = blob.type.split("/")[1] || "png";
      await processSelectedFile(new File([blob], `source.${extension}`, { type: blob.type }), url);
    } catch (error) {
      console.error(error);
      clearProgressTimer();
      showError("Could not reuse this image. Please upload it again.", VIEWS.IDLE);
    }
  }

  async function beginGeneration() {
    if (!state.description.trim()) return;
    if (!state.photoUuid) {
      window.alert("Please upload an image first.");
      setView(VIEWS.IDLE);
      return;
    }

    const generationCount = Number(state.count);
    const cost = state.imageQuality === "hd" ? 2 : 1;
    const images = [];
    state.outputImages = [];
    state.progress = 0;
    state.view = VIEWS.GENERATING;
    generationTarget = 5;
    render();
    startProgressTimer(VIEWS.GENERATING);

    try {
      for (let index = 0; index < generationCount; index += 1) {
        const stepSize = 100 / generationCount;
        generationTarget = (index + 0.95) * stepSize;

        const response = await fetch(`/api/photos/forge/${state.photoUuid}`, {
          method: "POST",
          credentials: "same-origin",
          headers: { ...csrfHeaders(), "Content-Type": "application/json" },
          body: JSON.stringify({
            style: state.imageStyle,
            quality: state.imageQuality,
          }),
        });
        const forged = await readJsonResponse(response);
        images.push(forged.photo_url || forged.url || "");
        state.credits = Math.max(0, state.credits - cost);
        state.progress = (index + 1) * stepSize;
        updateProgressUi();
      }

      generationTarget = 100;
      state.progress = 100;
      updateProgressUi();
      await new Promise((resolve) => window.setTimeout(resolve, 400));
      clearProgressTimer();

      state.outputImages = images.filter(Boolean);
      state.gallery = [
        ...state.outputImages.map((imageUrl) => ({
          id: Math.random().toString(36).slice(2),
          imageUrl,
          sourceImage: state.inputImage || "",
          description: state.description || "Generated Image",
          style: state.imageStyle,
          quality: state.imageQuality,
          createdAt: Date.now(),
        })),
        ...state.gallery,
      ];
      state.view = state.outputImages.length ? VIEWS.COMPLETE : VIEWS.DESCRIPTION;
      render();
      checkAuth();
      fetchGallery();
    } catch (error) {
      console.error("Generation error", error);
      clearProgressTimer();
      if (error.payload?.code === "no_credit") {
        window.alert("Not enough credits to continue generation.");
      } else {
        window.alert("Generation failed. Please try again.");
      }
      state.view = VIEWS.DESCRIPTION;
      render();
      checkAuth();
    }
  }

  async function ensureStripePublicKey() {
    if (state.stripePublicKey) return state.stripePublicKey;
    const response = await fetch("/payment/config", { credentials: "same-origin" });
    const data = await readJsonResponse(response);
    state.stripePublicKey = data.publicKey;
    return state.stripePublicKey;
  }

  function destroyCheckout() {
    if (checkoutInstance) {
      try {
        checkoutInstance.destroy();
      } catch (_error) {
        // Stripe may already have torn down the iframe after a redirect.
      }
    }
    checkoutInstance = null;
    mountedClientSecret = null;
  }

  async function waitForStripe() {
    for (let attempt = 0; attempt < 50; attempt += 1) {
      if (window.Stripe) return;
      await new Promise((resolve) => window.setTimeout(resolve, 100));
    }
    throw new Error("Stripe.js could not be loaded.");
  }

  async function mountCheckout() {
    if (!state.clientSecret || mountedClientSecret === state.clientSecret) return;
    const checkoutMount = document.getElementById("checkout");
    if (!checkoutMount) return;

    try {
      await waitForStripe();
      const publicKey = await ensureStripePublicKey();
      stripeInstance = stripeInstance || window.Stripe(publicKey);
      destroyCheckout();
      checkoutInstance = await stripeInstance.initEmbeddedCheckout({ clientSecret: state.clientSecret });
      checkoutInstance.mount("#checkout");
      mountedClientSecret = state.clientSecret;
    } catch (error) {
      console.error(error);
      checkoutMount.innerHTML = `<p class="p-8 text-center text-sm text-red-500">${html(error.message || "Could not load checkout.")}</p>`;
    }
  }

  async function openPurchase(tier = null) {
    if (!state.userEmail) {
      setView(VIEWS.AUTH);
      return;
    }

    destroyCheckout();
    state.showPurchase = true;
    state.selectedPurchaseTier = tier || state.selectedPurchaseTier || "sm";
    state.purchaseMode = tier ? "checkout" : "select";
    state.clientSecret = null;
    render();

    if (!tier) return;

    try {
      await ensureStripePublicKey();
      const response = await fetch(`/payment/session?tier=${encodeURIComponent(tier)}`, {
        method: "POST",
        credentials: "same-origin",
        headers: { ...csrfHeaders(), "Content-Type": "application/json" },
      });
      const data = await readJsonResponse(response);
      state.clientSecret = data.clientSecret;
      render();
    } catch (error) {
      console.error("Stripe session error", error);
      showError("Could not prepare checkout.", null);
    }
  }

  function closePurchase() {
    destroyCheckout();
    state.showPurchase = false;
    state.purchaseMode = "select";
    state.clientSecret = null;
    render();
  }

  function downloadUrl(url, filename) {
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
  }

  function formatDate(timestamp) {
    if (!timestamp) return "";
    return new Date(timestamp).toLocaleDateString();
  }

  function formatTime(timestamp) {
    if (!timestamp) return "";
    return new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  }

  function navTemplate() {
    const showReset = ![VIEWS.IDLE, VIEWS.LANDING, VIEWS.AUTH].includes(state.view);
    return `
      <nav class="fixed left-0 top-0 z-50 flex w-full items-center justify-between border-b border-zinc-200 bg-white/80 px-6 py-6 backdrop-blur-md transition-colors duration-500 dark:border-white/5 dark:bg-[#09090b]/80">
        <button data-action="set-view" data-view="landing" class="group flex items-center gap-3">
          <span class="h-8 w-8 overflow-hidden rounded-lg shadow-sm transition-transform group-hover:scale-105">
            <img src="${html(assets.logo)}" alt="PhotoForge" class="h-full w-full object-cover">
          </span>
          <span class="text-sm font-medium tracking-wide">PhotoForge</span>
        </button>
        <div class="flex items-center gap-4 sm:gap-6">
          ${
            state.userEmail
              ? `<button data-action="open-purchase" class="hidden items-center gap-2 rounded-full bg-zinc-100 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-all hover:bg-zinc-200 dark:bg-white/10 dark:text-zinc-300 dark:hover:bg-white/20 sm:flex">
                  ${icon("zap", "h-3 w-3 text-amber-500")}<span>${html(state.credits)} credits</span>
                </button>`
              : `<button data-action="set-view" data-view="auth" class="hidden items-center gap-2 rounded-full border border-zinc-200 bg-zinc-50/50 px-4 py-1.5 text-xs font-medium text-zinc-600 transition-all hover:scale-105 hover:border-zinc-300 hover:bg-white dark:border-zinc-800 dark:bg-zinc-900/50 dark:text-zinc-400 dark:hover:border-zinc-700 dark:hover:bg-zinc-900 md:inline-flex">
                  <span class="relative mr-1 flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-400 opacity-75"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-indigo-500"></span></span>
                  <span>Sign up and get <span class="font-semibold text-zinc-900 dark:text-white">5 photo credits free</span></span>
                </button>`
          }
          ${
            state.userEmail
              ? `<div class="hidden items-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-zinc-900 opacity-80 dark:text-white sm:flex">
                  ${icon("user", "h-4 w-4")}<span>${html(state.userEmail)}</span>
                  <button data-action="logout" class="ml-2 rounded-full p-1.5 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white" title="Sign out">${icon("log-out", "h-4 w-4")}</button>
                </div>`
              : `<button data-action="set-view" data-view="auth" class="hidden items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-lg transition-all hover:bg-zinc-800 hover:shadow-zinc-900/20 dark:bg-white dark:text-black dark:hover:bg-zinc-200 dark:hover:shadow-white/20 sm:flex">Sign In</button>`
          }
          <button data-action="toggle-theme" class="rounded-full p-2 text-zinc-400 transition-colors duration-300 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white" aria-label="Toggle theme">
            ${state.theme === "light" ? icon("moon") : icon("sun")}
          </button>
          <button data-action="open-gallery" class="relative rounded-full p-2 text-zinc-400 transition-colors duration-300 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white" aria-label="Open gallery">
            ${icon("grid-2x2")}
            ${state.gallery.length ? '<span class="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500"></span>' : ""}
          </button>
          ${showReset ? `<button data-action="reset" class="rounded-full p-2 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-white/5 dark:hover:text-white" aria-label="Reset">${icon("x")}</button>` : ""}
        </div>
      </nav>
    `;
  }

  function landingTemplate() {
    const cards = [
      ["shield-check", "Generate Royalty-Free Photos", "Create unique alternatives to stock photos. Safe for commercial use without licensing fees.", assets.stock, "Royalty Free"],
      ["eye-off", "Anonymize People", "Protect privacy by realistically altering faces while preserving the original context and emotion.", assets.anon, "Anonymize"],
      ["palette", "Creative Modifications", "Transform ordinary photos into artistic masterpieces. Change seasons, styles, or entire environments.", assets.fun, "Creative"],
      ["pen-tool", "Enhance Sketches", "Turn rough drawings and concepts into polished, high-fidelity illustrations and renders.", assets.sketch, "Sketches"],
    ];

    return `
      <section class="pf-view flex w-full flex-col items-center">
        <div class="mx-auto mb-16 max-w-3xl space-y-8 px-6 text-center">
          <h1 class="text-5xl font-light tracking-tighter text-zinc-900 transition-colors dark:text-white md:text-7xl">
            image-to-image
            <span class="mt-2 block bg-gradient-to-r from-zinc-900 to-zinc-500 bg-clip-text font-semibold text-transparent dark:from-white dark:to-zinc-500">transformation tool</span>
          </h1>
          <div class="flex items-center justify-center gap-4 py-8 md:gap-8">
            ${processStep("image", "Source", "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400")}
            ${icon("arrow-right", "h-6 w-6 text-zinc-300 dark:text-zinc-700")}
            ${processStep("file-text", "Description", "border-2 border-dashed border-zinc-200 bg-zinc-50 text-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-600")}
            ${icon("arrow-right", "h-6 w-6 text-zinc-300 dark:text-zinc-700")}
            ${processStep("sparkles", "Result", "bg-zinc-900 text-white shadow-xl shadow-zinc-200/50 dark:bg-white dark:text-black dark:shadow-none")}
          </div>
          <p class="text-lg font-light leading-relaxed text-zinc-500 md:text-xl">Upload an image. PhotoForge analyzes and describes it in detailed text. Then, it uses this description to generate a new version of the original image.</p>
          <button data-action="start-creating" class="rounded-full bg-zinc-900 px-10 py-4 text-lg font-medium text-white shadow-lg transition-all hover:scale-105 hover:shadow-xl dark:bg-white dark:text-black">Start Creating</button>
        </div>
        <div class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 px-6 md:grid-cols-2">
          ${cards.map(([iconName, title, copy, src, alt]) => `
            <article class="group relative aspect-square overflow-hidden rounded-3xl border border-zinc-200 dark:border-zinc-800">
              <img src="${html(src)}" alt="${html(alt)}" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
              <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
              <div class="absolute inset-0 flex flex-col justify-end p-8">
                <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 text-white backdrop-blur-md">${icon(iconName, "h-5 w-5")}</div>
                <h3 class="mb-2 text-xl font-medium text-white">${html(title)}</h3>
                <p class="text-sm leading-relaxed text-zinc-300">${html(copy)}</p>
              </div>
            </article>
          `).join("")}
        </div>
        <footer class="mt-32 w-full border-t border-zinc-100 py-10 dark:border-zinc-800/50">
          <div class="flex w-full flex-col items-center justify-between gap-6 px-6 md:flex-row md:px-12">
            <div class="text-[10px] font-medium uppercase tracking-widest text-zinc-400 dark:text-zinc-600">&copy; 2025 Rekognize OU.</div>
            <div class="flex flex-wrap justify-center gap-8 text-xs font-medium text-zinc-500 dark:text-zinc-400">
              ${["contact", "privacy", "terms", "cookies"].map((key) => `<button data-action="legal" data-page="${key}" class="transition-colors hover:text-zinc-900 dark:hover:text-white">${html(LEGAL_CONTENT[key].title.replace(" Us", "").replace(" Policy", "").replace(" of Service", ""))}</button>`).join("")}
            </div>
          </div>
        </footer>
      </section>
    `;
  }

  function processStep(iconName, label, classes) {
    return `
      <div class="flex flex-col items-center gap-2">
        <div class="flex h-16 w-16 items-center justify-center rounded-2xl md:h-20 md:w-20 ${classes}">${icon(iconName, "h-8 w-8")}</div>
        <span class="text-[10px] font-medium uppercase tracking-wider text-zinc-400 md:text-xs">${html(label)}</span>
      </div>
    `;
  }

  function authTemplate() {
    return `
      <section class="pf-view relative mx-auto my-auto w-full max-w-md p-6">
        <button data-action="set-view" data-view="landing" class="absolute -top-16 left-0 flex items-center gap-2 rounded-full p-2 text-sm font-medium text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white">
          ${icon("arrow-left", "h-4 w-4")} Back
        </button>
        <div class="relative overflow-hidden rounded-3xl border border-zinc-200 bg-white p-8 shadow-2xl dark:border-zinc-800 dark:bg-[#09090b]">
          <div class="absolute right-0 top-0 z-0 -mr-8 -mt-8 h-32 w-32 rounded-bl-full bg-zinc-100 dark:bg-zinc-800/50"></div>
          <div class="relative z-10">
            <div class="mb-8">
              <h2 class="mb-2 text-3xl font-light tracking-tight text-zinc-900 dark:text-white">Sign in</h2>
              <p class="font-light text-zinc-500">Enter your email to continue. We'll send you a secure login link.</p>
            </div>
            ${
              state.authSent
                ? `<div class="flex flex-col items-center justify-center py-8 text-center">
                    <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">${icon("check", "h-8 w-8 text-green-600 dark:text-green-400")}</div>
                    <h3 class="mb-2 text-xl font-medium text-zinc-900 dark:text-white">Check your email</h3>
                    <p class="mx-auto max-w-xs text-zinc-500">We've sent a secure login link to your inbox. Click the link to sign in.</p>
                  </div>`
                : `<form data-form="auth" class="space-y-4">
                    <div class="space-y-1.5">
                      <label class="ml-1 text-xs font-medium uppercase tracking-wider text-zinc-500">Email</label>
                      <div class="flex items-center gap-3 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 transition-all focus-within:border-zinc-300 focus-within:ring-1 focus-within:ring-zinc-300 dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-700 dark:focus-within:ring-zinc-700">
                        ${icon("mail", "h-5 w-5 text-zinc-400")}
                        <input name="email" type="email" required placeholder="name@example.com" class="w-full border-none bg-transparent p-0 text-sm text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-0 dark:text-zinc-100">
                      </div>
                    </div>
                    <button type="submit" ${state.isSubmitting ? "disabled" : ""} class="mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-zinc-900 py-3.5 text-sm font-medium text-white transition-all hover:scale-[1.01] hover:bg-zinc-800 active:scale-[0.99] disabled:cursor-wait disabled:opacity-70 dark:bg-white dark:text-black dark:hover:bg-zinc-200">
                      ${state.isSubmitting ? "Sending Link..." : `Continue with Email ${icon("arrow-right", "h-4 w-4")}`}
                    </button>
                  </form>`
            }
            <div class="mt-8 text-center text-sm text-zinc-400">By clicking continue, you agree to our Terms of Service and Privacy Policy.</div>
          </div>
        </div>
      </section>
    `;
  }

  function idleTemplate() {
    return `
      <section class="pf-view mx-auto my-auto w-full max-w-xl p-6 text-center">
        <h1 class="mb-4 text-4xl font-light tracking-tight text-zinc-900 transition-colors dark:text-white sm:text-5xl">Transform Reality.</h1>
        <p class="mb-12 text-lg font-light text-zinc-500">Advanced image-to-image synthesis for the creative mind.</p>
        <div class="space-y-4">
          <label class="group relative block cursor-pointer">
            <input data-file-input type="file" accept="image/*" class="absolute inset-0 z-20 h-full w-full cursor-pointer opacity-0">
            <span class="block rounded-2xl border border-zinc-200 bg-zinc-50 p-10 transition-all duration-300 hover:border-zinc-300 hover:bg-zinc-100/50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:group-hover:bg-zinc-800/50">
              <span class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full border border-zinc-200 bg-white transition-all duration-300 group-hover:scale-110 dark:border-zinc-800 dark:bg-zinc-950">${icon("upload", "h-6 w-6 text-zinc-400")}</span>
              <span class="mb-2 block text-sm font-medium text-zinc-900 transition-colors dark:text-zinc-300">Upload Source Image</span>
              <span class="block text-xs text-zinc-500">JPG, PNG, WEBP up to 20MB</span>
            </span>
          </label>
          <div class="flex items-center justify-center gap-4 py-4">
            <div class="h-px w-12 bg-zinc-200 transition-colors dark:bg-zinc-800"></div>
            <span class="text-xs uppercase tracking-widest text-zinc-500">Or</span>
            <div class="h-px w-12 bg-zinc-200 transition-colors dark:bg-zinc-800"></div>
          </div>
          <button data-action="set-view" data-view="text_input" class="group flex w-full items-center justify-center gap-2 rounded-2xl border border-zinc-200 py-4 text-sm font-medium text-zinc-500 transition-all duration-300 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-white">
            Start with Text Prompt ${icon("arrow-right", "h-4 w-4 transition-transform group-hover:translate-x-1")}
          </button>
        </div>
        ${state.uploadedImages.length ? `
          <div class="mt-12">
            <p class="mb-4 text-xs font-medium uppercase tracking-widest text-zinc-400">Previously Uploaded</p>
            <div class="flex flex-wrap justify-center gap-3">
              ${state.uploadedImages.map((image) => `
                <button data-action="reuse-upload" data-id="${html(image.id)}" class="h-12 w-12 overflow-hidden rounded-full border-2 border-zinc-200 transition-all hover:scale-110 hover:border-zinc-900 dark:border-zinc-800 dark:hover:border-white" title="Reuse this image">
                  <img src="${html(image.url)}" alt="Recent upload" class="h-full w-full object-cover">
                </button>
              `).join("")}
            </div>
          </div>
        ` : ""}
      </section>
    `;
  }

  function optionsTemplate() {
    const countButtons = [1, 2, 4].map((number) => optionButton(number, String(number), state.count === number, "count")).join("");
    const styleButtons = ["natural", "vivid"].map((style) => optionButton(style, style, state.imageStyle === style, "style", true)).join("");
    const qualityButtons = ["standard", "hd"].map((quality) => {
      const label = `<span class="capitalize">${quality}</span>${quality === "hd" ? '<span class="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-bold text-amber-600 dark:text-amber-400">2 Credits</span>' : ""}`;
      return optionButton(quality, label, state.imageQuality === quality, "quality");
    }).join("");
    return `
      <div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
        ${optionGroup("Variations", countButtons)}
        ${optionGroup("Style", styleButtons)}
        <div class="space-y-2 md:col-span-2">${optionGroupInner("Quality", qualityButtons)}</div>
      </div>
    `;
  }

  function optionGroup(label, buttons) {
    return `<div class="space-y-2">${optionGroupInner(label, buttons)}</div>`;
  }

  function optionGroupInner(label, buttons) {
    return `
      <span class="ml-1 text-xs font-medium uppercase tracking-wider text-zinc-500">${html(label)}</span>
      <div class="flex items-center rounded-xl border border-zinc-200/50 bg-zinc-50/50 p-1 dark:border-zinc-800/50 dark:bg-zinc-900/50">${buttons}</div>
    `;
  }

  function optionButton(value, label, active, type, capitalize = false) {
    return `
      <button data-action="option" data-option="${type}" data-value="${html(value)}" class="flex flex-1 items-center justify-center gap-2 rounded-lg py-2 text-xs font-medium transition-all ${capitalize ? "capitalize" : ""} ${active ? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-800 dark:text-white dark:ring-zinc-700" : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300"}">
        ${label}
      </button>
    `;
  }

  function textInputTemplate() {
    return `
      <section class="pf-view mx-auto my-auto w-full max-w-2xl p-6">
        <div class="mb-8 text-center">
          <h2 class="text-2xl font-light text-zinc-900 transition-colors dark:text-white">Define Your Image</h2>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-zinc-50/50 p-1 transition-all focus-within:ring-1 focus-within:ring-zinc-300 dark:border-zinc-800 dark:bg-zinc-900/50 dark:focus-within:ring-white/20">
          <textarea data-description-input placeholder="Describe the scene, atmosphere, and details..." autofocus class="h-40 w-full resize-none border-none bg-transparent p-6 text-lg font-light leading-relaxed text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-0 dark:text-zinc-200 dark:placeholder:text-zinc-700">${html(state.description)}</textarea>
          <div class="flex flex-col gap-6 border-t border-zinc-200/50 px-6 pb-6 pt-4 transition-colors dark:border-zinc-800/50">
            ${optionsTemplate()}
            <button data-action="generate" data-requires-description ${state.description.trim() ? "" : "disabled"} class="mt-2 w-full rounded-full bg-zinc-900 py-3 text-sm font-medium text-white transition-all hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-black dark:hover:bg-zinc-200">Generate ${state.count} ${state.count === 1 ? "Variant" : "Variants"}</button>
          </div>
        </div>
        <div class="mt-6 text-center">
          <button data-action="set-view" data-view="idle" class="text-sm text-zinc-500 transition-colors hover:text-zinc-700 dark:hover:text-zinc-300">Cancel</button>
        </div>
      </section>
    `;
  }

  function analyzingTemplate() {
    const circumference = 283;
    const offset = circumference - (circumference * state.progress) / 100;
    return `
      <section class="pf-view mx-auto my-auto flex flex-col items-center justify-center p-6">
        <div class="relative mb-12 h-24 w-24">
          <svg class="h-full w-full" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke-width="2" class="stroke-zinc-200 transition-colors dark:stroke-[#27272a]"></circle>
            <circle data-progress-circle cx="50" cy="50" r="45" fill="none" stroke-width="2" stroke-dasharray="283" stroke-dashoffset="${offset}" stroke-linecap="round" class="stroke-zinc-900 transition-all duration-300 ease-out dark:stroke-white"></circle>
          </svg>
          <div class="absolute inset-0 flex items-center justify-center">
            ${state.inputImage ? `<div class="relative z-10 h-20 w-20 overflow-hidden rounded-full border-4 border-white shadow-sm dark:border-[#09090b]"><img src="${html(state.inputImage)}" alt="Analyzing" class="h-full w-full object-cover opacity-80"></div>` : icon("image", "h-8 w-8 text-zinc-400 dark:text-zinc-500")}
          </div>
        </div>
        <h3 class="mb-2 text-xl font-light text-zinc-900 transition-colors dark:text-white">Analyzing Composition</h3>
        <p class="text-sm text-zinc-500">Extracting semantic features and depth maps...</p>
      </section>
    `;
  }

  function descriptionTemplate() {
    return `
      <section class="pf-view mx-auto my-auto w-full max-w-2xl p-6">
        <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-2xl shadow-zinc-200/50 transition-all dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-black/50">
          <div class="border-b border-zinc-200 bg-zinc-50/50 p-8 transition-colors dark:border-zinc-800 dark:bg-zinc-900/50">
            <div class="mb-4 flex items-center justify-between">
              <span class="block text-xs font-medium uppercase tracking-wider text-zinc-500">Analysis Result</span>
              <span class="text-[10px] uppercase tracking-wider text-zinc-400">Editable</span>
            </div>
            <textarea data-description-input placeholder="Enter image description..." class="h-auto min-h-[100px] w-full resize-none border-none bg-transparent p-0 text-lg font-light leading-relaxed text-zinc-800 outline-none placeholder:text-zinc-400 focus:ring-0 dark:text-zinc-200">${html(state.description)}</textarea>
          </div>
          <div class="flex flex-col gap-6 bg-white px-6 pb-6 pt-4 transition-colors dark:bg-zinc-950">
            ${optionsTemplate()}
            <button data-action="generate" class="mt-2 flex w-full items-center justify-center gap-2 rounded-full bg-zinc-900 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200">${icon("sparkles", "h-4 w-4")} Transform</button>
          </div>
        </div>
      </section>
    `;
  }

  function generatingTemplate() {
    return `
      <section class="pf-view mx-auto my-auto flex flex-col items-center justify-center p-6">
        <div class="pf-generating-glow mb-8 h-32 w-32 rounded-full bg-gradient-to-tr from-zinc-200 to-zinc-100 opacity-50 blur-3xl transition-colors dark:from-zinc-800 dark:to-zinc-600"></div>
        <h3 class="mb-2 text-xl font-light tracking-wide text-zinc-900 transition-colors dark:text-white">Synthesizing ${state.count} Variant${state.count > 1 ? "s" : ""}</h3>
        <div class="h-1 w-64 overflow-hidden rounded-full bg-zinc-100 transition-colors dark:bg-zinc-900">
          <div data-progress-bar class="h-full bg-zinc-900 transition-colors dark:bg-white" style="width:${Math.max(0, Math.min(100, state.progress))}%"></div>
        </div>
      </section>
    `;
  }

  function completeTemplate() {
    return `
      <section class="pf-view mx-auto my-auto flex h-[80vh] w-full max-w-7xl flex-col gap-6 p-6 lg:flex-row">
        <div class="group relative flex flex-1 overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-100 transition-colors dark:border-zinc-800 dark:bg-zinc-900">
          ${state.inputImage ? splitResultTemplate() : textOnlyResultTemplate()}
        </div>
        <aside class="flex h-full w-full flex-col gap-4 lg:w-80">
          <div class="flex flex-1 flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white transition-colors dark:border-zinc-800 dark:bg-zinc-900">
            <div class="sticky top-0 z-10 border-b border-zinc-100 bg-zinc-50/50 p-5 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-900/50">
              <h4 class="flex items-center gap-2 text-xs font-medium uppercase tracking-wider text-zinc-500">${icon("pen-tool", "h-3 w-3")} Description Used</h4>
            </div>
            <div class="flex-1 overflow-y-auto p-5">
              <textarea data-description-input placeholder="Edit your prompt here..." class="h-full min-h-[120px] w-full resize-none border-none bg-transparent p-0 text-sm font-light leading-relaxed text-zinc-600 outline-none focus:ring-0 dark:text-zinc-300">${html(state.description)}</textarea>
            </div>
          </div>
          <div class="grid grid-cols-1 gap-3">
            <button data-action="generate" class="flex items-center justify-center gap-2 rounded-xl bg-zinc-900 py-4 font-medium text-white shadow-lg transition-colors hover:scale-[1.02] hover:bg-zinc-800 hover:shadow-xl active:scale-[0.98] dark:bg-white dark:text-black dark:hover:bg-zinc-200">${icon("refresh-cw", "h-4 w-4")} Re-generate</button>
            <button data-action="reset" class="py-3 text-sm font-medium text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200">Start Over</button>
          </div>
        </aside>
      </section>
    `;
  }

  function splitResultTemplate() {
    const resultGrid = state.count === 1 ? "grid-cols-1" : state.count === 2 ? "grid grid-cols-1" : "grid grid-cols-2";
    return `
      <div class="flex h-full w-full flex-col md:flex-row">
        <div class="relative h-1/2 w-full overflow-hidden border-b border-zinc-200 transition-colors dark:border-zinc-800 md:h-full md:w-1/2 md:border-b-0 md:border-r">
          <img src="${html(state.inputImage)}" alt="Source" class="h-full w-full object-cover opacity-60 grayscale transition-all duration-700 group-hover:opacity-100 group-hover:grayscale-0">
          <div class="absolute left-4 top-4 z-10 rounded-full bg-black/50 px-3 py-1 text-xs text-white backdrop-blur">Source</div>
        </div>
        <div class="relative h-1/2 w-full overflow-y-auto md:h-full md:w-1/2 ${resultGrid}">
          ${state.outputImages.map((imageUrl, index) => resultTile(imageUrl, index, true)).join("")}
        </div>
      </div>
    `;
  }

  function textOnlyResultTemplate() {
    const grid = state.count === 1 ? "grid-cols-1" : state.count === 2 ? "grid-cols-2" : "grid-cols-2 grid-rows-2";
    return `<div class="grid h-full w-full gap-px bg-zinc-200 dark:bg-zinc-800 ${grid}">${state.outputImages.map((imageUrl, index) => resultTile(imageUrl, index, false)).join("")}</div>`;
  }

  function resultTile(imageUrl, index, compact) {
    const wrapper = compact
      ? `relative h-full w-full overflow-hidden border-b border-zinc-200 last:border-b-0 dark:border-zinc-800 ${state.count === 2 ? "h-1/2" : ""} ${state.count === 4 ? "h-1/2 border-r even:border-r-0" : ""}`
      : "group/image relative h-full w-full overflow-hidden bg-white dark:bg-zinc-900";
    return `
      <div class="${wrapper}">
        <img src="${html(imageUrl)}" alt="Result ${index + 1}" class="h-full w-full object-cover transition-transform duration-700 hover:scale-105">
        <div class="absolute inset-0 flex items-end justify-end gap-2 bg-black/20 p-4 opacity-0 transition-opacity hover:opacity-100">
          ${tooltip("Download", `<button data-action="download" data-url="${html(imageUrl)}" data-filename="photo-forge-result-${index + 1}.jpg" class="rounded-full bg-white/90 p-2 text-zinc-900 shadow-lg backdrop-blur-sm transition-transform hover:scale-110 hover:bg-white">${icon("download", "h-4 w-4")}</button>`)}
          ${tooltip(compact ? "Use as Source" : "Reimagine This", `<button data-action="use-url-source" data-url="${html(imageUrl)}" class="rounded-full bg-zinc-900/90 p-2 text-white shadow-lg backdrop-blur-sm transition-transform hover:scale-110 hover:bg-zinc-900">${icon("refresh-cw", "h-4 w-4")}</button>`)}
        </div>
        <div class="pointer-events-none absolute left-4 top-4 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white shadow-lg backdrop-blur">${compact ? `V${index + 1}` : `Variant ${index + 1}`}</div>
      </div>
    `;
  }

  function purchaseModalTemplate() {
    if (!state.showPurchase) return "";
    return `
      <div class="pf-modal fixed inset-0 z-[100] flex flex-col items-center justify-center bg-zinc-100/90 p-4 backdrop-blur-xl dark:bg-black/90">
        <div class="flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-[#09090b]">
          <div class="flex items-start justify-between border-b border-zinc-100 p-6 dark:border-zinc-800/50 md:p-8">
            <div class="flex items-center gap-4">
              ${state.purchaseMode === "checkout" ? `<button data-action="purchase-select-view" class="rounded-full p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800">${icon("arrow-left", "h-5 w-5 text-zinc-500")}</button>` : ""}
              <div>
                <h2 class="mb-2 text-2xl font-light tracking-tight text-zinc-900 dark:text-white">${state.purchaseMode === "checkout" ? "Checkout" : "Purchase Credits"}</h2>
                <p class="mt-2 flex items-center gap-2 text-sm text-zinc-500"><span>Secure payment via Stripe</span><span class="mx-1 h-1 w-1 rounded-full bg-zinc-300 dark:bg-zinc-700"></span><span>Credits never expire</span></p>
              </div>
            </div>
            <button data-action="close-purchase" class="-mr-2 -mt-2 rounded-full p-2 transition-colors hover:bg-zinc-100 dark:hover:bg-white/10">${icon("x", "h-6 w-6 text-zinc-400")}</button>
          </div>
          <div class="flex-1 overflow-y-auto p-6 md:p-8">
            ${state.purchaseMode === "checkout" ? checkoutTemplate() : pricingTemplate()}
          </div>
        </div>
      </div>
    `;
  }

  function checkoutTemplate() {
    return `
      <div class="flex h-full min-h-[420px] w-full flex-col">
        ${!state.clientSecret ? `
          <div class="flex flex-1 flex-col items-center justify-center space-y-4">
            ${icon("refresh-cw", "h-8 w-8 animate-spin text-zinc-400")}
            <p class="text-zinc-500">Preparing checkout...</p>
          </div>
        ` : '<div id="checkout" class="h-full min-h-[420px] w-full"></div>'}
      </div>
    `;
  }

  function pricingTemplate() {
    const tiers = [
      ["sm", "25", "$5", "$0.20 / credit", false],
      ["md", "100", "$15", "$0.15 / credit (Save 25%)", true],
      ["lg", "500", "$50", "$0.10 / credit (Save 50%)", false],
    ];
    return `
      <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
        ${tiers.map(([key, credits, price, detail, popular]) => `
          <div class="relative flex flex-col rounded-2xl ${popular ? "border-2 border-zinc-900 bg-white shadow-xl dark:border-white dark:bg-zinc-900" : "border border-zinc-200 bg-white hover:border-zinc-300 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-900"} p-6 transition-all hover:scale-[1.02]">
            ${popular ? '<div class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-zinc-900 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-white dark:bg-white dark:text-black">Most Popular</div>' : ""}
            <div class="mb-8 flex flex-1 flex-col items-center justify-center pt-4 text-center">
              <div class="mb-2 text-5xl font-bold tracking-tight text-zinc-900 dark:text-white">${credits}</div>
              <div class="mb-8 text-xs font-bold uppercase tracking-widest text-zinc-500">Credits</div>
              <div class="mb-1 flex items-baseline gap-1"><span class="text-3xl font-light text-zinc-900 dark:text-white">${price}</span><span class="text-zinc-500">USD</span></div>
              <div class="text-xs ${popular || key === "lg" ? "font-medium text-green-600 dark:text-green-400" : "text-zinc-400"}">${detail}</div>
            </div>
            <button data-action="purchase-tier" data-tier="${key}" class="w-full rounded-xl py-3 text-sm font-medium transition-colors ${popular ? "bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200" : "border border-zinc-200 bg-white text-zinc-900 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-transparent dark:text-white dark:hover:border-zinc-600 dark:hover:bg-white/5"}">Select Package</button>
          </div>
        `).join("")}
      </div>
      <div class="mt-12 flex flex-col items-center justify-between gap-6 border-t border-zinc-100 pt-8 opacity-60 dark:border-zinc-800 md:flex-row">
        <div class="flex items-center gap-2 text-xs text-zinc-500">${icon("shield-check", "h-4 w-4")} Secure SSL Payment</div>
        <div class="flex items-center gap-4 opacity-70 grayscale"><div class="text-xs font-bold italic tracking-tighter">stripe</div><div class="text-xs font-bold tracking-tight">VISA</div><div class="text-xs font-bold">Mastercard</div></div>
      </div>
    `;
  }

  function galleryModalTemplate() {
    if (!state.showGallery) return "";
    return `
      <div class="pf-modal fixed inset-0 z-[100] flex flex-col bg-zinc-100/90 backdrop-blur-xl dark:bg-black/90">
        <div class="flex items-center justify-between border-b border-zinc-200 bg-white/50 p-6 dark:border-zinc-800 dark:bg-black/50">
          <div class="flex items-center gap-3">
            <div class="rounded-lg bg-zinc-900 p-2 text-white dark:bg-white dark:text-black">${icon("grid-2x2")}</div>
            <h2 class="text-xl font-light tracking-wide text-zinc-900 dark:text-white">Gallery</h2>
            <span class="ml-2 text-sm text-zinc-500">${state.gallery.length} items</span>
          </div>
          <button data-action="close-gallery" class="rounded-full p-2 transition-colors hover:bg-zinc-200 dark:hover:bg-zinc-800">${icon("x", "h-6 w-6 text-zinc-500")}</button>
        </div>
        <div class="flex-1 overflow-y-auto p-6">
          ${state.gallery.length ? galleryGridTemplate() : `
            <div class="flex h-full flex-col items-center justify-center text-zinc-400">
              ${icon("grid-2x2", "mb-4 h-16 w-16 opacity-20")}
              <p class="text-lg font-light">Your gallery is empty</p>
              <p class="text-sm">Generated images will automatically appear here.</p>
            </div>
          `}
        </div>
      </div>
    `;
  }

  function galleryGridTemplate() {
    return `
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        ${state.gallery.map((item) => `
          <article class="group relative overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm transition-all hover:shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
            <div class="relative aspect-[4/3] overflow-hidden">
              <img src="${html(item.imageUrl)}" alt="Saved" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
              ${item.sourceImage ? `
                <div class="group/source absolute bottom-3 left-3 z-10">
                  <div class="relative">
                    <div class="h-10 w-10 cursor-pointer overflow-hidden rounded-lg border-2 border-white shadow-lg transition-transform hover:scale-110 dark:border-zinc-800"><img src="${html(item.sourceImage)}" alt="Source" class="h-full w-full object-cover"></div>
                    <div class="pointer-events-none absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-black/80 px-2 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover/source:opacity-100">Original Source</div>
                  </div>
                </div>
              ` : ""}
              <div class="absolute inset-0 flex items-end justify-end gap-2 bg-gradient-to-t from-black/80 via-transparent to-transparent p-3 opacity-0 transition-opacity group-hover:opacity-100">
                ${tooltip("Copy Description", `<button data-action="copy-description" data-id="${html(item.id)}" class="rounded-full bg-white/10 p-2 text-white shadow-lg backdrop-blur-md transition-all hover:bg-white hover:text-black">${icon("copy", "h-4 w-4")}</button>`)}
                ${tooltip("Download Image", `<button data-action="download" data-url="${html(item.imageUrl)}" data-filename="photo-forge-saved-${html(item.id)}.jpg" class="rounded-full bg-white/10 p-2 text-white shadow-lg backdrop-blur-md transition-all hover:bg-white hover:text-black">${icon("download", "h-4 w-4")}</button>`)}
                ${item.sourceImage ? tooltip("Reuse Original Source", `<button data-action="use-url-source" data-url="${html(item.sourceImage)}" class="rounded-full bg-white/10 p-2 text-white shadow-lg backdrop-blur-md transition-all hover:bg-white hover:text-black">${icon("upload", "h-4 w-4")}</button>`) : ""}
                ${tooltip("Use Result as Source", `<button data-action="use-url-source" data-url="${html(item.imageUrl)}" class="rounded-full bg-white p-2 text-black shadow-lg transition-colors hover:bg-zinc-200">${icon("refresh-cw", "h-4 w-4")}</button>`)}
                ${tooltip("Remove", `<button data-action="remove-gallery" data-id="${html(item.id)}" class="rounded-full bg-red-500/80 p-2 text-white shadow-lg transition-colors hover:bg-red-500">${icon("trash-2", "h-4 w-4")}</button>`)}
              </div>
            </div>
            <div class="p-4">
              <p class="mb-3 line-clamp-2 text-sm font-light text-zinc-600 dark:text-zinc-300">${html(item.description)}</p>
              <div class="flex items-center justify-between text-[10px] uppercase tracking-wider text-zinc-400"><span>${formatDate(item.createdAt)}</span><span>${formatTime(item.createdAt)}</span></div>
            </div>
          </article>
        `).join("")}
      </div>
    `;
  }

  function legalModalTemplate() {
    if (!state.activeLegalPage) return "";
    const page = LEGAL_CONTENT[state.activeLegalPage];
    return `
      <div data-action="close-legal" class="pf-modal fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
        <div data-modal-panel class="flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-zinc-900">
          <div class="flex items-center justify-between border-b border-zinc-100 p-6 dark:border-zinc-800">
            <h3 class="text-xl font-light text-zinc-900 dark:text-white">${html(page.title)}</h3>
            <button data-action="close-legal" class="rounded-full p-2 text-zinc-500 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800">${icon("x")}</button>
          </div>
          <div class="overflow-y-auto p-8">
            <div class="max-w-none space-y-4 leading-relaxed text-zinc-600 dark:text-zinc-300">${page.content}</div>
          </div>
          <div class="flex justify-end border-t border-zinc-100 bg-zinc-50/50 p-6 dark:border-zinc-800 dark:bg-zinc-900/50">
            <button data-action="close-legal" class="rounded-full bg-zinc-900 px-6 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90 dark:bg-white dark:text-black">Close</button>
          </div>
        </div>
      </div>
    `;
  }

  function toastTemplate() {
    if (!state.error) return "";
    return `
      <div class="pf-toast fixed bottom-8 left-1/2 z-[100] -translate-x-1/2">
        <div class="flex items-center gap-3 rounded-full bg-red-500 px-6 py-3 text-white shadow-lg">${icon("shield-check")}<span class="text-sm font-medium">${html(state.error)}</span></div>
      </div>
    `;
  }

  function viewTemplate() {
    switch (state.view) {
      case VIEWS.AUTH:
        return authTemplate();
      case VIEWS.IDLE:
        return idleTemplate();
      case VIEWS.TEXT:
        return textInputTemplate();
      case VIEWS.ANALYZING:
        return analyzingTemplate();
      case VIEWS.DESCRIPTION:
        return descriptionTemplate();
      case VIEWS.GENERATING:
        return generatingTemplate();
      case VIEWS.COMPLETE:
        return completeTemplate();
      case VIEWS.LANDING:
      default:
        return landingTemplate();
    }
  }

  function render() {
    enforceAuthGuard();
    root.innerHTML = `
      <div class="${state.theme}">
        <div class="relative flex min-h-screen flex-col overflow-hidden bg-white font-sans text-zinc-900 selection:bg-zinc-200 selection:text-zinc-900 transition-colors duration-500 ease-in-out dark:bg-[#09090b] dark:text-zinc-100 dark:selection:bg-zinc-800 dark:selection:text-white">
          ${navTemplate()}
          <main class="relative z-10 flex min-h-screen flex-1 flex-col pt-24">
            ${viewTemplate()}
          </main>
          ${purchaseModalTemplate()}
          ${galleryModalTemplate()}
          ${legalModalTemplate()}
          ${toastTemplate()}
          <div class="pointer-events-none fixed bottom-0 left-0 flex w-full items-end justify-between p-6 opacity-20">
            <div class="h-12 w-px bg-zinc-200 transition-colors dark:bg-zinc-700"></div>
            <div class="h-12 w-px bg-zinc-200 transition-colors dark:bg-zinc-700"></div>
          </div>
        </div>
      </div>
    `;

    if (window.lucide) {
      window.lucide.createIcons({ attrs: { "stroke-width": 1.8 } });
    }
    if (state.showPurchase && state.purchaseMode === "checkout" && state.clientSecret) {
      window.setTimeout(mountCheckout, 0);
    }
  }

  root.addEventListener("click", async (event) => {
    const actionElement = event.target.closest("[data-action]");
    if (!actionElement || !root.contains(actionElement)) return;

    if (actionElement.closest("[data-modal-panel]") && actionElement.dataset.action !== "close-legal") {
      event.stopPropagation();
    }

    const { action } = actionElement.dataset;
    switch (action) {
      case "set-view":
        setView(actionElement.dataset.view);
        break;
      case "start-creating":
        if (!state.userEmail) setView(VIEWS.AUTH);
        else if (state.credits > 0) setView(VIEWS.IDLE);
        else openPurchase();
        break;
      case "toggle-theme":
        state.theme = state.theme === "light" ? "dark" : "light";
        localStorage.setItem("photoforge-theme", state.theme);
        render();
        break;
      case "open-gallery":
        state.showGallery = true;
        render();
        break;
      case "close-gallery":
        state.showGallery = false;
        render();
        break;
      case "open-purchase":
        openPurchase();
        break;
      case "close-purchase":
        closePurchase();
        break;
      case "purchase-select-view":
        destroyCheckout();
        state.purchaseMode = "select";
        state.clientSecret = null;
        render();
        break;
      case "purchase-tier":
        openPurchase(actionElement.dataset.tier);
        break;
      case "logout":
        handleLogout();
        break;
      case "reset":
        resetFlow();
        break;
      case "option":
        if (actionElement.dataset.option === "count") state.count = Number(actionElement.dataset.value);
        if (actionElement.dataset.option === "style") state.imageStyle = actionElement.dataset.value;
        if (actionElement.dataset.option === "quality") state.imageQuality = actionElement.dataset.value;
        render();
        break;
      case "generate":
        beginGeneration();
        break;
      case "reuse-upload": {
        const uploaded = state.uploadedImages.find((item) => item.id === actionElement.dataset.id);
        if (uploaded) {
          state.inputImage = uploaded.url;
          state.photoUuid = uploaded.id;
          state.description = uploaded.description || state.description;
          state.outputImages = [];
          state.progress = 0;
          state.view = state.description ? VIEWS.DESCRIPTION : VIEWS.IDLE;
          render();
        }
        break;
      }
      case "download":
        downloadUrl(actionElement.dataset.url, actionElement.dataset.filename || "photo-forge.jpg");
        break;
      case "copy-description": {
        const item = state.gallery.find((galleryItem) => galleryItem.id === actionElement.dataset.id);
        if (item) navigator.clipboard?.writeText(item.description);
        break;
      }
      case "remove-gallery":
        state.gallery = state.gallery.filter((item) => item.id !== actionElement.dataset.id);
        render();
        break;
      case "use-url-source":
        processImageUrl(actionElement.dataset.url);
        break;
      case "legal":
        state.activeLegalPage = actionElement.dataset.page;
        render();
        break;
      case "close-legal":
        if (event.target.closest("[data-modal-panel]") && !event.target.closest('button[data-action="close-legal"]')) return;
        state.activeLegalPage = null;
        render();
        break;
      default:
        break;
    }
  });

  root.addEventListener("submit", (event) => {
    const form = event.target.closest("form[data-form]");
    if (!form) return;
    event.preventDefault();
    if (form.dataset.form === "auth") {
      const formData = new FormData(form);
      requestLogin(String(formData.get("email") || ""));
    }
  });

  root.addEventListener("change", (event) => {
    const input = event.target.closest("[data-file-input]");
    if (!input) return;
    const file = input.files?.[0];
    processSelectedFile(file);
  });

  root.addEventListener("input", (event) => {
    const textarea = event.target.closest("[data-description-input]");
    if (!textarea) return;
    state.description = textarea.value;
    root.querySelectorAll("[data-requires-description]").forEach((button) => {
      button.disabled = !state.description.trim();
    });
  });

  document.addEventListener("keydown", (event) => {
    if (event.key !== "Escape") return;
    if (state.activeLegalPage) state.activeLegalPage = null;
    else if (state.showGallery) state.showGallery = false;
    else if (state.showPurchase) closePurchase();
    render();
  });

  render();
  checkAuth();
})();