/* Standalone pages: GetStarted, SignIn, Privacy. Adds to window.HPPages. */
const { Button, Input, Icon, Logo, Checkbox, Badge } = window.HudsonPayDesignSystem_198a48;

function MiniDashboard() {
  const rows = [
    ["31 Jan", "Cristian W.", "Deposit", "$86.00", "Received", "var(--success-600)", "var(--success-100)"],
    ["31 Jan", "Cristina C.", "Withdrawal", "$48.00", "Processing", "var(--warning-600)", "var(--warning-100)"],
    ["29 Jan", "Martin F. B.", "Exchange", "$125.50", "Sent", "var(--blue-600)", "var(--blue-100)"],
    ["27 Jan", "Jason M. L.", "Deposit", "$1,240.00", "Processing", "var(--warning-600)", "var(--warning-100)"],
    ["25 Jan", "Leonardo D.", "Deposit", "$173.00", "Received", "var(--success-600)", "var(--success-100)"],
    ["24 Jan", "Sebastian B.", "Withdrawal", "$945.00", "Sent", "var(--blue-600)", "var(--blue-100)"],
  ];
  return (
    <div style={{ position: "relative", marginTop: 8 }}>
      <div style={{ background: "var(--paper)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-xl)", padding: 16, color: "var(--text-body)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: "var(--indigo-800)" }}>Recent transactions</span>
          <span style={{ fontSize: 10, color: "var(--blue-600)" }}>See all</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr 64px 24px", alignItems: "center", gap: 8, fontSize: 10.5 }}>
              <span style={{ color: "var(--text-faint)", fontFamily: "var(--font-mono)" }}>{r[0]}</span>
              <span style={{ color: "var(--text-strong)", fontWeight: 500 }}>{r[1]}</span>
              <span style={{ fontFamily: "var(--font-mono)", color: "var(--text-body)", textAlign: "right" }}>{r[3]}</span>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: r[5], justifySelf: "end" }} title={r[4]} />
            </div>
          ))}
        </div>
      </div>
      {/* floating balance card */}
      <div style={{ position: "absolute", left: -18, bottom: -22, background: "var(--paper)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-xl)", padding: "12px 16px", minWidth: 168 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "var(--text-muted)" }}>
          <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--grad-brand)" }} /> Est. Balance USDT
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 22, color: "var(--indigo-900)", marginTop: 4 }}>532<span style={{ fontSize: 13, color: "var(--text-muted)" }}>.50</span></div>
        <div style={{ marginTop: 8, fontSize: 10, fontWeight: 700, color: "#fff", background: "var(--grad-brand)", borderRadius: "var(--radius-pill)", padding: "5px 0", textAlign: "center" }}>Transfer Money</div>
      </div>
    </div>
  );
}

function AuthShell({ children, onPage }) {
  const { useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  return (
    <div style={{ minHeight: "100%", display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", background: "var(--paper)" }}>
      {/* left content */}
      <div style={{ background: "var(--paper)", display: "flex", flexDirection: "column", padding: mobile ? "28px 22px 48px" : "40px 56px", overflowY: "auto" }}>
        <button className="hp-tap" onClick={() => onPage("home")} style={{ border: "none", background: "none", cursor: "pointer", padding: 0, alignSelf: "flex-start", marginBottom: mobile ? 28 : 40 }}>
          <Logo size={30} src={window.HP_LOGO} />
        </button>
        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ width: "100%", maxWidth: 420 }}>{children}</div>
        </div>
      </div>
      {/* right gradient welcome panel */}
      {!mobile && (
      <div style={{ background: "var(--grad-panel)", color: "#fff", padding: "64px 56px", display: "flex", flexDirection: "column", justifyContent: "center", position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{ position: "absolute", top: -160, right: -120, width: 520, height: 520, borderRadius: "50%", border: "1.5px solid rgba(255,255,255,0.18)" }} />
        <div aria-hidden style={{ position: "absolute", bottom: -200, left: -140, width: 480, height: 480, borderRadius: "50%", border: "1.5px solid rgba(255,255,255,0.12)" }} />
        <div style={{ position: "relative" }}>
          <h2 style={{ color: "#fff", fontSize: "clamp(34px,3.4vw,52px)", letterSpacing: "-0.02em", lineHeight: 1.04, fontWeight: 800 }}>
            Welcome<br />to Hudson Pay
          </h2>
          <p style={{ color: "rgba(255,255,255,0.85)", fontSize: "var(--text-md)", marginTop: 18, maxWidth: 380, lineHeight: 1.55 }}>
            Globalize your business with seamless, institutional-grade international payments.
          </p>
          <div style={{ marginTop: 44, maxWidth: 380 }}>
            <MiniDashboard />
          </div>
        </div>
      </div>
      )}
    </div>
  );
}

/* -------- GET STARTED -------- */
function GetStarted({ onPage }) {
  const [step, setStep] = React.useState(1);
  const [company, setCompany] = React.useState("Financial Institution");
  const [volume, setVolume] = React.useState("$1M – $10M / mo");
  const [services, setServices] = React.useState(["Global Payments"]);
  const types = ["Financial Institution", "Payment Provider", "Trading Firm", "Enterprise", "Fintech", "Crypto Business"];
  const volumes = ["< $1M / mo", "$1M – $10M / mo", "$10M – $100M / mo", "$100M+ / mo"];
  const allServices = ["Global Payments", "OTC Trading", "Multi-Currency Accounts", "Stablecoin Settlement", "Corporate Cards", "Treasury"];
  const toggle = (s) => setServices(v => v.includes(s) ? v.filter(x => x !== s) : [...v, s]);

  return (
    <AuthShell onPage={onPage}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
        {[1, 2, 3].map(n => (
          <React.Fragment key={n}>
            <span style={{ width: 26, height: 26, borderRadius: "50%", display: "grid", placeItems: "center", fontSize: 13, fontWeight: 600, fontFamily: "var(--font-mono)", background: step >= n ? "var(--accent)" : "var(--ink-100)", color: step >= n ? "#fff" : "var(--text-faint)" }}>{n}</span>
            {n < 3 && <span style={{ flex: 1, height: 2, background: step > n ? "var(--accent)" : "var(--ink-150)" }} />}
          </React.Fragment>
        ))}
      </div>
      <h1 style={{ fontSize: "var(--text-2xl)", marginTop: 18 }}>
        {step === 1 ? "Tell us about your business" : step === 2 ? "Your volume & needs" : "How can we reach you?"}
      </h1>
      <p style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 6, marginBottom: 26 }}>
        {step === 1 ? "We tailor onboarding to your institution type." : step === 2 ? "This helps us route you to the right desk." : "A specialist will reach out within one business day."}
      </p>

      {step === 1 && (
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Input label="Company name" iconLeft="building" placeholder="Hudson Capital Ltd" />
          <div>
            <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-strong)", marginBottom: 8 }}>Company type</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {types.map(t => (
                <button key={t} className="hp-tap" onClick={() => setCompany(t)} style={{ textAlign: "left", padding: "11px 14px", borderRadius: "var(--radius-md)", cursor: "pointer", fontSize: "var(--text-sm)", fontWeight: 500, fontFamily: "var(--font-sans)", border: `1.5px solid ${company === t ? "var(--blue-500)" : "var(--border-default)"}`, background: company === t ? "var(--blue-50)" : "var(--paper)", color: company === t ? "var(--blue-700)" : "var(--text-body)" }}>{t}</button>
              ))}
            </div>
          </div>
          <Button variant="primary" block onClick={() => setStep(2)} iconRight={<Icon name="arrow-right" size={18} />}>Continue</Button>
        </div>
      )}
      {step === 2 && (
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div>
            <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-strong)", marginBottom: 8 }}>Estimated monthly volume</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {volumes.map(t => (
                <button key={t} className="hp-tap" onClick={() => setVolume(t)} style={{ padding: "11px 14px", borderRadius: "var(--radius-md)", cursor: "pointer", fontSize: "var(--text-sm)", fontWeight: 500, fontFamily: "var(--font-mono)", border: `1.5px solid ${volume === t ? "var(--blue-500)" : "var(--border-default)"}`, background: volume === t ? "var(--blue-50)" : "var(--paper)", color: volume === t ? "var(--blue-700)" : "var(--text-body)" }}>{t}</button>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-strong)", marginBottom: 8 }}>Services needed</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {allServices.map(s => (
                <button key={s} className="hp-tap" onClick={() => toggle(s)} style={{ padding: "8px 14px", borderRadius: "var(--radius-pill)", cursor: "pointer", fontSize: "var(--text-sm)", fontWeight: 500, fontFamily: "var(--font-sans)", display: "inline-flex", alignItems: "center", gap: 6, border: `1.5px solid ${services.includes(s) ? "var(--blue-500)" : "var(--border-default)"}`, background: services.includes(s) ? "var(--blue-50)" : "var(--paper)", color: services.includes(s) ? "var(--blue-700)" : "var(--text-body)" }}>
                  {services.includes(s) && <Icon name="check" size={14} strokeWidth={3} />}{s}
                </button>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <Button variant="secondary" onClick={() => setStep(1)}>Back</Button>
            <Button variant="primary" block onClick={() => setStep(3)} iconRight={<Icon name="arrow-right" size={18} />}>Continue</Button>
          </div>
        </div>
      )}
      {step === 3 && (
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Input label="First name" placeholder="Ada" />
            <Input label="Last name" placeholder="Hudson" />
          </div>
          <Input label="Work email" iconLeft="mail" placeholder="ada@company.com" type="email" />
          <Input label="Phone" placeholder="+1 (555) 000-0000" />
          <Checkbox label="I'd like a dedicated relationship manager" defaultChecked />
          <div style={{ display: "flex", gap: 10 }}>
            <Button variant="secondary" onClick={() => setStep(2)}>Back</Button>
            <Button variant="primary" block onClick={() => onPage("home")} iconRight={<Icon name="check" size={18} />}>Submit application</Button>
          </div>
        </div>
      )}
      <p style={{ marginTop: 22, fontSize: 13, color: "var(--text-muted)", textAlign: "center" }}>
        Already have an account? <a onClick={() => onPage("signin")} style={{ cursor: "pointer", fontWeight: 600 }}>Sign in</a>
      </p>
    </AuthShell>
  );
}

/* -------- SIGN IN -------- */
function SignIn({ onPage }) {
  const [stage, setStage] = React.useState("creds"); // creds | 2fa
  const [code, setCode] = React.useState(["", "", "", "", "", ""]);
  const refs = React.useRef([]);
  const setDigit = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const next = [...code]; next[i] = v; setCode(next);
    if (v && i < 5) refs.current[i + 1] && refs.current[i + 1].focus();
  };
  return (
    <AuthShell onPage={onPage}>
      {stage === "creds" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div>
            <h1 style={{ fontSize: "var(--text-2xl)" }}>Welcome back</h1>
            <p style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 6 }}>Sign in to your Hudson Pay account.</p>
          </div>
          <Input label="Work email" iconLeft="mail" placeholder="ada@company.com" type="email" defaultValue="ada@hudsoncapital.com" />
          <div>
            <Input label="Password" iconLeft="lock" placeholder="••••••••••" type="password" defaultValue="hunter2hunter2" />
            <div style={{ textAlign: "right", marginTop: 8 }}>
              <a style={{ cursor: "pointer", fontSize: 13, fontWeight: 600 }}>Forgot password?</a>
            </div>
          </div>
          <Button variant="primary" block onClick={() => setStage("2fa")} iconRight={<Icon name="arrow-right" size={18} />}>Continue</Button>
          <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--text-faint)", fontSize: 13 }}>
            <span style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />or<span style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
          </div>
          <Button variant="secondary" block iconLeft={<Icon name="building" size={18} />}>Single sign-on (SSO)</Button>
          <p style={{ fontSize: 13, color: "var(--text-muted)", textAlign: "center", margin: 0 }}>
            New to Hudson Pay? <a onClick={() => onPage("getstarted")} style={{ cursor: "pointer", fontWeight: 600 }}>Get started</a>
          </p>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <button className="hp-tap" onClick={() => setStage("creds")} style={{ alignSelf: "flex-start", border: "none", background: "none", cursor: "pointer", color: "var(--text-muted)", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", padding: 0 }}>
            <Icon name="arrow-right" size={15} style={{ transform: "rotate(180deg)" }} /> Back
          </button>
          <span style={{ display: "inline-grid", placeItems: "center", width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--blue-50)", color: "var(--blue-600)" }}><Icon name="shield-check" size={26} /></span>
          <div>
            <h1 style={{ fontSize: "var(--text-2xl)" }}>Two-factor authentication</h1>
            <p style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 6 }}>Enter the 6-digit code from your authenticator app.</p>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {code.map((d, i) => (
              <input key={i} ref={el => refs.current[i] = el} value={d} onChange={e => setDigit(i, e.target.value)} maxLength={1} inputMode="numeric"
                style={{ width: "clamp(42px,13.5vw,52px)", height: 60, textAlign: "center", fontSize: 24, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--text-strong)", border: `1.5px solid ${d ? "var(--blue-500)" : "var(--border-default)"}`, borderRadius: "var(--radius-md)", outline: "none", background: "var(--paper)" }} />
            ))}
          </div>
          <Button variant="primary" block onClick={() => onPage("home")} iconRight={<Icon name="arrow-right" size={18} />}>Verify &amp; sign in</Button>
          <p style={{ fontSize: 13, color: "var(--text-muted)", textAlign: "center", margin: 0 }}>Didn't get a code? <a style={{ cursor: "pointer", fontWeight: 600 }}>Resend</a></p>
        </div>
      )}
    </AuthShell>
  );
}

/* -------- PRIVACY POLICY -------- */
function Privacy({ onPage }) {
  const { Container } = window.HPSite;
  const sections = [
    ["Information we collect", "We collect information you provide directly — such as business details, identity documentation for KYC/KYB, and contact information — as well as transaction metadata required to operate payment and settlement services."],
    ["How we use information", "Information is used to provide and secure our services, comply with regulatory obligations including AML and sanctions screening, prevent fraud, and communicate with you about your account."],
    ["Data protection", "All data is encrypted in transit (TLS 1.3) and at rest (AES-256). We maintain SOC 2 Type II, PCI-DSS Level 1 and ISO 27001 controls, with regional data residency where required."],
    ["Sharing & disclosure", "We share information only with banking and infrastructure partners necessary to deliver services, and with regulators where legally required. We never sell personal data."],
    ["Your rights", "Subject to applicable law, you may request access, correction, deletion or portability of your personal data by contacting compliance@hudsonpay.io."],
    ["Contact", "Questions about this policy can be directed to our Data Protection Officer at compliance@hudsonpay.io."],
  ];
  return (
    <div style={{ background: "var(--paper)", minHeight: "100%" }}>
      <div style={{ background: "var(--grad-page-soft)", padding: "28px 0", borderBottom: "1px solid var(--border-subtle)" }}>
        <Container>
          <button onClick={() => onPage("home")} style={{ border: "none", background: "none", cursor: "pointer", padding: 0 }}>
            <Logo size={28} src={window.HP_LOGO} />
          </button>
        </Container>
      </div>
      <Container narrow style={{ padding: "64px 32px 96px" }}>
        <div style={{ fontSize: 13, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>Last updated · June 2026</div>
        <h1 style={{ fontSize: "var(--text-4xl)", marginTop: 12, letterSpacing: "-0.03em" }}>Privacy Policy</h1>
        <p style={{ fontSize: "var(--text-lg)", color: "var(--text-muted)", marginTop: 16, lineHeight: 1.6 }}>
          Hudson Pay is committed to protecting the privacy and security of the businesses and individuals we serve. This policy explains what we collect and how we use it.
        </p>
        <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 36 }}>
          {sections.map(([t, b], i) => (
            <div key={t}>
              <h2 style={{ fontSize: "var(--text-xl)", marginBottom: 10, display: "flex", gap: 12, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--blue-500)" }}>{String(i + 1).padStart(2, "0")}</span>{t}
              </h2>
              <p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", lineHeight: 1.7, margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56 }}>
          <Button variant="secondary" onClick={() => onPage("home")} iconLeft={<Icon name="arrow-right" size={16} style={{ transform: "rotate(180deg)" }} />}>Back to home</Button>
        </div>
      </Container>
    </div>
  );
}

Object.assign(window, { HPPages: { GetStarted, SignIn, Privacy } });
