{iconSvg && (
  <div className="mt-3 rounded-lg border p-3 space-y-3">
    <div className="text-sm font-semibold">Duotone (dark + light)</div>

    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
      {/* Dark color picker */}
      <div>
        <div className="text-xs text-neutral-600 mb-1">Dark color</div>
        <div className="grid grid-cols-4 gap-2">
          {[
            { key: "black", label: "Black", hex: "#000000" },
            { key: "primary", label: "Primary", hex: palette.primary },
            { key: "secondary", label: "Secondary", hex: palette.secondary },
            { key: "accent", label: "Accent", hex: palette.accent },
            { key: "highlight", label: "Highlight", hex: palette.highlight },
            { key: "neutral", label: "Neutral", hex: palette.neutral },
            { key: "surface", label: "Surface", hex: palette.surface },
            { key: "textDark", label: "Text (Dark)", hex: palette.textDark },
            { key: "textLight", label: "Text (Light)", hex: palette.textLight },
          ].map((c) => (
            <button
              key={`dark-${c.key}`}
              onClick={() => setDuoDarkKey(c.key)}
              className={`rounded-lg border p-2 text-left hover:bg-neutral-50 ${
                duoDarkKey === c.key ? "border-neutral-900" : "border-neutral-200"
              }`}
              type="button"
              title={c.label}
            >
              <div className="h-6 w-full rounded" style={{ background: c.hex }} />
              <div className="text-[11px] mt-1 text-neutral-600">{c.label}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Light color picker */}
      <div>
        <div className="text-xs text-neutral-600 mb-1">Light color</div>
        <div className="grid grid-cols-4 gap-2">
          {[
            { key: "textLight", label: "Text (Light)", hex: palette.textLight },
            { key: "surface", label: "Surface", hex: palette.surface },
            { key: "neutral", label: "Neutral", hex: palette.neutral },
            { key: "highlight", label: "Highlight", hex: palette.highlight },
            { key: "accent", label: "Accent", hex: palette.accent },
            { key: "secondary", label: "Secondary", hex: palette.secondary },
            { key: "primary", label: "Primary", hex: palette.primary },
            { key: "black", label: "Black", hex: "#000000" },
            { key: "textDark", label: "Text (Dark)", hex: palette.textDark },
          ].map((c) => (
            <button
              key={`light-${c.key}`}
              onClick={() => setDuoLightKey(c.key)}
              className={`rounded-lg border p-2 text-left hover:bg-neutral-50 ${
                duoLightKey === c.key ? "border-neutral-900" : "border-neutral-200"
              }`}
              type="button"
              title={c.label}
            >
              <div className="h-6 w-full rounded" style={{ background: c.hex }} />
              <div className="text-[11px] mt-1 text-neutral-600">{c.label}</div>
            </button>
          ))}
        </div>
      </div>
    </div>

    <div className="flex flex-wrap items-center gap-4">
      <label className="text-sm flex items-center gap-2">
        Threshold
        <input
          type="range"
          min={0}
          max={1}
          step={0.05}
          value={duoThreshold}
          onChange={(e) => setDuoThreshold(parseFloat(e.target.value))}
        />
        <span className="text-xs text-neutral-600">{duoThreshold.toFixed(2)}</span>
      </label>
      <label className="text-sm flex items-center gap-2">
        <input
          type="checkbox"
          checked={duoAffectStrokes}
          onChange={(e) => setDuoAffectStrokes(e.target.checked)}
        />
        Affect strokes
      </label>
      <label className="text-sm flex items-center gap-2">
        <input
          type="checkbox"
          checked={duoIncludeGradients}
          onChange={(e) => setDuoIncludeGradients(e.target.checked)}
        />
        Include gradients
      </label>
    </div>

    <div className="flex flex-wrap items-center gap-2">
      <button
        onClick={() => {
          const dark = resolveHex(duoDarkKey);
          const light = resolveHex(duoLightKey);
          const recolored = recolorSvgDuotone(iconSvg!, {
            darkColor: dark,
            lightColor: light,
            threshold: duoThreshold,
            affectStrokes: duoAffectStrokes,
            includeGradients: duoIncludeGradients,
          });
          setIconSvg(recolored); // update preview
        }}
        className="px-3 py-2 rounded-lg bg-neutral-900 text-white hover:bg-black"
        type="button"
      >
        Apply duotone to current
      </button>

      <button
        onClick={() => {
          // Common brand duotone variants
          const combos = [
            { d: palette.textDark,  l: palette.textLight,  name: "duo-text" },
            { d: palette.primary,   l: palette.highlight,  name: "duo-primary-highlight" },
            { d: palette.secondary, l: palette.accent,     name: "duo-secondary-accent" },
            { d: "#000000",         l: palette.textLight,  name: "duo-black-light" },
          ];

          const newLogos = combos.map((c) => {
            const svg = recolorSvgDuotone(iconSvg!, {
              darkColor: c.d,
              lightColor: c.l,
              threshold: duoThreshold,
              affectStrokes: duoAffectStrokes,
              includeGradients: duoIncludeGradients,
            });
            return {
              id: `duo-${c.name}-${Date.now()}`,
              filename: `logo-mark-${c.name}.svg`,
              svg,
              kind: "svg" as const,
            };
          });

          setLogos((prev) => [...prev, ...newLogos]);
          setTimeout(() => {
            document.getElementById("logos-section")?.scrollIntoView({ behavior: "smooth" });
          }, 10);
        }}
        className="px-3 py-2 rounded-lg border hover:bg-neutral-50"
        type="button"
      >
        Create brand duotone variants
      </button>
    </div>
  </div>
)}
