// flow-mid.jsx — Steps 05-08: Design, Domain, Checkout, Publish

// ── Step 05: Design ────────────────────────────────────────────────────────

function DesignScreen() {
  const [flow, setFlow] = useFlow();
  const [, navigate] = useHashRoute();
  const [selected, setSelected] = React.useState(flow.design || "editorial");
  const [focused, setFocused] = React.useState(null);

  const onPick = (id) => { setSelected(id); setFlow({ design: id }); };

  return (
    <div>
      <SiteHeader minimal current="/design"/>
      <StepLayout
        stepNum="05"
        eyebrow="EVERY PREVIEW IS RENDERED WITH YOUR REAL WORK"
        title={<>Pick how it should <em style={{ fontStyle: "italic", color: "var(--accent)" }}>look.</em></>}
        sub="Five designs, each populated with your projects and writing. Click a card to focus it. The selected one ships."
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 56 }}>
          {window.DESIGNS.map((d, i) => {
            const isSel = selected === d.id;
            return (
              <div
                key={d.id}
                onClick={() => onPick(d.id)}
                className="entrance"
                style={{
                  animationDelay: `${i * 70}ms`,
                  background: "var(--paper)",
                  border: isSel ? "1px solid var(--ink)" : "0.5px solid var(--rule)",
                  borderRadius: "var(--radius-lg)",
                  padding: 16,
                  cursor: "pointer",
                  transition: "all 200ms ease",
                  position: "relative",
                }}
                onMouseEnter={e => { if (!isSel) e.currentTarget.style.borderColor = "var(--rule-2)"; }}
                onMouseLeave={e => { if (!isSel) e.currentTarget.style.borderColor = "var(--rule)"; }}
              >
                <div style={{ aspectRatio: "16 / 9", borderRadius: 8, overflow: "hidden", background: "var(--paper-2)", marginBottom: 16, border: "0.5px solid var(--rule)" }}>
                  <DesignPreview design={d.id}/>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-serif)", fontSize: 24, lineHeight: 1.1, letterSpacing: "-0.015em", marginBottom: 4 }}>{d.label}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 6 }}>{d.sub}</div>
                    <div className="eyebrow" style={{ color: "var(--ink-4)", fontSize: 10 }}>BEST FOR · {d.best}</div>
                  </div>
                  <div style={{
                    width: 22, height: 22, borderRadius: 11,
                    border: "0.5px solid", borderColor: isSel ? "var(--ink)" : "var(--rule-2)",
                    background: isSel ? "var(--ink)" : "transparent",
                    color: "var(--paper)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0,
                  }}>
                    {isSel && <Icon name="check" size={12} stroke={2}/>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <FlowFooter
          back="/direction"
          onContinue={() => navigate("/domain")}
          rightHint="Pick your domain →"
        />
      </StepLayout>
    </div>
  );
}

// ── Step 06: Domain ────────────────────────────────────────────────────────

function DomainScreen() {
  const [flow, setFlow] = useFlow();
  const [, navigate] = useHashRoute();
  const persona = window.PERSONAS[flow.persona || "maya"];
  const [query, setQuery] = React.useState(flow.domain?.query || persona.name.toLowerCase().replace(/[^a-z]/g, ""));
  const [selected, setSelected] = React.useState(flow.domain?.value || persona.domains[0]);
  const [byo, setByo] = React.useState(false);
  const [remoteResults, setRemoteResults] = React.useState([]);
  const [searching, setSearching] = React.useState(false);
  const [domainError, setDomainError] = React.useState(null);

  const tlds = [".com", ".dev", ".ai", ".studio", ".io", ".work", ".engineer", ".bio", ".design", ".science"];

  React.useEffect(() => {
    let cancelled = false;
    if (!query || !window.FolioBackend) return;
    setSearching(true);
    setDomainError(null);
    const timer = setTimeout(() => {
      window.FolioBackend.searchDomains(query)
        .then(results => {
          if (cancelled) return;
          setRemoteResults(results || []);
        })
        .catch(error => {
          if (cancelled) return;
          setDomainError(error.message || "Domain search failed.");
          setRemoteResults([]);
        })
        .finally(() => {
          if (!cancelled) setSearching(false);
        });
    }, 450);
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [query]);

  const candidates = React.useMemo(() => {
    if (remoteResults.length) {
      return remoteResults.map(result => {
        const dot = result.domainName.indexOf(".");
        const tld = dot >= 0 ? result.domainName.slice(dot) : "";
        return {
          name: result.domainName,
          tld,
          available: !!result.purchasable,
          price: result.purchasePrice ?? 0,
          renewalPrice: result.renewalPrice ?? result.purchasePrice ?? 0,
          premium: result.premium,
          reason: result.reason,
        };
      });
    }
    const list = [];
    tlds.forEach(t => list.push({ name: query + t, tld: t, available: false, checking: true }));
    list.push({ name: "hire" + query + ".com", tld: ".com", available: false, checking: true, alt: "Action prefix" });
    list.push({ name: query + "studio.com", tld: ".com", available: false, checking: true, alt: "Studio variant" });
    return list;
  }, [query, remoteResults]);

  React.useEffect(() => {
    const first = candidates.find(c => c.available);
    if (first && !candidates.some(c => c.name === selected)) {
      onPick(first);
    }
  }, [candidates]);

  const recommended = candidates.find(c => c.tld === ".com" && c.available) || candidates[0];

  const onPick = (c) => { if (!c.available) return; setSelected(c.name); setFlow({ domain: { value: c.name, query, tld: c.tld, price: c.price ?? window.TLD_PRICES[c.tld] ?? 14, renewalPrice: c.renewalPrice } }); };

  return (
    <div>
      <SiteHeader minimal current="/domain"/>
      <StepLayout
        stepNum="06"
        eyebrow="DOMAINS, SUBDOMAINS, OR BRING YOUR OWN"
        title={<>Land somewhere <em style={{ fontStyle: "italic", color: "var(--accent)" }}>that's yours.</em></>}
        sub="We register, configure DNS, and provision SSL on checkout. Or use a free quickfolio.live subdomain. Or point one you already own."
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 48 }}>
          <div>
            <div style={{ display: "flex", border: "0.5px solid var(--rule-2)", borderRadius: 999, overflow: "hidden", marginBottom: 28, background: "var(--paper)" }}>
              <div style={{ display: "flex", alignItems: "center", padding: "0 18px", color: "var(--ink-4)" }}>
                <Icon name="search" size={16}/>
              </div>
              <input
                value={query}
                onChange={e => setQuery(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
                style={{
                  flex: 1, border: 0, padding: "16px 0",
                  fontFamily: "var(--font-mono)", fontSize: 16,
                  background: "transparent", color: "var(--ink)", outline: "none",
                }}
                placeholder="search a name…"
              />
              <div style={{ display: "flex", alignItems: "center", padding: "0 18px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.08em" }}>
                {searching ? "CHECKING..." : `${candidates.filter(c => c.available).length} AVAILABLE`}
              </div>
            </div>
            {domainError && (
              <div style={{ color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", marginBottom: 14 }}>
                {domainError}
              </div>
            )}

            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {candidates.map((c, i) => {
                const isSel = selected === c.name;
                const isRec = c.name === recommended?.name;
                return (
                  <button
                    key={c.name}
                    onClick={() => onPick(c)}
                    disabled={!c.available}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 16,
                      padding: "16px 20px",
                      background: isSel ? "var(--paper-2)" : "var(--paper)",
                      border: isSel ? "1px solid var(--ink)" : "0.5px solid var(--rule)",
                      borderRadius: "var(--radius)",
                      cursor: c.available ? "pointer" : "not-allowed",
                      opacity: c.available ? 1 : 0.5,
                      textAlign: "left",
                      color: "var(--ink)",
                      transition: "all 160ms",
                    }}
                  >
                    <div style={{
                      width: 12, height: 12, borderRadius: 6,
                      background: c.available ? "oklch(0.65 0.16 145)" : "var(--ink-4)",
                      flexShrink: 0,
                    }}/>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, flex: 1 }}>
                      {c.name.split(c.tld)[0]}<span style={{ color: "var(--accent)" }}>{c.tld}</span>
                    </div>
                    {isRec && c.available && (
                      <div className="chip" style={{ background: "var(--accent)", color: "var(--paper)", border: 0, fontSize: 9 }}>RECOMMENDED</div>
                    )}
                    {c.alt && <div className="eyebrow" style={{ fontSize: 9 }}>{c.alt}</div>}
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: c.available ? "var(--ink-2)" : "var(--ink-4)", width: 80, textAlign: "right" }}>
                      {c.checking ? "Checking" : c.available ? `$${c.price ?? window.TLD_PRICES[c.tld] ?? 14}/yr` : c.reason || "Taken"}
                    </div>
                    <div style={{
                      width: 18, height: 18, borderRadius: 9,
                      border: "0.5px solid",
                      borderColor: isSel ? "var(--ink)" : "var(--rule-2)",
                      background: isSel ? "var(--ink)" : "transparent",
                      color: "var(--paper)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      flexShrink: 0,
                    }}>
                      {isSel && <Icon name="check" size={11} stroke={2}/>}
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Alternatives */}
            <div style={{ marginTop: 32, padding: "20px 24px", background: "var(--paper-2)", border: "0.5px dashed var(--rule-2)", borderRadius: "var(--radius)" }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>OR · ALTERNATIVES</div>
              <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
                <button onClick={() => onPick({ name: query + ".quickfolio.live", tld: ".quickfolio.live", available: true, price: 0, renewalPrice: 0 })} style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", textAlign: "left", color: "var(--ink)" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{query}<span style={{ color: "var(--ink-3)" }}>.quickfolio.live</span></div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Free subdomain · live in 30s</div>
                </button>
                <div style={{ width: 0.5, background: "var(--rule)" }}/>
                <button onClick={() => setByo(true)} style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", textAlign: "left", color: "var(--ink)" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>bring your own domain →</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Already own one? Point it at Folio.</div>
                </button>
              </div>
            </div>
          </div>

          {/* Right rail — selection summary */}
          <div>
            <div style={{ position: "sticky", top: 96 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>YOUR DOMAIN</div>
              <div style={{ border: "0.5px solid var(--rule)", borderRadius: "var(--radius-lg)", padding: "var(--space-5)", background: "var(--paper)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, marginBottom: 20, wordBreak: "break-all", lineHeight: 1.3 }}>
                  {selected ? (<>
                    {selected.split(".")[0]}<span style={{ color: "var(--accent)" }}>.{selected.split(".").slice(1).join(".")}</span>
                  </>) : "—"}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 16, borderTop: "0.5px solid var(--rule)", fontSize: 13, color: "var(--ink-2)" }}>
                  <RowKV k="Registration" v={`$${flow.domain?.price || 14} / first year`}/>
                  <RowKV k="Renewal" v={`$${flow.domain?.price || 14} / year after`}/>
                  <RowKV k="Privacy" v="Included"/>
                  <RowKV k="SSL certificate" v="Included"/>
                  <RowKV k="DNS hosting" v="Included"/>
                </div>
                <button
                  className="btn btn-primary"
                  onClick={() => navigate("/checkout")}
                  style={{ width: "100%", justifyContent: "center", marginTop: 24 }}
                >
                  Continue to checkout <span className="arr">→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </StepLayout>
    </div>
  );
}

function RowKV({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <span style={{ color: "var(--ink-3)" }}>{k}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{v}</span>
    </div>
  );
}

// ── Step 07: Checkout ──────────────────────────────────────────────────────

function CheckoutScreen() {
  const [flow, setFlow] = useFlow();
  const [, navigate] = useHashRoute();
  const [tier, setTier] = React.useState(flow.tier || "pro");
  const [card, setCard] = React.useState({ num: "", exp: "", cvc: "", zip: "" });
  const [processing, setProcessing] = React.useState(false);

  const tiers = [
    { id: "free", label: "Free", price: 0, sub: "subdomain only", features: ["quickfolio.live subdomain", "Manual updates", "Watermark"] },
    { id: "pro", label: "Pro", price: 99, sub: "/ year", features: ["Custom domain + hosting", "Auto-update from GitHub", "All five designs", "Health score & analytics", "No watermark"], featured: true },
    { id: "studio", label: "Studio", price: 199, sub: "/ year", features: ["Everything in Pro", "Custom email (you@yours.com)", "Premium TLDs", "Multiple profiles", "Lead capture forms"] },
  ];
  const t = tiers.find(x => x.id === tier);
  const domainPrice = tier === "free" ? 0 : (flow.domain?.price || 14);
  const subtotal = t.price + domainPrice;

  const onPay = async () => {
    setProcessing(true);
    try {
      const domainName = flow.domain?.value || "";
      if (!domainName) throw new Error("Choose a domain before checkout.");
      const root = "quickfolio.live";
      const type = domainName.endsWith("." + root) ? "free_subdomain" : "purchased";
      const result = await window.FolioBackend.checkoutDomain(domainName, type, tier);
      setFlow({ tier, paid: true, checkout: result?.checkout, domainRecord: result?.domain });
      if (result?.checkout?.url) {
        window.location.href = result.checkout.url;
        return;
      }
      navigate("/publish");
    } catch (error) {
      alert(error.message || "Checkout failed.");
      setProcessing(false);
    }
  };

  return (
    <div>
      <SiteHeader minimal current="/checkout"/>
      <StepLayout
        stepNum="07"
        eyebrow="ONE INVOICE · CANCEL ANY TIME"
        title={<>One last <em style={{ fontStyle: "italic", color: "var(--accent)" }}>checkout.</em></>}
        sub="Domain, hosting, and auto-updates in a single annual price. We don't sell add-ons."
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 48 }}>
          <div>
            {/* Tier selection */}
            <div className="eyebrow" style={{ marginBottom: 16 }}>STEP A · CHOOSE YOUR PLAN</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 40 }}>
              {tiers.map(opt => {
                const isSel = tier === opt.id;
                return (
                  <button
                    key={opt.id}
                    onClick={() => { setTier(opt.id); setFlow({ tier: opt.id }); }}
                    style={{
                      display: "flex",
                      alignItems: "stretch",
                      padding: 0,
                      background: isSel ? "var(--paper-2)" : "var(--paper)",
                      border: isSel ? "1px solid var(--ink)" : "0.5px solid var(--rule)",
                      borderRadius: "var(--radius)",
                      cursor: "pointer",
                      textAlign: "left",
                      color: "var(--ink)",
                      overflow: "hidden",
                    }}
                  >
                    <div style={{ padding: 22, flex: 1 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                        <div style={{
                          width: 16, height: 16, borderRadius: 8,
                          border: "0.5px solid",
                          borderColor: isSel ? "var(--ink)" : "var(--rule-2)",
                          background: isSel ? "var(--ink)" : "transparent",
                          color: "var(--paper)",
                          display: "flex", alignItems: "center", justifyContent: "center",
                        }}>
                          {isSel && <div style={{ width: 6, height: 6, borderRadius: 3, background: "var(--paper)" }}/>}
                        </div>
                        <div style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>{opt.label}</div>
                        {opt.featured && <div className="chip" style={{ background: "var(--accent)", color: "var(--paper)", border: 0, fontSize: 9 }}>POPULAR</div>}
                        <div style={{ marginLeft: "auto", fontFamily: "var(--font-serif)", fontSize: 22 }}>${opt.price}<span style={{ fontSize: 12, color: "var(--ink-3)" }}> {opt.sub}</span></div>
                      </div>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 14px" }}>
                        {opt.features.map(f => (
                          <div key={f} style={{ fontSize: 12, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 6 }}>
                            <Icon name="check" size={11} stroke={2} style={{ color: "var(--accent)" }}/> {f}
                          </div>
                        ))}
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Payment */}
            <div className="eyebrow" style={{ marginBottom: 16 }}>STEP B · PAYMENT</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12 }}>
              <input className="input" placeholder="Email for receipt" defaultValue="maya@okonkwo.work"/>
              <input className="input" placeholder="Card number" value={card.num} onChange={e => setCard({...card, num: e.target.value})}/>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                <input className="input" placeholder="MM / YY" value={card.exp} onChange={e => setCard({...card, exp: e.target.value})}/>
                <input className="input" placeholder="CVC" value={card.cvc} onChange={e => setCard({...card, cvc: e.target.value})}/>
                <input className="input" placeholder="ZIP" value={card.zip} onChange={e => setCard({...card, zip: e.target.value})}/>
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em", display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
                <Icon name="lock" size={12}/> ENCRYPTED · PROCESSED BY STRIPE · YOU CAN CANCEL ANY TIME
              </div>
            </div>
          </div>

          {/* Right: order summary */}
          <div>
            <div style={{ position: "sticky", top: 96 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>ORDER SUMMARY</div>
              <div style={{ border: "0.5px solid var(--rule)", borderRadius: "var(--radius-lg)", padding: "var(--space-5)", background: "var(--paper)" }}>
                <SummaryRow label="Plan" value={t.label} sub={t.sub === "subdomain only" ? "Free forever" : "Annual"} price={`$${t.price}`}/>
                {tier !== "free" && (
                  <SummaryRow label="Domain" value={flow.domain?.value || "yourname.com"} sub="First year, renews same price" price={`$${domainPrice}`}/>
                )}
                <SummaryRow label="SSL & hosting" value="Included" sub="Cloudflare edge" price="$0"/>
                <div style={{ borderTop: "0.5px solid var(--rule)", paddingTop: 16, marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span style={{ fontWeight: 500 }}>Today</span>
                  <span style={{ fontFamily: "var(--font-serif)", fontSize: 32 }}>${subtotal}</span>
                </div>
                <button
                  className="btn btn-primary"
                  onClick={onPay}
                  disabled={processing}
                  style={{ width: "100%", justifyContent: "center", marginTop: 20 }}
                >
                  {processing ? "Processing…" : <>Pay ${subtotal} & publish <span className="arr">→</span></>}
                </button>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--ink-4)", textAlign: "center", marginTop: 12 }}>
                  14-DAY MONEY BACK · DOMAIN STAYS WITH YOU
                </div>
              </div>
            </div>
          </div>
        </div>
      </StepLayout>
    </div>
  );
}

function SummaryRow({ label, value, sub, price }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", paddingBottom: 12, marginBottom: 12, borderBottom: "0.5px solid var(--rule)" }}>
      <div>
        <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{label}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink)" }}>{value}</div>
        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{sub}</div>
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--ink-2)" }}>{price}</div>
    </div>
  );
}

// ── Step 08: Publish ───────────────────────────────────────────────────────

function PublishScreen() {
  const [flow] = useFlow();
  const [, navigate] = useHashRoute();
  const [stage, setStage] = React.useState(0);
  const persona = window.PERSONAS[flow.persona || "maya"];
  const stages = [
    { label: "Domain registered", detail: flow.domain?.value || "mayaokonkwo.com" },
    { label: "DNS configured", detail: "A · AAAA · CAA records" },
    { label: "SSL certificate provisioned", detail: "Let's Encrypt" },
    { label: "Portfolio compiled", detail: "47 projects · 3 sections" },
    { label: "Deployed to edge", detail: "Cloudflare · 312 PoPs" },
    { label: "Live", detail: "All systems nominal" },
  ];

  React.useEffect(() => {
    const id = setInterval(() => setStage(s => s < stages.length ? s + 1 : s), 700);
    return () => clearInterval(id);
  }, []);

  const live = stage >= stages.length;

  return (
    <div>
      <SiteHeader minimal current="/publish"/>
      <FlowProgress current="08"/>
      <div style={{ minHeight: "calc(100vh - 64px - 49px)", padding: "var(--space-7) 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 24 }}>STEP 08 · PUBLISH</div>
              <h1 style={{ fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.025em", marginBottom: 24 }}>
                {live ? <>Your portfolio is <em style={{ fontStyle: "italic", color: "var(--accent)" }}>live.</em></> : <>Publishing your <em style={{ fontStyle: "italic", color: "var(--accent)" }}>portfolio…</em></>}
              </h1>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 36 }}>
                {live ? "It's online at the URL below. The first edit takes 15 seconds." : "Hold tight. We're spinning up DNS, hosting, and SSL. This usually takes around two minutes."}
              </p>

              {/* Live URL banner */}
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: 14,
                padding: "16px 20px",
                background: live ? "var(--ink)" : "var(--paper-2)",
                color: live ? "var(--paper)" : "var(--ink)",
                border: "0.5px solid",
                borderColor: live ? "var(--ink)" : "var(--rule-2)",
                borderRadius: "var(--radius-lg)",
                marginBottom: 24,
              }}>
                <div style={{ width: 10, height: 10, borderRadius: 5, background: live ? "oklch(0.78 0.16 145)" : "var(--ink-4)", flexShrink: 0 }} className={live ? "pulse" : ""}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 16 }}>{flow.domain?.value || "mayaokonkwo.com"}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: live ? "rgba(253,251,246,0.6)" : "var(--ink-3)", marginTop: 2 }}>
                    {live ? "● LIVE · HTTPS · 312 EDGE LOCATIONS" : "PROVISIONING…"}
                  </div>
                </div>
                {live && <Icon name="external" size={16}/>}
              </div>

              {live && (
                <div style={{ display: "flex", gap: 12 }} className="entrance">
                  <button className="btn btn-primary" onClick={() => navigate("/edit")}>
                    Edit portfolio <span className="arr">→</span>
                  </button>
                  <button className="btn btn-ghost" onClick={() => navigate("/auto")}>
                    Set up auto-update
                  </button>
                </div>
              )}
            </div>

            {/* Right: deployment log */}
            <div style={{
              padding: 24,
              background: "var(--paper-2)",
              border: "0.5px solid var(--rule)",
              borderRadius: "var(--radius-lg)",
            }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>DEPLOYMENT LOG</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {stages.map((s, i) => {
                  const done = stage > i;
                  const active = stage === i;
                  return (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, opacity: i > stage ? 0.3 : 1, transition: "opacity 200ms" }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: 11,
                        border: "0.5px solid",
                        borderColor: done ? "var(--accent)" : active ? "var(--ink)" : "var(--rule-2)",
                        background: done ? "var(--accent)" : "transparent",
                        color: "var(--paper)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        flexShrink: 0,
                      }}>
                        {done && <Icon name="check" size={11} stroke={2}/>}
                        {active && <div className="spin" style={{ width: 11, height: 11, borderRadius: 6, border: "1px solid transparent", borderTopColor: "var(--ink)" }}/>}
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 14, color: "var(--ink)" }}>{s.label}</div>
                        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{s.detail}</div>
                      </div>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.06em" }}>
                        {done ? "✓ DONE" : active ? "RUNNING" : "QUEUED"}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DesignScreen, DomainScreen, CheckoutScreen, PublishScreen });