/* global React */
/* ============ KOZIJNLAB — EcoPro-style verkooppor­taal look ============ */
const ScreenKozijnLab = () => {
  const [elementType, setElementType] = React.useState('Kozijn');
  const [tab, setTab] = React.useState('Verkoop');

  const elementen = [
    { icon: 'K', naam: 'Kozijn voor', maat: '2500×1400 · 1× · kozijn', prijs: '€ 2.366,00', active: true },
    { icon: 'D', naam: 'Deur achter', maat: '1000×2300 · 1× · deur', prijs: '€ 2.504,00' },
    { icon: 'S', naam: 'Schuifpui', maat: '3800×2300 · 1× · 3-delig',   prijs: '€ 11.320,00' },
    { icon: 'R', naam: 'Dakraam', maat: '700×1100 · 1× · Velux', prijs: '€ 954,00' },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', background: '#F4F1EB', fontFamily: 'Inter, system-ui, sans-serif' }}>
      {/* Sidebar */}
      <aside style={{ width: 186, background: '#fff', borderRight: '1px solid #E8E4DA', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 16px', borderBottom: '1px solid #E8E4DA' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <BrandMark size={22}/>
            <div>
              <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 13, color: '#0F2B22', letterSpacing: '-0.01em' }}>EcoPro Kozijnen</div>
              <div style={{ fontSize: 9, color: '#B88A3B', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Verkoopportaal</div>
            </div>
          </div>
        </div>
        <div style={{ padding: '10px 8px', flex: 1 }}>
          <div style={{ fontSize: 9.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '6px 10px' }}>Menu</div>
          {[
            ['Dashboard', Ic.dashboard, false],
            ['KozijnLAB', Ic.wrench, true],
            ['Leads', Ic.users, false, '8'],
            ['Offertes', Ic.file, false],
            ['Planning', Ic.cal, false],
          ].map(([label, Icn, act, badge]) => (
            <div key={label} style={{
              display: 'flex', alignItems: 'center', gap: 9, padding: '8px 10px', borderRadius: 6, marginBottom: 2,
              background: act ? 'rgba(184,138,59,0.12)' : 'transparent',
              color: act ? '#0F2B22' : '#5A6B62',
              fontWeight: act ? 500 : 400, fontSize: 12,
              borderLeft: act ? '2px solid #B88A3B' : '2px solid transparent',
              paddingLeft: act ? 8 : 10,
            }}>
              <Icn/> <span style={{ flex: 1 }}>{label}</span>
              {badge && <span style={{ background: '#B88A3B', color: '#fff', fontSize: 9, fontWeight: 600, padding: '1px 6px', borderRadius: 8 }}>{badge}</span>}
            </div>
          ))}
        </div>
        <div style={{ padding: 10 }}>
          <button style={{ width: '100%', background: '#0F2B22', color: '#F7F5F2', padding: '9px', borderRadius: 7, fontSize: 11.5, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' }}>
            <Ic.plus/> Nieuwe verkoop
          </button>
        </div>
      </aside>

      {/* Main */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* Top bar with tabs */}
        <div style={{ background: '#fff', borderBottom: '1px solid #E8E4DA', padding: '10px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 30, height: 30, borderRadius: 6, background: '#0F2B22', color: '#B88A3B', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <BrandMark size={22} variant="dark"/>
            </div>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>KozijnLAB</span>
                <span style={{ fontSize: 10.5, color: '#8A968E' }}>Configurator v2</span>
              </div>
              <div style={{ fontSize: 10.5, color: '#5A6B62', marginTop: 1 }}>Offerte <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>260423-9714</span></div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: '#2E6A4E' }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#2E6A4E' }}/> Opgeslagen
            </div>
            <button style={{ border: '1px solid #E8E4DA', background: '#fff', padding: '6px 10px', borderRadius: 6, fontSize: 11.5 }}>Nieuwe offerte</button>
            <button style={{ border: '1px solid #E8E4DA', background: '#fff', padding: '6px 10px', borderRadius: 6, fontSize: 11.5 }}>Exporteer JSON</button>
            <button style={{ background: '#2E6A4E', color: '#fff', padding: '6px 12px', borderRadius: 6, fontSize: 11.5, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5 }}>→ PDF</button>
          </div>
        </div>

        {/* Content columns */}
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '270px 1fr 240px', overflow: 'hidden' }}>
          {/* LEFT — configuration wizard */}
          <div className="thin-scroll" style={{ background: '#fff', borderRight: '1px solid #E8E4DA', overflow: 'auto', padding: '16px 16px' }}>
            <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Configuratie</div>
            <div style={{ fontSize: 11, color: '#8A968E', marginTop: 2, marginBottom: 14 }}>Stel je element samen, stap voor stap.</div>

            {/* Step 1 */}
            <div style={{ border: '1px solid #E8E4DA', borderRadius: 8, marginBottom: 10, background: '#FBFAF7' }}>
              <div style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid #E8E4DA' }}>
                <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#B88A3B', color: '#fff', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>1</span>
                <span style={{ fontSize: 12, fontWeight: 500, color: '#0F2B22' }}>Klantgegevens</span>
              </div>
              <div style={{ padding: 12, display: 'grid', gap: 8 }}>
                {[
                  ['Klantnaam','Rob de Vries'],
                  ['Projectnaam','0159'],
                  ['Adres','test test 22'],
                ].map(([l,v]) => (
                  <div key={l}>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>{l}</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff', color: '#0F2B22' }}>{v}</div>
                  </div>
                ))}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Postcode</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>7552 CK</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Plaats</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>Hengelo</div>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Telefoon</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>0612345678</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>E-mail</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>info@kozijnsuite.nl</div>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Offertedatum</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>23-04-2026 <Ic.cal style={{ color: '#8A968E' }}/></div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Levering</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, color: '#B8B4AB', background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>dd-mm-jjjj <Ic.cal style={{ color: '#8A968E' }}/></div>
                  </div>
                </div>
              </div>
            </div>

            {/* Step 2 */}
            <div style={{ border: '1px solid #E8E4DA', borderRadius: 8, background: '#FBFAF7' }}>
              <div style={{ padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid #E8E4DA' }}>
                <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#B88A3B', color: '#fff', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>2</span>
                <span style={{ fontSize: 12, fontWeight: 500, color: '#0F2B22' }}>Element</span>
              </div>
              <div style={{ padding: 12 }}>
                <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 6, fontWeight: 500 }}>Element type</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
                  {[
                    ['Kozijn', <rect key="r" x="4" y="4" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.4"/>],
                    ['Deur', <><rect key="r" x="7" y="3" width="10" height="18" fill="none" stroke="currentColor" strokeWidth="1.4"/><circle key="c" cx="15" cy="12" r="0.8" fill="currentColor"/></>],
                    ['Schuifpui', <><rect key="r" x="3" y="4" width="18" height="16" fill="none" stroke="currentColor" strokeWidth="1.4"/><path key="p" d="M12 4v16" stroke="currentColor" strokeWidth="1.4"/></>],
                    ['Hefschuif', <><rect key="r" x="3" y="4" width="18" height="16" fill="none" stroke="currentColor" strokeWidth="1.4"/><path key="p" d="M8 4v16M16 4v16" stroke="currentColor" strokeWidth="1.4"/></>],
                    ['Dakraam', <path key="p" d="M5 18L12 6l7 12" fill="none" stroke="currentColor" strokeWidth="1.4"/>],
                  ].map(([name, svg]) => {
                    const active = name === elementType;
                    return (
                      <button key={name} onClick={() => setElementType(name)} style={{
                        border: active ? '1.5px solid #B88A3B' : '1px solid #E8E4DA',
                        background: active ? 'rgba(184,138,59,0.08)' : '#fff',
                        borderRadius: 6, padding: '8px 4px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                        color: active ? '#B88A3B' : '#5A6B62', cursor: 'pointer',
                      }}>
                        <svg viewBox="0 0 24 24" width="22" height="22">{svg}</svg>
                        <span style={{ fontSize: 9.5, fontWeight: 500 }}>{name}</span>
                      </button>
                    );
                  })}
                </div>
                <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Naam</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>Kozijn voor</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: '#8A968E', marginBottom: 3, fontWeight: 500 }}>Aantal</div>
                    <div style={{ border: '1px solid #E8E4DA', borderRadius: 5, padding: '6px 9px', fontSize: 11, background: '#fff' }}>1</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* MIDDLE — canvas */}
          <div style={{ display: 'flex', flexDirection: 'column', background: '#F4F1EB' }}>
            {/* Sub-tabs */}
            <div style={{ padding: '10px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #E8E4DA', background: '#fff' }}>
              <div style={{ display: 'flex', gap: 0 }}>
                {['Verkoop','Fabriek'].map(t => (
                  <button key={t} onClick={() => setTab(t)} style={{
                    padding: '5px 14px', fontSize: 11.5, fontWeight: 500,
                    color: tab === t ? '#0F2B22' : '#8A968E',
                    borderBottom: tab === t ? '2px solid #B88A3B' : '2px solid transparent',
                  }}>{t}</button>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 4, background: '#FBFAF7', border: '1px solid #E8E4DA', borderRadius: 6, padding: 2 }}>
                {['Maat','Veldmaten','Labels'].map((t, i) => (
                  <div key={t} style={{
                    padding: '4px 9px', fontSize: 10.5, borderRadius: 4, fontWeight: 500,
                    background: i === 1 ? '#fff' : 'transparent',
                    color: i === 1 ? '#0F2B22' : '#5A6B62',
                    border: i === 1 ? '1px solid #E8E4DA' : '1px solid transparent',
                  }}>{i === 1 && '□ '}{t}</div>
                ))}
              </div>
            </div>

            {/* Canvas area */}
            <div style={{ flex: 1, position: 'relative', padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg viewBox="0 0 600 340" style={{ width: '100%', maxWidth: 520, height: 'auto' }}>
                {/* Top dimension */}
                <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#8A968E">
                  <line x1="30" y1="30" x2="570" y2="30" stroke="#B8B4AB" strokeWidth="0.5" strokeDasharray="2 2"/>
                  <line x1="30" y1="26" x2="30" y2="34" stroke="#B8B4AB" strokeWidth="0.5"/>
                  <line x1="300" y1="26" x2="300" y2="34" stroke="#B8B4AB" strokeWidth="0.5"/>
                  <line x1="570" y1="26" x2="570" y2="34" stroke="#B8B4AB" strokeWidth="0.5"/>
                  <text x="165" y="28" textAnchor="middle">1250 mm</text>
                  <text x="435" y="28" textAnchor="middle">1250 mm</text>
                  <text x="300" y="20" textAnchor="middle" fontSize="9" fill="#5A6B62">2500 mm</text>
                </g>
                {/* Left dimension */}
                <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#8A968E">
                  <line x1="20" y1="50" x2="20" y2="310" stroke="#B8B4AB" strokeWidth="0.5" strokeDasharray="2 2"/>
                  <text x="14" y="180" textAnchor="middle" transform="rotate(-90 14 180)" fontSize="9" fill="#5A6B62">1400 mm</text>
                </g>
                {/* Frame */}
                <rect x="40" y="50" width="520" height="260" fill="none" stroke="#0F2B22" strokeWidth="1.2"/>
                {/* Mullion */}
                <line x1="300" y1="50" x2="300" y2="310" stroke="#0F2B22" strokeWidth="1.2"/>
                {/* Glass fill */}
                <rect x="46" y="56" width="248" height="248" fill="#DCE8F0" fillOpacity="0.5"/>
                <rect x="306" y="56" width="248" height="248" fill="#DCE8F0" fillOpacity="0.5"/>
                {/* Diagonals — draai-richting left pane (crossed) */}
                <path d="M46 56 L294 304 M294 56 L46 304" stroke="#C84B3B" strokeWidth="0.9" strokeDasharray="4 3" opacity="0.85"/>
                {/* Diagonals — draai-kiep right pane */}
                <path d="M306 304 L430 56 L554 304" stroke="#C84B3B" strokeWidth="0.9" strokeDasharray="4 3" opacity="0.85"/>
                <path d="M306 56 L554 304 M554 56 L306 304" stroke="#C84B3B" strokeWidth="0.9" strokeDasharray="4 3" opacity="0.4"/>
                {/* Corner handles */}
                {[[40,50],[300,50],[560,50],[40,310],[300,310],[560,310]].map(([x,y],i) => (
                  <rect key={i} x={x-3} y={y-3} width="6" height="6" fill="#B88A3B" stroke="#fff" strokeWidth="1"/>
                ))}
                {/* Center cross */}
                <g stroke="#8A968E" strokeWidth="0.8">
                  <line x1="180" y1="180" x2="200" y2="180"/>
                  <line x1="190" y1="170" x2="190" y2="190"/>
                </g>
                {/* Right height label */}
                <text x="580" y="184" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#5A6B62">1400</text>
              </svg>
            </div>

            {/* Bottom strip */}
            <div style={{ background: '#fff', borderTop: '1px solid #E8E4DA', padding: '12px 24px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              {[
                ['AFMETING', '2500 × 1400 mm'],
                ['OPPERVLAKTE', '3.50 m²'],
                ['VAKKEN', '2'],
                ['STUKPRIJS (×AANTAL)', '€ 2.366,00'],
              ].map(([l, v]) => (
                <div key={l}>
                  <div style={{ fontSize: 9.5, color: '#8A968E', letterSpacing: '0.1em', fontWeight: 600 }}>{l}</div>
                  <div style={{ fontSize: 12.5, color: '#0F2B22', fontWeight: 500, marginTop: 2, fontFamily: 'JetBrains Mono, monospace' }} className="num">{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — project / elementen / totalen */}
          <div className="thin-scroll" style={{ background: '#fff', borderLeft: '1px solid #E8E4DA', padding: 14, overflow: 'auto' }}>
            <div style={{ fontSize: 10, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Project</div>
            <div style={{ fontSize: 11, color: '#5A6B62', marginTop: 2 }}>4 elementen</div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, marginBottom: 8 }}>
              <div style={{ fontSize: 10, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Elementen</div>
              <button style={{ fontSize: 10.5, color: '#fff', background: '#B88A3B', padding: '3px 8px', borderRadius: 4, fontWeight: 500 }}>+ Toevoegen</button>
            </div>

            {elementen.map((e, i) => (
              <div key={i} style={{
                display: 'flex', gap: 8, padding: 8, borderRadius: 7, marginBottom: 6,
                border: e.active ? '1.5px solid #B88A3B' : '1px solid #E8E4DA',
                background: e.active ? 'rgba(184,138,59,0.06)' : '#FBFAF7',
                alignItems: 'center',
              }}>
                <div style={{ width: 36, height: 36, background: '#fff', border: '1px solid #E8E4DA', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#0F2B22" strokeWidth="1.2">
                    <rect x="3" y="3" width="18" height="18"/>
                    {i === 0 && <line x1="12" y1="3" x2="12" y2="21"/>}
                    {i === 1 && <circle cx="17" cy="12" r="0.6" fill="#0F2B22"/>}
                    {i === 2 && <><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></>}
                    {i === 3 && <path d="M3 18L12 6l9 12"/>}
                  </svg>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11.5, color: '#0F2B22', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.naam}</div>
                  <div style={{ fontSize: 9.5, color: '#8A968E', fontFamily: 'JetBrains Mono, monospace' }}>{e.maat}</div>
                  {e.active && <div style={{ display: 'flex', gap: 4, marginTop: 3 }}>
                    <span style={{ fontSize: 9, color: '#C84B3B', cursor: 'pointer' }}>✕</span>
                  </div>}
                </div>
                <div style={{ fontSize: 11, fontWeight: 500, color: '#0F2B22', fontFamily: 'JetBrains Mono, monospace' }} className="num">{e.prijs}</div>
              </div>
            ))}

            <div style={{ marginTop: 14, padding: '10px 0', borderTop: '1px solid #E8E4DA' }}>
              <div style={{ fontSize: 10, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 6 }}>Totalen</div>
              {[
                ['Materiaal (4 el.)','€ 16.944,00'],
                ['Montage','€ 0,00'],
                ['Subtotaal','€ 16.944,00', true],
                ['Netto','€ 16.944,00'],
                ['BTW (21%)','€ 3.558,24'],
              ].map(([l, v, bold]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontSize: 11, color: bold ? '#0F2B22' : '#5A6B62', fontWeight: bold ? 500 : 400 }}>
                  <span>{l}</span>
                  <span className="num" style={{ fontFamily: 'JetBrains Mono, monospace' }}>{v}</span>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0 2px', marginTop: 6, borderTop: '1.5px solid #0F2B22', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, color: '#0F2B22' }}>
                <span>Totaal incl.</span>
                <span className="num" style={{ color: '#B88A3B' }}>€ 20.502,24</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenKozijnLab });