{step === 3 && (
  <section className="space-y-5">
    {/* Top-left back button (outside cards) */}
    <div className="flex items-center justify-between">
      <button
        onClick={() => setStep(2)}
        className="px-3 py-2 rounded-lg border hover:bg-neutral-50"
      >
        ← Back
      </button>
      {/* spacer, keep right side empty for now */}
      <div />
    </div>

    <div className="grid md:grid-cols-3 gap-3 items-start">
      {/* Logo mode & controls */}
      <div className="rounded-xl border bg-white p-3 space-y-3">
        <div className="text-sm font-semibold">Logo Output</div>
        <div className="flex flex-col gap-2 text-sm">
          <label className="flex items-center gap-2">
            <input
              type="radio"
              checked={logoMode === "textIcon_svg"}
              onChange={() => setLogoMode("textIcon_svg")}
            />
            Text + Icon (SVG vector)
          </label>
          <label className="flex items-center gap-2">
            <input
              type="radio"
              checked={logoMode === "imageText_png"}
              onChange={() => setLogoMode("imageText_png")}
            />
            Image + Text (PNG raster)
          </label>
        </div>

        {logoMode === "imageText_png" && (
          <div className="space-y-2">
            <div className="text-xs text-neutral-500">
              Describe the image/icon you want (used by the image generator):
            </div>
            <textarea
              className="w-full min-h-[100px] px-3 py-2 rounded-md border text-sm"
              value={iconPrompt}
              onChange={(e) => setIconPrompt(e.target.value)}
            />
            <div className="text-[11px] text-neutral-500">
              Note: this preview uses a local PNG stub; wire to your AI image API
              to honor prompts fully.
            </div>
          </div>
        )}

        {/* Primary CTA now lives here */}
        <div className="pt-2">
          <button
            onClick={generate}
            className="px-4 py-2 rounded-lg bg-neutral-900 text-white hover:bg-black"
            title="Generate Logos"
          >
            Generate Logos
          </button>
        </div>
      </div>

      {/* Palette preview */}
      <div className="rounded-xl border bg-white p-3">
        <div className="text-sm font-semibold mb-2">Palette</div>
        <div className="grid grid-cols-3 gap-2">
          {Object.entries(palette).map(([k, v]) => (
            <div key={k} className="rounded-lg border overflow-hidden">
              <div className="h-12" style={{ background: v }} />
              <div className="p-2 text-xs flex items-center justify-between">
                <span className="capitalize">{k}</span>
                <span className="font-mono">{v}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Summary (unchanged, still shows style/mark defaults) */}
      <div className="rounded-xl border bg-white p-3">
        <div className="text-sm font-semibold mb-2">Summary</div>
        <dl className="text-sm space-y-1">
          <div className="flex justify-between">
            <dt className="text-neutral-500">Name</dt><dd>{name}</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Industry</dt><dd>{industry}</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Tone</dt><dd>{tone}</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Style Pack</dt><dd>Balanced</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Mark Mode</dt><dd>Auto</dd>
          </div>
          <div className="flex justify-between">
            <dt className="text-neutral-500">Output</dt>
            <dd>{logoMode === "textIcon_svg" ? "Text + Icon (SVG)" : "Image + Text (PNG)"}</dd>
          </div>
        </dl>
      </div>
    </div>

    {/* Logos section (Generate button removed from header) */}
    <div id="logos-section" className="mt-2">
      <h2 className="text-lg font-semibold mb-2">Logos</h2>
      {logos.length === 0 ? (
        <div className="text-sm text-neutral-500 border rounded-xl p-6 bg-white">
          No logos yet. Click <strong>Generate Logos</strong> to create previews.
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {logos.map((logo) => (
            <LogoCard
              key={logo.id}
              title={logo.filename}
              source={logo.svg ?? logo.url ?? ""}
              onPrimary={() => console.log("Set primary", logo.id)}
              onFavorite={() => console.log("Favorite", logo.id)}
              onDownload={() => downloadAllAssets([logo])}
            />
          ))}
        </div>
      )}
    </div>
  </section>
)}
