/* global React */
/* ============ 4. OFFERTE / OVERZICHT ============ */
const ScreenOfferte = () => {
  return (
    <div style={{ display: 'flex', height: '100%', background: '#EFEBE3' }}>
      <DashSidebar active="Offertes" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <DashTopbar
          title="Offerte 2026-0247"
          sub="Fam. Jansen · Verstuurd 25 apr · Verloopt 15 mei"
          actions={<>
            <button style={{ border: '1px solid #EEEAE2', padding: '7px 12px', borderRadius: 7, fontSize: 12, background: '#fff', display: 'flex', alignItems: 'center', gap: 6 }}><Ic.download/> PDF</button>
            <button style={{ background: '#0F2B22', color: '#F7F5F2', padding: '8px 13px', borderRadius: 7, fontSize: 12, fontWeight: 500 }}>Versturen naar klant</button>
          </>}
        />
        <div className="thin-scroll" style={{ flex: 1, overflow: 'auto', padding: '28px 24px', display: 'flex', justifyContent: 'center' }}>
          {/* A4 preview */}
          <div style={{ width: 640, background: '#fff', boxShadow: '0 20px 50px -20px rgba(15,43,34,0.25)', borderRadius: 6, overflow: 'hidden' }}>
            {/* Header band */}
            <div style={{ background: '#0F2B22', color: '#F7F5F2', padding: '22px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <BrandMark size={26} variant="dark"/>
                  <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>EcoPro Kozijnen</div>
                </div>
                <div style={{ fontSize: 10.5, color: '#8AA093', marginTop: 6 }}>Industrieweg 4 · 7547 RW Enschede · KvK 12345678</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 10.5, color: '#8AA093', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Offerte</div>
                <div style={{ fontFamily: 'Sora', fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>2026-0247</div>
              </div>
            </div>
            {/* Body */}
            <div style={{ padding: '28px 32px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 22 }}>
                <div>
                  <div style={{ fontSize: 10, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Aan</div>
                  <div style={{ fontWeight: 500, color: '#0F2B22', fontSize: 13 }}>Fam. Jansen</div>
                  <div style={{ fontSize: 12, color: '#5A6B62' }}>Parkweg 12<br/>7521 CD Enschede</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Project</div>
                  <div style={{ fontWeight: 500, color: '#0F2B22', fontSize: 13 }}>Verbouwing Enschede</div>
                  <div style={{ fontSize: 12, color: '#5A6B62' }}>4 elementen · levertijd 8 weken</div>
                </div>
              </div>
              {/* Rendered window preview strip */}
              <div style={{ display: 'flex', gap: 10, marginBottom: 22, padding: '14px', background: '#FBFAF7', borderRadius: 8, border: '1px solid #EEEAE2' }}>
                {['K-01','K-02','K-03','D-01'].map((code, i) => (
                  <div key={code} style={{ flex: 1, aspectRatio: '3/4', background: '#fff', border: '1px solid #EEEAE2', borderRadius: 4, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg viewBox="0 0 60 80" width="70%">
                      <rect x="3" y="3" width="54" height="74" fill="#F7F5F2" stroke="#0F2B22" strokeWidth="1.2"/>
                      {i === 0 && <rect x="30" y="3" width="1" height="74" fill="#0F2B22"/>}
                      {i === 1 && null}
                      {i === 2 && <><rect x="21" y="3" width="1" height="74" fill="#0F2B22"/><rect x="40" y="3" width="1" height="74" fill="#0F2B22"/></>}
                      {i === 3 && <rect x="3" y="48" width="54" height="1" fill="#0F2B22"/>}
                    </svg>
                    <div style={{ position: 'absolute', bottom: 4, left: 0, right: 0, textAlign: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: '#8A968E' }}>{code}</div>
                  </div>
                ))}
              </div>
              {/* Line items */}
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11.5 }}>
                <thead>
                  <tr style={{ borderBottom: '1.5px solid #0F2B22' }}>
                    <th style={{ textAlign: 'left', padding: '8px 0', fontWeight: 500, color: '#0F2B22', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Omschrijving</th>
                    <th style={{ textAlign: 'right', padding: '8px 0', fontWeight: 500, color: '#0F2B22', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', width: 60 }}>Aantal</th>
                    <th style={{ textAlign: 'right', padding: '8px 0', fontWeight: 500, color: '#0F2B22', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', width: 90 }}>Prijs</th>
                    <th style={{ textAlign: 'right', padding: '8px 0', fontWeight: 500, color: '#0F2B22', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', width: 90 }}>Totaal</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['K-01 Draai-kiep 1200×1800 mm · HR++', 1, '1.240', '1.240'],
                    ['K-02 Vast kozijn 800×1800 mm · HR+++', 1, '780', '780'],
                    ['K-03 Schuifpui 3-delig 3600×2400 · HR+++', 1, '4.820', '4.820'],
                    ['D-01 Voordeur massief 1000×2300', 1, '2.180', '2.180'],
                    ['Montage & plaatsing', 1, '2.450', '2.450'],
                  ].map((r,i) => (
                    <tr key={i} style={{ borderBottom: '1px solid #F3F0E8' }}>
                      <td style={{ padding: '9px 0', color: '#0F2B22' }}>{r[0]}</td>
                      <td style={{ padding: '9px 0', textAlign: 'right', color: '#5A6B62' }} className="num">{r[1]}</td>
                      <td style={{ padding: '9px 0', textAlign: 'right', color: '#5A6B62' }} className="num">€ {r[2]}</td>
                      <td style={{ padding: '9px 0', textAlign: 'right', fontWeight: 500 }} className="num">€ {r[3]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ marginTop: 14, display: 'flex', justifyContent: 'flex-end' }}>
                <div style={{ width: 240, fontSize: 11.5 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: '#5A6B62' }}><span>Subtotaal</span><span className="num">€ 11.470,00</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: '#5A6B62' }}><span>BTW 21%</span><span className="num">€ 2.408,70</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0 4px', borderTop: '1.5px solid #0F2B22', marginTop: 6, fontFamily: 'Sora', fontWeight: 600, fontSize: 15, color: '#0F2B22' }}><span>Totaal</span><span className="num">€ 13.878,70</span></div>
                </div>
              </div>
              {/* Klant actie block */}
              <div style={{ marginTop: 26, padding: 16, background: '#FBFAF7', border: '1px solid #EEEAE2', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontFamily: 'Sora', fontWeight: 600, color: '#0F2B22', fontSize: 13 }}>Akkoord geven?</div>
                  <div style={{ fontSize: 11, color: '#5A6B62' }}>Digitaal ondertekenen via klantportaal · veilig & juridisch geldig</div>
                </div>
                <button style={{ background: '#B88A3B', color: '#fff', padding: '9px 16px', borderRadius: 7, fontSize: 12, fontWeight: 500 }}>Akkoord geven →</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============ 5. KLANTPORTAAL (mobile-first card view) ============ */
const ScreenKlantportaal = () => {
  return (
    <div style={{ height: '100%', background: '#0F2B22', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Top */}
      <div style={{ padding: '18px 24px 0', color: '#F7F5F2', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <BrandMark size={24} variant="dark"/>
          <span style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 15 }}>Klantportaal</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
          <span style={{ color: '#8AA093' }}>Fam. Jansen</span>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#B88A3B', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>FJ</div>
        </div>
      </div>
      <div style={{ padding: '20px 24px 10px', color: '#F7F5F2' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#B88A3B', fontWeight: 500 }}>Uw project</div>
        <div style={{ fontFamily: 'Sora', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 4 }}>Verbouwing Enschede</div>
        <div style={{ fontSize: 12, color: '#8AA093', marginTop: 2 }}>Dossier 2026-0247 · EcoPro Kozijnen</div>
      </div>
      {/* Progress track */}
      <div style={{ padding: '14px 24px 18px' }}>
        <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
          {['Akkoord','Productie','Montage','Oplevering'].map((s, i) => (
            <div key={s} style={{ flex: 1, height: 3, borderRadius: 2, background: i <= 1 ? '#B88A3B' : 'rgba(255,255,255,0.12)' }}/>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', color: '#8AA093', fontSize: 10.5 }}>
          {['Akkoord','Productie','Montage','Oplevering'].map((s, i) => (
            <div key={s} style={{ color: i === 1 ? '#F7F5F2' : '#8AA093', fontWeight: i === 1 ? 500 : 400 }}>{s}</div>
          ))}
        </div>
      </div>
      {/* Content panel */}
      <div className="thin-scroll" style={{ flex: 1, background: '#F7F5F2', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20, overflow: 'auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 12, padding: 14, gridColumn: '1 / -1' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#0F2B22' }}>Huidige status</div>
            <span style={{ fontSize: 10.5, padding: '3px 8px', borderRadius: 999, background: 'rgba(46,106,78,0.12)', color: '#2E6A4E', fontWeight: 500 }}>In productie</span>
          </div>
          <div style={{ fontSize: 12, color: '#5A6B62', marginTop: 8, lineHeight: 1.6 }}>
            Uw kozijnen worden op dit moment vervaardigd in onze werkplaats in Enschede.
            Geschatte montagedatum: <strong style={{ color: '#0F2B22' }}>week 22 — 27 t/m 31 mei</strong>.
          </div>
        </div>
        <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 12, padding: 14 }}>
          <div style={{ fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>Uw contactpersoon</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #B88A3B, #8E6624)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>MV</div>
            <div style={{ fontSize: 12 }}>
              <div style={{ fontWeight: 500, color: '#0F2B22' }}>Mark de Vries</div>
              <div style={{ color: '#8A968E', fontSize: 11 }}>Accountmanager</div>
            </div>
          </div>
          <button style={{ marginTop: 12, width: '100%', padding: '8px 10px', border: '1px solid #EEEAE2', borderRadius: 7, fontSize: 12, fontWeight: 500, color: '#0F2B22' }}>Stuur bericht</button>
        </div>
        <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 12, padding: 14 }}>
          <div style={{ fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>Te betalen</div>
          <div style={{ fontFamily: 'Sora', fontSize: 20, fontWeight: 600, color: '#0F2B22', marginTop: 8 }} className="num">€ 4.159,35</div>
          <div style={{ fontSize: 11, color: '#8A968E', marginTop: 2 }}>Slottermijn · na montage</div>
          <button style={{ marginTop: 10, width: '100%', padding: '8px 10px', background: '#B88A3B', color: '#fff', borderRadius: 7, fontSize: 12, fontWeight: 500 }}>Betaaloverzicht</button>
        </div>
        <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 12, padding: 14, gridColumn: '1 / -1' }}>
          <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 13, color: '#0F2B22', marginBottom: 8 }}>Documenten</div>
          {[
            ['Offerte 2026-0247', 'Getekend 28 apr'],
            ['Order bevestiging', '29 apr'],
            ['Technische tekening', '02 mei'],
          ].map(([n,d]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: '1px solid #F3F0E8', fontSize: 12 }}>
              <Ic.file style={{ color: '#B88A3B' }}/>
              <span style={{ flex: 1, color: '#0F2B22' }}>{n}</span>
              <span style={{ color: '#8A968E', fontSize: 11 }}>{d}</span>
              <Ic.download style={{ color: '#8A968E' }}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ============ 6. PLANNING / MONTAGE ============ */
const ScreenPlanning = () => {
  const days = ['Ma 19','Di 20','Wo 21','Do 22','Vr 23','Za 24','Zo 25'];
  const teams = [
    { name: 'Team Noord', lead: 'Kees B.', color: '#0F2B22' },
    { name: 'Team Oost', lead: 'Dennis V.', color: '#B88A3B' },
    { name: 'Team Zuid', lead: 'Ruben S.', color: '#7A846A' },
  ];
  // col span: [teamIdx, dayStart(0-6), length, label]
  const jobs = [
    [0, 0, 2, 'Fam. Jansen — Enschede', 'Montage 4 el.'],
    [0, 3, 1, 'Villa Lonneker', 'Voormontage'],
    [0, 5, 2, 'Hofzicht fase 2', '8 woningen'],
    [1, 1, 2, 'Nieuwbouw Hengelo', 'Mark de Vries'],
    [1, 4, 3, 'De Esch — blok A', '12 woningen'],
    [2, 0, 1, 'Bakker — Oldenzaal', 'Service'],
    [2, 2, 2, 'Fam. Visser', 'Oplevering'],
    [2, 6, 1, 'Transport', 'Uitladen'],
  ];
  return (
    <div style={{ display: 'flex', height: '100%', background: '#FBFAF7' }}>
      <DashSidebar active="Planning" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <DashTopbar
          title="Planning week 21"
          sub="3 montageteams · 8 orders · 47 kozijnen"
          actions={<>
            <div style={{ display: 'flex', background: '#fff', border: '1px solid #EEEAE2', borderRadius: 7, padding: 2, fontSize: 11.5 }}>
              <div style={{ padding: '5px 10px', background: '#0F2B22', color: '#F7F5F2', borderRadius: 5, fontWeight: 500 }}>Week</div>
              <div style={{ padding: '5px 10px', color: '#5A6B62' }}>Maand</div>
              <div style={{ padding: '5px 10px', color: '#5A6B62' }}>Gantt</div>
            </div>
            <button style={{ background: '#B88A3B', color: '#fff', padding: '8px 13px', borderRadius: 7, fontSize: 12, fontWeight: 500 }}>+ Plannen</button>
          </>}
        />
        <div className="thin-scroll" style={{ flex: 1, overflow: 'auto', padding: 22 }}>
          <div style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, overflow: 'hidden' }}>
            {/* Header row */}
            <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)', borderBottom: '1px solid #EEEAE2', background: '#FBFAF7' }}>
              <div style={{ padding: '10px 14px', fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>Team</div>
              {days.map((d, i) => (
                <div key={d} style={{ padding: '10px 8px', fontSize: 10.5, color: i >= 5 ? '#B8B4AB' : '#5A6B62', textAlign: 'center', borderLeft: '1px solid #EEEAE2', fontWeight: 500 }}>{d}</div>
              ))}
            </div>
            {/* Team rows */}
            {teams.map((t, ti) => (
              <div key={t.name} style={{ display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)', borderBottom: '1px solid #F3F0E8', minHeight: 68, position: 'relative' }}>
                <div style={{ padding: '14px', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 4, height: 32, borderRadius: 2, background: t.color }}/>
                  <div>
                    <div style={{ fontSize: 12.5, fontWeight: 500, color: '#0F2B22' }}>{t.name}</div>
                    <div style={{ fontSize: 10.5, color: '#8A968E' }}>{t.lead}</div>
                  </div>
                </div>
                {/* Grid cells */}
                {days.map((_, di) => (
                  <div key={di} style={{ borderLeft: '1px solid #F3F0E8', background: di >= 5 ? 'rgba(122,132,106,0.04)' : 'transparent' }}/>
                ))}
                {/* Jobs */}
                {jobs.filter(j => j[0] === ti).map((j, idx) => (
                  <div key={idx} style={{
                    position: 'absolute',
                    top: 10, height: 48,
                    left: `calc(160px + ${j[1]} * ((100% - 160px) / 7) + 4px)`,
                    width: `calc(${j[2]} * ((100% - 160px) / 7) - 8px)`,
                    background: ti === 0 ? 'rgba(15,43,34,0.92)' : ti === 1 ? 'rgba(184,138,59,0.92)' : 'rgba(122,132,106,0.92)',
                    color: '#F7F5F2',
                    borderRadius: 6,
                    padding: '7px 10px',
                    fontSize: 11,
                    overflow: 'hidden',
                    borderLeft: `3px solid ${ti === 0 ? '#B88A3B' : ti === 1 ? '#0F2B22' : '#0F2B22'}`,
                  }}>
                    <div style={{ fontWeight: 500, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{j[3]}</div>
                    <div style={{ fontSize: 10, opacity: 0.8 }}>{j[4]}</div>
                  </div>
                ))}
              </div>
            ))}
          </div>
          {/* Today strip */}
          <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[
              ['Vandaag op locatie', '3 teams', '47 kozijnen'],
              ['Productie gereed', '12 orders', 'komende 10 dagen'],
              ['Bezetting week', '92%', '+ 4% t.o.v. gemiddeld'],
            ].map(([l,v,s]) => (
              <div key={l} style={{ background: '#fff', border: '1px solid #EEEAE2', borderRadius: 10, padding: '12px 14px' }}>
                <div style={{ fontSize: 10.5, color: '#8A968E', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>{l}</div>
                <div style={{ fontFamily: 'Sora', fontSize: 18, fontWeight: 600, color: '#0F2B22', marginTop: 4 }}>{v}</div>
                <div style={{ fontSize: 11, color: '#8A968E' }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenOfferte, ScreenKlantportaal, ScreenPlanning });