/* Wood OS — Login */
const { useState: useStateLogin } = React;

const Login = ({ navigate }) => {
  const [email, setEmail] = useStateLogin("eduardo@marcenarianorte.com.br");
  const [pwd, setPwd] = useStateLogin("");
  const [loading, setLoading] = useStateLogin(false);
  const [showPwd, setShowPwd] = useStateLogin(false);

  const submit = (e) => {
    e?.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); navigate("dashboard"); }, 700);
  };

  return (
    <div className="wood-page relative" style={{ minHeight: "100vh", display: "flex" }}>
      <AnimatedBackground intensity="high" variant="blueprint" />

      {/* Top nav */}
      <div className="fixed top-0 left-0 right-0 z-50 px-6 py-5 flex items-center justify-between">
        <div onClick={() => navigate("landing")} style={{ cursor: "pointer" }}>
          <WoodLogo size={32} textSize={15} />
        </div>
        <button className="wood-btn wood-btn-ghost" onClick={() => navigate("landing")}>
          <Icon name="chevron-left" size={14} />
          Voltar ao site
        </button>
      </div>

      {/* Split */}
      <div className="grid w-full relative login-split" style={{ zIndex: 1, gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)" }}>
        <style>{`@media (max-width: 1100px) { .login-split { grid-template-columns: minmax(0,1fr) !important; } }`}</style>
        {/* Left — Form */}
        <div className="flex items-center justify-center p-8" style={{ minHeight: "100vh", paddingTop: 100 }}>
          <div className="w-full max-w-md slide-up">
            <div className="text-xs uppercase tracking-widest text-amber mb-4" style={{ fontWeight: 600 }}>ACESSO À PLATAFORMA</div>
            <h1 className="text-4xl font-semibold tracking-tighter mb-3">
              Bem-vindo de volta.
            </h1>
            <p className="text-3 text-md mb-8">
              Acesse sua marcenaria. Operação organizada, equipe alinhada, cliente surpreso.
            </p>

            <form onSubmit={submit}>
              <div className="mb-4">
                <label className="wood-label">Email corporativo</label>
                <input
                  type="email"
                  className="wood-input"
                  placeholder="voce@marcenaria.com.br"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  autoComplete="email"
                  required
                />
              </div>

              <div className="mb-2">
                <div className="flex items-center justify-between mb-1.5">
                  <label className="wood-label" style={{ marginBottom: 0 }}>Senha</label>
                  <a href="#" className="text-xs text-amber" style={{ fontWeight: 500 }}>Esqueci a senha</a>
                </div>
                <div className="relative">
                  <input
                    type={showPwd ? "text" : "password"}
                    className="wood-input"
                    placeholder="••••••••••••"
                    value={pwd}
                    onChange={(e) => setPwd(e.target.value)}
                    autoComplete="current-password"
                    style={{ paddingRight: 44 }}
                  />
                  <button
                    type="button"
                    className="wood-btn wood-btn-ghost wood-btn-icon-sm"
                    onClick={() => setShowPwd(!showPwd)}
                    style={{ position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)" }}
                    aria-label="Mostrar/ocultar senha"
                  >
                    <Icon name="eye" size={14} />
                  </button>
                </div>
              </div>

              <label className="flex items-center gap-2 mt-5 mb-6 cursor-pointer">
                <input type="checkbox" defaultChecked style={{ accentColor: "var(--amber)", width: 14, height: 14 }} />
                <span className="text-sm text-3">Manter sessão neste dispositivo por 30 dias</span>
              </label>

              <button
                type="submit"
                className="wood-btn wood-btn-primary wood-btn-lg w-full"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <svg width="14" height="14" viewBox="0 0 24 24" style={{ animation: "spin 0.9s linear infinite" }}>
                      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" opacity="0.25" />
                      <path d="M12 2a10 10 0 0110 10" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" />
                    </svg>
                    Entrando…
                  </>
                ) : (
                  <>Acessar Wood OS<Icon name="arrow-right" size={14} /></>
                )}
              </button>

              <div className="relative my-6 text-center">
                <div className="wood-divider absolute left-0 right-0 top-1/2" />
                <span className="relative px-3 text-xs uppercase tracking-widest text-4" style={{ background: "var(--wood-bg)", fontWeight: 600 }}>OU</span>
              </div>

              <div className="grid grid-cols-2 gap-2">
                <button type="button" className="wood-btn wood-btn-secondary">
                  <GoogleIcon /> Google
                </button>
                <button type="button" className="wood-btn wood-btn-secondary">
                  <Icon name="key" size={14} /> SSO empresa
                </button>
              </div>

              <p className="text-center text-sm text-3 mt-8">
                Ainda não tem uma marcenaria no Wood OS? <a href="#" className="text-amber" style={{ fontWeight: 600 }}>Comece grátis</a>
              </p>
            </form>
          </div>
        </div>

        {/* Right — Visual */}
        <div className="md-hide relative overflow-hidden" style={{
          background: "linear-gradient(135deg, rgba(28,23,16,0.7), rgba(11,10,7,0.85))",
          borderLeft: "1px solid var(--wood-border)"
        }}>
          <LoginVisual />
        </div>
      </div>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
};

const GoogleIcon = () => (
  <svg width="14" height="14" viewBox="0 0 18 18">
    <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84c-.21 1.13-.84 2.09-1.79 2.73v2.27h2.9c1.7-1.57 2.69-3.87 2.69-6.64z"/>
    <path fill="#34A853" d="M9 18c2.43 0 4.46-.81 5.95-2.18l-2.9-2.27c-.81.55-1.84.87-3.05.87-2.35 0-4.34-1.59-5.05-3.72H.96v2.34A9 9 0 009 18z"/>
    <path fill="#FBBC05" d="M3.95 10.7a5.4 5.4 0 010-3.4V4.96H.96a9 9 0 000 8.08l2.99-2.34z"/>
    <path fill="#EA4335" d="M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A9 9 0 00.96 4.96L3.95 7.3C4.66 5.17 6.65 3.58 9 3.58z"/>
  </svg>
);

const LoginVisual = () => (
  <div className="absolute inset-0 flex items-center justify-center p-12">
    <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 30%, rgba(16, 185, 129,0.25), transparent 60%)" }} />

    <div className="relative max-w-md w-full">
      {/* Hero quote card */}
      <div className="wood-card wood-veneer p-8 mb-5">
        <div className="text-amber mb-4 font-display" style={{ fontSize: 36, lineHeight: 1 }}>"</div>
        <p className="text-xl tracking-tight text-balance mb-5" style={{ lineHeight: 1.35, fontWeight: 500 }}>
          Wood OS deu visibilidade pra obra que antes vivia em planilha. O time agora chega na hora certa com o material certo.
        </p>
        <div className="flex items-center gap-3 pt-5 border-t">
          <Avatar name="Hélio Camargo" size={40} />
          <div>
            <div className="text-sm font-semibold">Hélio Camargo</div>
            <div className="text-xs text-3">CEO · Olympus Movelaria</div>
          </div>
        </div>
      </div>

      {/* Floating stat cards */}
      <div className="grid grid-cols-2 gap-3">
        <div className="wood-card p-4">
          <div className="text-xs text-3 uppercase tracking-widest mb-2" style={{ fontWeight: 500 }}>Obras ativas</div>
          <div className="text-3xl font-semibold tracking-tighter wood-gradient-text">128</div>
          <div className="flex items-center gap-1 text-xs text-success mt-1">
            <Icon name="trend-up" size={11} /> +12 este mês
          </div>
        </div>
        <div className="wood-card p-4">
          <div className="text-xs text-3 uppercase tracking-widest mb-2" style={{ fontWeight: 500 }}>No prazo</div>
          <div className="text-3xl font-semibold tracking-tighter" style={{ color: "var(--success)" }}>94%</div>
          <div className="flex items-center gap-1 text-xs text-3 mt-1">
            <Icon name="check" size={11} className="text-success" /> média da plataforma
          </div>
        </div>
      </div>

      <div className="text-center mt-8">
        <div className="iflex items-center gap-2 px-3 py-1.5 rounded-full text-xs"
          style={{ background: "rgba(16, 185, 129,0.08)", border: "1px solid rgba(16, 185, 129,0.25)", color: "var(--amber-bright)", fontWeight: 600, letterSpacing: "0.04em" }}>
          <span className="wood-dot wood-dot-pulse" style={{ background: "var(--success)", color: "var(--success)" }} />
          SISTEMAS OPERACIONAIS · SP-1
        </div>
      </div>
    </div>
  </div>
);

window.Login = Login;