/* ========================================================================
   pages-core.jsx — Dashboard, New Project Wizard, Project Overview
   ====================================================================== */

/* ---------------------------------------------------------------- DASHBOARD */
function DashboardPage() {
  const { go, runGeneration, setCurrentProjectId } = React.useContext(AppCtx);
  const [filter, setFilter] = React.useState("All");
  const filters = ["All", "Needs Analysis", "Ready", "Generated", "Exported"];
  const filtered = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.status === filter);
  const generatedCount = (() => {
    try { return JSON.parse(localStorage.getItem("boltkit.generatedPacks") || "[]").length; }
    catch (e) { return 4; }
  })();
  const exportCount = window.BoltKitMVP?.getExportHistory?.().length || 0;
  const avgReadiness = Math.round(PROJECTS.reduce((sum, p) => sum + (p.readiness || 0), 0) / Math.max(1, PROJECTS.length));
  const needsAnalysisCount = PROJECTS.filter(p => p.status === "Needs Analysis").length;
  const readyCount = PROJECTS.filter(p => ["Ready", "Generated", "Exported"].includes(p.status)).length;

  return (
    <div className="page">
      {/* Hero header */}
      <div className="page-header">
        <div>
          <div className="page-eyebrow">Workspace · Jamie Chen</div>
          <h1 className="page-title">Launch Command <span className="hl">Centre</span></h1>
          <p className="page-sub">{PROJECTS.length} app projects, {needsAnalysisCount} needing analysis, {readyCount} ready to ship. Pick a project and generate the launch pack you need.</p>
        </div>
        <div className="row gap-8">
          <Btn icon="sparkle" onClick={() => go("generate")}>Generate Pack</Btn>
          <Btn variant="primary" icon="plus" onClick={() => go("wizard")}>New Project</Btn>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-4 mb-24">
        <StatTile label="Projects"           value={String(PROJECTS.length)}   icon="folder"  delta={`${needsAnalysisCount} need analysis`}  accent="var(--yellow)" />
        <StatTile label="Packs Generated"    value={String(generatedCount)}  icon="layers"  delta="Local state" accent="oklch(0.85 0.18 100)" />
        <StatTile label="Exports"            value={String(exportCount)}  icon="download" delta="History saved" />
        <StatTile label="Avg. Readiness"     value={`${avgReadiness}%`} icon="target"  delta={`${readyCount} ready`}  />
      </div>

      {/* AI hero strip — featured next action */}
      <div className="ai-surface card-pad-lg mb-24" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: 24, alignItems: "center" }}>
        <div>
          <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2.2} />AI suggestion</span>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em", marginTop: 12, lineHeight: 1.2 }}>
            {PROJECTS[0]?.name || "Your app"} is <span style={{ background: "var(--yellow)", padding: "0 6px", borderRadius: 4 }}>{PROJECTS[0]?.readiness || 0}% launch-ready</span> — generate a Full Launch Pack next.
          </div>
          <div className="muted text-sm mt-8" style={{ maxWidth: 70+"ch" }}>
            Your project has URL, audience, tone and brand notes ready. Add screenshots or a logo when available; they are useful but will not block first generation. Estimated time to ready: <strong style={{ color: "var(--fg)" }}>~90 seconds</strong>.
          </div>
        </div>
        <div className="row gap-8" style={{ flexShrink: 0 }}>
          <Btn variant="secondary" onClick={() => go("overview")}>Open project</Btn>
          <Btn variant="dark" icon="sparkle" onClick={() => runGeneration(PACK_TYPES[1])}>Generate now</Btn>
        </div>
      </div>

      {/* Filters */}
      <div className="row-between mb-16" style={{ flexWrap: "wrap", gap: 12 }}>
        <div className="chip-row">
          {filters.map(f => (
            <button key={f} className={"chip" + (filter === f ? " active chip-yellow" : "")} onClick={() => setFilter(f)}>
              {f}
              <span className="text-xs" style={{ opacity: 0.6, fontWeight: 700 }}>{f === "All" ? PROJECTS.length : PROJECTS.filter(p => p.status === f).length}</span>
            </button>
          ))}
        </div>
        <div className="row gap-8">
          <Btn size="sm" variant="ghost" icon="filter">Filters</Btn>
          <Btn size="sm" variant="ghost" icon="grid">Grid</Btn>
        </div>
      </div>

      {/* Project grid */}
      <div className="grid grid-3 mb-24">
        {filtered.map(p => (
          <ProjectCard key={p.id} project={p} />
        ))}
      </div>

      <div className="grid mb-24" style={{ gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)" }}>
        {/* Recent generated packs */}
        <Card title="Recent generated packs" sub="Last 7 days" action={<Btn size="sm" variant="ghost" iconRight="arrow_right" onClick={() => go("outputs")}>View all</Btn>} padding="none">
          <div style={{ display: "flex", flexDirection: "column" }}>
            {RECENT_PACKS.map((r, i) => (
              <div key={r.id} className="row gap-12" style={{ padding: "12px 18px", borderTop: i === 0 ? 0 : "1px solid var(--border)" }}>
                <div style={{ width: 36, height: 36, borderRadius: 9, background: "var(--yellow)", display: "grid", placeItems: "center", color: "var(--yellow-ink)", flex: "none", boxShadow: "inset 0 -1px 0 var(--yellow-deep)" }}>
                  <Icon name="sparkle" size={16} stroke={2.2} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row gap-8" style={{ flexWrap: "wrap" }}>
                    <span className="fw-7 text-sm">{r.pack}</span>
                    <Pill>{r.project}</Pill>
                  </div>
                  <div className="muted text-xs mt-4">{r.items} assets · generated by AI · {r.when}</div>
                </div>
                <Btn size="sm" variant="ghost" icon="eye" onClick={() => go("outputs")}>Open</Btn>
                <Btn size="sm" variant="ghost" icon="download" onClick={() => go("exports")}>Export</Btn>
              </div>
            ))}
          </div>
        </Card>

        {/* Missing assets summary */}
        <Card title="Missing assets" sub="Across current workspace" action={<Pill variant="amber">{PROJECTS.reduce((sum, p) => sum + (p.missing || 0), 0)} items</Pill>}>
          <div className="col gap-12">
            {PROJECTS.map(project => (
              <div key={project.id} style={{ padding: "10px 12px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)" }}>
                <div className="row-between">
                  <span className="fw-7 text-sm">{project.name}</span>
                  <Pill variant={project.missing ? "amber" : "green"}>{project.missing || 0} items</Pill>
                </div>
                <div className="muted text-xs mt-4">{project.missing ? "Screenshots · Logo/app icon or brand pack" : "Ready"}</div>
              </div>
            ))}
            <Btn variant="secondary" icon="check_circle" onClick={() => go("assets")}>Resolve missing assets</Btn>
          </div>
        </Card>
      </div>
    </div>
  );
}

function ProjectCard({ project }) {
  const { go, setCurrentProjectId, runGeneration } = React.useContext(AppCtx);
  const open = () => { setCurrentProjectId(project.id); go("overview"); };
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column", overflow: "hidden", transition: "box-shadow .14s, transform .14s", cursor: "pointer" }}
      onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--shadow-lg)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--shadow-sm)"; e.currentTarget.style.transform = "none"; }}
      onClick={open}
    >
      <div className="card-pad-lg">
        <div className="row gap-12">
          <AppIcon project={project} size={48} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="row-between" style={{ gap: 8 }}>
              <div className="fw-8" style={{ fontSize: 16, letterSpacing: "-0.015em" }}>{project.name}</div>
              <ProjectStatus project={project} />
            </div>
            <div className="muted text-xs mt-4">{project.url}</div>
          </div>
        </div>
        <div className="muted text-sm mt-12" style={{ minHeight: 38 }}>{project.tagline}</div>

        <div className="row gap-12 mt-16" style={{ alignItems: "flex-end" }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Readiness</div>
            <div className="row-between mt-4 mb-8">
              <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em" }}>{project.readiness}%</span>
              {project.missing > 0
                ? <Pill variant="amber" icon="alert">{project.missing} missing</Pill>
                : <Pill variant="green" icon="check">All set</Pill>}
            </div>
            <div className="meter"><span style={{ width: project.readiness + "%" }} /></div>
          </div>
        </div>

        <div className="hr mt-16" />
        <div className="row-between mt-12 text-xs">
          <div className="muted">Last pack: <span className="fw-7" style={{ color: "var(--fg)" }}>{project.lastPack}</span></div>
          <div className="muted">{project.lastGen}</div>
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--border)", background: "var(--surface-2)", padding: 10, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
        <Btn size="sm" variant="ghost" icon="external" onClick={(e) => { e.stopPropagation(); open(); }}>Open</Btn>
        <Btn size="sm" variant="ghost" icon="sparkle" onClick={(e) => { e.stopPropagation(); setCurrentProjectId(project.id); runGeneration(PACK_TYPES[0]); }}>Generate</Btn>
        <Btn size="sm" variant="ghost" icon="download" onClick={(e) => { e.stopPropagation(); setCurrentProjectId(project.id); go("exports"); }}>Export</Btn>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- WIZARD */
function WizardPage() {
  const { go, showToast, runGeneration } = React.useContext(AppCtx);
  const [step, setStep] = React.useState(0);
  const steps = ["Basics", "Audience", "Assets", "Brand", "AI Preview"];
  const next = () => setStep(s => Math.min(steps.length - 1, s + 1));
  const back = () => setStep(s => Math.max(0, s - 1));

  return (
    <div className="page page-narrow">
      <div className="page-header">
        <div>
          <div className="page-eyebrow">New project · Step {step + 1} of {steps.length}</div>
          <h1 className="page-title">{
            step === 0 ? "Tell us the basics" :
            step === 1 ? "Who is this for?" :
            step === 2 ? "Bring your assets" :
            step === 3 ? "Lock the brand" :
                         "AI looked things over"
          }</h1>
          <p className="page-sub">{
            step === 0 ? "Just enough to start. You can refine everything once the project exists." :
            step === 1 ? "Audience, pain point and tone — the three things every pack needs." :
            step === 2 ? "Logo, app icon, screenshots and any brand assets. AI will extract what it can." :
            step === 3 ? "Colours, fonts and brand voice. AI can suggest a palette from your logo." :
                         "Give the AI summary a once-over, then save and generate your first pack."
          }</p>
        </div>
        <Btn variant="ghost" icon="close" onClick={() => go("dashboard")}>Cancel</Btn>
      </div>

      {/* progress */}
      <div className="card card-pad mb-24" style={{ overflow: "auto" }}>
        <Steps steps={steps} current={step} />
      </div>

      <div className="card card-pad-lg">
        {step === 0 && <WizardBasics />}
        {step === 1 && <WizardAudience />}
        {step === 2 && <WizardAssets />}
        {step === 3 && <WizardBrand />}
        {step === 4 && <WizardPreview />}
      </div>

      <div className="row-between mt-24" style={{ flexWrap: "wrap", gap: 12 }}>
        <Btn variant="secondary" icon="arrow_left" onClick={back} disabled={step === 0}>Back</Btn>
        <div className="row gap-8">
          <Btn variant="ghost" onClick={() => showToast("Draft saved")}>Save draft</Btn>
          {step < steps.length - 1
            ? <Btn variant="primary" iconRight="arrow_right" onClick={next}>Continue</Btn>
            : <Btn variant="primary" icon="sparkle" onClick={() => { showToast("Project created · generating Full Launch Pack"); runGeneration(PACK_TYPES[0]); }}>Save Project & Generate First Pack</Btn>}
        </div>
      </div>
    </div>
  );
}

function WizardBasics() {
  return (
    <div className="grid grid-2 gap-20">
      <Field label="Project name" required><input className="input" defaultValue="BoltKit" /></Field>
      <Field label="Website / App URL" required hint="https://">
        <div className="input-with-icon"><Icon name="globe" size={15} className="ico" stroke={2} /><input className="input" defaultValue="http://localhost:5174" /></div>
      </Field>
      <Field label="Short description" sub="One sentence — what does the app do?" required style={{ gridColumn: "span 2" }}>
        <textarea className="textarea" defaultValue="An AI launch-pack generator for app builders, SaaS founders and no-code creators." />
      </Field>
      <Field label="Project status">
        <select className="select" defaultValue="In development">
          <option>Idea</option>
          <option>In development</option>
          <option>Beta</option>
          <option>Launching</option>
          <option>Live</option>
        </select>
      </Field>
      <Field label="Project tag">
        <select className="select">
          <option>iOS app</option>
          <option>Android app</option>
          <option>Web app</option>
          <option>Cross-platform</option>
        </select>
      </Field>
    </div>
  );
}

function WizardAudience() {
  return (
    <div className="grid grid-2 gap-20">
      <Field label="Target audience" required style={{ gridColumn: "span 2" }}>
        <textarea className="textarea" defaultValue="Indie app founders, SaaS builders, no-code builders, agencies and product creators preparing a launch." />
      </Field>
      <Field label="Primary pain point" required>
        <textarea className="textarea" defaultValue="Founders finish the product but lose momentum turning screenshots, notes and brand assets into a coherent launch campaign." />
      </Field>
      <Field label="Tone of voice" required>
        <select className="select" defaultValue="Premium, fast, practical, high-energy">
          <option>Premium, fast, practical, high-energy</option>
          <option>Playful, bold, energetic</option>
          <option>Premium, minimal, confident</option>
          <option>Expert, technical, no nonsense</option>
        </select>
        <div className="chip-row mt-12">
          {["Fast", "Practical", "Premium", "Sharp", "Commercial"].map(t => (
            <span key={t} className="chip active chip-yellow">{t}</span>
          ))}
        </div>
      </Field>
      <Field label="Anything the AI should know?" sub="Optional — competitors to avoid, regional notes, etc." style={{ gridColumn: "span 2" }}>
        <textarea className="textarea" placeholder="e.g. focus on indie founders, avoid vague SaaS filler, lean into the brand pack's high-energy launch positioning…" />
      </Field>
    </div>
  );
}

function WizardAssets() {
  return (
    <div className="col gap-24">
      <div className="grid grid-2 gap-16">
        <Field label="Logo" sub="SVG preferred — used in social, ads, press kit."><Drop title="Drop a logo or click to upload" sub="SVG, PNG up to 5MB" /></Field>
        <Field label="App icon" sub="1024×1024 PNG for App Store output."><Drop title="Drop the app icon" sub="PNG, 1024×1024" icon="image" /></Field>
      </div>
      <Field label="App screenshots" sub="Drop in marketing or in-app screenshots. AI will detect the screen type for each.">
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
          {[1,2,3,4].map(i => (
            <div key={i} className="thumb"><span className="label">screen-{i.toString().padStart(2,"0")}.png</span></div>
          ))}
          <button className="thumb" style={{ borderStyle: "dashed", background: "var(--surface-2)" }}>
            <div className="col" style={{ alignItems: "center" }}>
              <Icon name="plus" size={20} stroke={2} />
              <span className="text-xs muted fw-7 mt-4">Add more</span>
            </div>
          </button>
        </div>
      </Field>
      <Field label="Brand pack" sub="Any existing brand guidelines, fonts, palette ZIP." ><Drop title="Drop a ZIP, PDF, or Figma export" sub="ZIP, PDF, FIG up to 50MB" icon="zip" /></Field>
    </div>
  );
}

function WizardBrand() {
  const colors = ["#EFFF00", "#050505", "#0B0B0B", "#F4F4F0", "#ADC700"];
  return (
    <div className="col gap-24">
      <div className="ai-surface card-pad">
        <div className="row-between" style={{ flexWrap: "wrap", gap: 12 }}>
          <div>
            <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2.2} />Extracted from your assets</span>
            <div className="fw-8 mt-8" style={{ fontSize: 15 }}>AI found a sharp acid-on-black launch palette from your brand pack and screenshots.</div>
            <div className="muted text-sm mt-4">3 primary colours, 2 supporting. Brand consistency: 92%.</div>
          </div>
          <Btn variant="dark" icon="sparkle">Re-extract with AI</Btn>
        </div>
        <div className="grid mt-16" style={{ gridTemplateColumns: "repeat(5, minmax(0,1fr))", gap: 12 }}>
          {colors.map((c, i) => <Swatch key={c} hex={c} name={["Primary","Ink","Paper","Accent","Mute"][i]} />)}
        </div>
      </div>
      <div className="grid grid-2 gap-20">
        <Field label="Heading font" sub="System will check it's licensed for marketing use.">
          <select className="select" defaultValue="Anton"><option>Anton</option><option>Bebas Neue</option><option>Inter Display</option><option>Geist</option></select>
        </Field>
        <Field label="Body font">
          <select className="select" defaultValue="Inter"><option>Inter</option><option>JetBrains Mono</option><option>Geist</option></select>
        </Field>
        <Field label="Brand voice" style={{ gridColumn: "span 2" }}>
          <textarea className="textarea" defaultValue="Premium, fast, practical, high-energy and direct. Motorsport/esports/broadcast inspired without becoming gimmicky." />
        </Field>
        <Field label="Brand rules" sub="Comma-separated. AI will avoid breaking these." style={{ gridColumn: "span 2" }}>
          <input className="input" defaultValue="Use acid yellow as the only saturated colour, avoid generic SaaS filler, keep the lightning identity sharp" />
        </Field>
      </div>
    </div>
  );
}

function WizardPreview() {
  return (
    <div className="col gap-20">
      <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 240px", gap: 20 }}>
        <Card padding="lg" title="App summary" sub="AI · 12 seconds">
          <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg)" }}>
            BoltKit is an <strong>AI launch-pack generator</strong> for app founders, SaaS builders, no-code creators and agencies. It turns app URLs, screenshots, brand packs and launch notes into social posts, video scripts, ads, app store copy, SEO and build prompts. The product is positioned as <strong>premium, fast and practical</strong>, with a sharp motorsport/broadcast identity.
          </div>
        </Card>
        <Card padding="lg">
          <div className="col" style={{ alignItems: "center", gap: 8 }}>
            <Ring value={87} size={130} thickness={11}>
              <div className="n">87<span style={{ fontSize: 14, color: "var(--fg-muted)" }}>%</span></div>
              <div className="l">Readiness</div>
            </Ring>
            <Pill variant="yellow-soft">Strong launch position</Pill>
          </div>
        </Card>
      </div>
      <div className="grid grid-2 gap-16">
        <Card title="Target users" padding="lg">
          <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.7 }}>
            <li>Indie founders preparing a product launch</li>
            <li>SaaS builders needing launch assets fast</li>
            <li>No-code creators shipping polished digital products</li>
            <li>Agencies creating launch packs for clients</li>
          </ul>
        </Card>
        <Card title="Pain points" padding="lg">
          <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.7 }}>
            <li>Launch copy scattered across docs and chats</li>
            <li>Screenshots and brand assets underused</li>
            <li>Every channel needs a slightly different message</li>
            <li>No single exportable launch folder</li>
          </ul>
        </Card>
        <Card title="Benefits" padding="lg">
          <div className="col">
            {PROJECTS[0].benefits.slice(0, 3).map(b => (
              <div key={b.t} className="row gap-10" style={{ alignItems: "flex-start" }}>
                <div style={{ width: 18, height: 18, borderRadius: 5, background: "var(--yellow)", flex: "none", display: "grid", placeItems: "center", marginTop: 1 }}><Icon name="check" size={11} stroke={3} color="var(--yellow-ink)" /></div>
                <div className="text-sm"><strong>{b.t}.</strong> <span className="muted">{b.s}</span></div>
              </div>
            ))}
          </div>
        </Card>
        <Card title="Missing assets · pre-launch" padding="lg">
          <div className="col gap-8">
            <div className="row gap-10"><Icon name="alert" size={14} color="var(--amber)" /><span className="text-sm">Press kit photos <span className="muted">(required for press pack)</span></span></div>
            <div className="row gap-10"><Icon name="alert" size={14} color="var(--amber)" /><span className="text-sm">App Store hero video <span className="muted">(optional but recommended)</span></span></div>
            <div className="row gap-10"><Icon name="check_circle" size={14} color="var(--green)" /><span className="text-sm">All other assets are in place</span></div>
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- PROJECT OVERVIEW */
function ProjectOverviewPage() {
  const { currentProject: p, go, runGeneration, showToast, setCurrentProjectId } = React.useContext(AppCtx);
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(() => ({
    name: p.name || "",
    tagline: p.tagline || "",
    url: p.url || "",
    audience: p.audience || "",
    pain: p.pain || "",
    tone: p.tone || "",
  }));
  React.useEffect(() => {
    setDraft({
      name: p.name || "",
      tagline: p.tagline || "",
      url: p.url || "",
      audience: p.audience || "",
      pain: p.pain || "",
      tone: p.tone || "",
    });
    setEditing(false);
  }, [p.id]);
  const benefits = p.benefits || [
    { t: "Clear launch story", s: "Turns rough project context into benefits, angles and channel-ready copy." },
    { t: "Faster campaign prep", s: "Generates the first usable version of launch assets in one place." },
    { t: "Export-ready workflow", s: "Keeps generated content structured for Markdown, CSV, JSON and ZIP handoff." },
    { t: "Founder-friendly defaults", s: "Works in demo mode before auth, billing, storage and real AI are connected." },
  ];
  const angles = p.angles || [
    `Launch ${p.name} without rebuilding the marketing plan from scratch`,
    "Upload the app context once, reuse it everywhere",
    "From screenshots to launch folder in one focused flow",
    "A command centre for app builders who need to ship",
  ];
  const setDraftValue = (key) => (event) => setDraft(d => ({ ...d, [key]: event.target.value }));
  const saveProject = () => {
    Object.assign(p, {
      name: draft.name || p.name,
      tagline: draft.tagline,
      url: draft.url,
      audience: draft.audience,
      pain: draft.pain,
      tone: draft.tone,
      summary: `${draft.name || p.name} helps ${draft.audience || "its target users"} by ${draft.tagline || "turning product context into a launch-ready story"}.`,
    });
    window.BoltKitMVP?.persistProject?.(p);
    setEditing(false);
    showToast("Project updated locally");
  };
  const deleteProject = () => {
    const protectedIds = new Set(["boltkit-test-launch"]);
    if (protectedIds.has(p.id)) {
      showToast("Demo projects are locked. Create a local project to test delete.");
      return;
    }
    const index = PROJECTS.findIndex(project => project.id === p.id);
    if (index >= 0) PROJECTS.splice(index, 1);
    try {
      const saved = JSON.parse(localStorage.getItem("boltkit.projects") || "[]").filter(project => project.id !== p.id);
      localStorage.setItem("boltkit.projects", JSON.stringify(saved));
    } catch (e) {}
    setCurrentProjectId(PROJECTS[0]?.id || "boltkit-test-launch");
    showToast("Project deleted locally");
    go("dashboard");
  };
  return (
    <div className="page">
      {/* Header */}
      <div className="page-header">
        <div className="row gap-16" style={{ minWidth: 0 }}>
          <AppIcon project={p} size={64} />
          <div style={{ minWidth: 0 }}>
            <div className="row gap-8"><h1 className="page-title" style={{ marginBottom: 0 }}>{p.name}</h1><ProjectStatus project={p} /></div>
            <div className="muted mt-8 row gap-8">
              <Icon name="globe" size={14} /> <a className="fw-7" href="#">{p.url}</a> · <span>{p.tagline}</span>
            </div>
          </div>
        </div>
        <div className="row gap-8">
          <Btn variant="ghost" icon="trash" onClick={deleteProject}>Delete</Btn>
          <Btn variant="secondary" icon="settings" onClick={() => setEditing(v => !v)}>{editing ? "Close settings" : "Project settings"}</Btn>
          <Btn variant="primary" icon="sparkle" onClick={() => go("generate")}>Generate pack</Btn>
        </div>
      </div>

      {editing && (
        <Card title="Project settings" sub="Local/demo project details" padding="lg" style={{ marginBottom: 20 }}
          action={<Btn size="sm" variant="primary" icon="check" onClick={saveProject}>Save changes</Btn>}>
          <div className="grid grid-2 gap-16">
            <Field label="Project name"><input className="input" value={draft.name} onChange={setDraftValue("name")} /></Field>
            <Field label="Website / app URL"><input className="input" value={draft.url} onChange={setDraftValue("url")} /></Field>
            <Field label="Short description" style={{ gridColumn: "span 2" }}><textarea className="textarea" value={draft.tagline} onChange={setDraftValue("tagline")} /></Field>
            <Field label="Target audience"><textarea className="textarea" value={draft.audience} onChange={setDraftValue("audience")} /></Field>
            <Field label="Pain point"><textarea className="textarea" value={draft.pain} onChange={setDraftValue("pain")} /></Field>
            <Field label="Tone of voice" style={{ gridColumn: "span 2" }}><input className="input" value={draft.tone} onChange={setDraftValue("tone")} /></Field>
          </div>
        </Card>
      )}

      <div className="grid mb-24" style={{ gridTemplateColumns: "minmax(0, 1fr) 320px", gap: 20 }}>
        <div className="col gap-16">
          <Card title="App summary" sub="AI · auto-refreshed weekly" padding="lg" action={<Btn size="sm" variant="ghost" icon="refresh">Refresh</Btn>}>
            <div style={{ fontSize: 15, lineHeight: 1.65 }}>{p.summary || p.tagline || "Add project notes, assets and a URL to generate a richer summary."}</div>
          </Card>

          <div className="grid grid-2 gap-16">
            <Card title="Target users" padding="lg">
              <div className="text-sm muted">{p.audience || "Add a target audience in project settings to sharpen generated packs."}</div>
            </Card>
            <Card title="Pain points" padding="lg">
              <div className="text-sm muted">{p.pain || "Add the primary pain point so BoltKit can generate stronger hooks."}</div>
            </Card>
          </div>

          <Card title="Benefits" sub="Features turned into outcomes" padding="lg">
            <div className="grid grid-2 gap-12">
              {benefits.map(b => (
                <div key={b.t} className="row gap-12" style={{ alignItems: "flex-start", padding: 12, border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)" }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--yellow)", display: "grid", placeItems: "center", flex: "none" }}>
                    <Icon name="check" size={14} stroke={2.6} color="var(--yellow-ink)" />
                  </div>
                  <div>
                    <div className="fw-7 text-sm">{b.t}</div>
                    <div className="muted text-xs mt-4">{b.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Marketing angles" sub="Working headlines AI thinks will land" padding="lg" action={<Btn size="sm" variant="ghost" icon="refresh">Regenerate</Btn>}>
            <div className="col gap-8">
              {angles.map((a, i) => (
                <div key={i} className="row-between" style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 10 }}>
                  <div className="row gap-10">
                    <span className="mono text-xs muted">{String(i+1).padStart(2,"0")}</span>
                    <span className="fw-7" style={{ fontSize: 15 }}>"{a}"</span>
                  </div>
                  <div className="row gap-4">
                    <IconBtn icon="copy" title="Copy" />
                    <IconBtn icon="star" title="Star" />
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Right rail */}
        <div className="col gap-16">
          <Card padding="lg" style={{ background: "var(--fg)", color: "white", borderColor: "var(--fg)" }}>
            <div className="row-between">
              <div className="text-xs uppercase" style={{ color: "var(--yellow)", letterSpacing: "0.16em", fontWeight: 800 }}>Launch Readiness</div>
              <Pill variant="dark"><Icon name="bolt" size={11} stroke={2.2} />{p.status}</Pill>
            </div>
            <div className="row gap-16 mt-16" style={{ alignItems: "center" }}>
              <Ring value={p.readiness} size={120} thickness={10} color="var(--yellow)" track="oklch(0.28 0.005 260)">
                <div className="n" style={{ color: "white" }}>{p.readiness}<span style={{ fontSize: 13, opacity: 0.6 }}>%</span></div>
                <div className="l" style={{ color: "oklch(0.65 0.008 95)" }}>Ready</div>
              </Ring>
              <div className="col" style={{ flex: 1, gap: 10 }}>
                <MetricRow label="Brand fit"      value="92%" bar={92} />
                <MetricRow label="Asset coverage" value="84%" bar={84} />
                <MetricRow label="Copy depth"     value="78%" bar={78} />
                <MetricRow label="SEO presence"   value="61%" bar={61} />
              </div>
            </div>
          </Card>

          <Card title="Generate pack" sub="Most-likely next">
            <div className="col gap-8">
              {[PACK_TYPES[1], PACK_TYPES[2], PACK_TYPES[5]].map(pk => (
                <button key={pk.id} className="row-between" onClick={() => runGeneration(pk)}
                  style={{ padding: 10, border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface)", width: "100%", textAlign: "left" }}>
                  <div className="row gap-10">
                    <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--yellow)", display: "grid", placeItems: "center" }}>
                      <Icon name={pk.icon} size={14} color="var(--yellow-ink)" />
                    </div>
                    <div>
                      <div className="fw-7 text-sm">{pk.name}</div>
                      <div className="muted text-xs">{pk.time} · {pk.items}</div>
                    </div>
                  </div>
                  <Icon name="arrow_right" size={14} stroke={2} color="var(--fg-muted)" />
                </button>
              ))}
              <Btn variant="ghost" iconRight="arrow_right" onClick={() => go("generate")}>See all 12 pack types</Btn>
            </div>
          </Card>

          <Card title="Missing assets" sub={`${p.missing} blockers`}>
            <div className="col gap-8">
              {(p.missingAssets || []).map((m, i) => (
                <div key={i} className="row gap-10" style={{ padding: "8px 10px", border: "1px solid var(--border)", borderRadius: 8 }}>
                  <Icon name="alert" size={14} color={m.required ? "var(--red)" : "var(--amber)"} />
                  <span className="text-sm fw-6" style={{ flex: 1 }}>{m.name}</span>
                  <Pill variant={m.required ? "red" : "amber"}>{m.required ? "Required" : "Optional"}</Pill>
                </div>
              ))}
              <Btn variant="secondary" icon="upload" onClick={() => go("assets")}>Upload assets</Btn>
            </div>
          </Card>

          <Card title="Suggested next actions">
            <div className="col gap-6">
              <button className="row gap-10" style={{ padding: "8px 4px", width: "100%", textAlign: "left" }} onClick={() => go("generate")}>
                <Icon name="sparkle" size={14} color="var(--fg-muted)" /><span className="text-sm fw-6">Generate Feature Update Pack for v1.4</span>
              </button>
              <button className="row gap-10" style={{ padding: "8px 4px", width: "100%", textAlign: "left" }} onClick={() => go("analysis")}>
                <Icon name="refresh" size={14} color="var(--fg-muted)" /><span className="text-sm fw-6">Re-analyse with updated screenshots</span>
              </button>
              <button className="row gap-10" style={{ padding: "8px 4px", width: "100%", textAlign: "left" }} onClick={() => go("exports")}>
                <Icon name="zip" size={14} color="var(--fg-muted)" /><span className="text-sm fw-6">Export latest pack as ZIP</span>
              </button>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPage, WizardPage, ProjectOverviewPage });