/* ========================================================================
   screens-wizard.jsx — 5-step new-project wizard + website importer
   ====================================================================== */

const WizardStrip = ({ active = 3, steps = ["BASICS","AUDIENCE","ASSETS","BRAND","AI PREVIEW"] }) => (
  <div className="wz-strip">
    {steps.map((s, i) => (
      <div key={s} className={"step " + (i < active ? "done" : i === active ? "active" : "")}>
        <span className="n">{String(i + 1).padStart(2, "0")}</span>
        <span>{s}</span>
        {i < active && <Icon name="check" size={12} stroke={2.6} />}
      </div>
    ))}
  </div>
);

const WizardShell = ({ title, eyebrow, active, children, rail }) => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="projects" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes (new)" />
      <div style={{ flex: 1, overflowY: "auto", padding: "20px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span style={{ width: 18, height: 1, background: "#EFFF00" }} />
          {eyebrow}
        </div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase", margin: "0 0 16px", color: "#FFF" }}>{title}</h1>
        <WizardStrip active={active} />
        <div style={{ display: "grid", gridTemplateColumns: rail ? "1.4fr 1fr" : "1fr", gap: 18 }}>
          <div className="card" style={{ padding: 24 }}>{children}</div>
          {rail}
        </div>
      </div>
    </div>
  </div>
);

const WizardStep1 = () => (
  <WizardShell
    eyebrow="NEW PROJECT · STEP 1"
    title="The Basics"
    active={0}
    rail={
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="ai-surface" style={{ padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> AI · WEBSITE IMPORTER</span>
          </div>
          <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05, marginTop: 10 }}>Skip the typing. Paste your URL.</div>
          <div style={{ color: "#C8C8C5", fontSize: 12, marginTop: 6 }}>We'll pull title, meta, copy, favicon, logo candidates, colours, positioning &amp; features.</div>
          <button className="btn btn-primary btn-sm" style={{ marginTop: 12 }}><BoltMini size={11} color="#1A1813" /> Draw from website</button>
        </div>
        <div className="card" style={{ padding: 16 }}>
          <div className="card-title" style={{ marginBottom: 8 }}>What we pull</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
            {["Page title &amp; meta","Hero copy &amp; positioning","Favicon &amp; logos","Brand colour candidates","Feature bullet list","Suggested missing assets"].map(s => (
              <li key={s} style={{ display: "flex", gap: 7, alignItems: "center", fontSize: 12, color: "#C8C8C5" }}>
                <Icon name="check" size={11} stroke={2.6} color="#EFFF00" />
                <span dangerouslySetInnerHTML={{ __html: s }} />
              </li>
            ))}
          </ul>
        </div>
      </div>
    }
  >
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div>
        <label className="field-label">Project name</label>
        <input className="input" defaultValue="Renoo · Notes for builders" />
      </div>
      <div>
        <label className="field-label">Status</label>
        <select className="select"><option>Building · pre-launch</option></select>
      </div>
      <div style={{ gridColumn: "1 / -1" }}>
        <label className="field-label">Website or app URL</label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }}>
          <div className="input-with-icon">
            <Icon name="link" size={15} stroke={2} className="ico" />
            <input className="input" defaultValue="https://renoo.app" style={{ paddingLeft: 34 }} />
          </div>
          <button className="btn btn-primary"><BoltMini size={12} color="#1A1813" /> Draw information</button>
        </div>
        <div className="field-sub" style={{ marginTop: 8 }}>BoltKit will read your live site and pre-fill the next steps.</div>
      </div>
      <div style={{ gridColumn: "1 / -1" }}>
        <label className="field-label">Short description</label>
        <textarea className="textarea" defaultValue="Daily note-taking app for builders shipping under chaos. Capture in 4 seconds, surface tomorrow." />
      </div>
      <div>
        <label className="field-label">Category</label>
        <select className="select"><option>Productivity · Notes</option></select>
      </div>
      <div>
        <label className="field-label">Region</label>
        <select className="select"><option>UK · global English</option></select>
      </div>
    </div>
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24 }}>
      <button className="btn btn-ghost">Cancel</button>
      <button className="btn btn-primary">Continue · Audience <Icon name="arrow_right" size={12} stroke={2.4} /></button>
    </div>
  </WizardShell>
);

const WizardStep3 = () => (
  <WizardShell
    eyebrow="NEW PROJECT · STEP 3"
    title="Drop Your Assets"
    active={2}
    rail={
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="card" style={{ padding: 16 }}>
          <div className="card-title" style={{ marginBottom: 10 }}>What we found so far</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
            {[
              { l: "Hero", img: "#FF6B35" }, { l: "Onboard", img: "#1E1E1E" }, { l: "Capture", img: "#2C2A23" },
              { l: "Streak", img: "#FF6B35" }, { l: "Search", img: "#201E18" }, { l: "Settings", img: "#1E1E1E" },
            ].map((t, i) => (
              <div key={i} style={{ aspectRatio: "9/19", background: t.img, border: "1px solid #3A372F", position: "relative", display: "grid", placeItems: "center" }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#FFF", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, background: "rgba(0,0,0,0.6)", padding: "2px 5px" }}>{t.l}</span>
              </div>
            ))}
          </div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, marginTop: 10 }}>6 SCREENS · AI-LABELLED</div>
        </div>
        <div className="ai-surface" style={{ padding: 14 }}>
          <span className="ai-chip"><Icon name="sparkle" size={11} /> AI</span>
          <div style={{ fontSize: 12.5, color: "#C8C8C5", marginTop: 10 }}>Your screenshots will be analysed for screen type, features, copy and CTAs.</div>
        </div>
      </div>
    }
  >
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      {[
        { i: "image",   l: "App screenshots",  s: "9:19 phone · 16:9 tablet · max 64", c: 6 },
        { i: "palette", l: "Logo",             s: "SVG · PNG · 1024px+",                c: 1 },
        { i: "shop",    l: "App icon",         s: "1024×1024 PNG (recommended)",        c: 0 },
        { i: "package", l: "Brand pack",       s: "PDF · ZIP · Figma export",           c: 0 },
      ].map((d, i) => (
        <div key={i} className="drop" style={{ padding: 22, textAlign: "left" }}>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <div style={{ width: 38, height: 38, background: "#201E18", border: "1px solid #3A372F", display: "grid", placeItems: "center", color: "#EFFF00" }}>
              <Icon name={d.i} size={16} stroke={2} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="t" style={{ marginBottom: 2 }}>{d.l}</div>
              <div className="s" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "#5C5C5C" }}>{d.s}</div>
            </div>
            {d.c > 0 ? <Pill tone="yellow">{d.c} ADDED</Pill> : <Pill tone="dark">EMPTY</Pill>}
          </div>
        </div>
      ))}
    </div>
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24 }}>
      <button className="btn btn-ghost"><Icon name="arrow_left" size={12} stroke={2.4} /> Back · Audience</button>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-secondary">Skip for now</button>
        <button className="btn btn-primary">Continue · Brand <Icon name="arrow_right" size={12} stroke={2.4} /></button>
      </div>
    </div>
  </WizardShell>
);

const WizardStep5 = () => (
  <WizardShell
    eyebrow="NEW PROJECT · STEP 5"
    title="AI Analysis Preview"
    active={4}
    rail={
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div className="ai-surface" style={{ padding: 18, textAlign: "center" }}>
          <RingScore score={87} size={120} />
          <div style={{ marginTop: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>READY FOR PACK GEN</div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div className="card-title" style={{ marginBottom: 8 }}>Missing for 95+</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
            {[
              "1024px app icon", "Wide hero shot · 1920px", "Brand voice rules (2 lines)",
            ].map(s => (
              <li key={s} style={{ display: "flex", gap: 7, alignItems: "center", fontSize: 12, color: "#C8C8C5" }}>
                <span style={{ width: 6, height: 6, background: "#FFB23F", flex: "none" }} /> {s}
              </li>
            ))}
          </ul>
        </div>
      </div>
    }
  >
    {/* AI summary */}
    <div style={{ background: "#201E18", border: "1px solid #3A372F", padding: 18, marginBottom: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
        <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> AI SUMMARY</span>
      </div>
      <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 28, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05, letterSpacing: "0.01em" }}>
        A focused, premium notes app for solo builders. Daily streak as a habit hook. Codex-friendly export.
      </div>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div>
        <div className="field-label">Audience</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
          {["Indie builders shipping 1–3 apps","Codex / Claude / Cursor users","Builders who hate Notion overhead"].map(s => (
            <li key={s} style={{ background: "#26241E", border: "1px solid #3A372F", padding: "8px 10px", fontSize: 12.5, color: "#C8C8C5", display: "flex", gap: 7, alignItems: "center" }}>
              <Icon name="user" size={12} stroke={2} color="#EFFF00" /> {s}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div className="field-label">Marketing angles</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
          {["One folder. Every idea.","Streak or starve","Notes that compile"].map(s => (
            <li key={s} style={{ background: "#26241E", border: "1px solid #3A372F", padding: "8px 10px", fontSize: 12.5, color: "#FFF", fontWeight: 700, display: "flex", gap: 7, alignItems: "center" }}>
              <Icon name="bolt" size={12} stroke={2} color="#EFFF00" /> {s}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div className="field-label">Pain points</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
          {["Half-finished ideas across 14 apps","No daily ritual","Notion too heavy"].map(s => (
            <li key={s} style={{ background: "#26241E", border: "1px solid #3A372F", padding: "8px 10px", fontSize: 12.5, color: "#C8C8C5", display: "flex", gap: 7, alignItems: "center" }}>
              <span style={{ width: 6, height: 6, background: "#FF4D5E", flex: "none" }} /> {s}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div className="field-label">Benefits</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
          {["Daily streak hook","Codex-friendly export","4-second capture"].map(s => (
            <li key={s} style={{ background: "#26241E", border: "1px solid #3A372F", padding: "8px 10px", fontSize: 12.5, color: "#C8C8C5", display: "flex", gap: 7, alignItems: "center" }}>
              <span style={{ width: 6, height: 6, background: "#EFFF00", flex: "none" }} /> {s}
            </li>
          ))}
        </ul>
      </div>
    </div>

    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24, gap: 10 }}>
      <button className="btn btn-ghost"><Icon name="arrow_left" size={12} stroke={2.4} /> Back</button>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate analysis</button>
        <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Save Project &amp; Generate First Pack</button>
      </div>
    </div>
  </WizardShell>
);

const WebsiteImporterScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="projects" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span style={{ width: 18, height: 1, background: "#EFFF00" }} />WEBSITE IMPORTER · AI
        </div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase", margin: "0 0 22px", color: "#FFF" }}>Read my site for me.</h1>

        {/* URL bar */}
        <div className="card has-corners" style={{ padding: 18, marginBottom: 16 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8 }}>
            <div className="input-with-icon">
              <Icon name="link" size={15} stroke={2} className="ico" />
              <input className="input" defaultValue="https://renoo.app" />
            </div>
            <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Pull data</button>
          </div>
          {/* progress */}
          <div style={{ marginTop: 14 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>Scanning · 5 / 8</span>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: "#8A8A8A", letterSpacing: "0.18em", fontWeight: 800, textTransform: "uppercase" }}>03:42</span>
            </div>
            <div className="gen-bar"><span /></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginTop: 12 }}>
              {[
                { l: "Title / meta",   ok: true  },
                { l: "Hero copy",      ok: true  },
                { l: "Favicon / logo", ok: true  },
                { l: "Colours",        ok: true  },
                { l: "Features",       ok: true  },
                { l: "Positioning",    ok: false, busy: true },
                { l: "Competitors",    ok: false },
                { l: "Missing assets", ok: false },
              ].map(s => (
                <div key={s.l} style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 8px", background: "#201E18", border: "1px solid #3A372F", fontSize: 11, color: s.ok ? "#FFF" : s.busy ? "#FFF" : "#5C5C5C", fontWeight: 700 }}>
                  {s.ok ? <Icon name="check" size={11} stroke={2.6} color="#4ADE80" /> : s.busy ? <span className="spinner" style={{ width: 11, height: 11 }} /> : <span style={{ width: 6, height: 6, background: "#333", flex: "none" }} />}
                  {s.l}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* extracted preview */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>What we found</div>
            <div style={{ display: "grid", gridTemplateColumns: "100px 1fr", rowGap: 10, columnGap: 12, fontSize: 12.5 }}>
              <span style={{ color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignSelf: "start" }}>TITLE</span>
              <span style={{ color: "#FFF" }}>Renoo — Daily notes for builders.</span>
              <span style={{ color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignSelf: "start" }}>META</span>
              <span style={{ color: "#C8C8C5" }}>A 4-second capture app for builders shipping under chaos.</span>
              <span style={{ color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignSelf: "start" }}>FAVICON</span>
              <span><div style={{ width: 32, height: 32, background: "#FF6B35", borderRadius: 6 }} /></span>
              <span style={{ color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignSelf: "start" }}>COLOURS</span>
              <div style={{ display: "flex", gap: 6 }}>
                {["#FF6B35","#1E1E1E","#F4F4F0","#FFD400"].map(c => <div key={c} style={{ width: 28, height: 28, background: c, border: "1px solid #3A372F" }} />)}
              </div>
              <span style={{ color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignSelf: "start" }}>FEATURES</span>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {["4s capture","Daily streak","Codex export","Quick search","Voice notes"].map(f => <span key={f} className="chip">{f}</span>)}
              </div>
            </div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Suggested missing info</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                "Target audience persona (one line)",
                "Primary pain point",
                "What this replaces (Notion, Apple Notes, …)",
                "Wide hero screenshot · 1920×1080",
              ].map(m => (
                <li key={m} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, padding: "8px 10px", background: "#201E18", border: "1px solid #3A372F" }}>
                  <div style={{ display: "flex", gap: 7, alignItems: "center" }}>
                    <span style={{ width: 6, height: 6, background: "#FFB23F" }} />
                    <span style={{ color: "#FFF", fontSize: 12.5 }}>{m}</span>
                  </div>
                  <button className="btn btn-ghost btn-sm">Add</button>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }}>
          <button className="btn btn-secondary">Discard</button>
          <button className="btn btn-primary">Apply to project <Icon name="arrow_right" size={12} stroke={2.4} /></button>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { WizardStep1, WizardStep3, WizardStep5, WebsiteImporterScreen });