// Winkz Designs 2026, CLIENT PORTAL LOGIN
(function () {
  const { useState } = React;
  const { Icon, Reveal } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const PERKS = [
    ['LayoutDashboard', 'Live project board', 'Every milestone, deliverable and open question in one place, updated as we build.'],
    ['MessageSquare', 'Direct line to your team', 'Thread comments straight onto designs and pages. No email chains, no lost feedback.'],
    ['FileText', 'Invoices & contracts', 'Scope, agreements and payment history, always downloadable.'],
    ['Activity', 'Site health & analytics', 'Uptime, Core Web Vitals and traffic for the sites we maintain.'],
  ];

  function Field({ label, type, name, autoComplete, placeholder, trailing }) {
    const [focus, setFocus] = useState(false);
    return (
      <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.11em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
          {trailing}
        </span>
        <input
          type={type} name={name} autoComplete={autoComplete} placeholder={placeholder} required
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            width: '100%', padding: '14px 16px', borderRadius: 12, fontFamily: 'var(--font-body)', fontSize: 15,
            background: focus ? 'rgba(255,255,255,0.055)' : 'rgba(255,255,255,0.03)', color: 'var(--text-primary)', outline: 'none',
            border: '1px solid ' + (focus ? 'rgba(121,186,255,0.7)' : 'rgba(255,255,255,0.12)'),
            boxShadow: focus ? '0 0 0 3px rgba(121,186,255,0.16)' : 'none',
            transition: 'border-color .22s ease, box-shadow .22s ease, background .22s ease',
          }}
        />
      </label>
    );
  }

  function Toggle({ on, onChange, children }) {
    return (
      <button type="button" onClick={() => onChange(!on)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
        <span style={{
          position: 'relative', width: 38, height: 22, borderRadius: 999, flexShrink: 0,
          background: on ? GRAD : 'rgba(255,255,255,0.1)',
          boxShadow: on ? '0 0 16px -4px rgba(242,59,254,0.7)' : 'inset 0 0 0 1px rgba(255,255,255,0.14)',
          transition: 'background .28s ease, box-shadow .28s ease',
        }}>
          <span style={{
            position: 'absolute', top: 3, left: on ? 19 : 3, width: 16, height: 16, borderRadius: 999,
            background: on ? '#0C0C10' : '#F7F7FA',
            transition: 'left .28s cubic-bezier(.22,1,.36,1), background .28s ease',
          }} />
        </span>
        <span style={{ fontSize: 13.5, color: 'var(--text-secondary)' }}>{children}</span>
      </button>
    );
  }

  function CardShell({ children }) {
    return (
      <div style={{
        position: 'relative', borderRadius: 24, padding: 2,
        background: 'linear-gradient(160deg, rgba(242,59,254,0.55), rgba(121,186,255,0.22) 45%, rgba(45,227,234,0.45))',
        boxShadow: '0 40px 90px -40px rgba(0,0,0,0.95), 0 0 60px -30px rgba(242,59,254,0.5)',
      }}>
        <div style={{ borderRadius: 22, background: 'rgba(13,13,17,0.94)', backdropFilter: 'blur(10px)', padding: 'clamp(26px,3.4vw,38px)' }}>
          {children}
        </div>
      </div>
    );
  }

  function CardHead({ icon, title, kicker }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 26 }}>
        <span style={{ width: 42, height: 42, borderRadius: 13, background: GRAD, display: 'grid', placeItems: 'center', flexShrink: 0, boxShadow: '0 12px 26px -12px rgba(242,59,254,0.8)' }}>
          <Icon n={icon} s={20} color="#08080A" strokeWidth={2.4} />
        </span>
        <span style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.025em' }}>{title}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{kicker}</span>
        </span>
      </div>
    );
  }

  const backLink = (label, onClick) => (
    <button type="button" onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'none', border: 'none', padding: 0, marginTop: 22, cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-secondary)' }}>
      <Icon n="ArrowLeft" s={14} color="currentColor" /> {label}
    </button>
  );

  function LoginCard({ onNavigate }) {
    const [view, setView] = useState('signin');   // signin | invite | forgot | sent
    const [busy, setBusy] = useState(false);
    const [remember, setRemember] = useState(true);
    const [resetTo, setResetTo] = useState('');

    const submitSignIn = (e) => {
      e.preventDefault();
      setBusy(true);
      setTimeout(() => { setBusy(false); setView('invite'); }, 1000);
    };
    const submitReset = (e) => {
      e.preventDefault();
      setResetTo(new FormData(e.target).get('email') || 'your inbox');
      setBusy(true);
      setTimeout(() => { setBusy(false); setView('sent'); }, 1000);
    };

    if (view === 'invite') return (
      <CardShell>
        <CardHead icon="MailCheck" title="Access is invite-only" kicker="Winkz Portal" />
        <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.62, margin: 0 }}>
          If you're an active client, your account manager sends credentials when your project kicks off. Can't find them? Email <a href="mailto:design@winkzdesigns.com" style={{ color: 'var(--winkz-cyan)' }}>design@winkzdesigns.com</a> and we'll resend in minutes.
        </p>
        {backLink('Back to sign in', () => setView('signin'))}
      </CardShell>
    );

    if (view === 'sent') return (
      <CardShell>
        <CardHead icon="Send" title="Reset link on its way" kicker="Check your inbox" />
        <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.62, margin: 0 }}>
          If <span style={{ color: 'var(--text-primary)' }}>{resetTo}</span> matches a portal account, a reset link is in your inbox within a minute or two. The link expires after 30 minutes for security.
        </p>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 20, padding: '13px 15px', borderRadius: 13, background: 'rgba(121,186,255,0.07)', border: '1px solid rgba(121,186,255,0.2)' }}>
          <Icon n="Info" s={16} color="#79BAFF" />
          <span style={{ fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.55 }}>
            Nothing after five minutes? Check spam, then email <a href="mailto:design@winkzdesigns.com" style={{ color: 'var(--winkz-cyan)' }}>design@winkzdesigns.com</a> and we'll reset it by hand.
          </span>
        </div>
        {backLink('Back to sign in', () => setView('signin'))}
      </CardShell>
    );

    if (view === 'forgot') return (
      <CardShell>
        <CardHead icon="KeyRound" title="Reset your password" kicker="Winkz Portal" />
        <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '0 0 22px' }}>
          Enter the email on your portal account and we'll send a secure link to set a new password.
        </p>
        <form onSubmit={submitReset} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Field label="Work email" type="email" name="email" autoComplete="email" placeholder="you@company.com" />
          <button type="submit" className="wk-cta" disabled={busy} style={{ width: '100%', opacity: busy ? 0.75 : 1 }}>
            {busy ? 'Sending…' : 'Send reset link'}
            <span className="wk-chip"><Icon n={busy ? 'Loader' : 'ArrowRight'} s={14} color="#fff" strokeWidth={2.4} /></span>
          </button>
        </form>
        {backLink('Back to sign in', () => setView('signin'))}
      </CardShell>
    );

    return (
      <CardShell>
        <CardHead icon="Lock" title="Client sign in" kicker="Winkz Portal" />
        <form onSubmit={submitSignIn} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Field label="Work email" type="email" name="email" autoComplete="email" placeholder="you@company.com" />
          <Field
            label="Password" type="password" name="password" autoComplete="current-password" placeholder="Your password"
            trailing={<button type="button" onClick={() => setView('forgot')} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--winkz-blue)' }}>Forgot?</button>}
          />
          <Toggle on={remember} onChange={setRemember}>Keep me signed in on this device</Toggle>
          <button type="submit" className="wk-cta" disabled={busy} style={{ width: '100%', marginTop: 2, opacity: busy ? 0.75 : 1 }}>
            {busy ? 'Checking…' : 'Sign in to portal'}
            <span className="wk-chip"><Icon n={busy ? 'Loader' : 'ArrowRight'} s={14} color="#fff" strokeWidth={2.4} /></span>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0' }}>
            <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.1)' }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Not a client yet</span>
            <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.1)' }} />
          </div>
          <button type="button" onClick={() => onNavigate('contact')} className="wk-ghost" style={{ width: '100%', padding: '15px 26px' }}>
            Start your project <Icon n="ArrowUpRight" s={16} color="#2DE3EA" />
          </button>
        </form>
      </CardShell>
    );
  }

  function LoginPage({ onNavigate }) {
    return (
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {window.WinkzStreams && <window.WinkzStreams style={{ top: '-14%', height: '80%' }} opacity={0.3} />}
        <div className="wrap" style={{ position: 'relative', paddingTop: 'clamp(56px,8vh,96px)', paddingBottom: 'clamp(70px,9vh,120px)' }}>
          <div className="login-split" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
            <Reveal>
              <div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 14px 7px 11px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.035)', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
                  <span style={{ width: 7, height: 7, borderRadius: 999, background: '#2DE3A0', boxShadow: '0 0 10px #2DE3A0' }} />
                  Client portal
                </span>
                <h1 style={{ fontSize: 'clamp(34px,5vw,58px)', lineHeight: 1.03, margin: '22px 0 0' }}>
                  Your project,<br />
                  <span style={{ background: GRAD, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>in plain sight.</span>
                </h1>
                <p style={{ fontSize: 17.5, color: 'var(--text-secondary)', lineHeight: 1.62, maxWidth: 460, margin: '20px 0 0' }}>
                  Sign in to track your build, review work, leave feedback and handle the paperwork, without chasing anyone for an update.
                </p>
                <div style={{ display: 'grid', gap: 18, marginTop: 36, maxWidth: 470 }}>
                  {PERKS.map(([icon, title, body]) => (
                    <div key={title} style={{ display: 'flex', gap: 14 }}>
                      <span style={{ width: 36, height: 36, borderRadius: 11, flexShrink: 0, display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)' }}>
                        <Icon n={icon} s={17} color="#79BAFF" strokeWidth={2.1} />
                      </span>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 15.5 }}>{title}</div>
                        <div style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.55, marginTop: 3 }}>{body}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <LoginCard onNavigate={onNavigate} />
            </Reveal>
          </div>
          <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 44, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon n="ShieldCheck" s={15} color="currentColor" /> Sessions are encrypted end to end. We never store card details in the portal.
          </p>
        </div>
        <style>{`@media (max-width:900px){.login-split{grid-template-columns:1fr!important}}`}</style>
      </div>
    );
  }

  window.LoginPage = LoginPage;
})();