{step === 3 && (
  <section className="space-y-5">
    {/* Step-level Back */}
    <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>
      <div />
    </div>

    <div className="grid md:grid-cols-3 gap-3 items-start">
      {/* 1) FONT PICKER + LIVE PREVIEW */}
      <div className="rounded-xl border bg-white p-3 space-y-3">
        <div className="text-sm font-semibold">1) Choose your font</div>

        {/* Font dropdown */}
        <div className="flex flex-col gap-2">
          <label className="text-xs text-neutral-600">Font family</label>
          <select
            className="px-3 py-2 rounded-md border"
            value={fontFamily}
            onChange={(e) => setFontFamily(e.target.value)}
          >
            {/* These are common web-safe or Google Fonts (load links below) */}
            <option value='"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'>Inter</option>
            <option value='"Poppins", -apple-system, Segoe UI, Roboto, Arial, sans-serif'>Poppins</option>
            <option value='"Montserrat", -apple-system, Segoe UI, Roboto, Arial, sans-serif'>Montserrat</option>
            <option value='"Playfair Display", Georgia, "Times New Roman", serif'>Playfair Display</option>
            <option value='"Merriweather", Georgia, "Times New Roman", serif'>Merriweather</option>
            <option value='"Bebas Neue", Impact, "Arial Black", sans-serif'>Bebas Neue</option>
          </select>
        </div>

        {/* Live preview of brand name in Primary color */}
        <div className="rounded-lg border p-4">
          <div
            style={{
              fontFamily,
              color: palette.primary,
              fontWeight: 700,
              fontSize: 42,
              lineHeight: 1.2,
            }}
          >
            {name}
          </div>
          <div className="text-xs text-neutral-500 mt-2">
            Preview shown in your Primary color ({palette.primary}).
          </div>
        </div>
      </div>

      {/* 2) IMAGE GENERATOR */}
      <div className="rounded-xl border bg-white p-3 space-y-3">
        <div className="text-sm font-semibold">2) Generate your image</div>

        <div className="space-y-2">
          <div className="text-xs text-neutral-500">
            Describe the icon you want (transparent PNG):
          </div>
          <textarea
            className="w-full min-h-[110px] px-3 py-2 rounded-md border text-sm"
            value={iconPrompt}
            onChange={(e) => setIconPrompt(e.target.value)}
            placeholder='e.g., "snowflake on fire", "minimal coffee cup", "origami fox"'
          />
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={async () => {
              setIsGeneratingIcon(true);
              try {
                const url = await generateTransparentIconPNG({
                  prompt: iconPrompt,
                  fg: palette.textLight,   // readable on primary/accent
                  accent: palette.accent,
                  size: 512,
                });
                setIconUrl(url);
              } finally {
                setIsGeneratingIcon(false);
              }
            }}
            className="px-4 py-2 rounded-lg bg-neutral-900 text-white hover:bg-black disabled:opacity-60"
            disabled={isGeneratingIcon}
          >
            {isGeneratingIcon ? "Generating…" : "Generate image (PNG)"}
          </button>

          {iconUrl && (
            <span className="text-xs text-emerald-700">Image ready ✓</span>
          )}
        </div>

        {/* Icon preview */}
        <div className="rounded-lg border p-3 grid place-items-center">
          {iconUrl ? (
            <img
              src={iconUrl}
              alt="Generated icon"
              className="max-h-40 object-contain"
            />
          ) : (
            <div className="text-xs text-neutral-500">No image yet.</div>
          )}
        </div>
      </div>

      {/* 3) COMBINE */}
      <div className="rounded-xl border bg-white p-3 space-y-3">
        <div className="text-sm font-semibold">3) Put them together</div>
        <div className="text-xs text-neutral-500">
          Combines the generated PNG (transparent) with your brand name in the selected font and primary color.
        </div>

        <div className="flex items-center gap-2">
          <label className="text-sm">Layout:</label>
          <select
            className="px-3 py-2 rounded-md border"
            value={combineLayout}
            onChange={(e) =>
              setCombineLayout(e.target.value as "left" | "top")
            }
          >
            <option value="left">Icon on left, text on right</option>
            <option value="top">Icon on top, text below</option>
          </select>
        </div>

        <button
          onClick={async () => {
            if (!iconUrl) return; // require an icon first
            const combined = await composeIconWithText({
              iconUrl,
              name,
              fontFamily,
              color: palette.primary,
              layout: combineLayout,
              gap: 28,
              maxWidth: 1024,
              maxHeight: 512,
            });
            // push result as a new logo card
            const id = `combo-${Date.now()}`;
            setLogos((prev) => [
              ...prev,
              { id, filename: "logo-combined.png", url: combined, kind: "png" as const },
            ]);

            // scroll to logos
            setTimeout(() => {
              document.getElementById("logos-section")?.scrollIntoView({ behavior: "smooth" });
            }, 10);
          }}
          className="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-60"
          disabled={!iconUrl}
        >
          Combine into logo
        </button>
      </div>
    </div>

    {/* Logos area */}
    <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. Generate an image and click <strong>Combine into logo</strong>.
        </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 ?? ""}
              onDownload={() => downloadAllAssets([logo])}
            />
          ))}
        </div>
      )}
    </div>
  </section>
)}
