// login.jsx — Business Portal Login
const { useEffect, useState } = React;

function useScrollReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function LoginPage() {
  const [submitted, setSubmitted] = useState(false);

  return (
    <section style={{paddingTop:80,minHeight:'80vh',display:'flex',alignItems:'center'}}>
      <div className="wrap" style={{width:'100%'}}>
        <div style={{maxWidth:480,margin:'0 auto'}}>
          <div style={{textAlign:'center',marginBottom:32}}>
            <a href="index.html" className="brand" style={{justifyContent:'center',marginBottom:16,display:'flex'}}>
              <span className="brand-dot" aria-hidden="true"></span>
              <span>become<span style={{color:'var(--ink-3)',fontWeight:500,marginLeft:4}}>.promo</span></span>
            </a>
            <h1 style={{fontFamily:'var(--display)',fontSize:'clamp(28px,4vw,40px)',fontWeight:700,letterSpacing:'-.02em',margin:'16px 0 8px',lineHeight:1.1}}>Business Portal</h1>
            <p style={{color:'var(--ink-2)',fontSize:15,margin:0}}>Prijavi se da pristupiš svojoj kampanji.</p>
          </div>

          <div className="form-box reveal" style={{border:'1.5px solid var(--neon)',boxShadow:'0 0 0 1px rgba(34,240,122,.12), 0 0 60px -20px rgba(34,240,122,.4)'}}>
            {submitted ? (
              <div style={{padding:'24px 0',textAlign:'center'}}>
                <div style={{fontSize:32,marginBottom:12}}>✓</div>
                <p style={{color:'var(--neon)',fontFamily:'var(--mono)',fontSize:13,letterSpacing:'.1em',textTransform:'uppercase',margin:0}}>Prijavljivanje...</p>
                <p style={{color:'var(--ink-2)',marginTop:8,fontSize:14}}>Ovo je demo — Business Portal nije još javno dostupan.</p>
                <a className="btn btn-outline-neon" href="pilot.html" style={{marginTop:20,display:'inline-flex'}}>Pokrenuti pilot za 500 EUR <span className="arr">↗</span></a>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
                <div className="field">
                  <label htmlFor="email-login">Email</label>
                  <input id="email-login" type="email" placeholder="brand@tvrtka.com" required />
                </div>
                <div className="field">
                  <label htmlFor="pass-login">Lozinka</label>
                  <input id="pass-login" type="password" placeholder="••••••••" required />
                </div>
                <button className="btn btn-primary" type="submit" style={{width:'100%',justifyContent:'center',height:52,marginTop:8}}>
                  Prijavi se <span className="arr">↗</span>
                </button>
                <span className="form-fine" style={{textAlign:'center',display:'block',marginTop:12}}>
                  Nemaš account? <a href="pilot.html" style={{color:'var(--neon)'}}>Pokreni 500 EUR pilot</a> da dobiješ pristup.
                </span>
              </form>
            )}
          </div>

          <p style={{textAlign:'center',marginTop:24,color:'var(--ink-3)',fontSize:13,fontFamily:'var(--mono)',letterSpacing:'.08em'}}>
            Nisi brand? <a href="ambasadori.html" style={{color:'var(--neon)'}}>Idi na Ambasadori</a>
          </p>
        </div>
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="login.html" />
      <LoginPage />
      <SiteFooter />
      <MobCTA isB2BPage={true} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);