// WORTH platform sweep — Screen 2: Login / Entry.
// LIGHT-LOCKED by brand law (login + onboarding never auto-apply .dark).
// Phone/tablet = centered single column; desktop/tablet-landscape = split
// brand panel + sign-in form.

function LoginForm({ compact = false }) {
  const DS = window.WORTHDesignSystem_70d33b;
  const { Input, Button, Wordmark } = DS;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: compact ? 16 : 20, width: "100%", maxWidth: 360 }}>
      <Wordmark size="md" />
      <h1 style={{
        fontFamily: "var(--font-display)", fontSize: compact ? 30 : 34, fontWeight: 700, lineHeight: 1.08,
        letterSpacing: "-0.01em", color: "var(--ink)", margin: 0, textWrap: "pretty",
      }}>
        Welcome back.
      </h1>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <Input label="Email" prefix={<Icon name="mail" size={16} color="var(--muted)" />} placeholder="david@halpern.co" defaultValue="david@halpern.co" type="email" />
        <Button full>Continue</Button>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--faint)" }}>
        <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12 }}>or</span>
        <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
      </div>

      <Button variant="secondary" full icon={<Icon name="shield-check" size={17} color="var(--ink-soft)" />}>Passkey</Button>

      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 11px", border: "1px solid var(--line)", borderRadius: 999, background: "var(--panel)", alignSelf: "flex-start" }}>
        <span style={{ fontSize: 14 }}>🇬🇧</span>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12.5, fontWeight: 600, color: "var(--ink-soft)" }}>£ GBP</span>
        <Icon name="chevron-down" size={14} color="var(--faint)" />
      </div>
    </div>
  );
}

// Quiet brand panel for the split desktop/tablet layout (still light — a
// paper-soft hero, NOT dark mode). A faint allocation donut motif as data-art.
function BrandPanel() {
  const DS = window.WORTHDesignSystem_70d33b;
  const { DonutProgress } = DS;
  return (
    <div style={{
      position: "relative", flex: 1, minWidth: 0, background: "var(--panel-soft)",
      borderRight: "1px solid var(--line)", padding: "48px 52px", display: "flex", flexDirection: "column",
      justifyContent: "space-between", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", right: -110, top: -70, opacity: 0.5, filter: "saturate(0.85)" }}>
        <DonutProgress size={360} thickness={30} segments={[
          { value: 26, color: "var(--chart-1)" },
          { value: 30, color: "var(--chart-3)" },
          { value: 18, color: "var(--chart-2)" },
          { value: 14, color: "var(--chart-4)" },
          { value: 12, color: "var(--chart-6)" },
        ]} />
      </div>
      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 4 }}>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>Private wealth, mapped</span>
      </div>
      <div style={{ position: "relative", maxWidth: 400 }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 700, lineHeight: 1.04, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0, textWrap: "balance" }}>
          On paper, you look diversified.
        </h2>
      </div>
    </div>
  );
}

function LoginScreen({ device = "phone", os = "ios" }) {
  // Always light — login is light-locked.
  if (device === "desktop") {
    return (
      <DesktopFrame theme="light" title="WORTH">
        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
          <BrandPanel />
          <div style={{ width: 520, flexShrink: 0, display: "grid", placeItems: "center", padding: "40px 56px" }}>
            <LoginForm />
          </div>
        </div>
      </DesktopFrame>
    );
  }

  if (device === "tabletL") {
    return (
      <TabletFrame os={os} orientation="landscape" theme="light">
        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
          <BrandPanel />
          <div style={{ width: 440, flexShrink: 0, display: "grid", placeItems: "center", padding: "30px 44px" }}>
            <LoginForm compact />
          </div>
        </div>
      </TabletFrame>
    );
  }

  // phone — centered
  return (
    <PhoneFrame os={os} theme="light">
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 26px", overflow: "hidden" }}>
        <LoginForm />
      </div>
    </PhoneFrame>
  );
}

Object.assign(window, { LoginScreen, LoginForm, BrandPanel });