8) Page wiring (generate → preview → save → download)

Replace your Brand Kit page component with this full file:

src/pages/BrandKit/BrandKitPage.tsx

import { useState } from "react";
import { generateBrandKit } from "@/services/ai/brand";
import { downloadBrandKitZip } from "@/services/kits/export";
import { saveBrandKit } from "@/services/kits/persist";
import { BrandKit, BrandPersonality } from "@/types/brand";
import { auth } from "@/lib/firebase";

export default function BrandKitPage() {
  const [businessName, setBusinessName] = useState("");
  const [industry, setIndustry] = useState("");
  const [personality, setPersonality] = useState<BrandPersonality>("Modern");
  const [kit, setKit] = useState<BrandKit | null>(null);
  const [saving, setSaving] = useState(false);

  const handleGenerate = () => {
    const result = generateBrandKit({ businessName, industry, personality });
    setKit(result);
  };

  const handleSave = async () => {
    if (!kit) return;
    const user = auth.currentUser;
    if (!user) { alert("Please sign in first."); return; }
    setSaving(true);
    try {
      const id = await saveBrandKit(user.uid, kit);
      setKit({ ...kit, id });
      alert("Brand Kit saved!");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-semibold mb-2">Brand Kit Generator</h1>
      <p className="text-sm text-gray-600 mb-6">Answer a few questions, then generate your kit.</p>

      {/* Quick Start Form */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 bg-white rounded-xl p-4 shadow">
        <input
          className="border rounded-lg px-3 py-2"
          placeholder="Business name"
          value={businessName}
          onChange={(e)=>setBusinessName(e.target.value)}
        />
        <input
          className="border rounded-lg px-3 py-2"
          placeholder="Industry (optional)"
          value={industry}
          onChange={(e)=>setIndustry(e.target.value)}
        />
        <select
          className="border rounded-lg px-3 py-2"
          value={personality}
          onChange={(e)=>setPersonality(e.target.value as BrandPersonality)}
        >
          <option>Modern</option>
          <option>Natural</option>
          <option>Luxury</option>
          <option>Friendly</option>
        </select>

        <div className="md:col-span-3 flex gap-3 mt-1">
          <button onClick={handleGenerate} className="px-4 py-2 rounded-lg bg-primary text-white hover:opacity-90">
            Generate Brand Kit
          </button>
          {kit && (
            <>
              <button onClick={handleSave} disabled={saving} className="px-4 py-2 rounded-lg bg-emerald-600 text-white hover:opacity-90 disabled:opacity-50">
                {saving ? "Saving..." : "Save Kit"}
              </button>
              <button onClick={()=>downloadBrandKitZip(kit)} className="px-4 py-2 rounded-lg bg-accent text-white hover:opacity-90">
                Download Assets (.zip)
              </button>
            </>
          )}
        </div>
      </div>

      {/* Preview */}
      {kit && (
        <div className="mt-8 space-y-8">
          <section>
            <h2 className="text-xl font-semibold mb-3">Palette</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
              {[
                ["Primary", kit.palette.primary],
                ["Secondary", kit.palette.secondary],
                ["Accent", kit.palette.accent],
                ["Neutral", kit.palette.neutral],
                ["Surface", kit.palette.surface],
                ["Text", kit.palette.textPrimary],
              ].map(([label, hex]) => (
                <div key={label as string} className="rounded-lg overflow-hidden border">
                  <div className="h-16" style={{ background: hex as string }} />
                  <div className="p-2 text-sm">
                    <div className="font-medium">{label}</div>
                    <div className="text-gray-500">{hex}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section>
            <h2 className="text-xl font-semibold mb-3">Font Pair</h2>
            <div className="bg-white rounded-xl p-4 shadow flex items-center justify-between">
              <div>
                <div className="text-gray-500 text-xs uppercase">Heading</div>
                <div style={{ fontFamily: kit.fonts.heading }} className="text-2xl font-bold">
                  {kit.businessName}
                </div>
                <div className="text-gray-500 text-xs uppercase mt-3">Body</div>
                <p style={{ fontFamily: kit.fonts.body }} className="text-gray-700">
                  Make your first impression your best — a clear, modern identity for your brand.
                </p>
              </div>
              <div className="text-sm text-gray-500">{kit.fonts.heading} / {kit.fonts.body}</div>
            </div>
          </section>

          <section>
            <h2 className="text-xl font-semibold mb-3">Logos</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {kit.logos.map(v => (
                <div key={v.filename} className="bg-white rounded-xl p-4 shadow border">
                  <div className="text-sm font-medium mb-2">{v.filename}</div>
                  <div className="aspect-[3/1] md:aspect-[1/1] border rounded-lg flex items-center justify-center overflow-hidden bg-gray-50">
                    <div dangerouslySetInnerHTML={{ __html: v.svg }} />
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      )}
    </div>
  );
}
