// ============================================================
// FRAGTA — screens part 1: Indbakke, Forespørgsel, Katalog
// ============================================================

// ---- MANUEL FORESPØRGSEL (paste e-mail / fil → Fragta aflæser) -------------
function parseRFQ(text) {
  const t = (text || '').replace(/\r/g, '');
  const low = t.toLowerCase();
  const pick = (re) => { const m = t.match(re); return m ? (m[1] || m[0]).trim() : ''; };
  const email = pick(/[\w.+-]+@[\w-]+\.[\w.-]+/);
  // route: "fra X til Y" | "X → Y" | "X -> Y" | "X til Y"
  let origin = '', dest = '';
  let m = t.match(/fra\s+([A-ZÆØÅa-zæøå.\- ]{2,30}?)\s+til\s+([A-ZÆØÅa-zæøå.\- ]{2,30}?)[\.,;\n]/);
  if (!m) m = t.match(/([A-ZÆØÅ][A-Za-zÆØÅæøå.\- ]{1,28}?)\s*(?:→|->|—|–|-)\s*([A-ZÆØÅ][A-Za-zÆØÅæøå.\- ]{1,28}?)[\.,;\n]/);
  if (m) { origin = m[1].trim(); dest = m[2].trim(); }
  // volume
  let vol = pick(/(\d{1,3}\s*(?:eur-?)?paller?)/i) || pick(/(\d{1,3}\s*pallets?)/i);
  if (!vol && /(ftl|fuldl[æae]s|full[\s-]?load|komplet vognladning)/i.test(low)) vol = 'Fuldlæs (FTL)';
  if (!vol) { const w = pick(/(\d[\d.,]*\s*(?:kg|tons?|t)\b)/i); if (w) vol = w; }
  // pickup date
  const pickup = pick(/(\d{1,2}\.?\s*(?:jan|feb|mar|apr|maj|jun|jul|aug|sep|okt|nov|dec)[a-z]*\.?(?:\s*\d{4})?)/i)
    || pick(/(\d{1,2}[\/.-]\d{1,2}(?:[\/.-]\d{2,4})?)/);
  // requirements
  const reqs = [];
  if (/tautliner/i.test(low)) reqs.push('Tautliner');
  if (/(frigo|k[øo]l|temperatur|\+\s*\d+\s*°)/i.test(low)) reqs.push('Køl / frigo');
  if (/adr|farligt gods|dangerous/i.test(low)) reqs.push('ADR');
  if (/lift|bagsmæk|tail ?lift/i.test(low)) reqs.push('Lift ved levering');
  // company / sender
  let company = pick(/(?:hilsen|regards|mvh|med venlig hilsen)[,\s]+\n?\s*([A-ZÆØÅ][\w&.\- ]{2,40})/i);
  if (!company && email) { company = email.split('@')[1].split('.')[0]; company = company.charAt(0).toUpperCase() + company.slice(1); }
  return { company: company || '', email, origin, dest, vol, pickup, req: reqs.join(' · ') };
}

function CreateRequestModal({ onClose, onCreated }) {
  const [text, setText] = useState('');
  const [fileName, setFileName] = useState('');
  const [phase, setPhase] = useState('input'); // input | reading | review
  const [p, setP] = useState(null);
  const fileRef = useRef(null);

  const onFile = (file) => {
    if (!file) return;
    setFileName(file.name);
    if (/\.(txt|eml|md|csv)$/i.test(file.name) || /^text\//.test(file.type)) {
      const rd = new FileReader();
      rd.onload = () => setText(t => (t ? t + '\n' : '') + rd.result);
      rd.readAsText(file);
    }
    // PDF/andet: vi kan ikke læse binært i demoen — behold evt. paste-tekst, ellers kan brugeren redigere i analysen
  };

  const analyse = () => {
    setPhase('reading');
    setTimeout(() => { setP(parseRFQ(text)); setPhase('review'); }, 1100);
  };

  const create = () => {
    const f = p || parseRFQ(text);
    const origin = f.origin || '—', dest = f.dest || '—';
    const id = 'MAN-' + Math.floor(10000 + Math.random() * 89999);
    const pool = CARRIERS.slice(0, 3);
    const base = 1600 + Math.floor(Math.random() * 600);
    const offers = pool.map((c, i) => ({ rk: i + 1, nm: c.nm, md: c.from + ' · ' + (i === 0 ? 'bedste match' : i === 1 ? 'ledig kapacitet' : 'mest pålidelig'), pr: (base + i * 130).toLocaleString('da-DK') + ' €' }));
    const company = f.company || 'Ukendt afsender';
    const conf = Math.min(99, 60 + (f.origin ? 10 : 0) + (f.dest ? 10 : 0) + (f.vol ? 10 : 0) + (f.email ? 6 : 0));
    const req = {
      id, from: company, email: f.email || 'ukendt@afsender.dk', fromShort: company,
      route: [origin, dest], vol: f.vol || '—', when: 'Lige nu', status: 'new', conf, manual: true,
      subject: 'Indlæst forespørgsel — ' + origin + ' → ' + dest,
      body: ['Indlæst af Fragta fra ', 'b:' + (fileName || 'indsat tekst'), '. ', 'b:' + (f.vol || 'volumen ukendt'),
             ' fra ', 'hl:' + origin, ' til ', 'hl:' + dest, f.pickup ? '. Afhentning ' : '', f.pickup ? 'hl:' + f.pickup : '', f.req ? '. ' + f.req : '.'],
      parsed: [['Afsender', company, f.company ? 96 : 40], ['Rute', origin + ' → ' + dest, f.origin && f.dest ? 95 : 30], ['Volumen', f.vol || '—', f.vol ? 92 : 0], ['Pickup', f.pickup || '—', f.pickup ? 90 : 0], ['Krav', f.req || '—', f.req ? 88 : 0]],
      offers,
    };
    addRequest(req);
    onClose();
    onCreated && onCreated(id);
  };

  const SAMPLE = 'Hej,\n\nVi har brug for et tilbud på 34 EUR-paller fra Verona til Hamborg. Afhentning den 12. maj fra kl. 09. Tautliner, ingen farligt gods.\n\nMed venlig hilsen\nByfeldt Retail A/S\ndisposition@byfeldt-retail.example';

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="m-head">
          <div>
            <div className="m-title">Ny forespørgsel</div>
            <div className="m-sub">Indsæt en e-mail, PDF-tekst eller besked — Fragta læser rute, volumen og krav automatisk</div>
          </div>
          <button className="m-x" onClick={onClose}><Icon n="x" /></button>
        </div>

        <div className="m-body">
          {phase === 'reading' ? (
            <div className="reading-state">
              <span className="reading-spark"><Icon n="spark" /></span>
              <h4>Fragta læser forespørgslen…</h4>
              <p>Udtrækker afsender, rute, volumen og krav.</p>
            </div>
          ) : phase === 'review' ? (
            <div style={{ display: 'grid', gap: 14 }}>
              <div className="parsed-banner"><Icon n="checkc" /> Fragta aflæste forespørgslen — tjek og opret. Du kan finjustere alle felter i analysen bagefter.</div>
              <div className="parsed-grid">
                {[['Afsender', p.company], ['E-mail', p.email], ['Fra', p.origin], ['Til', p.dest], ['Volumen', p.vol], ['Afhentning', p.pickup], ['Krav', p.req]].map(([k, v]) => (
                  <div className={'parsed-cell' + (v ? '' : ' miss')} key={k}>
                    <span className="pk">{k}</span>
                    <span className="pv">{v || 'Ikke fundet'}</span>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div style={{ display: 'grid', gap: 12 }}>
              <div className="field">
                <label>Indsæt e-mail eller tekst</label>
                <textarea className="paste-area" placeholder="Indsæt hele e-mailen eller forespørgslen her…" value={text} onChange={e => setText(e.target.value)}></textarea>
              </div>
              <div className="paste-row">
                <input ref={fileRef} type="file" accept=".txt,.eml,.md,.csv,.pdf,image/*" hidden onChange={e => onFile(e.target.files[0])} />
                <button className="btn btn-ghost btn-sm" onClick={() => fileRef.current && fileRef.current.click()}><Icon n="upload" /> Vedhæft fil</button>
                {fileName && <span className="file-chip"><Icon n="doc" /> {fileName}</span>}
                <span className="nav-spacer"></span>
                <button className="btn btn-quiet btn-sm" onClick={() => setText(SAMPLE)}>Indsæt eksempel</button>
              </div>
            </div>
          )}
        </div>

        <div className="m-foot">
          {phase === 'review'
            ? <button className="btn btn-ghost btn-sm" onClick={() => setPhase('input')}><Icon n="arrowL" /> Tilbage</button>
            : <span className="oc-note" style={{ margin: 0 }}><Icon n="spark" /> PDF/billede: indsæt teksten — eller opret og udfyld i analysen</span>}
          {phase === 'review'
            ? <button className="btn btn-primary btn-sm" onClick={create}><Icon n="check" /> Opret forespørgsel</button>
            : <button className="btn btn-primary btn-arrow btn-sm" disabled={!text.trim()} onClick={analyse}><Icon n="spark" /> Læs med Fragta</button>}
        </div>
      </div>
    </div>
  );
}

// ---- COUNT-UP (animated stat numbers) --------------------------------------
function CountUp({ value }) {
  const str = String(value);
  const m = str.match(/-?[\d.,]*\d/);
  const target = m ? parseFloat(m[0].replace(/\./g, '').replace(',', '.')) : null;
  const [n, setN] = useState(target == null ? null : 0);
  useEffect(() => {
    if (target == null) return;
    let raf, start;
    const dur = 900 + Math.min(target, 60) * 8;
    const ease = t => 1 - Math.pow(1 - t, 3);
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / dur);
      setN(Math.round(ease(p) * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  if (target == null) return <>{str}</>;
  return <>{str.replace(m[0], n.toLocaleString('da-DK'))}</>;
}

// ---- INDBAKKE / RFQ PIPELINE -----------------------------------------------
// ---- små danske dato-hjælpere til sortering --------------------------------
const DA_MONTHS = { jan: 0, feb: 1, mar: 2, apr: 3, maj: 4, jun: 5, jul: 6, aug: 7, sep: 8, okt: 9, nov: 10, dec: 11 };
function parseDaWhen(when) {
  // format: "26. jun 2026 · 10:57"
  const m = /(\d{1,2})\.\s*([a-zæøå]+)\s+(\d{4})(?:.*?(\d{1,2}):(\d{2}))?/i.exec(when || '');
  if (!m) return 0;
  const mon = DA_MONTHS[m[2].toLowerCase().slice(0, 3)] ?? 0;
  return new Date(+m[3], mon, +m[1], +(m[4] || 0), +(m[5] || 0)).getTime();
}

// ---- klikbar dropdown (filter / sortér) ------------------------------------
function SelectMenu({ ico, options, value, onChange, prefix }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const cur = options.find(o => o[0] === value) || options[0];
  return (
    <div className="selectish-wrap" ref={ref}>
      <button className={'selectish' + (open ? ' on' : '')} type="button" onClick={() => setOpen(o => !o)}>
        <Icon n={ico} /> {prefix || ''}{cur[1]} <Icon n="chevD" />
      </button>
      {open && (
        <div className="sel-menu">
          {options.map(o => (
            <button key={o[0]} type="button" className={'sel-opt' + (o[0] === value ? ' on' : '')} onClick={() => { onChange(o[0]); setOpen(false); }}>
              {o[1]}{o[0] === value ? <Icon n="check" /> : null}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Pipeline({ onOpen, initialFilter }) {
  const [filter, setFilter] = useState(initialFilter || 'all');
  const [creating, setCreating] = useState(false);
  const [sender, setSender] = useState('all');
  const [sort, setSort] = useState('new');
  const REQ = useLiveRequests();
  const counts = REQ.reduce((a, r) => (a[r.status] = (a[r.status] || 0) + 1, a), {});
  const segs = [
    ['all', 'Alle', REQ.length],
    ['new', 'Ny', counts.new || 0],
    ['wait', 'Afventer', counts.wait || 0],
    ['sent', 'Sendt', counts.sent || 0],
    ['done', 'Afsluttet', counts.done || 0],
  ];
  const senderOpts = [['all', 'Alle afsendere'], ...[...new Set(REQ.map(r => r.fromShort).filter(Boolean))].sort().map(s => [s, s])];
  const sortOpts = [['new', 'Nyeste'], ['old', 'Ældste'], ['conf', 'Højeste sikkerhed']];
  let list = filter === 'all' ? REQ : REQ.filter(r => r.status === filter);
  if (sender !== 'all') list = list.filter(r => r.fromShort === sender);
  list = [...list].sort((a, b) =>
    sort === 'conf' ? (b.conf || 0) - (a.conf || 0)
    : sort === 'old' ? parseDaWhen(a.when) - parseDaWhen(b.when)
    : parseDaWhen(b.when) - parseDaWhen(a.when));

  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Indbakke · live</span>
            <h1 className="page-title">Forespørgsler</h1>
            <p className="page-sub">Fragta læser indkommende mails, udtrækker rute og volumen og henter tilbud fra jeres vognmænd — automatisk.</p>
          </div>
          <div className="head-actions">
            <button className="btn btn-ghost btn-sm"><Icon n="refresh" /> Genindlæs</button>
            <button className="btn btn-dark btn-sm" onClick={() => setCreating(true)}><Icon n="plus" /> Manuel input</button>
          </div>
        </div>
        {creating && <CreateRequestModal onClose={() => setCreating(false)} onCreated={id => onOpen(id)} />}

        <div className="stat-row">
          {PIPELINE_STATS.map((s, i) => (
            <div className={'stat' + (i === 0 ? ' lead' : '')} key={i}>
              <div className="stat-top">
                <span className={'stat-ico ' + s.tone}><Icon n={s.ico} /></span>
                {s.delta && <span className="stat-delta">{s.delta}</span>}
              </div>
              <div>
                <div className="stat-n"><CountUp value={s.n} /></div>
                <div className="stat-l">{s.l}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="toolbar">
          <div className="seg">
            {segs.map(([k, lab, n]) => (
              <button key={k} className={filter === k ? 'on' : ''} onClick={() => setFilter(k)}>
                {lab} <span className="seg-n">{n}</span>
              </button>
            ))}
          </div>
          <div className="nav-spacer"></div>
          <SelectMenu ico="users" options={senderOpts} value={sender} onChange={setSender} />
          <SelectMenu ico="filter" options={sortOpts} value={sort} onChange={setSort} prefix="Sortér: " />
        </div>

        <div className="rows">
          {list.map(r => (
            <div className={'row row-st st-' + r.status + (r.status === 'new' ? ' is-new' : '')} key={r.id} onClick={() => onOpen(r.id)}>
              <span className="r-mark"></span>
              <div className="r-info">
                <div className="r-from">{r.fromShort}</div>
                <div className="r-subject">{r.subject}</div>
                <div className="r-meta">{r.route[0]} → {r.route[1]} · #{r.id}</div>
              </div>
              <div className="r-route">
                <b>{r.route[0]}</b> → <b>{r.route[1]}</b>
              </div>
              <div className="r-vol">{(getAnalyse(r) && getAnalyse(r).service) || r.service || '—'}</div>
              <div className="r-badges">
                <span className={'r-status st-' + r.status}>
                  <Icon n={r.status === 'done' ? 'checkc' : r.status === 'sent' ? 'send' : r.status === 'wait' ? 'clock' : r.status === 'err' ? 'x' : 'mail'} />
                  {STATUS_LABEL[r.status]}
                </span>
                {r.replies ? <span className="r-replies"><Icon n="arrowL" style={{ width: 11, height: 11 }} />{r.replies} svar</span> : null}
              </div>
              <span className="r-time">{r.when}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- KATALOG ----------------------------------------------------------------
function Katalog({ onOpen, onAdd }) {
  const [q, setQ] = useState('');
  const [active, setActive] = useState([]);
  const toggle = s => setActive(a => a.includes(s) ? a.filter(x => x !== s) : [...a, s]);
  const list = CARRIERS.filter(c => {
    const okQ = !q || (c.nm + c.land + c.contact).toLowerCase().includes(q.toLowerCase());
    const okS = !active.length || active.every(s => c.services.includes(s));
    return okQ && okS;
  });

  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Katalog · {CARRIERS.length} vognmænd</span>
            <h1 className="page-title">Jeres netværk</h1>
            <p className="page-sub">Alle de vognmænd Fragta henter tilbud fra. Tilføj, redigér og hold styr på service, ruter og pålidelighed.</p>
          </div>
          <div className="head-actions">
            <button className="btn btn-dark" onClick={onAdd}><Icon n="plus" /> Tilføj virksomhed</button>
          </div>
        </div>

        <div className="toolbar">
          <div className="search">
            <Icon n="search" />
            <input placeholder="Søg efter navn, land eller kontaktperson…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
        </div>
        <div className="toolbar" style={{ marginTop: -8 }}>
          {SERVICE_FILTERS.map(s => (
            <button key={s} className={'chip' + (active.includes(s) ? ' on' : '')} onClick={() => toggle(s)}>{s}</button>
          ))}
          {active.length > 0 && <button className="chip" onClick={() => setActive([])}>Ryd <span className="x">×</span></button>}
        </div>

        {list.length ? (
          <div className="cat-grid">
            {list.map(c => (
              <div className="coco" key={c.id} onClick={() => onOpen(c.id)}>
                <div className="co-top">
                  <div>
                    <div className="co-nm">{c.nm}</div>
                    <div className="co-id">#{c.id} · oprettet {c.created}</div>
                  </div>
                  <span className="co-flag"><Icon n="pin" style={{ width: 13, height: 13 }} />{c.flag}</span>
                </div>
                <div className="co-tags">{c.services.slice(0, 5).map(s => <ServiceTag key={s} s={s} />)}</div>
                <div className="co-rule"></div>
                <div className="co-meta">
                  <div className="co-mrow"><span className="mk">Kontakt</span><span className="mv">{c.contact}</span></div>
                  <div className="co-mrow"><span className="mk">Lasttype</span><span className="mv">{c.type}</span></div>
                  <div className="co-mrow"><span className="mk">Rute</span>
                    <span className="co-route">
                      <span className="route-pin from">{c.from}</span>
                      <span className="route-arrow">→</span>
                      {c.to.slice(0, 2).map(t => <span className="route-pin" key={t}>{t}</span>)}
                      {c.to.length > 2 && <span className="route-pin">+{c.to.length - 2}</span>}
                    </span>
                  </div>
                </div>
                <div className="co-foot">
                  <span className="co-score">Pålidelighed
                    <span className="score-bar"><i style={{ width: c.score + '%' }}></i></span>
                    {c.score}
                  </span>
                  <button className="btn btn-ghost btn-sm" onClick={e => { e.stopPropagation(); onOpen(c.id); }}><Icon n="edit" /> Rediger</button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="rows"><div className="empty">
            <span className="em-ico"><Icon n="search" /></span>
            <h4>Ingen vognmænd matcher</h4>
            <p>Prøv at rydde filtrene eller tilføj en ny virksomhed til kataloget.</p>
          </div></div>
        )}
      </div>
    </div>
  );
}

// ---- VIRKSOMHEDSDETALJE -----------------------------------------------------
function CompanyDetail({ id, onBack, onEdit }) {
  const c = CARRIERS.find(x => x.id === id) || CARRIERS[0];
  const rels = REQUESTS.filter(r => r.offers.some(o => o.nm === c.nm)).slice(0, 3);
  const docs = c.docs || [
    { nm: 'CMR-fragtbrev (forsikring)', type: 'PDF', status: 'ok', exp: 'Gyldig til 31.12.2026', size: '240 KB' },
    { nm: 'Transportforsikring', type: 'PDF', status: 'ok', exp: 'Gyldig til 14.08.2026', size: '1,1 MB' },
    { nm: 'Forretningslicens (CVR)', type: 'PDF', status: 'ok', exp: 'Bekræftet', size: '320 KB' },
    { nm: 'ADR-bevis', type: 'PDF', status: 'warn', exp: 'Udløber om 18 dage', size: '180 KB' },
    { nm: 'Kørebevis / fællesskabstilladelse', type: 'PDF', status: 'ok', exp: 'Gyldig', size: '410 KB' },
  ];
  return (
    <div className="page reveal">
      <div className="wrap">
        <a className="back-link" onClick={onBack}><Icon n="arrowL" /> Tilbage til katalog</a>
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Vognmand #{c.id}</span>
            <h1 className="page-title" style={{ fontSize: 'clamp(26px,3vw,38px)' }}>{c.nm}</h1>
          </div>
          <div className="head-actions">
            <button className="btn btn-ghost btn-sm"><Icon n="mail" /> Skriv</button>
            <button className="btn btn-dark btn-sm" onClick={onEdit}><Icon n="edit" /> Rediger</button>
          </div>
        </div>

        <div className="detail-grid">
          <div className="panel">
            <div className="panel-head"><h3>Stamdata</h3><span className="co-flag"><Icon n="pin" style={{ width: 13, height: 13 }} /> {c.land}</span></div>
            <div style={{ padding: 'var(--pad)' }}>
              <div className="co-tags" style={{ marginBottom: 18 }}>{c.services.map(s => <ServiceTag key={s} s={s} />)}</div>
              <div className="co-meta">
                <div className="co-mrow"><span className="mk">Kontakt</span><span className="mv">{c.contact}</span></div>
                <div className="co-mrow"><span className="mk">Telefon</span><span className="mv" style={{ color: 'var(--accent-deep)' }}>{c.tel}</span></div>
                <div className="co-mrow"><span className="mk">E-mail</span><span className="mv" style={{ color: 'var(--accent-deep)' }}>{c.mail}</span></div>
                <div className="co-mrow"><span className="mk">Lasttype</span><span className="mv">{c.type}</span></div>
                <div className="co-mrow"><span className="mk">Oprettet</span><span className="mv">{c.created}</span></div>
                <div className="co-mrow"><span className="mk">Rute</span>
                  <span className="co-route">
                    <span className="route-pin from">{c.from}</span><span className="route-arrow">→</span>
                    {c.to.map(t => <span className="route-pin" key={t}>{t}</span>)}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><h3>Pålidelighed</h3><span className="oc-cap">90-dages</span></div>
              <div style={{ padding: 'var(--pad)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--gap)' }}>
                {[['Score', c.score, ''], ['Vundne tilbud', 18, ''], ['Svartid', 7, 'min']].map(([l, n, u], i) => (
                  <div key={i}>
                    <div className="stat-n" style={{ fontSize: 28 }}>{n}<span style={{ fontSize: 13, color: 'var(--ink-dim)', marginLeft: 3 }}>{u}</span></div>
                    <div className="stat-l" style={{ marginTop: 8 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="panel" style={{ flex: 1 }}>
              <div className="panel-head"><h3>Seneste tilbud</h3></div>
              <div>
                {rels.length ? rels.map(r => (
                  <div className="co-recent" key={r.id}>
                    <span className="r-mark"></span>
                    <div className="cr-main"><div className="cr-route">{r.route[0]} → {r.route[1]}</div><div className="cr-id">#{r.id}</div></div>
                    <span className="cr-pr">{r.offers.find(o => o.nm === c.nm).pr}</span>
                    <StatusBadge s={r.status} />
                  </div>
                )) : <div className="empty" style={{ padding: 40 }}><p>Ingen tilbud endnu.</p></div>}
              </div>
            </div>
          </div>
        </div>

        <div className="panel" style={{ marginTop: 'var(--gap)' }}>
          <div className="panel-head">
            <h3>Dokumenter & papirer</h3>
            <span className="oc-cap">{docs.length} uploadet</span>
          </div>
          <div className="docs-list">
            {docs.map((d, i) => (
              <div className="doc-row" key={i}>
                <span className="doc-ic"><Icon n="doc" /></span>
                <div className="doc-main">
                  <div className="doc-nm">{d.nm}</div>
                  <div className="doc-meta">{d.type} · {d.size}</div>
                </div>
                <span className={'doc-exp' + (d.status === 'warn' ? ' warn' : '')}>
                  {d.status === 'warn' ? <Icon n="clock" /> : <Icon n="check" />}{d.exp}
                </span>
                <button className="btn btn-quiet btn-sm"><Icon n="arrowL" style={{ transform: 'rotate(-90deg)' }} /> Hent</button>
              </div>
            ))}
            <div className="doc-add"><Icon n="upload" /> Træk en fil hertil for at tilføje et dokument</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Pipeline, Katalog, CompanyDetail });