// Login / Signup
function LoginPage() {
  return (
    <div className="n-page" style={{ minHeight: 1000 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 1000 }}>
        {/* Left: image side */}
        <div
          style={{
            position: "relative",
            background: "repeating-linear-gradient(135deg, #161616 0 1px, transparent 1px 16px), linear-gradient(180deg, #141414, #060606)",
            borderRight: "1px solid var(--n-line)",
            padding: "40px 56px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            overflow: "hidden",
          }}
        >
          {/* logo */}
          <div className="n-logo">
            <span className="n-logo-mark">N</span>
            <span>Noble</span>
          </div>

          {/* center label */}
          <div style={{ position: "absolute", top: 56, right: 56, fontFamily: "var(--n-mono)", fontSize: 10, color: "var(--n-faint)", letterSpacing: "0.16em", textTransform: "uppercase", textAlign: "right" }}>
            Atelier Portal<br />
            KYO · CPH · MMXXVI
          </div>

          {/* quote */}
          <div style={{ maxWidth: 480 }}>
            <div className="n-eyebrow" style={{ marginBottom: 32, color: "var(--n-gold)" }}>─── A note from the workshop</div>
            <p style={{ fontFamily: "var(--n-serif)", fontSize: 38, lineHeight: 1.25, margin: 0, marginBottom: 28 }}>
              “We don't build for everyone. We build for the person who will keep
              theirs <em>longer than they keep most things.</em>”
            </p>
            <div className="n-mono" style={{ fontSize: 11, color: "var(--n-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Hiroshi Tan · Master artisan, Kyoto
            </div>
          </div>

          {/* footer ticker */}
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              fontFamily: "var(--n-mono)",
              fontSize: 10,
              color: "var(--n-faint)",
              letterSpacing: "0.14em",
              textTransform: "uppercase",
            }}
          >
            <span>● Series 04 · 318 / 800 remaining</span>
            <span>Atelier hours · Tue – Sat · 10–18 JST</span>
          </div>
        </div>

        {/* Right: form */}
        <div style={{ padding: "80px 96px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          {/* Tabs */}
          <div style={{ display: "flex", gap: 0, marginBottom: 48, borderBottom: "1px solid var(--n-line)" }}>
            {[
              { l: "Sign in", a: true },
              { l: "Create account", a: false },
            ].map((t) => (
              <div
                key={t.l}
                style={{
                  padding: "12px 0",
                  marginRight: 32,
                  fontFamily: "var(--n-mono)",
                  fontSize: 11,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: t.a ? "var(--n-cream)" : "var(--n-muted)",
                  borderBottom: t.a ? "1px solid var(--n-gold)" : "1px solid transparent",
                  marginBottom: -1,
                }}
              >
                {t.l}
              </div>
            ))}
          </div>

          <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── Welcome back</div>
          <h1 className="n-display" style={{ fontSize: 64, margin: 0, marginBottom: 16 }}>
            Sign in to your<br /><em>atelier.</em>
          </h1>
          <p style={{ color: "var(--n-cream-dim)", fontSize: 14, lineHeight: 1.6, marginBottom: 48, maxWidth: 440 }}>
            For owners, patrons, and those auditioning a Noble. If you've placed
            an order, your account is waiting.
          </p>

          {/* Form */}
          <div style={{ display: "grid", gap: 36, marginBottom: 36 }}>
            <div>
              <div className="n-label" style={{ marginBottom: 12 }}>Email</div>
              <input className="n-input" placeholder="you@elsewhere.com" defaultValue="aoife.l@email.com" />
            </div>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
                <span className="n-label">Password</span>
                <span className="n-mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--n-gold)", textTransform: "uppercase" }}>
                  Forgot? →
                </span>
              </div>
              <input className="n-input" placeholder="••••••••••••" defaultValue="••••••••••••" type="password" />
            </div>
          </div>

          <button className="n-btn n-btn-gold" style={{ width: "100%", justifyContent: "center", padding: "18px 22px", marginBottom: 20 }}>
            Enter the atelier →
          </button>

          {/* magic link */}
          <div style={{ display: "flex", alignItems: "center", gap: 14, color: "var(--n-faint)", fontSize: 11, letterSpacing: "0.12em", fontFamily: "var(--n-mono)", textTransform: "uppercase", marginBottom: 20 }}>
            <div style={{ flex: 1, height: 1, background: "var(--n-line)" }} />
            <span>Or</span>
            <div style={{ flex: 1, height: 1, background: "var(--n-line)" }} />
          </div>

          <button className="n-btn n-btn-ghost" style={{ width: "100%", justifyContent: "center", padding: "16px 22px" }}>
            ◇ &nbsp; Email me a single-use link
          </button>

          <div className="n-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--n-faint)", marginTop: 40, textAlign: "center" }}>
            Protected by Atelier Concierge · two-factor available in settings
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;