// Signup multi-step flow — bilingual (EN/ES)
const { useState, useEffect, useRef } = React;
const _i18nT = window.t; // capture i18n's t BEFORE local var hoists onto window
const tt = (k, v) => _i18nT(k, v);

function useLang() {
  const [lang, setLang] = useState(window.getLang ? window.getLang() : "en");
  useEffect(() => {
    const h = (e) => setLang(e.detail);
    window.addEventListener("langchange", h);
    return () => window.removeEventListener("langchange", h);
  }, []);
  return [lang, window.setLang];
}

// ---------- Logo generator ----------
const LOGO_THEMES = [
  { id: "forest", grad: "linear-gradient(140deg, #2C4A3E, #6B8A66)", text: "#F4E9CC" },
  { id: "clay",   grad: "linear-gradient(140deg, #8B3A1F, #C77548)", text: "#FBF3DA" },
  { id: "slate",  grad: "linear-gradient(140deg, #1F3A66, #4A7BB8)", text: "#F4E9CC" },
  { id: "ink",    grad: "linear-gradient(140deg, #1B1814, #5B544A)", text: "#F4E6BE" },
  { id: "gold",   grad: "linear-gradient(140deg, #A88431, #C7A24A)", text: "#1B1814" },
  { id: "wine",   grad: "linear-gradient(140deg, #4A2030, #8A3A50)", text: "#F4E9CC" },
  { id: "rust",   grad: "linear-gradient(140deg, #6B3B1F, #B5602F)", text: "#F4E9CC" },
  { id: "mauve",  grad: "linear-gradient(140deg, #3F2D5C, #6E5396)", text: "#F4E9CC" }
];

const SHAPES = ["roof", "monogram", "diamond"];

function getInitials(name) {
  if (!name) return "RL";
  const stopwords = ["the", "and", "of", "&", "el", "la", "los", "las", "de", "y"];
  const parts = name.trim().split(/\s+/).filter(p => p.length && !stopwords.includes(p.toLowerCase()));
  if (parts.length === 0) return "RL";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[1][0]).toUpperCase();
}

function GeneratedLogo({ name, themeIdx = 0, shape = "roof", size = 140 }) {
  const initials = getInitials(name);
  const theme = LOGO_THEMES[themeIdx % LOGO_THEMES.length];

  if (shape === "monogram") {
    return (
      <div style={{
        width: "100%", height: "100%",
        background: theme.grad, borderRadius: 24,
        display: "grid", placeItems: "center",
        color: theme.text,
        fontFamily: "'Instrument Serif', Georgia, serif",
        fontStyle: "italic", fontSize: size * 0.42,
        letterSpacing: "-0.04em", border: "3px solid #fff"
      }}>{initials}</div>
    );
  }
  if (shape === "diamond") {
    return (
      <div style={{
        width: "100%", height: "100%",
        background: theme.grad,
        display: "grid", placeItems: "center",
        color: theme.text,
        fontFamily: "'Inter', sans-serif",
        fontWeight: 700, fontSize: size * 0.32,
        transform: "rotate(45deg)", borderRadius: 16
      }}>
        <span style={{ transform: "rotate(-45deg)", letterSpacing: "0.04em" }}>{initials}</span>
      </div>
    );
  }
  return (
    <svg viewBox="0 0 140 140" style={{ width: "100%", height: "100%" }}>
      <defs>
        <linearGradient id={`g_${themeIdx}_${shape}`} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor={theme.grad.match(/#[0-9A-Fa-f]{6}/g)[0]} />
          <stop offset="100%" stopColor={theme.grad.match(/#[0-9A-Fa-f]{6}/g)[1]} />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="140" height="140" rx="24" fill={`url(#g_${themeIdx}_${shape})`} />
      <polygon points="30,82 70,42 110,82" fill="none" stroke={theme.text} strokeWidth="6" strokeLinejoin="round" />
      <text x="70" y="115" textAnchor="middle"
            fontFamily="'Instrument Serif', Georgia, serif" fontStyle="italic"
            fontSize="32" fill={theme.text} letterSpacing="-0.02em">
        {initials}
      </text>
    </svg>
  );
}

const STEPS = [
  { key: "company" }, { key: "logo" }, { key: "location" },
  { key: "team" }, { key: "plan" }, { key: "done" }
];

function SignupApp() {
  const [lang, setLang] = useLang();
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    companyName: "", legalName: "", yearFounded: "", annualRevenue: "1m-3m", crewSize: "2-5",
    licenseNumber: "", address: "", city: "", state: "CA", zip: "",
    hasLogo: "generate", logoThemeIdx: 0, logoShape: "roof", logoFile: null,
    invites: [], plan: "pro", fullName: "", email: "", password: "", role: "Owner"
  });

  const update = (patch) => setData(d => ({ ...d, ...patch }));
  const stepKey = STEPS[step].key;

  const canContinue = (() => {
    if (stepKey === "company")  return data.companyName.trim().length >= 2;
    if (stepKey === "logo")     return data.hasLogo === "generate" || data.logoFile;
    if (stepKey === "location") return data.address && data.city && data.zip;
    if (stepKey === "team")     return data.fullName && data.email.includes("@") && data.password.length >= 8;
    if (stepKey === "plan")     return true;
    return true;
  })();

  const next = () => { if (canContinue) setStep(s => Math.min(STEPS.length - 1, s + 1)); };
  const back = () => setStep(s => Math.max(0, s - 1));

  return (
    <div className="shell">
      <BrandPanel step={step} />
      <div className="form-panel">
        <div className="form-top">
          <a href="website.html" className="btn ghost sm">{tt("su.back")}</a>
          <div className="steps">
            {STEPS.slice(0, -1).map((s, i) => (
              <div key={s.key} className={"step-dot " + (i < step ? "done" : i === step ? "active" : "")}></div>
            ))}
          </div>
          <div className="step-count">
            {Math.min(step + 1, STEPS.length - 1)} / {STEPS.length - 1}
          </div>
          <a href="login.html" className="btn ghost sm" style={{ marginLeft: 10 }}>Log in</a>
          <div className="lang-toggle" style={{ marginLeft: 10 }}>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
          </div>
        </div>

        <div className="form-body" style={{ flex: 1 }}>
          {stepKey === "company"  && <StepCompany  data={data} update={update} next={next} />}
          {stepKey === "logo"     && <StepLogo     data={data} update={update} />}
          {stepKey === "location" && <StepLocation data={data} update={update} />}
          {stepKey === "team"     && <StepTeam     data={data} update={update} />}
          {stepKey === "plan"     && <StepPlan     data={data} update={update} />}
          {stepKey === "done"     && <StepDone     data={data} />}
        </div>

        {stepKey !== "done" && (
          <div className="actions">
            {step > 0 && <button className="btn" onClick={back}>{tt("su.back_btn")}</button>}
            <div className="right">
              <button className="btn primary lg" disabled={!canContinue} onClick={next}>
                {stepKey === "plan" ? tt("su.create") : tt("su.continue")}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ---------- Brand panel ----------
function BrandPanel({ step }) {
  const keys = ["su.bp1", "su.bp2", "su.bp3", "su.bp4", "su.bp5", "su.bp6"];
  const k = keys[step] || keys[0];
  return (
    <div className="brand-panel">
      <a className="brand" href="website.html">
        <span className="brand-mark">RL</span>
        Roof Linker
      </a>
      <div className="hd">
        <h1 dangerouslySetInnerHTML={{ __html: tt(k + ".h") }} />
        <p>{tt(k + ".p")}</p>
      </div>
      <div className="testimonial">
        <p className="testimonial-q">{tt("su.testimonial")}</p>
        <div className="testimonial-attr">
          <div className="testimonial-avatar"></div>
          <div>
            <div className="testimonial-name">Daniela Vasquez</div>
            <div className="testimonial-role">{tt("su.testimonial.role")}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Step 1 ----------
function StepCompany({ data, update, next }) {
  const revLabels = {
    "under-500k": { en: "Under $500k", es: "Menos de $500k" },
    "500k-1m":    { en: "$500k – $1M", es: "$500k – $1M" },
    "1m-3m":      { en: "$1M – $3M",   es: "$1M – $3M" },
    "3m-5m":      { en: "$3M – $5M",   es: "$3M – $5M" },
    "5m-10m":     { en: "$5M – $10M",  es: "$5M – $10M" },
    "10m-plus":   { en: "$10M+",       es: "$10M+" }
  };
  const lang = window.getLang();
  return (
    <>
      <h2 className="form-title">{tt("su.s1.title")}</h2>
      <p className="form-sub">{tt("su.s1.sub")}</p>

      <div className="field">
        <label className="field-label">{tt("su.s1.name")}</label>
        <input className="input" placeholder={tt("su.s1.name.ph")}
               value={data.companyName} autoFocus
               onChange={e => update({ companyName: e.target.value })}
               onKeyDown={e => e.key === "Enter" && next()} />
      </div>

      <div className="row">
        <div className="field">
          <label className="field-label">{tt("su.s1.legal")} <span className="field-hint">{tt("su.s1.optional")}</span></label>
          <input className="input" placeholder={tt("su.s1.legal.ph")}
                 value={data.legalName} onChange={e => update({ legalName: e.target.value })} />
        </div>
        <div className="field">
          <label className="field-label">{tt("su.s1.year")}</label>
          <input className="input" type="number" placeholder={tt("su.s1.year.ph")} min="1900" max="2026"
                 value={data.yearFounded} onChange={e => update({ yearFounded: e.target.value })} />
        </div>
      </div>

      <div className="row">
        <div className="field">
          <label className="field-label">{tt("su.s1.revenue")}</label>
          <select className="select" value={data.annualRevenue} onChange={e => update({ annualRevenue: e.target.value })}>
            {Object.entries(revLabels).map(([k, l]) => <option key={k} value={k}>{l[lang] || l.en}</option>)}
          </select>
        </div>
        <div className="field">
          <label className="field-label">{tt("su.s1.crew")}</label>
          <select className="select" value={data.crewSize} onChange={e => update({ crewSize: e.target.value })}>
            <option value="solo">{tt("su.s1.solo")}</option>
            <option value="2-5">2 – 5</option>
            <option value="6-12">6 – 12</option>
            <option value="13-25">13 – 25</option>
            <option value="26-plus">26+</option>
          </select>
        </div>
      </div>
    </>
  );
}

// ---------- Step 2 ----------
function StepLogo({ data, update }) {
  const fileRef = useRef();
  const onUpload = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => update({ logoFile: ev.target.result, hasLogo: "upload" });
    reader.readAsDataURL(file);
  };
  const companyDisplay = data.companyName || tt("su.s2.fallback");
  return (
    <>
      <h2 className="form-title">{tt("su.s2.title", { company: companyDisplay })}</h2>
      <p className="form-sub">{tt("su.s2.sub")}</p>

      <div className="logo-section">
        <div className={"logo-preview " + (data.logoFile || data.hasLogo === "generate" ? "filled" : "")}>
          {data.hasLogo === "upload" && data.logoFile ? (
            <img src={data.logoFile} alt="" />
          ) : (
            <GeneratedLogo name={data.companyName || "Roof Linker"}
                           themeIdx={data.logoThemeIdx} shape={data.logoShape} />
          )}
        </div>
        <div className="logo-actions">
          <input type="file" accept="image/*" ref={fileRef} style={{ display: "none" }} onChange={onUpload} />
          <button className="btn" onClick={() => fileRef.current.click()}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            {tt("su.s2.upload")}
          </button>
          <button className="btn" onClick={() => update({ hasLogo: "generate", logoFile: null })}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/></svg>
            {tt("su.s2.generate")}
          </button>
        </div>
      </div>

      {data.hasLogo === "generate" && (
        <>
          <div className="field">
            <label className="field-label">{tt("su.s2.style")}</label>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 6 }}>
              {SHAPES.map(s => (
                <button key={s}
                        onClick={() => update({ logoShape: s })}
                        className="plan"
                        style={{ padding: 14, textAlign: "center",
                                  borderColor: s === data.logoShape ? "var(--ink)" : "var(--border)",
                                  background: s === data.logoShape ? "var(--cream-3)" : "#fff" }}>
                  <div style={{ width: 60, height: 60, margin: "0 auto 8px" }}>
                    <GeneratedLogo name={data.companyName || "Roof Linker"}
                                   themeIdx={data.logoThemeIdx} shape={s} size={60} />
                  </div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{tt("su.s2.shape." + s)}</div>
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label className="field-label">{tt("su.s2.color")}</label>
            <div style={{ display: "flex", gap: 8, marginTop: 6, flexWrap: "wrap" }}>
              {LOGO_THEMES.map((th, i) => (
                <button key={i}
                        onClick={() => update({ logoThemeIdx: i })}
                        title={th.id}
                        style={{
                          width: 38, height: 38, borderRadius: 10,
                          background: th.grad,
                          border: i === data.logoThemeIdx ? "3px solid var(--ink)" : "2px solid #fff",
                          boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
                          cursor: "pointer"
                        }} />
              ))}
            </div>
          </div>
        </>
      )}
    </>
  );
}

// ---------- Step 3 ----------
function StepLocation({ data, update }) {
  const STATES = ["CA","TX","FL","AZ","NV","WA","OR","CO","UT","ID","GA","NC","SC","VA","TN","OH","PA","NY","MA","IL","MI","WI","MN","MO","OK","AR","LA","AL","MS","KY","IN","IA","KS","NE","ND","SD","MT","WY","NM","WV","MD","DE","NJ","CT","RI","VT","NH","ME","AK","HI"];
  return (
    <>
      <h2 className="form-title">{tt("su.s3.title")}</h2>
      <p className="form-sub">{tt("su.s3.sub")}</p>

      <div className="field">
        <label className="field-label">{tt("su.s3.addr")}</label>
        <input className="input" placeholder={tt("su.s3.addr.ph")}
               value={data.address} onChange={e => update({ address: e.target.value })} />
      </div>
      <div className="row-3">
        <div className="field">
          <label className="field-label">{tt("su.s3.city")}</label>
          <input className="input" placeholder={tt("su.s3.city.ph")}
                 value={data.city} onChange={e => update({ city: e.target.value })} />
        </div>
        <div className="field">
          <label className="field-label">{tt("su.s3.state")}</label>
          <select className="select" value={data.state} onChange={e => update({ state: e.target.value })}>
            {STATES.map(s => <option key={s}>{s}</option>)}
          </select>
        </div>
        <div className="field">
          <label className="field-label">{tt("su.s3.zip")}</label>
          <input className="input" placeholder={tt("su.s3.zip.ph")}
                 value={data.zip} onChange={e => update({ zip: e.target.value })} />
        </div>
      </div>

      <div className="field">
        <label className="field-label">{tt("su.s3.license")} <span className="field-hint">{tt("su.s3.license.hint")}</span></label>
        <input className="input" placeholder={tt("su.s3.license.ph")}
               value={data.licenseNumber} onChange={e => update({ licenseNumber: e.target.value })} />
        <div className="help-text">{tt("su.s3.license.help")}</div>
      </div>
    </>
  );
}

// ---------- Step 4 ----------
function StepTeam({ data, update }) {
  const [val, setVal] = useState("");
  const lang = window.getLang();
  const roleLabels = {
    "Owner":          { en: "Owner", es: "Dueño" },
    "Operations Lead":{ en: "Operations Lead", es: "Líder de Operaciones" },
    "Estimator":      { en: "Estimator", es: "Estimador" },
    "Foreman":        { en: "Foreman", es: "Capataz" },
    "Office Manager": { en: "Office Manager", es: "Gerente de oficina" }
  };
  const add = () => {
    const v = val.trim();
    if (!v.includes("@")) return;
    if (data.invites.includes(v)) return;
    update({ invites: [...data.invites, v] });
    setVal("");
  };
  const remove = (e) => update({ invites: data.invites.filter(x => x !== e) });

  return (
    <>
      <h2 className="form-title">{tt("su.s4.title")}</h2>
      <p className="form-sub">{tt("su.s4.sub")}</p>

      <div className="row">
        <div className="field">
          <label className="field-label">{tt("su.s4.name")}</label>
          <input className="input" placeholder={tt("su.s4.name.ph")}
                 value={data.fullName} onChange={e => update({ fullName: e.target.value })} />
        </div>
        <div className="field">
          <label className="field-label">{tt("su.s4.role")}</label>
          <select className="select" value={data.role} onChange={e => update({ role: e.target.value })}>
            {Object.entries(roleLabels).map(([k, l]) => <option key={k} value={k}>{l[lang] || l.en}</option>)}
          </select>
        </div>
      </div>
      <div className="row">
        <div className="field">
          <label className="field-label">{tt("su.s4.email")}</label>
          <input className="input" placeholder={tt("su.s4.email.ph")} type="email"
                 value={data.email} onChange={e => update({ email: e.target.value })} />
        </div>
        <div className="field">
          <label className="field-label">Password</label>
          <input className="input" placeholder="At least 8 characters" type="password"
                 value={data.password} onChange={e => update({ password: e.target.value })} />
        </div>
      </div>

      <div className="field" style={{ marginTop: 18 }}>
        <label className="field-label">
          {tt("su.s4.invite")} <span className="field-hint">{tt("su.s4.invite.hint")}</span>
        </label>
        <div className="chip-add">
          <input className="input" placeholder={tt("su.s4.invite.ph")}
                 value={val} onChange={e => setVal(e.target.value)}
                 onKeyDown={e => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(); } }} />
          <button className="btn" onClick={add}>{tt("su.s4.add")}</button>
        </div>
        {data.invites.length > 0 && (
          <div className="chip-list" style={{ marginTop: 12 }}>
            {data.invites.map(e => (
              <span key={e} className="chip">
                {e}
                <button onClick={() => remove(e)} aria-label="Remove">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </span>
            ))}
          </div>
        )}
        <div className="help-text">{tt("su.s4.help")}</div>
      </div>
    </>
  );
}

// ---------- Step 5 ----------
function StepPlan({ data, update }) {
  const plans = [
    { id: "crew", price: 18, nameK: "price.crew.name", descK: "su.s5.crew.desc" },
    { id: "pro",  price: 24, nameK: "price.pro.name",  descK: "su.s5.pro.desc", featured: true }
  ];
  const seatCount = data.invites.length + 1;
  const total = (plans.find(p => p.id === data.plan)?.price || 24) * seatCount;
  const seatKey = seatCount === 1 ? "su.s5.seats.one" : "su.s5.seats.n";
  return (
    <>
      <h2 className="form-title">{tt("su.s5.title")}</h2>
      <p className="form-sub">{tt("su.s5.sub")}</p>

      <div className="plan-grid">
        {plans.map(p => (
          <div key={p.id}
               className={"plan " + (data.plan === p.id ? "active" : "")}
               onClick={() => update({ plan: p.id })}>
            {p.featured && <div className="plan-badge">{tt("su.s5.recommended")}</div>}
            <div className="plan-name">{tt(p.nameK)}</div>
            <div className="plan-price">${p.price}<span className="per">{tt("price.per")}</span></div>
            <div className="plan-desc">{tt(p.descK)}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 14, padding: "18px 22px", marginTop: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontWeight: 600 }}>{tt("su.s5.subtotal")}</div>
            <div style={{ color: "var(--ink-3)", fontSize: 13, marginTop: 2 }}>
              {tt(seatKey, { n: seatCount, p: plans.find(pl => pl.id === data.plan)?.price || 24 })}
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="serif" style={{ fontSize: 38, lineHeight: 1 }}>${total}<span style={{ fontFamily: "var(--sans)", fontStyle: "normal", fontSize: 14, color: "var(--ink-3)" }}>/mo</span></div>
            <div style={{ fontSize: 12, color: "var(--green)", marginTop: 4, fontWeight: 600 }}>{tt("su.s5.due")}</div>
          </div>
        </div>
      </div>

      <div className="help-text" style={{ marginTop: 14 }} dangerouslySetInnerHTML={{ __html: tt("su.s5.terms") }} />
    </>
  );
}

// ---------- Step 6 ----------
function StepDone({ data }) {
  const [status, setStatus] = useState("working"); // working | success | error
  const [err, setErr] = useState("");

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const sb = window.initSupabase && window.initSupabase();
      if (!sb) { setErr("Supabase not ready"); setStatus("error"); return; }

      // 1. Sign up
      const { data: signUp, error: signErr } = await sb.auth.signUp({
        email: data.email,
        password: data.password,
        options: {
          data: { full_name: data.fullName },
          emailRedirectTo: window.location.origin + "/app.html"
        }
      });
      if (signErr) { setErr(signErr.message); setStatus("error"); return; }

      // If email confirmation is ON, there will be no session yet. Try to sign in anyway.
      if (!signUp.session) {
        const { error: siErr } = await sb.auth.signInWithPassword({
          email: data.email, password: data.password
        });
        if (siErr) {
          // Likely email-confirm is required — tell the user.
          setErr("Account created. Check your email to confirm before continuing.");
          setStatus("error");
          return;
        }
      }

      const { data: { user } } = await sb.auth.getUser();
      if (!user) { setErr("Could not retrieve session"); setStatus("error"); return; }

      // 2. Insert tenant (trigger creates owner membership automatically)
      const { data: tenant, error: tErr } = await sb.from("tenants").insert({
        user_id: user.id,
        name: data.companyName,
        address: [data.address, data.city, data.state, data.zip].filter(Boolean).join(", "),
        city: data.city,
        state: data.state,
        license_number: data.licenseNumber || null,
        plan: data.plan,
        logo_theme_idx: data.logoThemeIdx,
        seats_total: Math.max(8, data.invites.length + 1)
      }).select("id").single();
      if (tErr) { setErr("Tenant: " + tErr.message); setStatus("error"); return; }

      // 3. Pending invites
      if (data.invites.length && tenant) {
        const rows = data.invites.map(email => ({
          tenant_id: tenant.id, email, role: "installer", status: "pending"
        }));
        await sb.from("tenant_members").insert(rows);
      }

      if (cancelled) return;
      setStatus("success");
      setTimeout(() => { window.location.href = "app.html"; }, 1000);
    })();
    return () => { cancelled = true; };
  }, []);

  const seats = data.invites.length + 1;
  const subKey = data.invites.length === 0 ? "su.done.sub.none"
                : data.invites.length === 1 ? "su.done.sub.0"
                : "su.done.sub.n";
  const metaKey = seats === 1 ? "su.done.meta.s" : "su.done.meta.p";

  if (status === "error") {
    return (
      <div className="success">
        <h2>Something went wrong</h2>
        <p style={{ color: "#B5302F" }}>{err}</p>
        <a className="btn primary lg" href="login.html">Go to login</a>
      </div>
    );
  }

  return (
    <div className="success">
      <div className="success-icon">
        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </div>
      <h2>{tt("su.done.title")}</h2>
      <p>{tt(subKey, { company: data.companyName, n: data.invites.length })}</p>

      <div className="success-card">
        <div className="logo-preview filled" style={{ width: 64, height: 64, padding: 0 }}>
          {data.hasLogo === "upload" && data.logoFile ? (
            <img src={data.logoFile} alt="" />
          ) : (
            <GeneratedLogo name={data.companyName} themeIdx={data.logoThemeIdx} shape={data.logoShape} size={64} />
          )}
        </div>
        <div>
          <h4>{data.companyName}</h4>
          <div className="meta">{tt(metaKey, { city: data.city, state: data.state, n: seats })}</div>
        </div>
      </div>

      <div className="help-text" style={{ marginTop: 14 }}>
        {status === "working" ? "Creating your account…" : "Account created. Redirecting…"}
      </div>
    </div>
  );
}

window.SignupApp = SignupApp;
ReactDOM.createRoot(document.getElementById("root")).render(<SignupApp />);