/* global React */
const { useState: useStateC } = React;

/* ============ INLOGGEN ============ */
const PageInloggen = () => {
  const [email, setEmail] = useStateC('');
  const [pw, setPw] = useStateC('');
  const [submitted, setSubmitted] = useStateC(false);
  const [remember, setRemember] = useStateC(true);

  return (
    <div style={{ minHeight: 'calc(100vh - 74px)', display: 'grid', gridTemplateColumns: '1fr 1.1fr' }}>
      {/* Left — form */}
      <div style={{ background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px' }}>
        <div style={{ width: '100%', maxWidth: 380 }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 14 }}>Welkom terug</div>
          <h1 className="display" style={{ fontSize: 34, margin: '0 0 8px' }}>Inloggen</h1>
          <p className="muted" style={{ fontSize: 14, marginBottom: 28 }}>Log in op je KozijnSuite-omgeving.</p>

          {submitted ? (
            <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 12, padding: 22, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--gold)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Ic.check/>
              </div>
              <div>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 15, marginBottom: 4 }}>Aanmelding gelukt</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.55 }}>Je wordt doorgestuurd naar je dashboard…</div>
              </div>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'grid', gap: 14 }}>
              <FormField label="E-mailadres">
                <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="jij@kozijnbedrijf.nl" required className="input"/>
              </FormField>
              <FormField label="Wachtwoord" right={<a href="#" style={{ fontSize: 12, color: 'var(--gold)' }}>Vergeten?</a>}>
                <input type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••" required className="input"/>
              </FormField>

              <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--text-muted)', cursor: 'pointer' }}>
                <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} style={{ accentColor: 'var(--gold)' }}/>
                Ingelogd blijven op dit apparaat
              </label>

              <button type="submit" className="btn btn-primary" style={{ justifyContent: 'center', padding: '14px 20px', marginTop: 8 }}>
                Inloggen <Ic.arrow/>
              </button>

              <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-subtle)', margin: '6px 0', position: 'relative' }}>
                <span style={{ background: '#fff', padding: '0 10px', position: 'relative', zIndex: 1 }}>of</span>
                <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', borderTop: '1px solid var(--line)' }}/>
              </div>

              <button type="button" style={{ border: '1px solid var(--line)', background: '#fff', padding: '12px 16px', borderRadius: 10, fontSize: 13.5, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, color: 'var(--ink)' }}>
                <span style={{ width: 16, height: 16, background: 'conic-gradient(from 0deg, #B88A3B, #0F2B22, #7A846A, #B88A3B)', borderRadius: 3 }}/>
                Inloggen met SSO
              </button>
            </form>
          )}

          <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--text-muted)' }}>
            Nog geen account? <a href="Demo.html" style={{ color: 'var(--gold)', fontWeight: 500 }}>Vraag een demo aan →</a>
          </div>
        </div>
      </div>

      {/* Right — branded panel with screenshot peek */}
      <div style={{ background: 'linear-gradient(135deg, #0F2B22, #163A2E 60%, #1E4A3A)', color: '#F7F5F2', padding: 60, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(232,217,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,217,184,0.04) 1px, transparent 1px)', backgroundSize: '48px 48px', maskImage: 'radial-gradient(circle at 30% 40%, black, transparent 80%)' }}/>
        <div style={{ position: 'relative', maxWidth: 420 }}>
          <Logo variant="dark" size={28}/>
          <h2 className="display" style={{ color: '#F7F5F2', fontSize: 36, lineHeight: 1.1, margin: '40px 0 16px' }}>
            Van woonkamer-offerte<br/><span style={{ color: '#B88A3B', fontStyle: 'italic' }}>tot oplevering.</span>
          </h2>
          <p style={{ fontSize: 14.5, color: '#B8C9BF', lineHeight: 1.6 }}>
            Alles in één strak systeem. Log in om je pipeline, klanten en planning te openen.
          </p>
        </div>

        <div style={{ position: 'relative', marginTop: 40, transform: 'translateX(40px)' }}>
          <div style={{ background: '#0F2B22', borderRadius: 10, padding: 7, border: '1px solid #1E4A3A', aspectRatio: '16/10', boxShadow: '0 30px 60px -20px rgba(0,0,0,0.45)' }}>
            <div style={{ width: '100%', height: '100%', borderRadius: 5, overflow: 'hidden' }}>
              <ScreenDashboard/>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', fontSize: 12, color: '#8AA093', display: 'flex', gap: 18, flexWrap: 'wrap' }}>
          <span>© 2026 KozijnSuite</span>
          <a href="#" style={{ color: '#8AA093' }}>Privacy</a>
          <a href="#" style={{ color: '#8AA093' }}>Voorwaarden</a>
          <a href="#" style={{ color: '#8AA093' }}>Status</a>
        </div>
      </div>
    </div>
  );
};

const FormField = ({ label, right, children }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
      <label style={{ fontSize: 12.5, color: 'var(--ink)', fontWeight: 500 }}>{label}</label>
      {right}
    </div>
    {children}
  </div>
);

/* ============ DEMO AANVRAGEN ============ */
const PageDemo = () => {
  const [step, setStep] = useStateC(1);
  const [data, setData] = useStateC({
    rol: '',
    grootte: '',
    voornaam: '',
    achternaam: '',
    email: '',
    telefoon: '',
    bedrijf: '',
    interesse: [],
    bericht: '',
  });

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const rollen = ['Directie / Eigenaar','Commercieel manager','Verkoper','Planner / Werkvoorbereider','Overig'];
  const groottes = ['1 – 5 medewerkers','5 – 20 medewerkers','20 – 50 medewerkers','50 – 100 medewerkers','100+ medewerkers'];
  const interesses = ['KozijnLAB configurator','CRM & verkoopdossier','Offertes & akkoord','Orderdashboard','Klantportaal','Planning & montage'];

  const canNext = (step === 1 && data.rol && data.grootte)
    || (step === 2 && data.voornaam && data.achternaam && data.email && data.bedrijf)
    || step === 3;

  return (
    <div style={{ background: 'var(--ivory)', minHeight: 'calc(100vh - 74px)' }}>
      <section style={{ padding: '60px 0 30px' }}>
        <div className="shell" style={{ maxWidth: 900 }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 16 }}>Plan een afspraak</div>
          <h1 className="display" style={{ fontSize: 'clamp(38px, 4.6vw, 56px)', margin: 0, lineHeight: 1 }}>
            30 minuten.<br/><span style={{ color: 'var(--gold)' }}>Volledig toegesneden op jouw bedrijf.</span>
          </h1>
          <p className="muted" style={{ fontSize: 15.5, marginTop: 18, maxWidth: 560, lineHeight: 1.6 }}>
            We laten je in een persoonlijk gesprek zien hoe KozijnSuite past bij jullie verkoopproces, productsoort en planning.
          </p>
        </div>
      </section>

      <section style={{ padding: '20px 0 100px' }}>
        <div className="shell" style={{ maxWidth: 900, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40 }}>
          <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 18, padding: 36, boxShadow: 'var(--shadow-sm)' }}>
            {/* Steps indicator */}
            <div style={{ display: 'flex', gap: 4, marginBottom: 28 }}>
              {[1,2,3,4].map(s => (
                <div key={s} style={{ flex: 1, height: 3, borderRadius: 2, background: s <= step ? 'var(--gold)' : 'var(--line)', transition: 'background 200ms' }}/>
              ))}
            </div>

            <div className="mono" style={{ fontSize: 11.5, color: 'var(--gold)', letterSpacing: '0.15em' }}>STAP {step} / 4</div>

            {step === 1 && (<>
              <h2 className="display" style={{ fontSize: 24, margin: '10px 0 22px' }}>Vertel ons iets over jou</h2>
              <FormField label="Wat is je rol?">
                <RadioGrid options={rollen} value={data.rol} onChange={v => update('rol', v)}/>
              </FormField>
              <div style={{ height: 20 }}/>
              <FormField label="Hoe groot is jullie bedrijf?">
                <RadioGrid options={groottes} value={data.grootte} onChange={v => update('grootte', v)}/>
              </FormField>
            </>)}

            {step === 2 && (<>
              <h2 className="display" style={{ fontSize: 24, margin: '10px 0 22px' }}>Contactgegevens</h2>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <FormField label="Voornaam">
                  <input value={data.voornaam} onChange={e => update('voornaam', e.target.value)} className="input"/>
                </FormField>
                <FormField label="Achternaam">
                  <input value={data.achternaam} onChange={e => update('achternaam', e.target.value)} className="input"/>
                </FormField>
              </div>
              <div style={{ height: 14 }}/>
              <FormField label="E-mailadres">
                <input type="email" value={data.email} onChange={e => update('email', e.target.value)} placeholder="jij@bedrijf.nl" className="input"/>
              </FormField>
              <div style={{ height: 14 }}/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <FormField label="Telefoonnummer (optioneel)">
                  <input value={data.telefoon} onChange={e => update('telefoon', e.target.value)} className="input"/>
                </FormField>
                <FormField label="Bedrijfsnaam">
                  <input value={data.bedrijf} onChange={e => update('bedrijf', e.target.value)} className="input"/>
                </FormField>
              </div>
            </>)}

            {step === 3 && (<>
              <h2 className="display" style={{ fontSize: 24, margin: '10px 0 12px' }}>Waar zijn jullie vooral in geïnteresseerd?</h2>
              <p className="muted" style={{ fontSize: 13.5, marginBottom: 20 }}>Kies meerdere — wij stemmen het gesprek hier op af.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {interesses.map(x => (
                  <button key={x} type="button" onClick={() => toggle('interesse', x)} style={{
                    padding: '14px 16px', borderRadius: 10, fontSize: 13.5, fontWeight: 500, textAlign: 'left',
                    background: data.interesse.includes(x) ? 'rgba(184,138,59,0.1)' : '#fff',
                    border: '1px solid ' + (data.interesse.includes(x) ? 'var(--gold)' : 'var(--line)'),
                    color: data.interesse.includes(x) ? 'var(--gold)' : 'var(--ink)',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
                  }}>
                    {x}
                    {data.interesse.includes(x) && <Ic.check style={{ color: 'var(--gold)' }}/>}
                  </button>
                ))}
              </div>
              <div style={{ height: 18 }}/>
              <FormField label="Iets anders dat we moeten weten? (optioneel)">
                <textarea value={data.bericht} onChange={e => update('bericht', e.target.value)} rows={4} className="input" style={{ resize: 'vertical', fontFamily: 'Inter' }}/>
              </FormField>
            </>)}

            {step === 4 && (
              <div style={{ textAlign: 'center', padding: '20px 0' }}>
                <div style={{ width: 60, height: 60, borderRadius: 14, background: 'var(--gold)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px' }}>
                  <Ic.check style={{ width: 26, height: 26 }}/>
                </div>
                <h2 className="display" style={{ fontSize: 30, margin: '0 0 12px' }}>Bedankt, {data.voornaam || 'bedankt'}!</h2>
                <p className="muted" style={{ fontSize: 15, maxWidth: 420, margin: '0 auto 22px', lineHeight: 1.6 }}>
                  Een van onze productspecialisten neemt binnen 1 werkdag contact met je op om een afspraak in te plannen.
                </p>
                <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 12, padding: 20, textAlign: 'left', maxWidth: 420, margin: '0 auto' }}>
                  <div style={{ fontSize: 11.5, color: 'var(--text-subtle)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10, fontWeight: 500 }}>Wat nu?</div>
                  {[
                    ['Binnen 1 uur','Automatische bevestigingsmail'],
                    ['Binnen 1 werkdag','We plannen je afspraak in'],
                    ['Na het gesprek','Direct 14 dagen gratis proberen'],
                  ].map(([a, b]) => (
                    <div key={a} style={{ display: 'flex', gap: 14, padding: '8px 0', borderBottom: '1px dashed var(--line)' }}>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--gold)', width: 110 }}>{a}</div>
                      <div style={{ fontSize: 13, color: 'var(--ink)' }}>{b}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {step < 4 && (
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <button onClick={() => setStep(Math.max(1, step - 1))} disabled={step === 1} style={{
                  padding: '10px 16px', borderRadius: 8, fontSize: 13.5, fontWeight: 500,
                  background: 'transparent', color: step === 1 ? 'var(--text-subtle)' : 'var(--ink)',
                  border: '1px solid ' + (step === 1 ? 'var(--line)' : 'var(--ink)'),
                  cursor: step === 1 ? 'not-allowed' : 'pointer',
                }}>← Terug</button>
                <button onClick={() => canNext && setStep(step + 1)} disabled={!canNext} className="btn btn-primary btn-sm" style={{ opacity: canNext ? 1 : 0.4 }}>
                  {step === 3 ? 'Verstuur aanvraag' : 'Volgende'} <Ic.arrow/>
                </button>
              </div>
            )}
          </div>

          {/* Side rail */}
          <div style={{ padding: '10px 4px' }}>
            <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 16, marginBottom: 18 }}>Wat je krijgt</div>
            <div style={{ display: 'grid', gap: 14 }}>
              {[
                ['30 minuten afspraak','Afgestemd op jullie producten en proces'],
                ['Live in je eigen data','We zetten een sandbox op met jullie voorbeeld-orders'],
                ['14 dagen proef','Direct aan de slag — geen creditcard'],
                ['Persoonlijke onboarding','Een onboarding-specialist begeleidt jullie start'],
              ].map(([a, b]) => (
                <div key={a} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'rgba(184,138,59,0.14)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <Ic.check style={{ width: 11, height: 11 }}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--ink)' }}>{a}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2, lineHeight: 1.5 }}>{b}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 30, padding: 18, background: 'var(--ink)', borderRadius: 12, color: '#F7F5F2' }}>
              <div style={{ fontSize: 11.5, color: '#B88A3B', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 8 }}>Hulp nodig?</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.5 }}>Bel direct met Ruben (Sales)</div>
              <div className="mono" style={{ fontSize: 13, color: '#B88A3B', marginTop: 4 }}>053 — 123 45 67</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const RadioGrid = ({ options, value, onChange }) => (
  <div style={{ display: 'grid', gap: 8 }}>
    {options.map(o => (
      <button key={o} type="button" onClick={() => onChange(o)} style={{
        padding: '12px 16px', borderRadius: 10, fontSize: 13.5, fontWeight: 500, textAlign: 'left',
        background: value === o ? 'rgba(184,138,59,0.1)' : '#fff',
        border: '1px solid ' + (value === o ? 'var(--gold)' : 'var(--line)'),
        color: value === o ? 'var(--gold)' : 'var(--ink)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
      }}>
        {o}
        <span style={{
          width: 16, height: 16, borderRadius: '50%',
          border: '1.5px solid ' + (value === o ? 'var(--gold)' : 'var(--line)'),
          background: value === o ? 'var(--gold)' : 'transparent',
          boxShadow: value === o ? 'inset 0 0 0 3px #fff' : 'none',
        }}/>
      </button>
    ))}
  </div>
);

Object.assign(window, { PageInloggen, PageDemo, FormField, RadioGrid });