function Page() {
  const [tab, setTab] = React.useState('login'); // 'login' | 'register'
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [success, setSuccess] = React.useState(false);
  const [forgotPassword, setForgotPassword] = React.useState(false);
  const [forgotSent, setForgotSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    setTimeout(() => {
      setLoading(false);
      if (tab === 'login') {
        setError('Incorrect username or password. Please try again or contact support.');
      } else {
        setSuccess(true);
      }
    }, 1200);
  };

  const handleForgotSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const form = e.target;
    const data = new FormData(form);
    data.append("source", "password_reset_lead");

    try {
      await fetch("https://formspree.io/f/xpqkvrpq", {
        method: "POST",
        body: data,
        headers: { 'Accept': 'application/json' }
      });
      setForgotSent(true);
    } catch (err) {
      setError("Failed to process request.");
    } finally {
      setLoading(false);
    }
  };

  const products = [
    { num: "01", name: "DSP", desc: "PROGRAMMATIC MEDIA", v: "v4.1" },
    { num: "02", name: "Affiliate", desc: "PERFORMANCE PARTNERS", v: "v4.2" },
    { num: "03", name: "Retarget", desc: "CROSS-DEVICE CLOUD", v: "v4.3" },
    { num: "04", name: "Measure", desc: "MULTI-TOUCH ATTRIBUTION", v: "v4.4" },
    { num: "05", name: "Reporting", desc: "REAL-TIME DASHBOARDS", v: "v4.5" },
    { num: "06", name: "Fraud", desc: "PRE-BID IVT SHIELD", v: "v4.6" }
  ];

  return (
    <>
      <style>{`
        body { margin: 0; background: var(--paper); }
        .split-layout { display: flex; min-height: 100vh; }
        .split-left { 
          flex: 1; 
          background: var(--ink); 
          color: var(--paper); 
          padding: clamp(40px, 6vw, 80px); 
          display: flex; 
          flex-direction: column; 
          justify-content: space-between; 
          position: relative; 
          overflow: hidden; 
        }
        .split-right { 
          flex: 1; 
          display: flex; 
          align-items: center; 
          justify-content: center; 
          padding: 40px; 
          background: var(--paper);
        }
        .prod-grid { 
          display: grid; 
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
          gap: 16px; 
          margin-top: 48px; 
        }
        .prod-card { 
          border: 1px solid rgba(255,255,255,0.1); 
          border-radius: 12px; 
          padding: 20px; 
          background: rgba(255,255,255,0.02); 
          transition: all 0.3s ease;
        }
        .prod-card:hover {
          background: rgba(255,255,255,0.05);
          border-color: rgba(255,255,255,0.2);
        }
        .auth-panel {
          width: 100%;
          max-width: 440px;
        }
        @media (max-width: 960px) {
          .split-layout { flex-direction: column; }
          .split-left { min-height: auto; padding: 40px 24px; }
          .split-right { padding: 60px 24px; }
          .prod-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
          .prod-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="split-layout">
        <div className="split-left">
          {/* Subtle background element */}
          <div style={{position:"absolute", top:"-20%", right:"-10%", width:"70%", height:"70%", background:"radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%)", pointerEvents:"none"}}></div>
          
          <div>
            <a href="../" style={{textDecoration:"none", color:"var(--paper)", display:"inline-block"}}>
              <img src="../uploads/auctera_logo_light.png" alt="Auctera" style={{ height: 28, width: "auto" }} onError={(e) => {
                e.target.style.display = 'none';
                e.target.nextSibling.style.display = 'block';
              }} />
              <div style={{display:"none", fontFamily:"var(--font-sans)", fontWeight:600, fontSize:22, letterSpacing:"-0.02em"}}>
                auctera<span style={{fontWeight:300}}>™</span>
              </div>
            </a>
            
            <div style={{marginTop: "12vh", position:"relative", zIndex:1}}>
              <div className="mono" style={{color:"var(--ochre)", marginBottom:16}}>ONE PLATFORM · SIX PRODUCTS</div>
              <h1 className="display-1" style={{color: "var(--paper)", fontSize:"clamp(36px, 4vw, 56px)", lineHeight:1.1, margin:0}}>
                Auctera <span className="h-italic" style={{color:"var(--ochre-deep)"}}>D-REVX</span><br/>data layer.
              </h1>
              <p style={{marginTop:24, fontSize:17, color:"rgba(246,242,236,0.6)", maxWidth:"50ch", lineHeight:1.6}}>
                Unified attribution, cross-channel frequency capping, and global exclusions powered by a single shared ledger.
              </p>
            </div>

            <div className="prod-grid">
              {products.map(p => (
                <div key={p.num} className="prod-card">
                  <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
                    <div className="mono" style={{fontSize:10, color:"rgba(246,242,236,0.6)"}}>PRODUCT · {p.num}</div>
                    <div className="mono" style={{fontSize:10, color:"var(--ochre)", display:"flex", alignItems:"center"}}>
                      <span style={{display:"inline-block", width:6, height:6, borderRadius:"50%", background:"var(--ochre)", marginRight:6}}></span>
                      SYNCED
                    </div>
                  </div>
                  <div style={{fontFamily:"var(--font-display)", fontSize:28, marginBottom:4, color:"var(--paper)"}}>{p.name}</div>
                  <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}>
                    <div className="mono" style={{fontSize:10, color:"rgba(246,242,236,0.6)", maxWidth:"120px", lineHeight:1.4}}>{p.desc}</div>
                    <div className="mono" style={{fontSize:10, color:"rgba(246,242,236,0.2)"}}>{p.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{marginTop: "8vh", display:"flex", justifyContent:"space-between", alignItems:"center", borderTop:"1px solid rgba(255,255,255,0.1)", paddingTop:32, position:"relative", zIndex:1}}>
            <div className="mono" style={{color:"var(--muted)", fontSize:11, letterSpacing:"0.15em"}}>ONE LOGIN · ONE LEDGER · ONE TRUTH</div>
            <div className="mono" style={{color:"var(--muted)", fontSize:11, letterSpacing:"0.1em"}}>SHARED DATA LAYER</div>
          </div>
        </div>

        <div className="split-right">
          <div className="auth-panel">
            {success ? (
              <div className="auth-success" style={{textAlign:"left"}}>
                <div className="mono" style={{color: "var(--ochre)", marginBottom: 20}}>REGISTRATION RECEIVED</div>
                <h3 style={{fontFamily:"var(--font-display)", fontSize:32, marginBottom:16}}>Thank you for reaching out.</h3>
                <p style={{color:"var(--muted)", lineHeight:1.6}}>Our infrastructure team is reviewing your application. We will get back to you shortly to initialize your D-REVX terminal connectivity.</p>
                <div style={{marginTop: 32}}>
                  <a href="../" className="btn btn-ghost" style={{paddingLeft:0}}>Return home <Arrow/></a>
                </div>
              </div>
            ) : forgotPassword ? (
              <div style={{maxWidth: 400, width: "100%"}}>
                <div style={{marginBottom: 40}}>
                  <h2 style={{fontFamily:"var(--font-display)", fontSize:40, marginBottom:12, lineHeight:1}}>Reset Password</h2>
                  <p style={{color:"var(--muted)", fontSize:16}}>Enter your work email and we'll send you a recovery link.</p>
                </div>

                {forgotSent ? (
                  <div style={{padding:"24px", background:"var(--paper-2)", border:"1px solid var(--line-strong)", borderRadius:12, textAlign:"center"}}>
                    <div style={{color:"var(--ochre)", fontSize:24, marginBottom:16}}>✓</div>
                    <h4 style={{margin:"0 0 8px"}}>Check your inbox</h4>
                    <p style={{color:"var(--muted)", fontSize:14, margin:0}}>If an account exists for that email, a password reset link has been sent.</p>
                    <button type="button" className="btn btn-ghost" style={{marginTop:24}} onClick={() => {setForgotPassword(false); setForgotSent(false);}}>Return to login</button>
                  </div>
                ) : (
                  <form onSubmit={handleForgotSubmit}>
                    {error && <div className="auth-error">{error}</div>}
                    <div className="form-group">
                      <label className="form-label">Work Email</label>
                      <input type="email" name="email" className="form-input" placeholder="name@company.com" required />
                    </div>
                    <button type="submit" className="btn btn-lg" style={{width: "100%", marginTop: 24, justifyContent:"center", background:"var(--ink)", color:"var(--paper)"}} disabled={loading}>
                      {loading ? 'Sending...' : 'Send Recovery Link'} <Arrow />
                    </button>
                    <div style={{marginTop: 32, textAlign: "center"}}>
                      <button type="button" onClick={() => setForgotPassword(false)} className="btn btn-ghost" style={{fontSize: 13}}>Back to login</button>
                    </div>
                  </form>
                )}
              </div>
            ) : (
              <div style={{maxWidth: 400, width: "100%"}}>
                <div style={{marginBottom: 40}}>
                  <h2 style={{fontFamily:"var(--font-display)", fontSize:40, marginBottom:12, lineHeight:1}}>Welcome back.</h2>
                  <p style={{color:"var(--muted)", fontSize:16}}>Sign in to access the D-REVX terminal.</p>
                </div>

                <div className="auth-tabs">
                  <div className={`auth-tab ${tab === 'login' ? 'active' : ''}`} onClick={() => {setTab('login'); setError('');}}>Login</div>
                  <div className={`auth-tab ${tab === 'register' ? 'active' : ''}`} onClick={() => {setTab('register'); setError('');}}>Register</div>
                </div>

                <form onSubmit={handleSubmit}>
                  {error && <div className="auth-error">{error}</div>}
                  
                  {tab === 'register' && (
                    <div className="form-group">
                      <label className="form-label">Company Name</label>
                      <input type="text" className="form-input" placeholder="e.g. Apex Media" required />
                    </div>
                  )}

                  <div className="form-group">
                    <label className="form-label">Work Email</label>
                    <input type="email" className="form-input" placeholder="name@company.com" required />
                  </div>

                  <div className="form-group">
                    <label className="form-label">Password</label>
                    <input type="password" className="form-input" placeholder="••••••••" required />
                  </div>

                  <button type="submit" className="btn btn-lg" style={{width: "100%", marginTop: 24, justifyContent:"center", background:"var(--ink)", color:"var(--paper)"}} disabled={loading}>
                    {loading ? 'Authenticating...' : (tab === 'login' ? 'Sign In' : 'Request Access')} <Arrow />
                  </button>
                </form>

                <div style={{marginTop: 32, textAlign: "center"}}>
                  <button type="button" onClick={() => setForgotPassword(true)} className="mono" style={{background: "none", border: "none", cursor: "pointer", fontSize: 10, color: "var(--muted-2)", textDecoration: "none", letterSpacing:"0.1em"}}>FORGOT YOUR PASSWORD?</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);