/* global React */
/* ============ 2. VERKOOPDOSSIER ============ */
const ScreenDossier = () => {
  const timeline = [
    { t: 'Ma 21 apr', e: 'Lead aangemaakt via website', by: 'Systeem', done: true },
    { t: 'Di 22 apr', e: 'Eerste gesprek — woonkamer, 14:00', by: 'Mark de Vries', done: true },
    { t: 'Wo 23 apr', e: 'Opmeting ingepland', by: 'Kees Bosman', done: true },
    { t: 'Do 24 apr', e: 'Offerte concept klaar in KozijnLAB', by: 'Mark de Vries', done: true },
    { t: 'Vr 25 apr', e: 'Offerte verstuurd naar klant', by: 'Systeem', done: false, active: true },
    { t: '—', e: 'Wachten op akkoord klant', by: '', done: false },
  ];
  const elements = [
    { code: 'K-01', type: 'Draai-kiep kozijn', maat: '1200 × 1800', glas: 'HR++', prijs: '€ 1.240' },
    { code: 'K-02', type: 'Vast kozijn', maat: '800 × 1800', glas: 'HR+++', prijs: '€ 780' },
    { code: 'K-03', type: 'Schuifpui 3-delig', maat: '3600 × 2400', glas: 'HR+++', prijs: '€ 4.820' },
    { code: 'D-01', type: 'Voordeur massief', maat: '1000 × 2300', glas: '—', prijs: '€ 2.180' },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', background: '#FBFAF7' }}>
      <DashSidebar active="Verkoopdossier" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <DashTopbar
          title="Fam. Jansen — Verbouwing Enschede"
          sub="Dossier #2026-0247 · Aangemaakt 21 apr · Toegewezen aan Mark de Vries"
          actions={<>
            <span style={{ fontSize: 10.5, padding: '5px 10px', borderRadius: 999, background: 'rgba(184,138,59,0.12)', color: '#8E6624', fontWeight: 500 }}>Offerte verstuurd</span>
            <button style={{ border: '1px solid #EEEAE2', padding: '7px 12px', borderRadius: 7, fontSize: 12 }}>Openen in KozijnLAB →</button>
          </>}
        />
        <div className="thin-scroll" style={{ padding: 22, overflow: 'auto', flex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          {/* Left: elements + pricing */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10 }}>
              <div style={{ padding: '14px 16px', borderBottom: '1px solid #EEEAE2', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Elementen (4)</div>
                <button style={{ fontSize: 11.5, color: '#B88A3B', fontWeight: 500 }}>+ Element toevoegen</button>
              </div>
              <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ color: '#8A968E', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                    <th style={{ textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}>Code</th>
                    <th style={{ textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}>Type</th>
                    <th style={{ textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}>Maat (mm)</th>
                    <th style={{ textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}>Glas</th>
                    <th style={{ textAlign: 'right', padding: '8px 16px', fontWeight: 500 }}>Prijs</th>
                  </tr>
                </thead>
                <tbody>
                  {elements.map((e) => (
                    <tr key={e.code} style={{ borderTop: '1px solid #F3F0E8' }}>
                      <td style={{ padding: '10px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#5A6B62' }}>{e.code}</td>
                      <td style={{ padding: '10px 16px', color: '#0F2B22', fontWeight: 500 }}>{e.type}</td>
                      <td style={{ padding: '10px 16px', color: '#5A6B62' }} className="num">{e.maat}</td>
                      <td style={{ padding: '10px 16px', color: '#5A6B62' }}>{e.glas}</td>
                      <td style={{ padding: '10px 16px', textAlign: 'right', fontWeight: 500, color: '#0F2B22' }} className="num">{e.prijs}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ borderTop: '1px solid #EEEAE2', padding: '14px 16px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', rowGap: 5, columnGap: 20, fontSize: 12 }}>
                <div style={{ color: '#5A6B62' }}>Subtotaal</div><div/>
                <div style={{ textAlign: 'right', fontWeight: 500 }} className="num">€ 9.020,00</div>
                <div style={{ color: '#5A6B62' }}>Montage & plaatsing</div><div/>
                <div style={{ textAlign: 'right', fontWeight: 500 }} className="num">€ 2.450,00</div>
                <div style={{ color: '#5A6B62' }}>BTW 21%</div><div/>
                <div style={{ textAlign: 'right', fontWeight: 500 }} className="num">€ 2.408,70</div>
                <div style={{ color: '#0F2B22', fontWeight: 600, borderTop: '1px solid #EEEAE2', paddingTop: 8 }}>Totaal incl. BTW</div><div style={{ borderTop: '1px solid #EEEAE2' }}/>
                <div style={{ textAlign: 'right', fontFamily: 'Sora', fontWeight: 600, color: '#0F2B22', fontSize: 16, borderTop: '1px solid #EEEAE2', paddingTop: 6 }} className="num">€ 13.878,70</div>
              </div>
            </div>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: '14px 16px' }}>
              <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22', marginBottom: 10 }}>Documenten</div>
              {['Opname_FamJansen.pdf', 'Offerte_2026-0247_v2.pdf', 'Technische_tekening_KL.pdf'].map(n => (
                <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', fontSize: 12 }}>
                  <Ic.file style={{ color: '#B88A3B' }} />
                  <span style={{ flex: 1, color: '#0F2B22' }}>{n}</span>
                  <Ic.download style={{ color: '#8A968E' }} />
                </div>
              ))}
            </div>
          </div>

          {/* Right: klant + timeline */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: '14px 16px' }}>
              <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22', marginBottom: 10 }}>Klant</div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
                <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(135deg, #B88A3B, #8E6624)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>FJ</div>
                <div>
                  <div style={{ fontWeight: 500, color: '#0F2B22' }}>Fam. Jansen</div>
                  <div style={{ fontSize: 11.5, color: '#8A968E' }}>Particulier · Enschede</div>
                </div>
              </div>
              <div style={{ display: 'grid', gap: 7, fontSize: 12 }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', color: '#5A6B62' }}><Ic.mail/> p.jansen@voorbeeld.nl</div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', color: '#5A6B62' }}><Ic.phone/> 06 1234 5678</div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', color: '#5A6B62' }}><Ic.home/> Parkweg 12, 7521 CD Enschede</div>
              </div>
            </div>
            <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: '14px 16px', flex: 1 }}>
              <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22', marginBottom: 12 }}>Tijdlijn</div>
              <div style={{ position: 'relative', paddingLeft: 18 }}>
                <div style={{ position: 'absolute', left: 5, top: 5, bottom: 5, width: 1, background: '#EEEAE2' }}/>
                {timeline.map((t, i) => (
                  <div key={i} style={{ position: 'relative', paddingBottom: 12 }}>
                    <div style={{
                      position: 'absolute', left: -17, top: 3, width: 11, height: 11, borderRadius: '50%',
                      background: t.active ? '#B88A3B' : t.done ? '#0F2B22' : '#fff',
                      border: t.done || t.active ? 'none' : '1.5px solid #D6D2C9',
                      boxShadow: t.active ? '0 0 0 4px rgba(184,138,59,0.18)' : 'none',
                    }}/>
                    <div style={{ fontSize: 10.5, color: '#8A968E', fontFamily: 'JetBrains Mono, monospace' }}>{t.t}</div>
                    <div style={{ fontSize: 12, color: t.done || t.active ? '#0F2B22' : '#8A968E', fontWeight: t.active ? 500 : 400 }}>{t.e}</div>
                    {t.by && <div style={{ fontSize: 11, color: '#8A968E' }}>{t.by}</div>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* KozijnLAB moved to screens-kozijnlab.jsx */
const ScreenKozijnLab_OLD_UNUSED = () => {
  return (
    <div style={{ display: 'flex', height: '100%', background: '#FBFAF7' }}>
      <DashSidebar active="KozijnLAB" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <DashTopbar
          title="KozijnLAB — Kozijn K-01"
          sub="Fam. Jansen · Draai-kiep · 1200 × 1800 mm"
          actions={<>
            <button style={{ border: '1px solid #EEEAE2', padding: '7px 12px', borderRadius: 7, fontSize: 12 }}>Tekening exporteren</button>
            <button style={{ background: '#B88A3B', color: '#fff', padding: '8px 13px', borderRadius: 7, fontSize: 12, fontWeight: 500 }}>Toevoegen aan offerte</button>
          </>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr 260px', flex: 1, overflow: 'hidden' }}>
          {/* Element tree */}
          <div style={{ borderRight: '1px solid #EEEAE2', background: '#fff', padding: 14, fontSize: 12 }}>
            <div style={{ fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10, fontWeight: 500 }}>Elementen</div>
            {['K-01 · Draai-kiep', 'K-02 · Vast', 'K-03 · Schuifpui', 'D-01 · Voordeur'].map((e, i) => (
              <div key={e} style={{
                padding: '8px 10px', borderRadius: 6, marginBottom: 2,
                background: i === 0 ? 'rgba(184,138,59,0.10)' : 'transparent',
                color: i === 0 ? '#0F2B22' : '#5A6B62',
                fontWeight: i === 0 ? 500 : 400,
                borderLeft: i === 0 ? '2px solid #B88A3B' : '2px solid transparent',
                paddingLeft: i === 0 ? 8 : 10,
              }}>{e}</div>
            ))}
            <div style={{ marginTop: 10, padding: '8px 10px', fontSize: 11.5, color: '#B88A3B' }}>+ Nieuw element</div>
          </div>
          {/* Canvas */}
          <div style={{ background: 'repeating-linear-gradient(0deg, #FBFAF7 0 24px, #F3F0E8 24px 25px), repeating-linear-gradient(90deg, #FBFAF7 0 24px, #F3F0E8 24px 25px)', backgroundBlendMode: 'multiply', position: 'relative', padding: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {/* Rulers */}
            <div style={{ position: 'absolute', top: 10, left: 0, right: 0, textAlign: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#8A968E' }}>1200 mm</div>
            <div style={{ position: 'absolute', left: 10, top: 0, bottom: 0, display: 'flex', alignItems: 'center' }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#8A968E', transform: 'rotate(-90deg)' }}>1800 mm</div>
            </div>
            {/* Window drawing */}
            <svg viewBox="0 0 300 420" width="260" style={{ filter: 'drop-shadow(0 10px 20px rgba(15,43,34,0.12))' }}>
              {/* Outer frame */}
              <rect x="10" y="10" width="280" height="400" fill="#F7F5F2" stroke="#0F2B22" strokeWidth="2"/>
              <rect x="22" y="22" width="256" height="376" fill="#fff" stroke="#0F2B22" strokeWidth="1.2"/>
              {/* Mullion */}
              <rect x="148" y="22" width="4" height="376" fill="#0F2B22"/>
              {/* Transom for kiep */}
              <rect x="22" y="140" width="256" height="4" fill="#0F2B22"/>
              {/* Kiep indicator */}
              <path d="M22 140 L150 22 L278 140" fill="none" stroke="#B88A3B" strokeWidth="1" strokeDasharray="3 3"/>
              {/* Handle */}
              <circle cx="52" cy="220" r="3" fill="#B88A3B"/>
              <rect x="50" y="216" width="4" height="14" rx="2" fill="#B88A3B"/>
              {/* Corner dims */}
              <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#8A968E">
                <text x="30" y="138">A</text>
                <text x="260" y="138">B</text>
                <text x="30" y="395">C</text>
                <text x="260" y="395">D</text>
              </g>
            </svg>
            {/* Corner controls */}
            {[[22,22],[278,22],[22,398],[278,398]].map((p,i) => (
              <div key={i} style={{ position: 'absolute', width: 8, height: 8, background: '#B88A3B', border: '1.5px solid #fff', boxShadow: '0 0 0 1px #B88A3B' }}/>
            ))}
            {/* Zoom */}
            <div style={{ position: 'absolute', bottom: 14, right: 14, display: 'flex', gap: 6, background: '#fff', border: '1px solid #EEEAE2', borderRadius: 7, padding: 4, fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: '#5A6B62' }}>
              <div style={{ padding: '2px 6px' }}>−</div><div style={{ padding: '2px 6px' }}>100%</div><div style={{ padding: '2px 6px' }}>+</div>
            </div>
          </div>
          {/* Specs + price */}
          <div style={{ borderLeft: '1px solid #EEEAE2', background: '#fff', padding: 16, overflow: 'auto' }}>
            <div style={{ fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500, marginBottom: 10 }}>Configuratie</div>
            {[
              ['Profielserie', 'Kömmerling 76 AD'],
              ['Kleur buiten', 'RAL 9001 Crème'],
              ['Kleur binnen', 'RAL 9010 Wit'],
              ['Glas', 'HR++ · 4-16-4'],
              ['Opening', 'Draai-kiep links'],
              ['Beslag', 'Roto NT'],
              ['U-waarde', '1,1 W/m²K'],
            ].map(([k,v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px dashed #EEEAE2', fontSize: 12 }}>
                <span style={{ color: '#8A968E' }}>{k}</span>
                <span style={{ color: '#0F2B22', fontWeight: 500 }}>{v}</span>
              </div>
            ))}
            <div style={{ marginTop: 16, background: '#0F2B22', color: '#F7F5F2', borderRadius: 10, padding: '14px 16px' }}>
              <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#8AA093', fontWeight: 500 }}>Element prijs</div>
              <div style={{ fontFamily: 'Sora', fontSize: 24, fontWeight: 600, marginTop: 4, letterSpacing: '-0.02em' }} className="num">€ 1.240<span style={{ fontSize: 14, color: '#8AA093' }}>,00</span></div>
              <div style={{ fontSize: 11, color: '#8AA093', marginTop: 4 }}>Materiaal € 740 · Arbeid € 320 · Marge € 180</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenDossier });