// src/ui/steps/step4-result.jsx — Openingsbod (o.b.v. timesheet) + aannames + onderhandelsignalen + export

const StepResult = ({ state, setState, back, restart }) => {
  const opdracht = window.calc.berekenOpdracht(state);
  const huidigeRol = state.rollen?.[0];
  const rolResultaat = opdracht.rolResultaten?.[0]?.result;
  const [copied, setCopied] = React.useState(false);
  const [sharing, setSharing] = React.useState(false);
  const [signalen, setSignalen] = React.useState([]);
  const [loadingSig, setLoadingSig] = React.useState(false);
  const [sigError, setSigError] = React.useState(false);

  React.useEffect(() => {
    if (!huidigeRol || !state.omschrijving) return;
    const ctrl = new AbortController();
    setLoadingSig(true);
    window.aiHelp.signalOnderhandelpunten(
      state.omschrijving,
      { signal: ctrl.signal },
      {
        rol: huidigeRol.rol,
        niveau: huidigeRol.niveau,
        uren: huidigeRol.uren || {},
        urenDetails: huidigeRol.urenDetails || {},
        reiskm: opdracht.apartOfferen?.reiskm || 0,
        materiaal: opdracht.apartOfferen?.materiaal || 0,
        inhuurDerden: opdracht.apartOfferen?.inhuurDerden || 0,
      }
    ).then(r => {
      if (ctrl.signal.aborted) return;
      setLoadingSig(false);
      if (r?.signalen) setSignalen(r.signalen);
      else setSigError(true);
    });
    return () => ctrl.abort();
  }, []);

  if (!rolResultaat || !huidigeRol) {
    return <div style={{ padding: 40, color: FW.navy }}>Geen berekening mogelijk — ga terug en vul de timesheet in.</div>;
  }

  const isFestival = state.type === "festival";

  const shareLink = () => {
    const json = btoa(unescape(encodeURIComponent(JSON.stringify(state))));
    const url = `${location.origin}${location.pathname}#berekening=${json}`;
    navigator.clipboard.writeText(url);
    setSharing(true);
    setTimeout(() => setSharing(false), 2000);
  };
  const copyEmail = () => {
    const txt = generateEmail(state, opdracht, huidigeRol, rolResultaat);
    navigator.clipboard.writeText(txt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  const printPdf = () => window.print();

  return (
    <div className="result-page">
      <StepHeader
        tag="Openingsbod"
        title="Jouw minimum starttarief"
        sub="Op basis van de Fair Pay richtlijn 2026 en jouw ingevulde timesheet. Dit is de onderkant — lager gaan is onder het Fair Pay minimum. Alle waarden kun je hieronder aanpassen."
      />

      {/* Grote getal */}
      <FwCard tint="navy" padded={false} className="summary-card" style={{ padding: "40px 44px", marginBottom: 24 }}>
        <div className="summary-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, alignItems: "end" }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.5, color: FW.yellow, opacity: .9 }}>Uurtarief</div>
            <div className="summary-value" style={{ fontSize: 48, fontWeight: 700, color: "#fff", lineHeight: 1, marginTop: 8, fontVariantNumeric: "tabular-nums" }}>
              {window.calc.fmt(rolResultaat.uurtarief)}
            </div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,.65)", marginTop: 6 }}>Incl. {isFestival ? "69,26%" : "74,45%"} opslag</div>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.5, color: FW.yellow, opacity: .9 }}>Totaal uren</div>
            <div className="summary-value" style={{ fontSize: 48, fontWeight: 700, color: "#fff", lineHeight: 1, marginTop: 8, fontVariantNumeric: "tabular-nums" }}>
              {rolResultaat.urenTotaal}
            </div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,.65)", marginTop: 6 }}>
              {rolResultaat.urenHoofdwerk} hoofd · {rolResultaat.urenVoorbereiding} voor · {rolResultaat.urenAfronding} na{rolResultaat.urenPrPromotie ? ` · ${rolResultaat.urenPrPromotie} pr` : ""}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.5, color: FW.yellow, opacity: .9 }}>Openingsbod</div>
            <div className="summary-value" style={{ fontSize: 48, fontWeight: 700, color: "#fff", lineHeight: 1, marginTop: 8, fontVariantNumeric: "tabular-nums" }}>
              {window.calc.fmtInt(rolResultaat.openingsbod)}
            </div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,.65)", marginTop: 6 }}>
              Excl. btw · incl: {window.calc.fmtInt(opdracht.totaalInclBtw)}
            </div>
          </div>
        </div>
      </FwCard>

      <div className="row-2col" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 24, alignItems: "start" }}>
        <div>
          {/* Onderbouwing */}
          <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Onderbouwing</div>
          <div style={{ background: FW.white, border: `1.5px solid ${FW.gray100}`, borderRadius: 20, padding: 24 }}>
            <UrenCategorieRegel label="Voorbereiding" uren={rolResultaat.urenVoorbereiding} uurtarief={rolResultaat.uurtarief} details={huidigeRol.urenDetails?.voorbereiding} />
            <UrenCategorieRegel label="Hoofdwerkzaamheden" uren={rolResultaat.urenHoofdwerk} uurtarief={rolResultaat.uurtarief} details={huidigeRol.urenDetails?.hoofdwerk} />
            <UrenCategorieRegel label="Afronding" uren={rolResultaat.urenAfronding} uurtarief={rolResultaat.uurtarief} details={huidigeRol.urenDetails?.afronding} />
            {rolResultaat.urenPrPromotie > 0 && (
              <UrenCategorieRegel label="PR & promotie" uren={rolResultaat.urenPrPromotie} uurtarief={rolResultaat.uurtarief} details={huidigeRol.urenDetails?.pr_promotie} />
            )}
            <div style={{ height: 1, background: FW.gray100, margin: "12px 0" }} />
            <Regel label={`Subtotaal arbeid · ${rolResultaat.urenTotaal} uur`} bedrag={opdracht.subtotaalArbeid} strong />

            {opdracht.apartOfferen.subtotaalApart > 0 && (
              <>
                <div style={{ marginTop: 14, fontSize: 13, fontWeight: 700, color: FW.navy, textTransform: "uppercase", letterSpacing: 0.5, opacity: .7 }}>Apart te offreren</div>
                {opdracht.apartOfferen.reiskosten > 0 && (
                  <Regel label={`Reiskosten · ${opdracht.apartOfferen.reiskm} km × € ${opdracht.apartOfferen.reiskmTarief.toFixed(2)}`} bedrag={opdracht.apartOfferen.reiskosten} />
                )}
                {opdracht.apartOfferen.materiaal > 0 && (
                  <Regel label="Materiaal / onkosten" bedrag={opdracht.apartOfferen.materiaal} />
                )}
                {opdracht.apartOfferen.inhuurDerden > 0 && (
                  <Regel label="Inhuur derden" bedrag={opdracht.apartOfferen.inhuurDerden} />
                )}
              </>
            )}
            <div style={{ height: 1, background: FW.gray100, margin: "12px 0" }} />
            <Regel label="Totaal excl. btw" bedrag={opdracht.totaalExBtw} strong />
            <Regel label="21% btw" bedrag={opdracht.btw} />
            <Regel label="Totaal incl. btw" bedrag={opdracht.totaalInclBtw} strong />
          </div>

          {/* Onderhandelsignalen */}
          {loadingSig && (
            <div style={{ marginTop: 24, padding: 16, background: FW.beige2, borderRadius: 14, fontSize: 14, color: FW.navy, display: "inline-flex", alignItems: "center", gap: 10 }}>
              <i className="ri-sparkling-2-line" />
              Aandachtspunten voor je onderhandeling worden geladen…
            </div>
          )}
          {!loadingSig && sigError && (
            <FwInlineBanner type="warning" onDismiss={() => setSigError(false)} style={{ marginTop: 24 }}>
              <div style={{ fontWeight: 700 }}>Onderhandelpunten konden niet geladen worden.</div>
            </FwInlineBanner>
          )}
          {!loadingSig && signalen.length > 0 && (
            <FwCard padded={true} style={{ marginTop: 24, padding: 24, background: FW.cream, border: `1.5px solid ${FW.yellow}` }}>
              <h3 style={{ margin: "0 0 6px", fontSize: 18, fontWeight: 700, color: FW.navy, display: "inline-flex", alignItems: "center", gap: 8 }}>
                <i className="ri-chat-3-line" /> Aandachtspunten voor je onderhandeling
              </h3>
              <p style={{ fontSize: 14, color: FW.navy2, margin: "0 0 12px", lineHeight: 1.5 }}>
                Dit openingsbod is het minimum volgens Fair Pay. Deze factoren uit jouw omschrijving kunnen reden zijn om hoger in te zetten — bespreek ze met je opdrachtgever.
              </p>
              <ul style={{ margin: 0, paddingLeft: 18, display: "grid", gap: 8 }}>
                {signalen.map((s, i) => (
                  <li key={i} style={{ fontSize: 14, color: FW.navy2, lineHeight: 1.5 }}>
                    <strong style={{ color: FW.navy }}>{s.factor}</strong> — {s.toelichting}
                    {s.leidraad_verwijzing && (
                      <div style={{ fontSize: 13, color: FW.gray500, marginTop: 2 }}>
                        Zie ook: Leidraad veilig werken, onderdeel "{s.leidraad_verwijzing}"
                      </div>
                    )}
                  </li>
                ))}
              </ul>
            </FwCard>
          )}

          {/* Aannames */}
          <div style={{ marginTop: 32, fontSize: 20, fontWeight: 700, marginBottom: 6 }}>Aannames</div>
          <div style={{ fontSize: 14, color: FW.navy2, marginBottom: 16 }}>
            Klik op een aanname om de onderbouwing te zien of de waarde aan te passen.
          </div>
          <div style={{ display: "grid", gap: 8 }}>
            <Aanname
              label="Type opdracht"
              waarde={isFestival ? "Filmfestival" : "Film/AV-productie"}
              uitleg={`Voor ${isFestival ? "filmfestivals" : "film/AV-producties"} geldt een eigen Fair Pay richtlijn met ${isFestival ? "12 schalen (1-12, Cao Toneel & Dans)" : "11 zwaarteniveaus (A-K)"}. Dit bepaalt welke tariefkaart we gebruiken.`}
              onEdit={() => restart()}
            />
            <Aanname
              label="Rol / functie"
              waarde={`${huidigeRol.rol} · ${huidigeRol.dep}`}
              uitleg={`Op basis van ${state.omschrijving ? "jouw omschrijving" : "jouw keuze in de rollen-lijst"} is deze rol gekozen uit de Gids Rollen Film/AV${isFestival ? " en Functiehandboek Filmfestivals" : ""}.`}
              onEdit={() => { back(); back(); back(); }}
            />
            <Aanname
              label="Zwaarteniveau"
              waarde={`${huidigeRol.niveau}${rolResultaat.tariefRij?.domein ? ` (${rolResultaat.tariefRij.domein})` : (rolResultaat.tariefRij?.rol_voorbeeld ? ` (${rolResultaat.tariefRij.rol_voorbeeld})` : "")}`}
              uitleg={`Het Opdracht Kompas koppelt elke opdracht aan een zwaarteniveau. Niveau ${huidigeRol.niveau} geeft het minimum starttarief van ${window.calc.fmt(rolResultaat.uurtarief)}/u.`}
              onEdit={() => { back(); back(); }}
            />
            <Aanname
              label="Opslagfactor"
              waarde={isFestival ? "69,26% (digiPACCT)" : "74,45% (Ketentafel Film/AV)"}
              uitleg={isFestival
                ? "Voor filmfestivals geldt de digiPACCT-methode: bedrijfskosten (15%), niet-declarabele uren (17%), vakantietoeslag (8%), ziekte/arbeidsongeschiktheid (14,5%), ZVW (5,32%) en pensioen (9,44%). Samen: 69,26%."
                : "De opslagfactor dekt niet-declarabele kosten (15%), niet-declarabele tijd (25%), vakantietoeslag (8%), eindejaarsuitkering (3,45%), ZVW (6%), arbeidsongeschiktheid (7%) en pensioen (10%). Samen: 74,45%."}
              detail={<OpslagTabel isFestival={isFestival} />}
            />
            <Aanname
              label="Voorbereiding"
              waarde={`${rolResultaat.urenVoorbereiding} uur`}
              uitleg="Wat je doet vóór het hoofdwerk kan beginnen — research, scripts lezen, locatiebezoek, stijlbespreking, etc. Telt als betaalde tijd."
              onEdit={() => back()}
              detail={<UrenDetails details={huidigeRol.urenDetails?.voorbereiding} />}
            />
            <Aanname
              label="Hoofdwerkzaamheden"
              waarde={`${rolResultaat.urenHoofdwerk} uur`}
              uitleg="De kernactiviteiten van je opdracht — het directe werk waar je opdrachtgever je voor inhuurt."
              onEdit={() => back()}
              detail={<UrenDetails details={huidigeRol.urenDetails?.hoofdwerk} />}
            />
            <Aanname
              label="Afronding"
              waarde={`${rolResultaat.urenAfronding} uur`}
              uitleg="Wat je ná het hoofdwerk doet om de opdracht echt af te ronden — overdracht, exports, archivering, opruimen."
              onEdit={() => back()}
              detail={<UrenDetails details={huidigeRol.urenDetails?.afronding} />}
            />
            {rolResultaat.urenPrPromotie > 0 && (
              <Aanname
                label="PR & promotie"
                waarde={`${rolResultaat.urenPrPromotie} uur`}
                uitleg="Promotionele werkzaamheden die onderdeel zijn van de opdracht — interviews, premières, persdagen."
                onEdit={() => back()}
                detail={<UrenDetails details={huidigeRol.urenDetails?.pr_promotie} />}
              />
            )}
            {opdracht.apartOfferen.reiskm > 0 && (
              <Aanname
                label="Reiskilometers"
                waarde={`${opdracht.apartOfferen.reiskm} km × € ${opdracht.apartOfferen.reiskmTarief.toFixed(2)}`}
                uitleg="Het onbelaste kilometertarief voor 2026 is € 0,23. Dit wordt apart doorberekend aan de opdrachtgever."
                onEdit={() => back()}
              />
            )}
            {opdracht.apartOfferen.materiaal > 0 && (
              <Aanname
                label="Materiaal / onkosten"
                waarde={window.calc.fmt(opdracht.apartOfferen.materiaal)}
                uitleg="Declareerbare onkosten of aangeschaft materiaal dat niet in het uurtarief zit (bijv. props, kostuum-aankopen)."
                onEdit={() => back()}
              />
            )}
            {opdracht.apartOfferen.inhuurDerden > 0 && (
              <Aanname
                label="Inhuur derden"
                waarde={window.calc.fmt(opdracht.apartOfferen.inhuurDerden)}
                uitleg="Kosten voor assistenten of apparatuur die jij voorfinanciert of inhuurt voor deze opdracht."
                onEdit={() => back()}
              />
            )}
          </div>
        </div>

        <div className="aside-card" style={{ display: "grid", gap: 12, position: "sticky", top: 20 }}>
          <FwCard padded={false} style={{ padding: 22, background: FW.mint }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 10, display: "inline-flex", alignItems: "center", gap: 6 }}>
              <i className="ri-send-plane-line" /> Deel je openingsbod
            </div>
            <div style={{ fontSize: 14, color: FW.navy2, marginBottom: 14, lineHeight: 1.4 }}>
              Deel via een link, kopieer een e-mailtekst, of download als onderbouwingsdocument.
            </div>
            <div style={{ display: "grid", gap: 8 }}>
              <FwButton variant="navy" icon="ri-link" arrow={false} onClick={shareLink}>
                {sharing ? "Link gekopieerd ✓" : "Kopieer deelbare link"}
              </FwButton>
              <FwButton variant="secondary" icon="ri-mail-line" arrow={false} onClick={copyEmail}>
                {copied ? "E-mailtekst gekopieerd ✓" : "Kopieer e-mailtekst"}
              </FwButton>
              <FwButton variant="secondary" icon="ri-file-download-line" arrow={false} onClick={printPdf}>
                Download als PDF
              </FwButton>
            </div>
          </FwCard>

          <FwCard padded={false} style={{ padding: 22, background: FW.cream }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 10 }}>Goed om te benoemen</div>
            <ul style={{ fontSize: 14, color: FW.navy2, margin: 0, paddingLeft: 16, lineHeight: 1.55 }}>
              <li>Dit is een <b>minimum</b> starttarief volgens Fair Pay. Meer ervaring, complexiteit of onregelmatige uren zijn <b>onderhandelruimte</b>.</li>
              <li>Reis-, materiaal- en inhuurkosten mag je <b>apart</b> factureren bovenop het uurtarief.</li>
              <li>Het tarief bevat al een <b>opslag van {isFestival ? "69,26%" : "74,45%"}</b> voor zzp-lasten, offerte-tijd en niet-declarabele kosten.</li>
            </ul>
          </FwCard>
        </div>
      </div>

      <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between" }} className="hide-print step-nav">
        <FwButton variant="ghost" arrow={false} onClick={back}>← Pas timesheet aan</FwButton>
        <FwButton variant="secondary" arrow={false} onClick={restart}>Nieuwe berekening</FwButton>
      </div>
    </div>
  );
};

const UrenCategorieRegel = ({ label, uren, uurtarief, details }) => {
  if (!uren || uren <= 0) return null;
  const details_ingevuld = Array.isArray(details) ? details.filter(d => d.activiteit && (Number(d.uren) || 0) > 0) : [];
  return (
    <div style={{ padding: "4px 0" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "8px 0", fontSize: 15, color: FW.navy }}>
        <span>{label} · {uren} uur × {window.calc.fmt(uurtarief)}</span>
        <span style={{ fontWeight: 700 }}>{window.calc.fmt(uren * uurtarief)}</span>
      </div>
      {details_ingevuld.length > 0 && (
        <div style={{ paddingLeft: 14, fontSize: 13, color: FW.gray500, display: "grid", gap: 2, marginTop: -4, marginBottom: 4 }}>
          {details_ingevuld.map(d => (
            <div key={d.id}>— {d.activiteit} ({d.uren} uur)</div>
          ))}
        </div>
      )}
    </div>
  );
};

const UrenDetails = ({ details }) => {
  const rijen = Array.isArray(details) ? details.filter(d => d.activiteit && (Number(d.uren) || 0) > 0) : [];
  if (!rijen.length) return null;
  return (
    <div style={{ background: FW.white, border: `1px solid ${FW.gray100}`, borderRadius: 10, padding: 12, fontSize: 13, marginBottom: 12 }}>
      {rijen.map(d => (
        <div key={d.id} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
          <span style={{ color: FW.navy2 }}>{d.activiteit}</span>
          <span style={{ fontWeight: 700, color: FW.navy }}>{d.uren} uur</span>
        </div>
      ))}
    </div>
  );
};

const Regel = ({ label, bedrag, strong }) => (
  <div style={{
    display: "flex", justifyContent: "space-between", alignItems: "baseline",
    padding: "8px 0", fontSize: strong ? 17 : 15, fontWeight: strong ? 700 : 400, color: FW.navy,
  }}>
    <span>{label}</span>
    <span style={{ fontWeight: 700 }}>{window.calc.fmt(bedrag)}</span>
  </div>
);

const Aanname = ({ label, waarde, uitleg, detail, onEdit }) => {
  const [open, setOpen] = React.useState(false);

  return (
    <div style={{ background: FW.white, border: `1.5px solid ${FW.gray100}`, borderRadius: 14, overflow: "hidden" }}>
      <div onClick={() => setOpen(!open)} style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 10,
        padding: "14px 18px", cursor: "pointer",
      }}>
        <div className="aanname-row" style={{ display: "flex", alignItems: "baseline", gap: 12, flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: FW.gray500, textTransform: "uppercase", letterSpacing: 0.5, minWidth: 160 }}>{label}</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: FW.navy, wordBreak: "break-word" }}>{waarde}</div>
        </div>
        <i className={`ri-arrow-down-s-line`} style={{
          fontSize: 22, color: FW.gray500,
          transform: open ? "rotate(180deg)" : "rotate(0)", transition: "transform .15s",
        }} />
      </div>
      {open && (
        <div style={{ padding: "0 18px 18px", background: FW.cream }}>
          <div style={{ fontSize: 14, lineHeight: 1.5, color: FW.navy2, padding: "6px 0 12px" }}>{uitleg}</div>
          {detail}
          {onEdit && (
            <button onClick={onEdit} style={{
              background: "transparent", color: FW.navy, border: `1.5px solid ${FW.navy}`,
              borderRadius: 999, padding: "6px 14px", fontWeight: 700, fontSize: 13,
              cursor: "pointer", fontFamily: "var(--font-sans)",
            }}>
              <i className="ri-pencil-line" style={{ marginRight: 6 }} /> Aanpassen
            </button>
          )}
        </div>
      )}
    </div>
  );
};

const OpslagTabel = ({ isFestival }) => {
  const componenten = isFestival ? window.OPSLAG_COMPONENTEN_FESTIVAL : window.OPSLAG_COMPONENTEN;
  const totaalLabel = isFestival ? "69,26%" : "74,45%";
  return (
    <div style={{ background: FW.white, border: `1px solid ${FW.gray100}`, borderRadius: 10, padding: 12, fontSize: 13, marginBottom: 12 }}>
      {componenten.map((c, i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", borderBottom: i < componenten.length - 1 ? `1px dashed ${FW.gray100}` : "none" }}>
          <span>{c.label}</span><span style={{ fontWeight: 700 }}>{(c.pct*100).toFixed(2).replace(".00","").replace(".","," )}%</span>
        </div>
      ))}
      <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0 2px", marginTop: 4, borderTop: `1.5px solid ${FW.navy}`, fontWeight: 700 }}>
        <span>Totaal</span><span>{totaalLabel}</span>
      </div>
    </div>
  );
};

function generateEmail(state, opdracht, rol, rolResultaat) {
  const isFestival = state.type === "festival";
  const urenDetails = rol.urenDetails || {};
  const detailRegels = (cat, label) => {
    const rijen = Array.isArray(urenDetails[cat]) ? urenDetails[cat].filter(d => d.activiteit && (Number(d.uren) || 0) > 0) : [];
    if (!rijen.length) return "";
    const lijst = rijen.map(r => `    - ${r.activiteit}: ${r.uren} uur`).join("\n");
    const totaal = rijen.reduce((s, r) => s + (Number(r.uren) || 0), 0);
    return `\n  ${label} (${totaal} uur):\n${lijst}`;
  };

  const signalen = (rol.onderhandelsignalen || []).map(s => `  - ${s.factor}: ${s.toelichting}`).join("\n");

  return `Beste [opdrachtgever],

Hierbij een openingsbod voor mijn inzet als ${rol.rol} (${rol.dep}) op jouw ${isFestival ? "filmfestival" : "filmproductie"}.

Op basis van de Fair Pay richtlijn 2026 (zwaarteniveau ${rol.niveau}${!isFestival ? " volgens Opdracht Kompas Film/AV-productie" : ""}):

• Uurtarief: ${window.calc.fmt(rolResultaat.uurtarief)} (incl. ${isFestival ? "69,26%" : "74,45%"} opslag)
• Totale tijdsinvestering: ${rolResultaat.urenTotaal} uur
• Openingsbod: ${window.calc.fmtInt(rolResultaat.openingsbod)} excl. btw

Tijdsinvestering per categorie:${detailRegels("voorbereiding", "Voorbereiding")}${detailRegels("hoofdwerk", "Hoofdwerkzaamheden")}${detailRegels("afronding", "Afronding")}${detailRegels("pr_promotie", "PR & promotie")}
${opdracht.apartOfferen.subtotaalApart > 0 ? `
Apart te offreren:${opdracht.apartOfferen.reiskosten > 0 ? `\n  - Reiskosten: ${window.calc.fmt(opdracht.apartOfferen.reiskosten)} (${opdracht.apartOfferen.reiskm} km × € 0,23)` : ""}${opdracht.apartOfferen.materiaal > 0 ? `\n  - Materiaal / onkosten: ${window.calc.fmt(opdracht.apartOfferen.materiaal)}` : ""}${opdracht.apartOfferen.inhuurDerden > 0 ? `\n  - Inhuur derden: ${window.calc.fmt(opdracht.apartOfferen.inhuurDerden)}` : ""}
Totaal excl. btw: ${window.calc.fmtInt(opdracht.totaalExBtw)}
` : ""}${signalen ? `\nAandachtspunten voor onze onderhandeling:\n${signalen}\n` : ""}
Dit is een minimum starttarief conform de Fair Pay richtlijn van de sector. Ik ga graag in gesprek over scope, aanvullende werkzaamheden of specifieke omstandigheden van jouw productie.

Met vriendelijke groet,
[jouw naam]`;
}

window.StepResult = StepResult;