// Påmelding — lag eller solo-spiller til en gitt turnering.
// onNav("pamelding", { tournamentId: "t1" })

const PameldingPage = ({ accent, tournamentId, onNav, discordUser, isLoggedIn }) => {
  const [t, setT] = React.useState(null);
  const [mode, setMode] = React.useState("lag"); // "lag" | "solo"
  React.useEffect(() => {
    if (!tournamentId || !window.WZN_Store) return;
    WZN_Store.getTournaments().then(all => {
      const found = all.find(x => x.id === tournamentId);
      if (found) setT(found);
    });
  }, [tournamentId]);
  if (!t) return (
    <div style={{ padding: "64px 48px", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.15em" }}>
      LASTER TURNERING…
    </div>
  );

  return (
    <>
      {/* Breadcrumb */}
      <section style={{
        padding: "20px 48px", background: "var(--bg-1)",
        borderBottom: "1px solid var(--line)",
        display: "flex", alignItems: "center", gap: 18,
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em",
      }}>
        <button onClick={() => onNav("turneringer")} style={{
          background: "transparent", border: "none", cursor: "pointer",
          color: "var(--text-dim)", fontFamily: "inherit", fontSize: 11, letterSpacing: "0.18em",
        }}>← TURNERINGER</button>
        <span style={{ color: "var(--text-faint)" }}>/</span>
        <button onClick={() => onNav("turnering", { tournamentId })} style={{
          background: "transparent", border: "none", cursor: "pointer",
          color: "var(--text-dim)", fontFamily: "inherit", fontSize: 11, letterSpacing: "0.18em",
        }}>{t.name.toUpperCase()}</button>
        <span style={{ color: "var(--text-faint)" }}>/</span>
        <span style={{ color: accent }}>PÅMELDING</span>
      </section>

      {/* Tournament info strip */}
      <section style={{
        padding: "28px 48px",
        background: "var(--bg-0)", borderBottom: "1px solid var(--line)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10, color: accent, letterSpacing: "0.25em", marginBottom: 6,
          }}>PÅMELDING TIL</div>
          <h1 style={{
            fontFamily: "var(--font-stencil)", fontSize: 48, letterSpacing: "0.02em", margin: 0, lineHeight: 1,
          }}>{t.name.toUpperCase()}</h1>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-dim)",
            letterSpacing: "0.12em", marginTop: 8,
          }}>
            {(t.team_size || "trios").toUpperCase()}{t.games ? ` · ${t.games} GAMES` : ""}{t.maps?.length ? ` · ${t.maps.join(", ").toUpperCase()}` : ""}
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
          {[
            { k: "PLASSER IGJEN", v: t.max_teams ? `${t.max_teams - (t.registered || 0)}` : "—" },
            { k: "PREMIE", v: t.prize_pool ? `${t.prize_pool.toLocaleString()} kr` : "—", accent: true },
          ].map((s, i) => (
            <div key={s.k} style={{
              padding: "14px 22px", borderRight: i < 1 ? "1px solid var(--line)" : "none",
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>{s.k}</div>
              <div style={{ fontFamily: "var(--font-stencil)", fontSize: 28, color: s.accent ? accent : "var(--text)", lineHeight: 1, marginTop: 4 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Mode toggle */}
      <section style={{
        padding: "40px 48px 0",
        background: "var(--bg-1)",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 16,
        }}>VELG PÅMELDINGSMODUS</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, maxWidth: 720 }}>
          {[
            { id: "lag",  title: "MELD LAGET", sub: "Du representerer et komplett lag (3 spillere). Du logger inn som kaptein og registrerer resten av laget." },
            { id: "solo", title: "MELD SOM SOLO", sub: "Du stiller alene. Kapteiner kan invitere deg, eller vi matcher deg automatisk inn på et lag." },
          ].map(m => (
            <button key={m.id} onClick={() => setMode(m.id)} style={{
              padding: "20px 22px", cursor: "pointer",
              background: mode === m.id ? "var(--bg-3)" : "var(--bg-2)",
              border: `2px solid ${mode === m.id ? accent : "var(--line)"}`,
              textAlign: "left", transition: "border-color 0.15s",
            }}>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 20, letterSpacing: "0.04em",
                color: mode === m.id ? accent : "var(--text)", lineHeight: 1,
              }}>{m.title}</div>
              <div style={{
                fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)",
                marginTop: 8, lineHeight: 1.55,
              }}>{m.sub}</div>
              {mode === m.id && (
                <div style={{
                  marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 10,
                  color: accent, letterSpacing: "0.18em",
                }}>● VALGT</div>
              )}
            </button>
          ))}
        </div>
      </section>

      {/* Form */}
      <section style={{
        padding: "40px 48px 72px",
        background: "var(--bg-1)",
        borderBottom: "1px solid var(--line)",
      }}>
        {mode === "lag" ? (
          <LagForm accent={accent} t={t} onNav={onNav} discordUser={discordUser} isLoggedIn={isLoggedIn} />
        ) : (
          <SoloForm accent={accent} t={t} onNav={onNav} discordUser={discordUser} isLoggedIn={isLoggedIn} />
        )}
      </section>
    </>
  );
};

// ───────── Login gate ─────────
const LoginGate = ({ accent, onNav, message }) => (
  <div style={{
    maxWidth: 520, padding: "40px", background: "var(--bg-2)",
    border: `1px solid ${accent}`, display: "flex", flexDirection: "column", gap: 20,
  }}>
    <div style={{ fontFamily: "var(--font-stencil)", fontSize: 28, letterSpacing: "0.04em", lineHeight: 1 }}>
      LOGG INN FOR Å MELDE DEG PÅ
    </div>
    <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)", lineHeight: 1.6, margin: 0 }}>
      {message || "Du må være logget inn med Discord for å melde deg på en turnering."}
    </p>
    <button
      onClick={() => window.db.auth.signInWithOAuth({ provider: "discord", options: { redirectTo: window.location.href } })}
      className="cta"
      style={{ background: accent, color: "var(--bg-0)", borderColor: accent, fontWeight: 700, padding: "14px 22px", cursor: "pointer", width: "fit-content" }}
    >
      LOGG INN MED DISCORD ↗
    </button>
  </div>
);

// ───────── Profile gate ─────────
const ProfileGate = ({ accent, onNav }) => (
  <div style={{
    maxWidth: 520, padding: "40px", background: "var(--bg-2)",
    border: `1px solid ${accent}`, display: "flex", flexDirection: "column", gap: 20,
  }}>
    <div style={{ fontFamily: "var(--font-stencil)", fontSize: 28, letterSpacing: "0.04em", lineHeight: 1 }}>
      FULLFØR PROFILEN DIN
    </div>
    <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)", lineHeight: 1.6, margin: 0 }}>
      Du må legge til Activision-ID på profilen din før du kan melde deg på turneringer.
      Gå til <strong style={{ color: "var(--text)" }}>Min Side</strong> og fyll inn din Activision-ID under Innstillinger.
    </p>
    <button
      onClick={() => onNav("min-side")}
      className="cta"
      style={{ background: accent, color: "var(--bg-0)", borderColor: accent, fontWeight: 700, padding: "14px 22px", cursor: "pointer", width: "fit-content" }}
    >
      GÅ TIL MIN SIDE →
    </button>
  </div>
);

// ───────── Lag-form ─────────
const LagForm = ({ accent, t, onNav, discordUser, isLoggedIn }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [loadingProfile, setLoadingProfile] = React.useState(true);
  const [err, setErr] = React.useState("");
  const [userRole, setUserRole] = React.useState(null);
  const [teamName, setTeamName] = React.useState("");
  const [teamTag, setTeamTag] = React.useState("");
  const [captainDiscord, setCaptainDiscord] = React.useState("");
  const [captainActivision, setCaptainActivision] = React.useState("");
  const [player2Discord, setPlayer2Discord] = React.useState("");
  const [player2Activision, setPlayer2Activision] = React.useState("");
  const [player3Discord, setPlayer3Discord] = React.useState("");
  const [player3Activision, setPlayer3Activision] = React.useState("");
  const [region, setRegion] = React.useState("");

  React.useEffect(() => {
    if (!isLoggedIn) { setLoadingProfile(false); return; }
    (async () => {
      try {
        const { data: { user } } = await window.db.auth.getUser();
        if (!user) { setLoadingProfile(false); return; }
        const { data } = await window.db.from("user_roles").select("activision_id, discord_name, display_name").eq("user_id", user.id).single();
        setUserRole(data || null);
        // Pre-fill captain fields
        const dName = discordUser?.user_metadata?.full_name || discordUser?.user_metadata?.name || data?.discord_name || "";
        const aId   = data?.activision_id || "";
        setCaptainDiscord(dName);
        setCaptainActivision(aId);
      } catch (e) {}
      setLoadingProfile(false);
    })();
  }, [isLoggedIn, discordUser]);

  if (!isLoggedIn) return <LoginGate accent={accent} onNav={onNav} />;
  if (loadingProfile) return (
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.15em" }}>LASTER PROFIL…</div>
  );
  if (!userRole?.activision_id) return <ProfileGate accent={accent} onNav={onNav} />;
  if (submitted) return <SuccessState accent={accent} mode="lag" onNav={onNav} />;

  const inputStyle = {
    width: "100%", boxSizing: "border-box",
    background: "var(--bg-0)", border: "1px solid var(--line-2)", padding: "11px 14px",
    fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
  };

  const handleSubmit = async () => {
    if (!teamName.trim()) { setErr("Lagnavn er påkrevd"); return; }
    if (!teamTag.trim()) { setErr("Lagtag er påkrevd (3 bokstaver)"); return; }
    if (!captainDiscord.trim()) { setErr("Kapteinens Discord-navn er påkrevd"); return; }
    setLoading(true); setErr("");

    let captainDiscordId = null;
    try {
      const { data: { user } } = await window.db.auth.getUser();
      const discordIdentity = user?.identities?.find(i => i.provider === "discord");
      captainDiscordId = discordIdentity?.id || null;
    } catch (e) {}

    const roster = [
      { discord: captainDiscord.trim(), activision: captainActivision.trim(), role: "kaptein" },
      ...(player2Discord.trim() ? [{ discord: player2Discord.trim(), activision: player2Activision.trim(), role: "spiller" }] : []),
      ...(player3Discord.trim() ? [{ discord: player3Discord.trim(), activision: player3Activision.trim(), role: "spiller" }] : []),
    ];

    const { error } = await WZN_Store.addTeamRegistration({
      id: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(),
      registeredAt: new Date().toISOString(),
      name: teamName.trim(),
      tag: teamTag.trim().toUpperCase().slice(0, 4),
      captain: captainDiscord.trim(),
      captain_discord_id: captainDiscordId,
      roster,
      tournament_id: t?.id || null,
      region: region.trim() || null,
    });

    setLoading(false);
    if (error) setErr("Feil ved registrering: " + error.message);
    else setSubmitted(true);
  };

  return (
    <div style={{ maxWidth: 720 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 20 }}>
        REGISTRER LAG / KAPTEIN
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <SField label="LAGNAVN" value={teamName} onChange={setTeamName} placeholder="f.eks. Arctic Storm" inputStyle={inputStyle} accent={accent} />
          <SField label="LAGTAG (3-4 BOKSTAVER)" value={teamTag} onChange={v => setTeamTag(v.toUpperCase().slice(0,4))} placeholder="f.eks. ARS" inputStyle={inputStyle} accent={accent} />
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: accent, letterSpacing: "0.2em", marginTop: 4 }}>KAPTEIN</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <SField label="DISCORD-NAVN" value={captainDiscord} onChange={setCaptainDiscord} placeholder="bruker#1234" inputStyle={inputStyle} accent={accent} />
          <SField label="ACTIVISION-ID" value={captainActivision} onChange={setCaptainActivision} placeholder="bruker#5678" inputStyle={inputStyle} accent={accent} />
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", marginTop: 4 }}>
          SPILLERE (VALGFRITT — LEGG TIL RESTEN AV TRIOS)
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <SField label="SPILLER 2 — DISCORD" value={player2Discord} onChange={setPlayer2Discord} placeholder="bruker#1234" inputStyle={inputStyle} accent={accent} />
          <SField label="SPILLER 2 — ACTIVISION-ID" value={player2Activision} onChange={setPlayer2Activision} placeholder="bruker#5678" inputStyle={inputStyle} accent={accent} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <SField label="SPILLER 3 — DISCORD" value={player3Discord} onChange={setPlayer3Discord} placeholder="bruker#1234" inputStyle={inputStyle} accent={accent} />
          <SField label="SPILLER 3 — ACTIVISION-ID" value={player3Activision} onChange={setPlayer3Activision} placeholder="bruker#5678" inputStyle={inputStyle} accent={accent} />
        </div>
        <SField label="REGION (VALGFRITT)" value={region} onChange={setRegion} placeholder="Oslo · Bergen · Trondheim · Stavanger ..." inputStyle={inputStyle} accent={accent} />
        <div style={{ padding: "13px 16px", background: "var(--bg-2)", border: "1px solid var(--line)", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)", lineHeight: 1.6 }}>
          <span style={{ color: accent, fontWeight: 700 }}>▸</span> Admin verifiserer og sender Discord DM innen 24t.
          Kapteinen mottar KAPTEIN-rollen i Discord ved godkjenning.
        </div>
        {err && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#e63946" }}>{err}</div>}
        <button onClick={handleSubmit} disabled={loading} className="cta" style={{
          background: accent, color: "var(--bg-0)", borderColor: accent,
          fontWeight: 700, padding: "16px 22px", justifyContent: "space-between",
          width: "100%", cursor: loading ? "default" : "pointer", opacity: loading ? 0.6 : 1, marginTop: 4,
        }}>
          <span>{loading ? "SENDER…" : "REGISTRER LAGET"}</span> <span>▶</span>
        </button>
      </div>
    </div>
  );
};

// ───────── Solo-form ─────────
const SoloForm = ({ accent, t, onNav, discordUser, isLoggedIn }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [loadingProfile, setLoadingProfile] = React.useState(true);
  const [err, setErr] = React.useState("");
  const [userRole, setUserRole] = React.useState(null);
  const [discordName, setDiscordName] = React.useState("");
  const [activisionId, setActivisionId] = React.useState("");
  const [role, setRole] = React.useState("");
  const [level, setLevel] = React.useState("");
  const [comment, setComment] = React.useState("");

  React.useEffect(() => {
    if (!isLoggedIn) { setLoadingProfile(false); return; }
    (async () => {
      try {
        const { data: { user } } = await window.db.auth.getUser();
        if (!user) { setLoadingProfile(false); return; }
        const { data } = await window.db.from("user_roles").select("activision_id, discord_name, display_name").eq("user_id", user.id).single();
        setUserRole(data || null);
        const dName = discordUser?.user_metadata?.full_name || discordUser?.user_metadata?.name || data?.discord_name || "";
        const aId   = data?.activision_id || "";
        setDiscordName(dName);
        setActivisionId(aId);
      } catch (e) {}
      setLoadingProfile(false);
    })();
  }, [isLoggedIn, discordUser]);

  if (!isLoggedIn) return <LoginGate accent={accent} onNav={onNav} />;
  if (loadingProfile) return (
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.15em" }}>LASTER PROFIL…</div>
  );
  if (!userRole?.activision_id) return <ProfileGate accent={accent} onNav={onNav} />;
  if (submitted) return <SuccessState accent={accent} mode="solo" onNav={onNav} />;

  const inputStyle = {
    width: "100%", boxSizing: "border-box",
    background: "var(--bg-0)", border: "1px solid var(--line-2)", padding: "11px 14px",
    fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
  };

  const handleSubmit = async () => {
    if (!discordName.trim()) { setErr("Discord-navn er påkrevd"); return; }
    setLoading(true); setErr("");

    let discordId = null;
    try {
      const { data: { user } } = await window.db.auth.getUser();
      const di = user?.identities?.find(i => i.provider === "discord");
      discordId = di?.id || null;
    } catch (e) {}

    const { error } = await WZN_Store.addPlayerSignup({
      tournament_id: t?.id || null,
      discord_name: discordName.trim(),
      activision_id: activisionId.trim() || null,
      role: role || null,
      level: level || null,
      comment: comment.trim() || null,
      discord_id: discordId,
    });

    setLoading(false);
    if (error) setErr("Feil ved registrering: " + error.message);
    else setSubmitted(true);
  };

  return (
    <div style={{ maxWidth: 720 }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 20,
      }}>PÅMELD SOM SOLO-SPILLER</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <SField label="DISCORD-NAVN" value={discordName} onChange={setDiscordName} placeholder="bruker#1234" inputStyle={inputStyle} accent={accent} />
          <SField label="ACTIVISION-ID" value={activisionId} onChange={setActivisionId} placeholder="bruker#5678" inputStyle={inputStyle} accent={accent} />
        </div>

        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
            letterSpacing: "0.2em", marginBottom: 10,
          }}>ROLLE DU KAN FYLLE</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["AGGRESSOR", "SUPPORT", "IGL", "FLEXIBLE"].map(r => (
              <button key={r} onClick={() => setRole(role === r ? "" : r)} style={{
                padding: "9px 14px",
                background: role === r ? "var(--bg-3)" : "var(--bg-2)",
                border: `1px solid ${role === r ? accent : "var(--line-2)"}`,
                fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.06em",
                color: role === r ? accent : "var(--text-dim)", cursor: "pointer",
              }}>{r}</button>
            ))}
          </div>
        </div>

        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
            letterSpacing: "0.2em", marginBottom: 10,
          }}>DITT NIVÅ</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["CASUAL / BRONZE", "MID / GOLD", "HARD / IRIDESCENT"].map(l => (
              <button key={l} onClick={() => setLevel(level === l ? "" : l)} style={{
                padding: "9px 14px",
                background: level === l ? "var(--bg-3)" : "var(--bg-2)",
                border: `1px solid ${level === l ? accent : "var(--line-2)"}`,
                fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.06em",
                color: level === l ? accent : "var(--text-dim)", cursor: "pointer",
              }}>{l}</button>
            ))}
          </div>
        </div>

        <SField label="KORT KOMMENTAR (VALGFRITT)" value={comment} onChange={setComment} placeholder="Har spilt Warzone i 3 år, foretrekker aggresiv playstyle..." inputStyle={inputStyle} accent={accent} />

        <div style={{
          padding: "14px 18px", background: "var(--bg-2)", border: "1px solid var(--line)",
          fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)", lineHeight: 1.6,
        }}>
          <span style={{ color: accent, fontWeight: 700 }}>▸</span> Kapteiner ser solo-listen og kan invitere deg.
          Du kan også finne lag via <strong style={{ color: "var(--text)" }}>#lag-søk</strong> på Discord.
        </div>

        {err && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#e63946" }}>{err}</div>}

        <button onClick={handleSubmit} disabled={loading} className="cta" style={{
          background: accent, color: "var(--bg-0)", borderColor: accent,
          fontWeight: 700, padding: "16px 22px", justifyContent: "space-between",
          width: "100%", cursor: loading ? "default" : "pointer", opacity: loading ? 0.6 : 1, marginTop: 6,
        }}>
          <span>{loading ? "SENDER…" : "MELD MEG PÅ SOM SOLO"}</span> <span>▶</span>
        </button>
      </div>
    </div>
  );
};

// ───────── Success state ─────────
const SuccessState = ({ accent, mode, onNav }) => (
  <div style={{ maxWidth: 600, textAlign: "center", margin: "0 auto", padding: "48px 0" }}>
    <div style={{
      width: 72, height: 72,
      border: `3px solid ${accent}`, margin: "0 auto 24px",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-stencil)", fontSize: 32, color: accent,
    }}>✓</div>
    <h2 style={{ fontFamily: "var(--font-stencil)", fontSize: 52, letterSpacing: "0.02em", lineHeight: 1, margin: 0 }}>
      {mode === "lag" ? "LAGET ER REGISTRERT." : "DU ER PÅ LISTEN."}
    </h2>
    <p style={{
      fontFamily: "var(--font-body)", fontSize: 17, color: "var(--text-dim)",
      marginTop: 18, lineHeight: 1.6,
    }}>
      {mode === "lag"
        ? "Admin verifiserer og sender bekreftelse på Discord innen 24t. Se etter DM fra WZN Liga Bot."
        : "Du er lagt i solo-poolen. Kapteiner kan nå se deg og sende invitasjon på Discord."}
    </p>
    <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }}>
      <button onClick={() => onNav("turneringer")} className="cta cta-ghost" style={{ padding: "14px 22px", cursor: "pointer" }}>
        SE ALLE TURNERINGER
      </button>
      <a href="https://discord.gg/DTgGQSCKgU" target="_blank" rel="noopener" className="cta" style={{
        background: accent, color: "var(--bg-0)", borderColor: accent,
        fontWeight: 700, padding: "14px 22px", textDecoration: "none",
      }}>JOIN DISCORD ↗</a>
    </div>
  </div>
);

// ───────── Stateless display field (PField) ─────────
const PField = ({ label, placeholder }) => (
  <div>
    <label style={{
      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
      letterSpacing: "0.2em", display: "block", marginBottom: 6,
    }}>{label}</label>
    <input type="text" placeholder={placeholder} style={{
      width: "100%", boxSizing: "border-box",
      background: "var(--bg-2)", border: "1px solid var(--line-2)", padding: "12px 14px",
      fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
    }} />
  </div>
);

// ───────── Controlled stateful field (SField) ─────────
const SField = ({ label, value, onChange, placeholder, inputStyle, accent }) => (
  <div>
    <label style={{
      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
      letterSpacing: "0.2em", display: "block", marginBottom: 6,
    }}>{label}</label>
    <input
      type="text"
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      style={inputStyle || {
        width: "100%", boxSizing: "border-box",
        background: "var(--bg-0)", border: "1px solid var(--line-2)", padding: "11px 14px",
        fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text)", outline: "none",
      }}
    />
  </div>
);

Object.assign(window, { PameldingPage });