import React, { useState, useEffect, useMemo, useCallback } from "react";
import * as XLSX from "xlsx";

/* ============================================================
   GRENSROCK — Sponsor Management
   Data model (persisted in window.storage under one key):
   sponsors[]  editions[] (with formulas[])  deals[]
   ============================================================ */

const STORAGE_KEY = "grensrock:data:v1";
const DRINK_TICKET_VALUE = 27.5;

const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);

const LANGS = { nl: "Nederlands", fr: "Français", en: "English" };

/* ---------- contacts ---------- */
const COMMS = {
  info: "Information",
  invoice: "Invoicing",
  vouchers: "Tickets & vouchers",
};
const COMM_LABELS = {
  info:     { nl: "Algemene informatie", fr: "Informations générales", en: "General information" },
  invoice:  { nl: "Facturatie", fr: "Facturation", en: "Invoicing" },
  vouchers: { nl: "Tickets & bonnen", fr: "Tickets & bons", en: "Tickets & vouchers" },
};
const emptyContact = {
  firstName: "", lastName: "", email: "", phone: "", language: "nl",
  prefs: { info: true, invoice: false, vouchers: false },
};
const contactName = (c) => [c?.firstName, c?.lastName].filter(Boolean).join(" ").trim();
const sponsorContacts = (s) => (Array.isArray(s?.contacts) ? s.contacts : []);
const primaryContact = (s) => sponsorContacts(s).find((c) => c.email) || sponsorContacts(s)[0] || null;
/* Contacts who should receive a given kind of communication (falls back to the first contact) */
const contactsFor = (s, kind) => {
  const withMail = sponsorContacts(s).filter((c) => c.email);
  const picked = withMail.filter((c) => c.prefs?.[kind]);
  return picked.length ? picked : withMail.slice(0, 1);
};
/* Old single-contact sponsors become a one-entry contact list */
const withContacts = (s) => {
  if (Array.isArray(s.contacts)) return s;
  const had = s.contactName || s.contactEmail || s.contactPhone;
  return {
    ...s,
    contacts: had ? [{
      ...emptyContact,
      id: uid(),
      lastName: s.contactName || "",
      email: s.contactEmail || "",
      phone: s.contactPhone || "",
      language: s.contactLanguage || "nl",
      prefs: { info: true, invoice: true, vouchers: true },
    }] : [],
  };
};
const WEBSITE_OPTS = { logo: "Logo", name: "Name only", none: "No mention" };
const POSTER_OPTS = { logo: "Logo", name: "Name only", none: "No mention" };
const FOLDER_OPTS = { none: "No mention", full: "Full page", half: "Half page", quarter: "1/4 page", eighth: "1/8 page" };
const LED_ZONES = { vip: "VIP", foodvillage: "Food village", stage: "Stage" };

/* Migrate older saved data: ledboarding was a single value, folderMention a yes/no */
const normLed = (v) => Array.isArray(v) ? v.filter((x) => LED_ZONES[x]) : (v && v !== "none" ? [v] : []);
const normFolder = (v) => (typeof v === "boolean" ? (v ? "full" : "none") : (v && FOLDER_OPTS[v] ? v : "none"));
const normBenefits = (o) => ({
  ...o,
  ledboarding: normLed(o.ledboarding),
  folderMention: normFolder(o.folderMention),
  foodDrinkVouchers: Array.isArray(o.foodDrinkVouchers) ? o.foodDrinkVouchers : [],
  posterMention: POSTER_OPTS[o.posterMention] ? o.posterMention : "none",
  settlement: SETTLEMENTS[o.settlement] ? o.settlement : "invoice",
  inKindDescription: o.inKindDescription || "",
  inKindValue: o.inKindValue ?? "",
  refRequired: !!o.refRequired,
  invoiceReference: o.invoiceReference || "",
});

/* How the sponsor settles their contribution */
const SETTLEMENTS = {
  invoice: "Invoice (money)",
  inkind:  "In kind — no invoice",
  mixed:   "Combination: part invoiced, part in kind",
};

/* Amount that actually has to be invoiced */
const invoiceAmount = (d) => {
  const cost = Number(d.cost) || 0;
  if (d.settlement === "inkind") return 0;
  if (d.settlement === "mixed") return Math.max(0, cost - (Number(d.inKindValue) || 0));
  return cost;
};
const needsInvoice = (d) => invoiceAmount(d) > 0;
/* A reference is required when the sponsor is flagged as such (or the agreement overrides it) */
const refRequiredFor = (d, sponsor) => !!(sponsor?.refRequired || d?.refRequired);
const refMissing = (d, sponsor) =>
  needsInvoice(d) && refRequiredFor(d, sponsor) && !String(d.invoiceReference || "").trim();
const migrate = (data) => withPortalCodes({
  ...data,
  deals: (data.deals || []).map(normBenefits),
  editions: (data.editions || []).map((e) => ({ ...e, formulas: (e.formulas || []).map(normBenefits) })),
});

const ledLabel = (arr) => normLed(arr).map((z) => LED_ZONES[z]).join(" + ");

/* ---------- access ---------- */
/* Temporary shared password for everyone. Replace with real per-user
   authentication when the app moves to a backend (BillToBox phase). */
const SHARED_PASSWORD = "grensrock";
const sameEmail = (a, b) => normStr(a).toLowerCase() === normStr(b).toLowerCase();

const ROLES = {
  admin: "Admin — full access",
  user: "User — sponsors & agreements",
};
const isAdmin = (u) => u?.role === "admin";

/* Team accounts use firstname@grensrock.be */
const TEAM_DOMAIN = "grensrock.be";
const teamEmailFor = (firstName) => {
  const slug = normStr(firstName).toLowerCase()
    .normalize("NFD").replace(/[\u0300-\u036f]/g, "")   // strip accents
    .replace(/[^a-z0-9]/g, "");
  return slug ? `${slug}@${TEAM_DOMAIN}` : "";
};
const userName = (u) => [u?.firstName, u?.lastName].filter(Boolean).join(" ").trim() || u?.name || "";
/* Name of the team member responsible for a sponsor (falls back to legacy free text) */
const responsibleName = (sponsor, users = []) => {
  const u = users.find((x) => x.id === sponsor?.responsibleId);
  return u ? userName(u) : (sponsor?.responsible || "");
};
/* Old accounts stored a single name field */
const withUserNames = (u) => {
  if (u.firstName || u.lastName) return u;
  const parts = normStr(u.name).split(/\s+/).filter(Boolean);
  return { ...u, firstName: parts[0] || "", lastName: parts.slice(1).join(" ") };
};

const withPortalCodes = (data) => {
  const users = (data.users || []).map((u) => withUserNames({ role: "user", ...u }));
  /* Old sponsors stored the responsible as free text — match it to an account where possible */
  const linkResponsible = (s) => {
    if (s.responsibleId !== undefined) return s;
    const txt = normStr(s.responsible);
    const hit = txt && users.find((u) => userName(u).toLowerCase() === txt.toLowerCase()
      || normStr(u.firstName).toLowerCase() === txt.toLowerCase());
    return { ...s, responsibleId: hit ? hit.id : "" };
  };
  return {
    ...data,
    settings: { tickoweb: { ...defaultTickoweb }, ...(data.settings || {}),
      tickoweb: { ...defaultTickoweb, ...(data.settings?.tickoweb || {}) } },
    users,
    vouchers: data.vouchers || [],
    sponsors: (data.sponsors || []).map((s) => linkResponsible(withContacts(s))),
  };
};

/* ---------- logo storage (separate shared keys, so the main blob stays small) ---------- */
const logoKey = (sponsorId) => "grensrock:logo:" + sponsorId;

async function fileToLogoDataUrl(file) {
  const dataUrl = await new Promise((res, rej) => {
    const r = new FileReader();
    r.onload = () => res(r.result);
    r.onerror = () => rej(new Error("read failed"));
    r.readAsDataURL(file);
  });
  // SVG or already small: keep as-is (preserves transparency/vector quality)
  if (file.type === "image/svg+xml" || dataUrl.length < 700000) return dataUrl;
  // Downscale large raster images so they fit comfortably in storage
  const img = await new Promise((res, rej) => {
    const i = new Image();
    i.onload = () => res(i);
    i.onerror = () => rej(new Error("not an image"));
    i.src = dataUrl;
  });
  const max = 1200;
  const scale = Math.min(1, max / Math.max(img.width, img.height));
  const c = document.createElement("canvas");
  c.width = Math.max(1, Math.round(img.width * scale));
  c.height = Math.max(1, Math.round(img.height * scale));
  c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
  const out = c.toDataURL("image/png");
  if (out.length > 4500000) throw new Error("too large");
  return out;
}

/* Reusable logo block: shows current logo, allows upload/replace/remove */
function LogoUploader({ sponsorId, compact }) {
  const [logo, setLogo] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  useEffect(() => {
    let live = true;
    (async () => {
      try {
        const r = await window.storage.get(logoKey(sponsorId), true);
        if (live && r && r.value) setLogo(r.value);
      } catch { /* no logo yet */ }
    })();
    return () => { live = false; };
  }, [sponsorId]);

  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    setErr(""); setBusy(true);
    try {
      const dataUrl = await fileToLogoDataUrl(file);
      await window.storage.set(logoKey(sponsorId), dataUrl, true);
      setLogo(dataUrl);
    } catch (ex) {
      setErr(ex.message === "too large"
        ? "This image is too large even after resizing. Please use a smaller file."
        : "Couldn't read this file. Use a PNG, JPG or SVG.");
    }
    setBusy(false);
    e.target.value = "";
  };

  const remove = async () => {
    try { await window.storage.delete(logoKey(sponsorId), true); } catch { /* already gone */ }
    setLogo(null);
  };

  return (
    <div className={"gr-logoblock" + (compact ? " compact" : "")}>
      <div className="gr-logoframe">
        {logo ? <img src={logo} alt="Sponsor logo" /> : <span className="gr-muted">No logo yet</span>}
      </div>
      <div className="gr-logobtns">
        <label className="gr-mini gr-filebtn">
          {busy ? "Processing…" : logo ? "Replace logo" : "Upload logo"}
          <input type="file" accept="image/png,image/jpeg,image/svg+xml,image/webp" onChange={onFile} hidden />
        </label>
        {logo && <button className="gr-mini gr-danger" onClick={remove}>Remove</button>}
        {err && <span className="gr-muted" style={{ color: "var(--red)", fontSize: 12 }}>{err}</span>}
        {!err && !compact && <span className="gr-muted" style={{ fontSize: 12 }}>PNG, JPG or SVG — used for folder, LED boarding, website…</span>}
      </div>
    </div>
  );
}

/* ---------- portal invitation text ---------- */
function buildInvitation(sponsor, contact, responsible) {
  const c = contact || primaryContact(sponsor) || {};
  const lang = c.language || "nl";
  const B = (nl, fr, en) => ({ nl, fr, en }[lang]);
  return B(
`Beste ${contactName(c) || sponsor.companyName},

Via onze sponsortool kan u de gegevens van ${sponsor.companyName} voor Grensrock zelf nakijken en aanpassen, en uw logo opladen (voor de folder, ledboarding, website, ...).

Link: [link naar de sponsortool]
Meld u aan met uw e-mailadres (${c.email || "het adres dat wij van u hebben"}) en het wachtwoord: ${SHARED_PASSWORD}

Alvast bedankt!
${responsible || "Het Grensrock-team"}`,
`Cher/Chère ${contactName(c) || sponsor.companyName},

Via notre outil sponsors, vous pouvez vérifier et modifier vous-même les données de ${sponsor.companyName} pour Grensrock, et télécharger votre logo (pour le dépliant, le ledboarding, le site web, ...).

Lien : [lien vers l'outil sponsors]
Connectez-vous avec votre adresse e-mail (${c.email || "l'adresse que nous avons"}) et le mot de passe : ${SHARED_PASSWORD}

Merci d'avance !
${responsible || "L'équipe Grensrock"}`,
`Dear ${contactName(c) || sponsor.companyName},

Through our sponsor tool you can review and update ${sponsor.companyName}'s details for Grensrock yourself, and upload your logo (for the folder, LED boarding, website, ...).

Link: [link to the sponsor tool]
Log in with your email address (${c.email || "the address we have on file"}) and the password: ${SHARED_PASSWORD}

Thank you!
${responsible || "The Grensrock team"}`);
}


const eur = (n) => {
  const v = Number(n) || 0;
  return "€ " + v.toLocaleString("nl-BE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

const emptySponsor = {
  companyName: "", address: "", vatNumber: "", entityType: "legal",
  contacts: [],
  responsibleId: "", refRequired: false,
};

const emptyEdition = { name: "", startDate: "", endDate: "", location: "", active: true, formulas: [] };

const emptyFormula = {
  name: "", cost: "",
  vipFriday: 0, vipSaturday: 0, vipGuests: 0,
  drinkTickets: 0, foodDrinkValue: 0,
  folderMention: "none", websiteMention: "none", posterMention: "none", ledboarding: [],
};

const emptyDeal = {
  sponsorId: "", editionId: "", formulaName: "",
  cost: "", vipFriday: 0, vipSaturday: 0, vipGuests: 0,
  drinkTickets: 0, foodDrinkValue: 0, foodDrinkVouchers: [],
  folderMention: "none", websiteMention: "none", posterMention: "none", ledboarding: [],
  notes: "",
  settlement: "invoice", inKindDescription: "", inKindValue: "",
  refRequired: false, invoiceReference: "",
  invoiceCreated: false, invoiceNumber: "",
  emailSentAt: null, createdAt: null,
};

/* ---------- Email / contract templates ---------- */

function buildEmail(deal, sponsor, edition, contact) {
  const c = contact || primaryContact(sponsor) || {};
  const lang = c.language || "nl";
  const benefits = [];
  const B = (nl, fr, en) => ({ nl, fr, en }[lang]);

  if (Number(deal.vipFriday) > 0)
    benefits.push(B(`${deal.vipFriday} VIP-tickets vrijdag`, `${deal.vipFriday} tickets VIP vendredi`, `${deal.vipFriday} VIP tickets Friday`));
  if (Number(deal.vipSaturday) > 0)
    benefits.push(B(`${deal.vipSaturday} VIP-tickets zaterdag`, `${deal.vipSaturday} tickets VIP samedi`, `${deal.vipSaturday} VIP tickets Saturday`));
  if (Number(deal.vipGuests) > 0)
    benefits.push(B(`${deal.vipGuests} VIP-tickets voor genodigden`, `${deal.vipGuests} tickets VIP pour invités`, `${deal.vipGuests} VIP tickets for guests`));
  if (Number(deal.drinkTickets) > 0)
    benefits.push(B(
      `${deal.drinkTickets} drankbonnen (waarde ${eur(DRINK_TICKET_VALUE)} per bon)`,
      `${deal.drinkTickets} tickets boissons (valeur ${eur(DRINK_TICKET_VALUE)} par ticket)`,
      `${deal.drinkTickets} drink tickets (value ${eur(DRINK_TICKET_VALUE)} each)`));
  if (Number(deal.foodDrinkValue) > 0) {
    const vt = voucherText(deal.foodDrinkVouchers);
    const split = vt
      ? B(`, verdeeld in bonnen: ${vt}`, `, répartis en bons : ${vt}`, `, divided into vouchers: ${vt}`)
      : "";
    benefits.push(B(
      `Bonnen eten & drinken ter waarde van ${eur(deal.foodDrinkValue)}${split}`,
      `Bons food & boissons d'une valeur de ${eur(deal.foodDrinkValue)}${split}`,
      `Food & drink vouchers worth ${eur(deal.foodDrinkValue)}${split}`));
  }
  const folder = normFolder(deal.folderMention);
  if (folder !== "none") {
    const size = {
      full:   B("volledige pagina", "page entière", "full page"),
      half:   B("halve pagina", "demi-page", "half page"),
      quarter:B("1/4 pagina", "1/4 de page", "1/4 page"),
      eighth: B("1/8 pagina", "1/8 de page", "1/8 page"),
    }[folder];
    benefits.push(B(
      `Vermelding in de festivalfolder (${size})`,
      `Mention dans le dépliant du festival (${size})`,
      `Mention in the festival folder (${size})`));
  }
  if (deal.websiteMention !== "none")
    benefits.push(deal.websiteMention === "logo"
      ? B("Logo op de website", "Logo sur le site web", "Logo on the website")
      : B("Naamsvermelding op de website", "Mention du nom sur le site web", "Name mention on the website"));
  if (deal.posterMention && deal.posterMention !== "none")
    benefits.push(deal.posterMention === "logo"
      ? B("Logo op de festivalaffiche", "Logo sur l'affiche du festival", "Logo on the festival poster")
      : B("Naamsvermelding op de festivalaffiche", "Mention du nom sur l'affiche du festival", "Name mention on the festival poster"));
  const zones = normLed(deal.ledboarding);
  if (zones.length > 0) {
    const zoneList = zones.map((z) => LED_ZONES[z]).join(" + ");
    benefits.push(B(`Vermelding op ledboarding (${zoneList})`, `Mention sur le ledboarding (${zoneList})`, `Mention on LED boarding (${zoneList})`));
  }

  const list = benefits.map((b) => "  • " + b).join("\n");
  const dates = edition.startDate
    ? ` (${edition.startDate}${edition.endDate ? " – " + edition.endDate : ""})`
    : "";
  const notes = (deal.notes || "").trim();

  /* Contribution + settlement wording */
  const inKind = (deal.inKindDescription || "").trim();
  const toInvoice = invoiceAmount(deal);
  const contribution = B(
    `${contribution}`,
    `Contribution : ${eur(deal.cost)}`,
    `Contribution: ${eur(deal.cost)}`);
  const ref = String(deal.invoiceReference || "").trim();
  const refLine = refRequiredFor(deal, sponsor)
    ? (ref
      ? B(`\nReferentie op de factuur: ${ref}`, `\nRéférence sur la facture : ${ref}`, `\nReference on the invoice: ${ref}`)
      : B("\nGelieve ons de referentie te bezorgen die op de factuur moet komen.",
          "\nMerci de nous communiquer la référence à mentionner sur la facture.",
          "\nPlease let us know the reference to put on the invoice."))
    : "";
  let settlementBlock;
  if (deal.settlement === "inkind") {
    settlementBlock = B(
`Deze sponsoring gebeurt in natura${inKind ? `:\n${inKind}` : "."}
Er wordt hiervoor geen factuur opgemaakt.`,
`Ce sponsoring se fait en nature${inKind ? ` :\n${inKind}` : "."}
Aucune facture ne sera établie pour cet accord.`,
`This sponsorship is provided in kind${inKind ? `:\n${inKind}` : "."}
No invoice will be issued for this agreement.`);
  } else if (deal.settlement === "mixed") {
    settlementBlock = B(
`Een deel van deze sponsoring gebeurt in natura${inKind ? `:\n${inKind}` : "."}
Te factureren bedrag: ${eur(toInvoice)}. De facturatie volgt via e-invoicing (BillToBox).${refLine}`,
`Une partie de ce sponsoring se fait en nature${inKind ? ` :\n${inKind}` : "."}
Montant à facturer : ${eur(toInvoice)}. La facturation suivra par e-invoicing (BillToBox).${refLine}`,
`Part of this sponsorship is provided in kind${inKind ? `:\n${inKind}` : "."}
Amount to be invoiced: ${eur(toInvoice)}. Invoicing will follow via e-invoicing (BillToBox).${refLine}`);
  } else {
    settlementBlock = B(
      `De facturatie volgt via e-invoicing (BillToBox).${refLine}`,
      `La facturation suivra par e-invoicing (BillToBox).${refLine}`,
      `Invoicing will follow via e-invoicing (BillToBox).${refLine}`);
  }

  const confirm = B(
    'Dit overzicht geldt als contract. Gelieve dit ter bevestiging te beantwoorden met "akkoord".',
    'Cet aperçu fait office de contrat. Veuillez répondre « accord » pour confirmation.',
    'This overview serves as the contract. Please reply "agreed" to confirm.');

  const subject = B(
    `Bevestiging sponsorovereenkomst ${edition.name}`,
    `Confirmation de l'accord de sponsoring ${edition.name}`,
    `Confirmation of sponsorship agreement ${edition.name}`);

  const body = B(
`Beste ${contactName(c) || sponsor.companyName},

Hartelijk dank voor uw steun aan ${edition.name}${dates}. Hieronder vindt u een overzicht van de afgesproken sponsorformule${deal.formulaName ? ` "${deal.formulaName}"` : ""}.

Sponsor: ${sponsor.companyName}
BTW-nummer: ${sponsor.vatNumber || "—"}
${contribution}

Inbegrepen:
${list || "  • (geen voordelen geselecteerd)"}
${notes ? "\nOpmerkingen:\n" + notes + "\n" : ""}
${settlementBlock}

${confirm}

Met vriendelijke groeten,
${deal.responsible || "Het Grensrock-team"}
Grensrock`,
`Cher/Chère ${contactName(c) || sponsor.companyName},

Merci beaucoup pour votre soutien à ${edition.name}${dates}. Vous trouverez ci-dessous un aperçu de la formule de sponsoring convenue${deal.formulaName ? ` « ${deal.formulaName} »` : ""}.

Sponsor : ${sponsor.companyName}
Numéro de TVA : ${sponsor.vatNumber || "—"}
${contribution}

Inclus :
${list || "  • (aucun avantage sélectionné)"}
${notes ? "\nRemarques :\n" + notes + "\n" : ""}
${settlementBlock}

${confirm}

Cordialement,
${deal.responsible || "L'équipe Grensrock"}
Grensrock`,
`Dear ${contactName(c) || sponsor.companyName},

Thank you very much for supporting ${edition.name}${dates}. Below you will find an overview of the agreed sponsorship formula${deal.formulaName ? ` "${deal.formulaName}"` : ""}.

Sponsor: ${sponsor.companyName}
VAT number: ${sponsor.vatNumber || "—"}
${contribution}

Included:
${list || "  • (no benefits selected)"}
${notes ? "\nNotes:\n" + notes + "\n" : ""}
${settlementBlock}

${confirm}

Kind regards,
${deal.responsible || "The Grensrock team"}
Grensrock`);

  return { subject, body };
}

/* ============================================================
   VOUCHERS + TICKOWEB
   ============================================================
   The Tickoweb OpenAPI reference at https://openapi.tickoweb.be/v1
   could not be read when this was written, so the exact endpoint
   paths, payload shape and auth header below are ASSUMPTIONS.
   Everything Tickoweb-specific lives in this one module: adjust
   ENDPOINTS/payloads here once you have the real spec and the rest
   of the app keeps working unchanged.

   Modes:
   - "manual" (default): nothing is called. The team creates the
     voucher in Tickoweb and pastes the code back in. Works today.
   - "live": calls the API. Needs a server-side proxy — see note
     in the settings screen about the API key and CORS.
   ============================================================ */

const VOUCHER_TYPES = {
  vipFriday:   { label: "VIP ticket Friday",   kind: "ticket" },
  vipSaturday: { label: "VIP ticket Saturday", kind: "ticket" },
  vipGuests:   { label: "VIP ticket guest",    kind: "ticket" },
  drink:       { label: "Drink voucher",       kind: "voucher" },
  food:        { label: "Food & drink voucher", kind: "voucher" },
};

const VOUCHER_STATUS = {
  pending:   { label: "To create", tone: "amber" },
  created:   { label: "Created",   tone: "grey" },
  sent:      { label: "Sent",      tone: "green" },
  cancelled: { label: "Cancelled", tone: "grey" },
  error:     { label: "Failed",    tone: "amber" },
};

/* What an agreement entitles the sponsor to, as individual vouchers */
function expectedVouchers(deal) {
  const out = [];
  const push = (type, value, n) => {
    for (let i = 0; i < Number(n || 0); i++) out.push({ type, value: Number(value) || 0 });
  };
  push("vipFriday", 0, deal.vipFriday);
  push("vipSaturday", 0, deal.vipSaturday);
  push("vipGuests", 0, deal.vipGuests);
  push("drink", DRINK_TICKET_VALUE, deal.drinkTickets);
  const rows = (deal.foodDrinkVouchers || []).filter((r) => Number(r.qty) > 0 && Number(r.value) > 0);
  if (rows.length) rows.forEach((r) => push("food", r.value, r.qty));
  else if (Number(deal.foodDrinkValue) > 0) push("food", deal.foodDrinkValue, 1); // no split defined yet
  return out;
}

const defaultTickoweb = {
  mode: "manual",                       // "manual" | "live"
  baseUrl: "https://openapi.tickoweb.be/v1",
  proxyUrl: "",                         // your own server that holds the API key
  apiKey: "",
  eventId: "",
  productIds: {},                       // voucher type -> Tickoweb product/ticket-type id
};

/* --- The only place that talks to Tickoweb --- */
const tickoweb = {
  configured(cfg) {
    return cfg?.mode === "live" && !!(cfg.proxyUrl || (cfg.baseUrl && cfg.apiKey));
  },
  _url(cfg, path) {
    return (cfg.proxyUrl ? cfg.proxyUrl.replace(/\/$/, "") : cfg.baseUrl.replace(/\/$/, "")) + path;
  },
  async _call(cfg, path, method, body) {
    const res = await fetch(this._url(cfg, path), {
      method,
      headers: {
        "Content-Type": "application/json",
        ...(cfg.apiKey && !cfg.proxyUrl ? { Authorization: `Bearer ${cfg.apiKey}` } : {}),
      },
      ...(body ? { body: JSON.stringify(body) } : {}),
    });
    if (!res.ok) throw new Error(`Tickoweb ${method} ${path} → ${res.status} ${res.statusText}`);
    return res.json();
  },
  /* Create a voucher and (optionally) let Tickoweb email it to the recipient */
  async create(cfg, { voucher, sponsor, edition, recipient }) {
    if (!this.configured(cfg)) {
      // Manual mode: nothing is called; the team fills in the code afterwards
      return { manual: true };
    }
    const data = await this._call(cfg, "/vouchers", "POST", {
      eventId: cfg.eventId || undefined,
      productId: cfg.productIds?.[voucher.type] || undefined,
      value: voucher.value || undefined,
      reference: `${edition?.name || ""} · ${sponsor?.companyName || ""}`.trim(),
      recipient: recipient?.email ? { name: recipient.name, email: recipient.email } : undefined,
    });
    return { code: data.code || data.id || "", url: data.url || data.downloadUrl || "" };
  },
  async send(cfg, { voucher, recipient }) {
    if (!this.configured(cfg)) return { manual: true };
    await this._call(cfg, `/vouchers/${encodeURIComponent(voucher.code)}/send`, "POST", {
      email: recipient?.email, name: recipient?.name,
    });
    return {};
  },
  async cancel(cfg, { voucher }) {
    if (!this.configured(cfg)) return { manual: true };
    await this._call(cfg, `/vouchers/${encodeURIComponent(voucher.code)}`, "DELETE");
    return {};
  },
};

/* ---------- Small UI atoms ---------- */

/* Grensrock plectrum logo, drawn to match the brand mark */
const PICK_PATH = "M50 2 C70 4 88 22 93 45 C98 68 84 90 58 96 C32 102 8 88 4 62 C0 36 18 8 50 2 Z";

const PickLogo = ({ size = 48 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} aria-label="Grensrock" role="img">
    <path d={PICK_PATH} fill="#FFFFFF" />
    <text x="49" y="49" textAnchor="middle" fill="#0B0B0B"
      style={{ font: "900 17px Montserrat, sans-serif", letterSpacing: ".5px" }}>GRENS</text>
    <text x="49" y="67" textAnchor="middle" fill="#0B0B0B"
      style={{ font: "900 17px Montserrat, sans-serif", letterSpacing: ".5px" }}>ROCK</text>
  </svg>
);

/* House-style background: thin colored plectrum outlines on black */
const PickLines = () => {
  const picks = [
    { c: "#4A90C4", x: -60, y: -40, s: 3.2, r: 12 },
    { c: "#C9518D", x: 180, y: -80, s: 2.6, r: -25 },
    { c: "#C9C463", x: 420, y: -30, s: 3.6, r: 40 },
    { c: "#DE8140", x: 620, y: 60, s: 2.8, r: -10 },
    { c: "#4FA05F", x: -40, y: 260, s: 2.9, r: 65 },
    { c: "#C9518D", x: 300, y: 330, s: 3.4, r: -50 },
    { c: "#4A90C4", x: 560, y: 300, s: 2.5, r: 20 },
    { c: "#DE8140", x: 120, y: 120, s: 2.2, r: 95 },
    { c: "#C9C463", x: 660, y: -90, s: 2.3, r: -70 },
  ];
  return (
    <svg className="gr-picklines" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      {picks.map((p, i) => (
        <path key={i} d={PICK_PATH} fill="none" stroke={p.c} strokeWidth={1.6 / p.s}
          transform={`translate(${p.x} ${p.y}) scale(${p.s}) rotate(${p.r} 50 50)`} />
      ))}
    </svg>
  );
};

const Field = ({ label, children, hint }) => (
  <label className="gr-field">
    <span className="gr-label">{label}</span>
    {children}
    {hint && <span className="gr-hint">{hint}</span>}
  </label>
);

const Modal = ({ title, onClose, children, wide }) => (
  <div className="gr-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
    <div className={"gr-modal" + (wide ? " gr-modal-wide" : "")}>
      <div className="gr-modal-head">
        <h3>{title}</h3>
        <button className="gr-x" onClick={onClose} aria-label="Close">✕</button>
      </div>
      <div className="gr-modal-body">{children}</div>
    </div>
  </div>
);

const Tag = ({ tone = "grey", children }) => (
  <span className={"gr-tag gr-tag-" + tone}>{children}</span>
);

/* ---------- Contacts editor (shared by team form and sponsor portal) ---------- */

function ContactsEditor({ contacts, onChange, lang = "en" }) {
  const T = (nl, fr, en) => ({ nl, fr, en }[lang] || en);
  const list = contacts || [];
  const upd = (i, patch) => onChange(list.map((c, x) => (x === i ? { ...c, ...patch } : c)));
  const add = () => onChange([...list, { ...emptyContact, id: uid(), prefs: { ...emptyContact.prefs } }]);

  return (
    <div>
      {list.length === 0 && (
        <p className="gr-muted">{T("Nog geen contactpersonen.", "Aucune personne de contact.", "No contact persons yet.")}</p>
      )}
      {list.map((c, i) => {
        const mailRes = validateEmail(c.email);
        return (
          <div key={c.id || i} className="gr-contactcard">
            <div className="gr-contacthead">
              <strong>{contactName(c) || T("Nieuwe contactpersoon", "Nouveau contact", "New contact")}</strong>
              <button className="gr-mini gr-danger" onClick={() => onChange(list.filter((_, x) => x !== i))}>✕</button>
            </div>
            <div className="gr-grid2">
              <Field label={T("Voornaam", "Prénom", "First name")}>
                <input value={c.firstName || ""} onChange={(e) => upd(i, { firstName: e.target.value })} />
              </Field>
              <Field label={T("Naam", "Nom", "Last name")}>
                <input value={c.lastName || ""} onChange={(e) => upd(i, { lastName: e.target.value })} />
              </Field>
            </div>
            <div className="gr-grid2">
              <Field label="Email" hint={T("Hiermee logt deze persoon in", "Sert aussi d'identifiant", "Also used to log in")}>
                <EmailInput value={c.email || ""} onChange={(e) => upd(i, { email: e.target.value })} lang={lang} />
              </Field>
              <Field label={T("Telefoon", "Téléphone", "Phone")}>
                <input value={c.phone || ""} onChange={(e) => upd(i, { phone: e.target.value })} />
              </Field>
            </div>
            <div className="gr-grid2">
              <Field label={T("Taal", "Langue", "Language")}>
                <select value={c.language || "nl"} onChange={(e) => upd(i, { language: e.target.value })}>
                  {Object.entries(LANGS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </Field>
              <Field label={T("Wil communicatie ontvangen over", "Souhaite recevoir", "Wants to receive")}>
                <div className="gr-checkrow">
                  {Object.keys(COMMS).map((k) => {
                    const on = !!c.prefs?.[k];
                    return (
                      <label key={k} className={"gr-check gr-check-sm" + (on ? " on" : "")}>
                        <input type="checkbox" checked={on}
                          onChange={(e) => upd(i, { prefs: { ...(c.prefs || {}), [k]: e.target.checked } })} />
                        {COMM_LABELS[k][lang] || COMM_LABELS[k].en}
                      </label>
                    );
                  })}
                </div>
              </Field>
            </div>
            {mailRes && !mailRes.valid && (
              <p className="gr-muted" style={{ color: "var(--red)", margin: 0 }}>
                {T("Dit e-mailadres is niet geldig.", "Cette adresse e-mail n'est pas valide.", "This email address isn't valid.")}
              </p>
            )}
          </div>
        );
      })}
      <button className="gr-mini" onClick={add}>
        + {T("Contactpersoon toevoegen", "Ajouter un contact", "Add contact person")}
      </button>
    </div>
  );
}

/* ---------- Sponsor form ---------- */

function SponsorForm({ initial, onSave, onCancel, teamMembers = [] }) {
  const [s, setS] = useState({ ...emptySponsor, ...initial });
  const set = (k) => (e) => setS({ ...s, [k]: e.target.value });
  const vatRes = validateVat(s.vatNumber);
  const contactsOk = (s.contacts || []).every((c) => {
    const r = validateEmail(c.email);
    return !r || r.valid;
  });
  const valid = s.companyName.trim().length > 0 && (!vatRes || vatRes.valid) && contactsOk;
  return (
    <div>
      <div className="gr-grid2">
        <Field label="Company / name *">
          <input value={s.companyName} onChange={set("companyName")} placeholder="Brouwerij Vanhonsebrouck" />
        </Field>
        <Field label="VAT number">
          <VatInput value={s.vatNumber} onChange={set("vatNumber")} lang="en" />
        </Field>
      </div>
      <Field label="Address">
        <input value={s.address} onChange={set("address")} placeholder="Street 1, 8930 Menen" />
      </Field>
      <div className="gr-grid2">
        <Field label="Type">
          <select value={s.entityType} onChange={set("entityType")}>
            <option value="legal">Legal entity</option>
            <option value="person">Person</option>
          </select>
        </Field>
        <Field label="Responsible (our team)"
          hint={teamMembers.length === 0 ? "No team accounts yet — add them in the Team tab" : undefined}>
          <select value={s.responsibleId || ""} onChange={(e) => setS({ ...s, responsibleId: e.target.value })}>
            <option value="">— not assigned —</option>
            {teamMembers.map((u) => <option key={u.id} value={u.id}>{userName(u)}</option>)}
          </select>
        </Field>
      </div>
      <label className={"gr-check" + (s.refRequired ? " on" : "")} style={{ marginBottom: 12 }}>
        <input type="checkbox" checked={!!s.refRequired}
          onChange={(e) => setS({ ...s, refRequired: e.target.checked })} />
        This sponsor requires a reference on contract &amp; invoice (PO number, order reference, cost centre…)
      </label>
      <h4 className="gr-subhead">Contact persons</h4>
      <ContactsEditor contacts={s.contacts || []} onChange={(contacts) => setS({ ...s, contacts })} />
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" disabled={!valid} onClick={() => onSave({
          ...s,
          vatNumber: vatToStore(s.vatNumber),
          contacts: (s.contacts || []).map((c) => ({ ...c, id: c.id || uid(), email: emailToStore(c.email) })),
        })}>Save sponsor</button>
      </div>
    </div>
  );
}

/* ---------- Edition form ---------- */

function EditionForm({ initial, onSave, onCancel }) {
  const [ed, setEd] = useState({ ...emptyEdition, ...initial });
  const set = (k) => (e) => setEd({ ...ed, [k]: e.target.value });
  const valid = ed.name.trim().length > 0;
  return (
    <div>
      <Field label="Edition name *">
        <input value={ed.name} onChange={set("name")} placeholder="Grensrock 2026" />
      </Field>
      <div className="gr-grid2">
        <Field label="Start date"><input type="date" value={ed.startDate} onChange={set("startDate")} /></Field>
        <Field label="End date"><input type="date" value={ed.endDate} onChange={set("endDate")} /></Field>
      </div>
      <Field label="Location">
        <input value={ed.location} onChange={set("location")} placeholder="Menen" />
      </Field>
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" disabled={!valid} onClick={() => onSave(ed)}>Save edition</button>
      </div>
    </div>
  );
}

/* ---------- Benefit fields (shared by formula + deal forms) ---------- */

function BenefitFields({ v, set }) {
  const num = (k) => (e) => set(k, e.target.value === "" ? "" : Math.max(0, Number(e.target.value)));
  return (
    <>
      <div className="gr-grid3">
        <Field label="VIP tickets Friday"><input type="number" min="0" value={v.vipFriday} onChange={num("vipFriday")} /></Field>
        <Field label="VIP tickets Saturday"><input type="number" min="0" value={v.vipSaturday} onChange={num("vipSaturday")} /></Field>
        <Field label="VIP tickets guests"><input type="number" min="0" value={v.vipGuests} onChange={num("vipGuests")} /></Field>
      </div>
      <div className="gr-grid2">
        <Field label={`Drink tickets (${eur(DRINK_TICKET_VALUE)} each)`} hint={Number(v.drinkTickets) > 0 ? "Value: " + eur(Number(v.drinkTickets) * DRINK_TICKET_VALUE) : null}>
          <input type="number" min="0" value={v.drinkTickets} onChange={num("drinkTickets")} />
        </Field>
        <Field label="Food & drinks tickets (value in €)">
          <input type="number" min="0" step="0.01" value={v.foodDrinkValue} onChange={num("foodDrinkValue")} />
        </Field>
      </div>
      <div className="gr-grid3">
        <Field label="Festival folder">
          <select value={normFolder(v.folderMention)} onChange={(e) => set("folderMention", e.target.value)}>
            {Object.entries(FOLDER_OPTS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
          </select>
        </Field>
        <Field label="Festival poster">
          <select value={v.posterMention || "none"} onChange={(e) => set("posterMention", e.target.value)}>
            {Object.entries(POSTER_OPTS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
          </select>
        </Field>
        <Field label="Website">
          <select value={v.websiteMention} onChange={(e) => set("websiteMention", e.target.value)}>
            {Object.entries(WEBSITE_OPTS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
          </select>
        </Field>
      </div>
      <Field label="LED boarding (select all that apply)">
        <div className="gr-checkrow">
          {Object.entries(LED_ZONES).map(([k, l]) => {
            const zones = normLed(v.ledboarding);
            const on = zones.includes(k);
            return (
              <label key={k} className={"gr-check" + (on ? " on" : "")}>
                <input type="checkbox" checked={on}
                  onChange={(e) => set("ledboarding", e.target.checked ? [...zones, k] : zones.filter((z) => z !== k))} />
                {l}
              </label>
            );
          })}
        </div>
      </Field>
    </>
  );
}

/* ---------- Voucher breakdown editor (food & drinks) ---------- */

const voucherTotal = (rows) => (rows || []).reduce((s, r) => s + (Number(r.value) || 0) * (Number(r.qty) || 0), 0);
const voucherText = (rows) => (rows || [])
  .filter((r) => Number(r.qty) > 0 && Number(r.value) > 0)
  .map((r) => `${r.qty} × ${eur(r.value)}`).join(", ");

function VoucherEditor({ amount, rows, onChange }) {
  const target = Number(amount) || 0;
  const allocated = voucherTotal(rows);
  const diff = target - allocated;
  const upd = (i, k, val) => onChange(rows.map((r, x) => (x === i ? { ...r, [k]: val } : r)));
  const addRow = (value = "") => onChange([...(rows || []), { value, qty: "" }]);

  return (
    <div className="gr-vouchers">
      <div className="gr-formulahead" style={{ marginBottom: 4 }}>
        <span className="gr-label" style={{ margin: 0 }}>Divide {eur(target)} into vouchers</span>
        <div className="gr-voucherquick">
          {[5, 10, 25].map((v) => (
            <button key={v} className="gr-mini" onClick={() => addRow(v)}>+ €{v}</button>
          ))}
          <button className="gr-mini" onClick={() => addRow("")}>+ Other</button>
        </div>
      </div>
      {(rows || []).length === 0 ? (
        <p className="gr-muted" style={{ margin: "4px 0" }}>No breakdown yet — add voucher types above, or leave empty to decide later.</p>
      ) : (
        (rows || []).map((r, i) => (
          <div key={i} className="gr-voucherrow">
            <span className="gr-muted">Voucher of</span>
            <input type="number" min="0" step="0.5" value={r.value} placeholder="€"
              onChange={(e) => upd(i, "value", e.target.value)} />
            <span className="gr-muted">×</span>
            <input type="number" min="0" value={r.qty} placeholder="qty"
              onChange={(e) => upd(i, "qty", e.target.value)} />
            <span className="gr-voucherline">{eur((Number(r.value) || 0) * (Number(r.qty) || 0))}</span>
            <button className="gr-mini gr-danger" onClick={() => onChange(rows.filter((_, x) => x !== i))}>✕</button>
          </div>
        ))
      )}
      {(rows || []).length > 0 && (
        <p className={"gr-voucherstatus" + (diff === 0 ? " ok" : "")}>
          Allocated: <strong>{eur(allocated)}</strong> of {eur(target)}
          {diff > 0 && <> — <strong>{eur(diff)}</strong> still to divide</>}
          {diff < 0 && <> — <strong>{eur(-diff)}</strong> over the purchased amount</>}
          {diff === 0 && <> ✓</>}
        </p>
      )}
    </div>
  );
}

/* ---------- Formula form ---------- */

function FormulaForm({ initial, onSave, onCancel }) {
  const [f, setF] = useState({ ...emptyFormula, ...initial });
  const set = (k, val) => setF((p) => ({ ...p, [k]: val }));
  return (
    <div>
      <div className="gr-grid2">
        <Field label="Formula name *">
          <input value={f.name} onChange={(e) => set("name", e.target.value)} placeholder="Gold / Silver / Bronze…" />
        </Field>
        <Field label="Cost (€) *">
          <input type="number" min="0" step="0.01" value={f.cost} onChange={(e) => set("cost", e.target.value)} />
        </Field>
      </div>
      <BenefitFields v={f} set={set} />
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" disabled={!f.name.trim()} onClick={() => onSave(f)}>Save formula</button>
      </div>
    </div>
  );
}

/* ---------- Sponsor picker (search + inline create) ---------- */

function SponsorPicker({ sponsors, value, onChange, onCreateNew, locked }) {
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const selected = sponsors.find((s) => s.id === value);

  const matches = useMemo(() => {
    const t = q.trim().toLowerCase();
    const list = [...sponsors].sort((a, b) => a.companyName.localeCompare(b.companyName));
    if (!t) return list.slice(0, 8);
    return list.filter((s) =>
      [s.companyName, s.vatNumber, ...sponsorContacts(s).flatMap((c) => [contactName(c), c.email])]
        .some((f) => (f || "").toLowerCase().includes(t))).slice(0, 8);
  }, [sponsors, q]);

  if (selected) {
    return (
      <div className="gr-picked">
        <div>
          <strong>{selected.companyName}</strong>
          {selected.contactName && <span className="gr-muted"> · {selected.contactName}</span>}
        </div>
        {!locked && (
          <button className="gr-mini" onClick={() => { onChange(""); setQ(""); setOpen(true); }}>Change</button>
        )}
      </div>
    );
  }

  return (
    <div className="gr-picker">
      <input
        placeholder="Type to search: name, VAT, contact…"
        value={q}
        onChange={(e) => { setQ(e.target.value); setOpen(true); }}
        onFocus={() => setOpen(true)}
      />
      {open && (
        <div className="gr-picker-list">
          {matches.map((s) => (
            <button key={s.id} className="gr-picker-item" onClick={() => { onChange(s.id); setOpen(false); }}>
              <strong>{s.companyName}</strong>
              <span className="gr-muted">
                {[s.vatNumber, contactName(primaryContact(s))].filter(Boolean).join(" · ") || "\u00A0"}
              </span>
            </button>
          ))}
          {matches.length === 0 && (
            <div className="gr-picker-none">No sponsor found for "{q}"</div>
          )}
          <button className="gr-picker-item gr-picker-new" onClick={onCreateNew}>
            + Add new sponsor{q.trim() ? ` "${q.trim()}"` : ""}
          </button>
        </div>
      )}
    </div>
  );
}

/* ---------- Deal (agreement) form ---------- */

const OP_MAAT = "Op maat";

function DealForm({ initial, sponsors, editions, teamMembers = [], onSave, onCancel, onAddSponsor }) {
  const [d, setD] = useState({ ...emptyDeal, ...initial });
  const [newSponsorDraft, setNewSponsorDraft] = useState(null); // null | prefill object
  const set = (k, val) => setD((p) => ({ ...p, [k]: val }));
  const activeEditions = editions.filter((e) => e.active);
  const edition = editions.find((e) => e.id === d.editionId);
  const formulas = edition ? edition.formulas || [] : [];

  const applyFormula = (name) => {
    if (name === OP_MAAT) {
      // Fully custom agreement: keep current values, everything editable
      set("formulaName", OP_MAAT);
      return;
    }
    const f = formulas.find((x) => x.name === name);
    if (!f) { set("formulaName", ""); return; }
    setD((p) => ({
      ...p, formulaName: f.name, cost: f.cost,
      vipFriday: f.vipFriday, vipSaturday: f.vipSaturday, vipGuests: f.vipGuests,
      drinkTickets: f.drinkTickets, foodDrinkValue: f.foodDrinkValue,
      folderMention: f.folderMention, websiteMention: f.websiteMention,
      posterMention: f.posterMention || "none", ledboarding: f.ledboarding,
    }));
  };

  const valid = d.sponsorId && d.editionId && d.cost !== "";

  /* Inline "new sponsor" sub-form */
  if (newSponsorDraft !== null) {
    return (
      <div>
        <button className="gr-back" onClick={() => setNewSponsorDraft(null)}>← Back to agreement</button>
        <SponsorForm
          initial={newSponsorDraft}
          teamMembers={teamMembers}
          onSave={(s) => {
            const created = onAddSponsor(s);
            set("sponsorId", created.id);
            setNewSponsorDraft(null);
          }}
          onCancel={() => setNewSponsorDraft(null)}
        />
      </div>
    );
  }

  return (
    <div>
      <Field label="Sponsor *">
        <SponsorPicker
          sponsors={sponsors}
          value={d.sponsorId}
          onChange={(id) => set("sponsorId", id)}
          locked={!!initial?.lockSponsor || !!d.id}
          onCreateNew={() => setNewSponsorDraft({})}
        />
      </Field>
      <Field label="Edition (active only) *">
        <select value={d.editionId} onChange={(e) => { set("editionId", e.target.value); }}>
          <option value="">— select —</option>
          {activeEditions.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
        </select>
      </Field>
      {d.editionId && (
        <div className="gr-grid2">
          <Field label="Formula" hint={d.formulaName === OP_MAAT ? "Fully custom: fill in everything freely" : formulas.length === 0 ? "No formulas defined for this edition yet — use Op maat" : "Prefills cost & benefits; you can still adjust"}>
            <select value={d.formulaName} onChange={(e) => applyFormula(e.target.value)}>
              <option value="">— select —</option>
              {formulas.map((f) => <option key={f.name} value={f.name}>{f.name} ({eur(f.cost)})</option>)}
              <option value={OP_MAAT}>{OP_MAAT} (custom)</option>
            </select>
          </Field>
          <Field label="Cost (€) *">
            <input type="number" min="0" step="0.01" value={d.cost} onChange={(e) => set("cost", e.target.value)} />
          </Field>
        </div>
      )}
      {d.editionId && <BenefitFields v={d} set={set} />}
      {d.editionId && Number(d.foodDrinkValue) > 0 && (
        <VoucherEditor
          amount={d.foodDrinkValue}
          rows={d.foodDrinkVouchers || []}
          onChange={(rows) => set("foodDrinkVouchers", rows)}
        />
      )}
      {d.editionId && (
        <div className="gr-settle">
          <Field label="How is this contribution settled?">
            <select value={d.settlement || "invoice"} onChange={(e) => set("settlement", e.target.value)}>
              {Object.entries(SETTLEMENTS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
            </select>
          </Field>
          {d.settlement !== "invoice" && (
            <>
              <Field label="What does the sponsor provide?" hint="e.g. logistics, transport, food, drinks, printing, materials, manpower…">
                <textarea rows={2} value={d.inKindDescription || ""} onChange={(e) => set("inKindDescription", e.target.value)} />
              </Field>
              {d.settlement === "mixed" && (
                <Field label="Value provided in kind (€)" hint="Deducted from the amount to invoice">
                  <input type="number" min="0" step="0.01" value={d.inKindValue ?? ""} onChange={(e) => set("inKindValue", e.target.value)} />
                </Field>
              )}
              <p className={"gr-voucherstatus" + (invoiceAmount(d) === 0 ? " ok" : "")}>
                {invoiceAmount(d) === 0
                  ? "No invoice will be created for this agreement ✓"
                  : <>To invoice: <strong>{eur(invoiceAmount(d))}</strong> of {eur(d.cost)} — the rest is settled in kind</>}
              </p>
            </>
          )}
          {needsInvoice(d) && (() => {
            const sp = sponsors.find((x) => x.id === d.sponsorId);
            const required = refRequiredFor(d, sp);
            return (
              <>
                {sp?.refRequired ? (
                  <p className="gr-voucherstatus" style={{ color: "var(--blue-deep)" }}>
                    <strong>{sp.companyName}</strong> requires a reference on contract &amp; invoice (set on the sponsor).
                  </p>
                ) : (
                  <label className={"gr-check" + (d.refRequired ? " on" : "")} style={{ marginTop: 4 }}>
                    <input type="checkbox" checked={!!d.refRequired}
                      onChange={(e) => set("refRequired", e.target.checked)} />
                    A reference is required on the invoice for this agreement only
                  </label>
                )}
                {required && (
                  <Field label="Reference to put on the invoice *"
                    hint={String(d.invoiceReference || "").trim()
                      ? "Will be shown on the contract and in the invoicing list"
                      : "Can be filled in later, but the invoice can't be marked as created until it is"}>
                    <input value={d.invoiceReference || ""} onChange={(e) => set("invoiceReference", e.target.value)}
                      placeholder="e.g. PO-2026-0481"
                      style={!String(d.invoiceReference || "").trim() ? { borderColor: "var(--orange)" } : undefined} />
                  </Field>
                )}
              </>
            );
          })()}
        </div>
      )}
      <Field label="Notes (invoicing, extra benefits, …)">
        <textarea rows={3} value={d.notes} onChange={(e) => set("notes", e.target.value)} />
      </Field>
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" disabled={!valid} onClick={() => onSave(d)}>Save agreement</button>
      </div>
    </div>
  );
}

/* ---------- Sponsor import (xlsx / csv) ---------- */

const IMPORT_FIELDS = [
  ["companyName", "Company / name *"],
  ["address", "Address"],
  ["vatNumber", "VAT number"],
  ["entityType", "Type (legal/person)"],
  ["contactFirstName", "Contact first name"],
  ["contactLastName", "Contact last name"],
  ["contactPhone", "Contact phone"],
  ["contactEmail", "Contact email"],
  ["contactLanguage", "Language (NL/FR/EN)"],
];

const HEADER_SYNONYMS = {
  contactFirstName: ["voornaam", "first name", "prénom", "prenom", "firstname"],
  contactLastName: ["achternaam", "contactpersoon", "contact person", "contact name", "contactnaam", "personne de contact", "last name", "familienaam", "naam contact", "contact"],
  contactPhone: ["phone", "telefoon", "tel", "gsm", "mobile", "téléphone", "telephone"],
  contactEmail: ["e-mail", "email", "mail", "e-mailadres", "courriel"],
  contactLanguage: ["taal", "language", "langue", "lang"],
  vatNumber: ["btw", "vat", "tva", "ondernemingsnummer", "btw-nummer", "vat number"],
  companyName: ["bedrijfsnaam", "company name", "company", "bedrijf", "firma", "sponsor", "organisatie", "société", "naam", "name"],
  address: ["adres", "address", "adresse", "straat"],
  entityType: ["rechtsvorm", "entity", "type"],
};

const normStr = (v) => String(v ?? "").trim();
const normVatKey = (v) => normStr(v).replace(/[^0-9a-z]/gi, "").toLowerCase();
const normNameKey = (v) => normStr(v).toLowerCase().replace(/\s+/g, " ");
const normLang = (v) => {
  const t = normStr(v).toLowerCase();
  if (/^fr|fran|frans/.test(t)) return "fr";
  if (/^en|eng/.test(t)) return "en";
  return "nl";
};
const normEntity = (v) => (/pers|natuur|individu|physique/.test(normStr(v).toLowerCase()) ? "person" : "legal");

/* ---------- VAT validation ---------- */
const cleanVat = (raw) => normStr(raw).toUpperCase().replace(/[\s.\-]/g, "");

function validateVat(raw) {
  let v = cleanVat(raw);
  if (!v) return null; // empty is allowed (e.g. persons)
  if (/^\d{9,10}$/.test(v)) v = "BE" + (v.length === 9 ? "0" + v : v); // bare number: assume Belgian
  if (!/^[A-Z]{2}/.test(v)) return { valid: false, code: "format" };
  const cc = v.slice(0, 2);
  if (cc === "BE") {
    const d = v.slice(2);
    if (!/^\d{10}$/.test(d) || !/^[01]/.test(d)) return { valid: false, code: "be_format" };
    const check = 97 - (Number(d.slice(0, 8)) % 97);
    if (check !== Number(d.slice(8))) return { valid: false, code: "be_check" };
    return { valid: true, formatted: `BE ${d.slice(0, 4)}.${d.slice(4, 7)}.${d.slice(7)}` };
  }
  if (cc === "FR") {
    if (!/^FR[0-9A-Z]{2}\d{9}$/.test(v)) return { valid: false, code: "fr_format" };
    return { valid: true, formatted: `FR ${v.slice(2, 4)} ${v.slice(4, 7)} ${v.slice(7, 10)} ${v.slice(10)}` };
  }
  if (cc === "NL") {
    if (!/^NL\d{9}B\d{2}$/.test(v)) return { valid: false, code: "nl_format" };
    return { valid: true, formatted: v };
  }
  if (!/^[A-Z]{2}[0-9A-Z]{2,12}$/.test(v)) return { valid: false, code: "format" };
  return { valid: true, formatted: v };
}

const VAT_MSG = {
  format:    { nl: "Dit lijkt geen geldig BTW-nummer.", fr: "Ceci ne semble pas être un numéro de TVA valide.", en: "This doesn't look like a valid VAT number." },
  be_format: { nl: "Een Belgisch BTW-nummer heeft de vorm BE 0123.456.789.", fr: "Un numéro de TVA belge a la forme BE 0123.456.789.", en: "A Belgian VAT number looks like BE 0123.456.789." },
  be_check:  { nl: "De controlecijfers van dit Belgische BTW-nummer kloppen niet — kijk het even na.", fr: "Les chiffres de contrôle de ce numéro de TVA belge ne correspondent pas — vérifiez-le.", en: "The check digits of this Belgian VAT number don't match — please verify it." },
  fr_format: { nl: "Een Frans BTW-nummer heeft de vorm FR XX 123456789.", fr: "Un numéro de TVA français a la forme FR XX 123456789.", en: "A French VAT number looks like FR XX 123456789." },
  nl_format: { nl: "Een Nederlands BTW-nummer heeft de vorm NL123456789B01.", fr: "Un numéro de TVA néerlandais a la forme NL123456789B01.", en: "A Dutch VAT number looks like NL123456789B01." },
};
const vatMessage = (code, lang = "en") => (VAT_MSG[code] || VAT_MSG.format)[lang] || VAT_MSG.format.en;

/* Shared VAT input with live validation feedback */
function VatInput({ value, onChange, lang = "en", placeholder }) {
  const res = validateVat(value);
  return (
    <>
      <input value={value} onChange={onChange} placeholder={placeholder || "BE 0123.456.789"}
        style={res && !res.valid ? { borderColor: "var(--red)" } : undefined} />
      {res && !res.valid && <span className="gr-hint" style={{ color: "var(--red)" }}>{vatMessage(res.code, lang)}</span>}
      {res && res.valid && <span className="gr-hint" style={{ color: "var(--green)" }}>✓ {res.formatted}</span>}
    </>
  );
}
/* Returns the value to store: formatted when valid, as-typed otherwise */
const vatToStore = (raw) => {
  const res = validateVat(raw);
  return res && res.valid ? res.formatted : normStr(raw);
};

/* ---------- Email validation ---------- */
/* Pragmatic check: one @, a sensible local part, a dotted domain with a real TLD. */
const EMAIL_RE = /^[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z]{2,}$/;

function validateEmail(raw) {
  const v = normStr(raw);
  if (!v) return null; // empty is allowed
  if (/\s/.test(v)) return { valid: false, code: "space" };
  if ((v.match(/@/g) || []).length !== 1) return { valid: false, code: "at" };
  if (!EMAIL_RE.test(v)) return { valid: false, code: "format" };
  return { valid: true, formatted: v.toLowerCase() };
}

const MAIL_MSG = {
  at:     { nl: "Een e-mailadres bevat één @-teken.", fr: "Une adresse e-mail contient un seul @.", en: "An email address contains exactly one @." },
  space:  { nl: "Een e-mailadres mag geen spaties bevatten.", fr: "Une adresse e-mail ne peut pas contenir d'espaces.", en: "An email address can't contain spaces." },
  format: { nl: "Dit lijkt geen geldig e-mailadres (bv. naam@bedrijf.be).", fr: "Ceci ne semble pas être une adresse e-mail valide (p.ex. nom@societe.be).", en: "This doesn't look like a valid email address (e.g. name@company.be)." },
};
const mailMessage = (code, lang = "en") => (MAIL_MSG[code] || MAIL_MSG.format)[lang] || MAIL_MSG.format.en;

/* Shared email input with live validation feedback */
function EmailInput({ value, onChange, lang = "en", placeholder }) {
  const res = validateEmail(value);
  return (
    <>
      <input type="email" value={value} onChange={onChange} placeholder={placeholder || "naam@bedrijf.be"}
        style={res && !res.valid ? { borderColor: "var(--red)" } : undefined} />
      {res && !res.valid && <span className="gr-hint" style={{ color: "var(--red)" }}>{mailMessage(res.code, lang)}</span>}
    </>
  );
}
const emailToStore = (raw) => {
  const res = validateEmail(raw);
  return res && res.valid ? res.formatted : normStr(raw);
};

function autoMap(headers) {
  const map = {};
  const used = new Set();
  // contact* fields first so "contact naam" doesn't get claimed by companyName's "naam"
  const order = ["contactFirstName", "contactLastName", "contactPhone", "contactEmail", "contactLanguage", "vatNumber", "address", "entityType", "companyName"];
  for (const field of order) {
    const syns = HEADER_SYNONYMS[field];
    let hit = -1;
    for (const syn of syns) {
      hit = headers.findIndex((h, i) => !used.has(i) && normStr(h).toLowerCase().includes(syn));
      if (hit >= 0) break;
    }
    map[field] = hit;
    if (hit >= 0) used.add(hit);
  }
  return map;
}

function ImportModal({ sponsors, onImport, onClose }) {
  const [headers, setHeaders] = useState(null);
  const [rows, setRows] = useState([]);
  const [map, setMap] = useState({});
  const [err, setErr] = useState("");
  const [result, setResult] = useState(null); // {createdCount, skipped:[]}

  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    setErr("");
    try {
      const buf = await file.arrayBuffer();
      const wb = XLSX.read(buf);
      const ws = wb.Sheets[wb.SheetNames[0]];
      const all = XLSX.utils.sheet_to_json(ws, { header: 1, defval: "" })
        .filter((r) => r.some((c) => normStr(c) !== ""));
      if (all.length < 2) { setErr("The file needs a header row plus at least one sponsor row."); return; }
      const hdr = all[0].map(normStr);
      setHeaders(hdr);
      setRows(all.slice(1));
      setMap(autoMap(hdr));
    } catch {
      setErr("Couldn't read this file. Save it as .xlsx or .csv and try again.");
    }
  };

  /* Build candidates + duplicate analysis, live */
  const analysis = useMemo(() => {
    if (!headers || map.companyName == null || map.companyName < 0) return null;
    const get = (row, f) => (map[f] >= 0 ? normStr(row[map[f]]) : "");
    const existingVat = new Set(sponsors.map((s) => normVatKey(s.vatNumber)).filter(Boolean));
    const existingName = new Set(sponsors.map((s) => normNameKey(s.companyName)));
    const seenVat = new Set(), seenName = new Set();
    const create = [], skipped = [];
    rows.forEach((row, i) => {
      const companyName = get(row, "companyName");
      if (!companyName) { skipped.push({ line: i + 2, name: "(empty)", reason: "no company name" }); return; }
      const vatKey = normVatKey(get(row, "vatNumber"));
      const nameKey = normNameKey(companyName);
      if ((vatKey && existingVat.has(vatKey)) || existingName.has(nameKey)) {
        skipped.push({ line: i + 2, name: companyName, reason: "already in database" }); return;
      }
      if ((vatKey && seenVat.has(vatKey)) || seenName.has(nameKey)) {
        skipped.push({ line: i + 2, name: companyName, reason: "duplicate inside file" }); return;
      }
      if (vatKey) seenVat.add(vatKey);
      seenName.add(nameKey);
      const rawVat = get(row, "vatNumber");
      const vatRes = validateVat(rawVat);
      const rawMail = get(row, "contactEmail");
      const mailRes = validateEmail(rawMail);
      create.push({
        companyName,
        address: get(row, "address"),
        vatNumber: vatToStore(rawVat),
        vatInvalid: !!(vatRes && !vatRes.valid),
        entityType: map.entityType >= 0 ? normEntity(get(row, "entityType")) : "legal",
        contacts: (get(row, "contactFirstName") || get(row, "contactLastName") || rawMail || get(row, "contactPhone"))
          ? [{
              ...emptyContact, id: uid(),
              firstName: get(row, "contactFirstName"),
              lastName: get(row, "contactLastName"),
              email: emailToStore(rawMail),
              phone: get(row, "contactPhone"),
              language: map.contactLanguage >= 0 ? normLang(get(row, "contactLanguage")) : "nl",
              prefs: { info: true, invoice: true, vouchers: true },
            }]
          : [],
        contactPreview: [get(row, "contactFirstName"), get(row, "contactLastName")].filter(Boolean).join(" "),
        emailPreview: emailToStore(rawMail),
        langPreview: (map.contactLanguage >= 0 ? normLang(get(row, "contactLanguage")) : "nl"),
        mailInvalid: !!(mailRes && !mailRes.valid),
      });
    });
    return { create, skipped };
  }, [headers, rows, map, sponsors]);

  const doImport = () => {
    onImport(analysis.create);
    setResult({ createdCount: analysis.create.length, skipped: analysis.skipped });
  };

  /* ----- result screen ----- */
  if (result) {
    return (
      <Modal title="Import complete" onClose={onClose}>
        <p><strong>{result.createdCount}</strong> new sponsor(s) created.
          {result.skipped.length > 0 && <> <strong>{result.skipped.length}</strong> row(s) skipped.</>}</p>
        {result.skipped.length > 0 && (
          <div className="gr-tablewrap">
            <table className="gr-table gr-compact">
              <thead><tr><th>Row</th><th>Name</th><th>Reason</th></tr></thead>
              <tbody>
                {result.skipped.map((s, i) => (
                  <tr key={i}><td>{s.line}</td><td>{s.name}</td><td>{s.reason}</td></tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        <div className="gr-actions"><button className="gr-btn" onClick={onClose}>Done</button></div>
      </Modal>
    );
  }

  return (
    <Modal title="Import sponsors" onClose={onClose} wide>
      {!headers ? (
        <>
          <p className="gr-muted">Upload your sponsor list as an Excel (.xlsx) or CSV file. The first row must contain
            column headers (e.g. Bedrijfsnaam, BTW-nummer, Contactpersoon, E-mail, Taal…). Existing sponsors are
            recognised by VAT number or company name and won't be created twice.</p>
          <input type="file" accept=".xlsx,.xls,.csv" onChange={onFile} className="gr-file" />
          {err && <p className="gr-muted" style={{ color: "var(--red)" }}>{err}</p>}
        </>
      ) : (
        <>
          <h4 className="gr-subhead" style={{ borderTop: "none", paddingTop: 0 }}>Column mapping</h4>
          <p className="gr-muted">Columns were detected automatically — check them and adjust if needed.</p>
          <div className="gr-grid3">
            {IMPORT_FIELDS.map(([field, label]) => (
              <Field key={field} label={label}>
                <select value={map[field] ?? -1} onChange={(e) => setMap({ ...map, [field]: Number(e.target.value) })}>
                  <option value={-1}>— skip —</option>
                  {headers.map((h, i) => <option key={i} value={i}>{h || `Column ${i + 1}`}</option>)}
                </select>
              </Field>
            ))}
          </div>
          {map.companyName < 0 && <p className="gr-muted" style={{ color: "var(--red)" }}>Select which column contains the company name.</p>}
          {analysis && (
            <>
              <h4 className="gr-subhead">Preview</h4>
              <p className="gr-muted">
                <Tag tone="green">{analysis.create.length} new</Tag>{" "}
                <Tag tone={analysis.skipped.length ? "amber" : "grey"}>{analysis.skipped.length} skipped (duplicates / empty)</Tag>
              </p>
              {analysis.create.length > 0 && (
                <div className="gr-tablewrap">
                  <table className="gr-table gr-compact">
                    <thead><tr><th>Company</th><th>VAT</th><th>Contact</th><th>Email</th><th>Lang</th></tr></thead>
                    <tbody>
                      {analysis.create.slice(0, 6).map((c, i) => (
                        <tr key={i}>
                          <td><strong>{c.companyName}</strong></td>
                          <td>{c.vatNumber
                            ? (c.vatInvalid ? <span style={{ color: "var(--red)" }} title="VAT number looks invalid — will be imported as-is, fix it afterwards">⚠ {c.vatNumber}</span> : c.vatNumber)
                            : "—"}</td>
                          <td>{c.contactPreview || "—"}</td>
                          <td>{c.emailPreview
                            ? (c.mailInvalid ? <span style={{ color: "var(--red)" }} title="Email looks invalid — imported as-is, fix it afterwards">⚠ {c.emailPreview}</span> : c.emailPreview)
                            : "—"}</td>
                          <td>{(c.langPreview || "nl").toUpperCase()}</td>
                        </tr>
                      ))}
                      {analysis.create.length > 6 && (
                        <tr><td colSpan={5} className="gr-muted">…and {analysis.create.length - 6} more</td></tr>
                      )}
                    </tbody>
                  </table>
                </div>
              )}
            </>
          )}
          <div className="gr-actions">
            <button className="gr-btn-ghost" onClick={() => { setHeaders(null); setRows([]); setErr(""); }}>Choose another file</button>
            <button className="gr-btn" disabled={!analysis || analysis.create.length === 0} onClick={doImport}>
              Import {analysis ? analysis.create.length : 0} sponsor(s)
            </button>
          </div>
        </>
      )}
    </Modal>
  );
}

/* ---------- Email preview modal ---------- */

function EmailModal({ deal, sponsor, edition, onClose, onMarkSent }) {
  /* The contract is invoicing-related: send it to the invoicing contacts,
     falling back to whoever receives general information. */
  const invoiceContacts = contactsFor(sponsor, "invoice");
  const infoContacts = contactsFor(sponsor, "info");
  const recipients = (invoiceContacts.length ? invoiceContacts : infoContacts)
    .filter((c) => validateEmail(c.email)?.valid);
  const [idx, setIdx] = useState(0);
  const [copied, setCopied] = useState(false);
  const main = recipients[idx] || recipients[0] || null;

  const { subject, body } = buildEmail(deal, sponsor, edition, main);
  const to = recipients.map((c) => c.email).join(",");
  const mailto = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(`To: ${to}\nSubject: ${subject}\n\n${body}`);
      setCopied(true); setTimeout(() => setCopied(false), 2000);
    } catch { /* clipboard unavailable */ }
  };
  const mixedLangs = new Set(recipients.map((c) => c.language || "nl")).size > 1;

  return (
    <Modal title="Confirmation email / contract" onClose={onClose} wide>
      {recipients.length === 0 ? (
        <p className="gr-muted" style={{ color: "var(--red)" }}>
          No contact with a valid email address for invoicing or information. Add one on the sponsor first,
          otherwise this contract can't be delivered.
        </p>
      ) : (
        <>
          <p className="gr-muted">
            To: <strong>{recipients.map((c) => `${contactName(c) || c.email}`).join(", ")}</strong>
            {" · "}Language: <strong>{LANGS[main?.language || "nl"]}</strong>
          </p>
          {recipients.length > 1 && (
            <Field label="Write in the language of"
              hint={mixedLangs ? "These contacts prefer different languages — one text is sent to all of them." : undefined}>
              <select value={idx} onChange={(e) => setIdx(Number(e.target.value))}>
                {recipients.map((c, i) => (
                  <option key={c.id || i} value={i}>
                    {contactName(c) || c.email} ({(c.language || "nl").toUpperCase()})
                  </option>
                ))}
              </select>
            </Field>
          )}
        </>
      )}
      <div className="gr-emailpreview">
        <div className="gr-email-subject">{subject}</div>
        <pre>{body}</pre>
      </div>
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={copy}>{copied ? "Copied ✓" : "Copy email"}</button>
        {recipients.length > 0 && <a className="gr-btn-ghost gr-btn-link" href={mailto}>Open in mail client</a>}
        <button className="gr-btn" onClick={onMarkSent}>Mark as sent</button>
      </div>
    </Modal>
  );
}

/* ---------- Sponsor detail (history) ---------- */

function SponsorDetail({ sponsor, deals, editions, users = [], vouchers = [], canDelete,
                         onBack, onEdit, onDelete, onAddDeal, onEditDeal, onEmail }) {
  const [sub, setSub] = useState("info");
  const history = deals
    .filter((d) => d.sponsorId === sponsor.id)
    .map((d) => ({ ...d, edition: editions.find((e) => e.id === d.editionId) }))
    .sort((a, b) => (b.edition?.startDate || "").localeCompare(a.edition?.startDate || ""));
  const totalCost = history.reduce((s, d) => s + (Number(d.cost) || 0), 0);
  const myVouchers = vouchers.filter((v) => v.sponsorId === sponsor.id);
  const contacts = sponsorContacts(sponsor);

  const TABS = [
    ["info", "Information"],
    ["contacts", `Contact persons (${contacts.length})`],
    ["sponsoring", `Sponsoring (${history.length})`],
    ["vouchers", `Vouchers (${myVouchers.filter((v) => v.status !== "cancelled").length})`],
  ];

  return (
    <div>
      <button className="gr-back" onClick={onBack}>← All sponsors</button>
      <div className="gr-detail-head">
        <div>
          <h2 className="gr-h2">{sponsor.companyName}</h2>
          <p className="gr-muted">
            {sponsor.entityType === "legal" ? "Legal entity" : "Person"}
            {sponsor.vatNumber && <> · VAT {sponsor.vatNumber}</>}
            {responsibleName(sponsor, users) && <> · Managed by {responsibleName(sponsor, users)}</>}
          </p>
          {sponsor.refRequired && <Tag tone="amber">reference required on contract &amp; invoice</Tag>}
        </div>
        <div className="gr-detail-btns">
          <button className="gr-btn-ghost" onClick={onEdit}>Edit</button>
          {canDelete && <button className="gr-btn-ghost gr-danger" onClick={onDelete}>Delete</button>}
          <button className="gr-btn" onClick={onAddDeal}>+ Agreement</button>
        </div>
      </div>

      <nav className="gr-subnav">
        {TABS.map(([k, l]) => (
          <button key={k} className={sub === k ? "on" : ""} onClick={() => setSub(k)}>{l}</button>
        ))}
      </nav>

      {/* ---- Information ---- */}
      {sub === "info" && (
        <div className="gr-grid2" style={{ gap: "0 20px", alignItems: "start" }}>
          <div>
            <h4 className="gr-subhead" style={{ borderTop: "none", paddingTop: 0 }}>Company details</h4>
            <div className="gr-portalbox">
              <dl className="gr-dl">
                <dt>Company</dt><dd>{sponsor.companyName}</dd>
                <dt>Type</dt><dd>{sponsor.entityType === "legal" ? "Legal entity" : "Person"}</dd>
                <dt>VAT number</dt><dd>{sponsor.vatNumber || "—"}</dd>
                <dt>Address</dt><dd>{sponsor.address || "—"}</dd>
                <dt>Responsible</dt><dd>{responsibleName(sponsor, users) || "— not assigned —"}</dd>
                <dt>Invoice reference</dt>
                <dd>{sponsor.refRequired ? "Required on contract & invoice" : "Not required"}</dd>
              </dl>
            </div>
          </div>
          <div>
            <h4 className="gr-subhead" style={{ borderTop: "none", paddingTop: 0 }}>Logo (artwork: folder, LED, …)</h4>
            <LogoUploader sponsorId={sponsor.id} />
          </div>
        </div>
      )}

      {/* ---- Contact persons ---- */}
      {sub === "contacts" && (
        <div className="gr-portalbox">
          {contacts.length === 0 ? (
            <p className="gr-muted" style={{ margin: 0 }}>
              No contact persons yet — add one via Edit. They log in with their email address.
            </p>
          ) : contacts.map((c, i) => (
            <div key={c.id || i} className="gr-contactline">
              <div>
                <strong>{contactName(c) || <span className="gr-muted">no name</span>}</strong>
                <span className="gr-muted"> · {(c.language || "nl").toUpperCase()}</span>
                <div className="gr-muted">{c.email || "no email"}{c.phone ? ` · ${c.phone}` : ""}</div>
                <div className="gr-commtags">
                  {Object.keys(COMMS).filter((k) => c.prefs?.[k]).map((k) => <Tag key={k}>{COMMS[k]}</Tag>)}
                </div>
              </div>
              {c.email && <CopyInviteButton sponsor={sponsor} contact={c} responsible={responsibleName(sponsor, users)} />}
            </div>
          ))}
        </div>
      )}

      {/* ---- Sponsoring ---- */}
      {sub === "sponsoring" && (
        <>
          <div className="gr-statrow">
            <div className="gr-stat"><span>{history.length}</span>editions sponsored</div>
            <div className="gr-stat"><span>{eur(totalCost)}</span>total contributed</div>
          </div>
          {history.length === 0 ? (
            <p className="gr-empty">No agreements yet. Add one for an active edition to get started.</p>
          ) : (
            <div className="gr-tablewrap">
              <table className="gr-table gr-clickable">
                <thead>
                  <tr>
                    <th>Edition</th><th>Formula</th><th className="gr-r">Cost</th>
                    <th className="gr-r">VIP fr/sa/guest</th><th className="gr-r">Drinks</th><th className="gr-r">Food&drink</th>
                    <th>Folder</th><th>Website</th><th>Poster</th><th>LED</th><th>Invoice</th><th>Email</th><th></th>
                  </tr>
                </thead>
                <tbody>
                  {history.map((d) => (
                    <tr key={d.id} title="Click to view or edit this agreement" onClick={() => onEditDeal(d)}>
                      <td>{d.edition ? d.edition.name : "?"} {d.edition && !d.edition.active && <Tag>archived</Tag>}</td>
                      <td>{d.formulaName || <span className="gr-muted">custom</span>}</td>
                      <td className="gr-r"><strong>{eur(d.cost)}</strong>
                        {d.settlement === "inkind" && <div className="gr-muted" style={{ fontSize: 11 }}>in kind</div>}
                        {d.settlement === "mixed" && <div className="gr-muted" style={{ fontSize: 11 }}>{eur(invoiceAmount(d))} billed</div>}
                      </td>
                      <td className="gr-r">{d.vipFriday || 0} / {d.vipSaturday || 0} / {d.vipGuests || 0}</td>
                      <td className="gr-r">{d.drinkTickets || 0}</td>
                      <td className="gr-r">
                        {Number(d.foodDrinkValue) > 0 ? (
                          <>
                            {eur(d.foodDrinkValue)}
                            {voucherText(d.foodDrinkVouchers) && (
                              <div className="gr-muted" style={{ fontSize: 11, whiteSpace: "nowrap" }}>{voucherText(d.foodDrinkVouchers)}</div>
                            )}
                          </>
                        ) : "—"}
                      </td>
                      <td>{normFolder(d.folderMention) !== "none" ? FOLDER_OPTS[normFolder(d.folderMention)] : "—"}</td>
                      <td>{d.websiteMention !== "none" ? WEBSITE_OPTS[d.websiteMention] : "—"}</td>
                      <td>{d.posterMention && d.posterMention !== "none" ? POSTER_OPTS[d.posterMention] : "—"}</td>
                      <td>{normLed(d.ledboarding).length > 0 ? ledLabel(d.ledboarding) : "—"}</td>
                      <td>{!needsInvoice(d)
                        ? <Tag tone="grey" >in kind</Tag>
                        : refMissing(d, sponsor)
                          ? <Tag tone="amber">ref. missing</Tag>
                          : d.invoiceCreated
                            ? <Tag tone="green">{d.invoiceNumber || "created"}</Tag>
                            : <Tag tone="amber">pending</Tag>}</td>
                      <td>{d.emailSentAt ? <Tag tone="green">sent</Tag> : <Tag>not sent</Tag>}</td>
                      <td className="gr-rowbtns">
                        <button className="gr-mini" onClick={(e) => { e.stopPropagation(); onEmail(d); }}>Email</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}

      {/* ---- Vouchers ---- */}
      {sub === "vouchers" && (
        myVouchers.length === 0 ? (
          <p className="gr-empty">
            No vouchers yet. Generate them per edition in the Vouchers tab.
          </p>
        ) : (
          <div className="gr-tablewrap">
            <table className="gr-table gr-compact">
              <thead><tr>
                <th>Edition</th><th>Type</th><th className="gr-r">Value</th>
                <th>Status</th><th>Code</th><th>Assigned to</th><th></th>
              </tr></thead>
              <tbody>
                {myVouchers.map((v) => {
                  const ed = editions.find((e) => e.id === v.editionId);
                  const st = VOUCHER_STATUS[v.status] || VOUCHER_STATUS.pending;
                  return (
                    <tr key={v.id} className={v.status === "cancelled" ? "gr-cancelled" : undefined}>
                      <td>{ed ? ed.name : "—"}</td>
                      <td>{VOUCHER_TYPES[v.type]?.label || v.type}</td>
                      <td className="gr-r">{v.value > 0 ? eur(v.value) : "—"}</td>
                      <td><Tag tone={st.tone}>{st.label}</Tag></td>
                      <td>{v.code || <span className="gr-muted">—</span>}</td>
                      <td>{v.recipientName || v.recipientEmail
                        ? <>{v.recipientName}<div className="gr-muted" style={{ fontSize: 11 }}>{v.recipientEmail}</div></>
                        : <span className="gr-muted">sponsor</span>}</td>
                      <td className="gr-rowbtns">
                        {v.url && <a className="gr-mini gr-btn-link" href={v.url} target="_blank" rel="noreferrer">View</a>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )
      )}
    </div>
  );
}

function CopyInviteButton({ sponsor, contact, responsible }) {
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(buildInvitation(sponsor, contact, responsible));
      setCopied(true); setTimeout(() => setCopied(false), 2000);
    } catch { /* clipboard unavailable */ }
  };
  return (
    <button className="gr-btn-ghost" onClick={copy}>
      {copied ? "Copied ✓" : "Invite (" + ((contact?.language || "nl").toUpperCase()) + ")"}
    </button>
  );
}

/* ---------- Team account form ---------- */

const emptyUser = { firstName: "", lastName: "", email: "", role: "user" };

function UserForm({ initial, onSave, onCancel, isOnlyAdmin, existing = [] }) {
  const [u, setU] = useState({ ...emptyUser, ...initial });
  /* Email follows firstname@grensrock.be unless it was edited by hand */
  const [customEmail, setCustomEmail] = useState(!!initial?.email && initial.email !== teamEmailFor(initial?.firstName));
  const email = customEmail ? u.email : teamEmailFor(u.firstName);
  const mailRes = validateEmail(email);
  const dupe = !!email && existing.some((x) => x.id !== u.id && sameEmail(x.email, email));
  const valid = u.firstName.trim().length > 0 && !!email.trim() && (!mailRes || mailRes.valid) && !dupe;

  return (
    <div>
      <div className="gr-grid2">
        <Field label="First name *">
          <input value={u.firstName} onChange={(e) => setU({ ...u, firstName: e.target.value })} placeholder="Jan" />
        </Field>
        <Field label="Last name">
          <input value={u.lastName} onChange={(e) => setU({ ...u, lastName: e.target.value })} placeholder="Peeters" />
        </Field>
      </div>
      <Field label="Email (login)"
        hint={customEmail ? "Custom address" : `Generated automatically as firstname@${TEAM_DOMAIN}`}>
        <EmailInput value={email}
          onChange={(e) => { setCustomEmail(true); setU({ ...u, email: e.target.value }); }} />
        {dupe && <span className="gr-hint" style={{ color: "var(--red)" }}>Another account already uses this email address.</span>}
        {customEmail && (
          <button className="gr-linkbtn" style={{ marginTop: 4 }}
            onClick={() => { setCustomEmail(false); setU({ ...u, email: "" }); }}>
            Use the standard {TEAM_DOMAIN} address
          </button>
        )}
      </Field>
      <Field label="Role" hint={isOnlyAdmin ? "This is the last admin — the role can't be changed." : undefined}>
        <select value={u.role} onChange={(e) => setU({ ...u, role: e.target.value })} disabled={isOnlyAdmin}>
          {Object.entries(ROLES).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
        </select>
      </Field>
      <p className="gr-muted">
        Admins manage editions, formulas, invoicing and team accounts. Users can view and update all sponsors
        and their agreements.
      </p>
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" disabled={!valid}
          onClick={() => onSave({ ...u, email: emailToStore(email) })}>Save account</button>
      </div>
    </div>
  );
}

function buildUserInvite(user) {
  return `Hi ${userName(user)},

You have access to the Grensrock sponsor tool.

Link: [link to the tool]
Log in with your email address (${user.email}) and the password: ${SHARED_PASSWORD}
Your role: ${user.role === "admin" ? "admin (full access)" : "user (sponsors & agreements)"}

Grensrock`;
}

function CopyUserInvite({ user }) {
  const [copied, setCopied] = useState(false);
  return (
    <button className="gr-mini" onClick={async () => {
      try {
        await navigator.clipboard.writeText(buildUserInvite(user));
        setCopied(true); setTimeout(() => setCopied(false), 2000);
      } catch { /* clipboard unavailable */ }
    }}>{copied ? "Copied ✓" : "Copy invite"}</button>
  );
}

/* ---------- Tickoweb settings ---------- */

function TickowebSettings({ value, onSave, onCancel }) {
  const [c, setC] = useState({ ...defaultTickoweb, ...value });
  const set = (k) => (e) => setC({ ...c, [k]: e.target.value });
  return (
    <div>
      <Field label="Mode">
        <select value={c.mode} onChange={set("mode")}>
          <option value="manual">Manual — create vouchers in Tickoweb yourself, paste the codes here</option>
          <option value="live">Live — call the Tickoweb API from this tool</option>
        </select>
      </Field>
      {c.mode === "live" && (
        <>
          <p className="gr-blockbanner">
            An API key in a browser app is readable by anyone using it, and Tickoweb will likely block direct
            browser calls (CORS). Point "Proxy URL" at a small server of your own that holds the key and forwards
            the calls — leave the API key here empty in that case.
          </p>
          <Field label="Proxy URL (recommended)" hint="Your own endpoint that forwards to Tickoweb with the key attached">
            <input value={c.proxyUrl} onChange={set("proxyUrl")} placeholder="https://api.grensrock.be/tickoweb" />
          </Field>
          <div className="gr-grid2">
            <Field label="Tickoweb base URL">
              <input value={c.baseUrl} onChange={set("baseUrl")} />
            </Field>
            <Field label="API key (only without proxy)">
              <input type="password" value={c.apiKey} onChange={set("apiKey")} />
            </Field>
          </div>
          <Field label="Event ID in Tickoweb">
            <input value={c.eventId} onChange={set("eventId")} placeholder="e.g. grensrock-2026" />
          </Field>
          <h4 className="gr-subhead">Product mapping</h4>
          <p className="gr-muted">Which Tickoweb product/ticket type corresponds to each of our voucher types.</p>
          <div className="gr-grid2">
            {Object.entries(VOUCHER_TYPES).map(([k, t]) => (
              <Field key={k} label={t.label}>
                <input value={c.productIds?.[k] || ""}
                  onChange={(e) => setC({ ...c, productIds: { ...(c.productIds || {}), [k]: e.target.value } })}
                  placeholder="Tickoweb product id" />
              </Field>
            ))}
          </div>
        </>
      )}
      <p className="gr-muted">
        The endpoint paths used ( POST /vouchers, POST /vouchers/&#123;code&#125;/send, DELETE /vouchers/&#123;code&#125; )
        are assumptions — verify them against the Tickoweb reference and adjust the <code>tickoweb</code> module in the code.
      </p>
      <div className="gr-actions">
        <button className="gr-btn-ghost" onClick={onCancel}>Cancel</button>
        <button className="gr-btn" onClick={() => onSave(c)}>Save</button>
      </div>
    </div>
  );
}

/* ---------- Landing (choose team vs sponsor access) ---------- */

function Landing({ users, sponsors, onTeam, onPortal }) {
  const [side, setSide] = useState(null); // null | 'team' | 'sponsor'
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");
  const [err, setErr] = useState("");
  const noAccounts = users.length === 0;

  const check = (who) => {
    if (pwd !== SHARED_PASSWORD) { setErr("Wrong password."); return; }
    if (who === "team") {
      const u = users.find((x) => sameEmail(x.email, email));
      if (u) { onTeam(u.id); return; }
      setErr("No team account with that email address. Ask an admin to add you.");
    } else {
      let found = null;
      for (const sp of sponsors) {
        const c = sponsorContacts(sp).find((x) => x.email && sameEmail(x.email, email));
        if (c) { found = { sponsorId: sp.id, contactId: c.id }; break; }
      }
      if (found) { onPortal(found.sponsorId, found.contactId); return; }
      setErr("We don't know that email address. Use the address we have on file for you.");
    }
  };

  const form = (who, label) => (
    <>
      <input type="email" placeholder="your@email.com" value={email}
        onChange={(e) => { setEmail(e.target.value); setErr(""); }}
        onKeyDown={(e) => e.key === "Enter" && check(who)} autoFocus />
      <input type="password" placeholder="Password" value={pwd}
        onChange={(e) => { setPwd(e.target.value); setErr(""); }}
        onKeyDown={(e) => e.key === "Enter" && check(who)} />
      <button className="gr-btn" onClick={() => check(who)}>{label}</button>
      <button className="gr-linkbtn" onClick={() => { setSide(null); setEmail(""); setPwd(""); setErr(""); }}>Back</button>
    </>
  );

  return (
    <div className="gr-landing">
      <PickLines />
      <PickLogo size={150} />
      <span className="gr-brandsub" style={{ marginTop: 10 }}>Sponsor management</span>
      <div className="gr-landcards">
        <div className={"gr-landcard" + (side === "team" ? " on" : "")}>
          <h3 className="gr-h3">Organisation</h3>
          {noAccounts ? (
            <>
              <p className="gr-muted">No team accounts yet — set up the first admin.</p>
              <button className="gr-btn" onClick={() => onTeam(null)}>Set up</button>
            </>
          ) : side === "team" ? form("team", "Log in") : (
            <>
              <p className="gr-muted">Manage sponsors, editions, agreements and invoicing.</p>
              <button className="gr-btn" onClick={() => { setErr(""); setSide("team"); }}>Log in as team member</button>
            </>
          )}
        </div>
        <div className={"gr-landcard" + (side === "sponsor" ? " on" : "")}>
          <h3 className="gr-h3">Sponsor</h3>
          {side === "sponsor" ? form("sponsor", "Open my page") : (
            <>
              <p className="gr-muted">Update your company details and upload your logo.</p>
              <button className="gr-btn-ghost" onClick={() => { setErr(""); setSide("sponsor"); }}>Log in as sponsor</button>
            </>
          )}
        </div>
      </div>
      {err && <p style={{ color: "var(--red)", fontWeight: 600 }}>{err}</p>}
    </div>
  );
}


/* ---------- Sponsor self-service portal ---------- */

function SponsorPortal({ sponsor, asContact, deals, editions, vouchers = [], onSaveSponsor, onAssignVoucher, onExit }) {
  const [sub, setSub] = useState("info");
  const [assigning, setAssigning] = useState(null);
  const [assignDraft, setAssignDraft] = useState({ name: "", email: "" });
  const myVouchers = vouchers
    .filter((v) => v.sponsorId === sponsor.id)
    .sort((a, b) => (a.type || "").localeCompare(b.type || ""));
  useEffect(() => {
    if (assigning) setAssignDraft({ name: assigning.recipientName || "", email: assigning.recipientEmail || "" });
  }, [assigning]);

  const [s, setS] = useState({ ...sponsor });
  const [saved, setSaved] = useState(false);
  const set = (k) => (e) => { setS({ ...s, [k]: e.target.value }); setSaved(false); };
  /* Portal language follows the contact who logged in */
  const lang = asContact?.language || primaryContact(sponsor)?.language || "nl";
  const T = (nl, fr, en) => ({ nl, fr, en }[lang]);

  const history = deals
    .filter((d) => d.sponsorId === sponsor.id)
    .map((d) => ({ ...d, edition: editions.find((e) => e.id === d.editionId) }))
    .sort((a, b) => (b.edition?.startDate || "").localeCompare(a.edition?.startDate || ""));

  const vatRes = validateVat(s.vatNumber);
  const contactsOk = (s.contacts || []).every((c) => {
    const r = validateEmail(c.email);
    return !r || r.valid;
  });
  const save = () => {
    if ((vatRes && !vatRes.valid) || !contactsOk) return; // button is disabled, extra guard
    // Sponsors can edit their own info, never team-side fields
    const { responsible, id, ...rest } = s;
    onSaveSponsor(sponsor.id, {
      ...rest,
      vatNumber: vatToStore(s.vatNumber),
      contacts: (s.contacts || []).map((c) => ({ ...c, id: c.id || uid(), email: emailToStore(c.email) })),
    });
    setSaved(true);
  };

  const TABS = [
    ["info", T("Gegevens", "Données", "Information")],
    ["contacts", `${T("Contactpersonen", "Contacts", "Contact persons")} (${(s.contacts || []).length})`],
    ["sponsoring", `${T("Sponsoring", "Sponsoring", "Sponsorship")} (${history.length})`],
    ["vouchers", `${T("Tickets & bonnen", "Tickets & bons", "Tickets & vouchers")} (${myVouchers.filter((v) => v.status !== "cancelled").length})`],
  ];

  const saveBar = (
    <div className="gr-actions" style={{ justifyContent: "flex-start" }}>
      <button className="gr-btn" disabled={!!(vatRes && !vatRes.valid) || !contactsOk} onClick={save}>
        {T("Gegevens opslaan", "Enregistrer", "Save details")}
      </button>
      {saved && <Tag tone="green">{T("Opgeslagen ✓", "Enregistré ✓", "Saved ✓")}</Tag>}
    </div>
  );

  return (
    <div className="gr-root">
      <style>{CSS}</style>
      <header className="gr-header">
        <div className="gr-brand">
          <PickLogo size={54} />
          <span className="gr-brandsub">{T("Sponsorportaal", "Portail sponsors", "Sponsor portal")}</span>
        </div>
        <button className="gr-btn-ghost gr-exit" onClick={onExit}>{T("Afsluiten", "Quitter", "Exit")}</button>
      </header>
      <div className="gr-borderline" aria-hidden="true" />
      <main className="gr-main" style={{ maxWidth: 820 }}>
        <h2 className="gr-h2">{sponsor.companyName}</h2>
        <p className="gr-muted">{T(
          "Kijk uw gegevens na, pas ze aan waar nodig en laad uw logo op. Bedankt voor uw steun aan Grensrock!",
          "Vérifiez vos données, modifiez-les si nécessaire et téléchargez votre logo. Merci pour votre soutien à Grensrock !",
          "Review your details, update them where needed and upload your logo. Thank you for supporting Grensrock!")}</p>

        <nav className="gr-subnav">
          {TABS.map(([k, l]) => (
            <button key={k} className={sub === k ? "on" : ""} onClick={() => setSub(k)}>{l}</button>
          ))}
        </nav>

        {/* ---- Information ---- */}
        {sub === "info" && (
          <>
            <h4 className="gr-subhead" style={{ borderTop: "none", paddingTop: 0 }}>Logo</h4>
            <p className="gr-muted" style={{ marginBottom: 8 }}>{T(
              "Uw logo gebruiken we voor de folder, ledboarding, website, ... Laad bij voorkeur een versie met transparante achtergrond op (PNG of SVG).",
              "Votre logo sera utilisé pour le dépliant, le ledboarding, le site web, ... Téléchargez de préférence une version à fond transparent (PNG ou SVG).",
              "Your logo is used for the folder, LED boarding, website, ... Preferably upload a version with a transparent background (PNG or SVG).")}</p>
            <LogoUploader sponsorId={sponsor.id} />

            <h4 className="gr-subhead">{T("Bedrijfsgegevens", "Données de l'entreprise", "Company details")}</h4>
            <div className="gr-grid2">
              <Field label={T("Bedrijf / naam", "Société / nom", "Company / name")}>
                <input value={s.companyName} onChange={set("companyName")} />
              </Field>
              <Field label={T("BTW-nummer", "Numéro de TVA", "VAT number")}>
                <VatInput value={s.vatNumber} onChange={set("vatNumber")} lang={lang} />
              </Field>
            </div>
            <Field label={T("Adres", "Adresse", "Address")}>
              <input value={s.address} onChange={set("address")} />
            </Field>
            <label className={"gr-check" + (s.refRequired ? " on" : "")} style={{ marginBottom: 12 }}>
              <input type="checkbox" checked={!!s.refRequired}
                onChange={(e) => { setS({ ...s, refRequired: e.target.checked }); setSaved(false); }} />
              {T("Wij hebben een referentie (bestelbon, PO-nummer, kostenplaats) nodig op de factuur",
                 "Nous avons besoin d'une référence (bon de commande, numéro PO, centre de coûts) sur la facture",
                 "We need a reference (purchase order, PO number, cost centre) on the invoice")}
            </label>
            {saveBar}
          </>
        )}

        {/* ---- Contact persons ---- */}
        {sub === "contacts" && (
          <>
            <p className="gr-muted" style={{ marginBottom: 8 }}>{T(
              "Voeg gerust collega's toe en duid aan welke communicatie ieder van hen wil ontvangen.",
              "N'hésitez pas à ajouter des collègues et à indiquer quelles communications chacun souhaite recevoir.",
              "Feel free to add colleagues and indicate which communications each of them wants to receive.")}</p>
            <ContactsEditor contacts={s.contacts || []} lang={lang}
              onChange={(contacts) => { setS({ ...s, contacts }); setSaved(false); }} />
            {saveBar}
          </>
        )}

        {/* ---- Sponsorship ---- */}
        {sub === "sponsoring" && (
          history.length === 0 ? (
            <p className="gr-empty">{T("Nog geen sponsoring geregistreerd.", "Aucun sponsoring enregistré.", "No sponsorship registered yet.")}</p>
          ) : (
            <div className="gr-tablewrap">
              <table className="gr-table gr-compact">
                <thead><tr>
                  <th>{T("Editie", "Édition", "Edition")}</th>
                  <th>{T("Formule", "Formule", "Formula")}</th>
                  <th className="gr-r">{T("Bijdrage", "Contribution", "Contribution")}</th>
                  <th>{T("Zichtbaarheid", "Visibilité", "Visibility")}</th>
                </tr></thead>
                <tbody>
                  {history.map((d) => {
                    const vis = [];
                    if (normFolder(d.folderMention) !== "none") vis.push(`${T("Folder", "Dépliant", "Folder")}: ${FOLDER_OPTS[normFolder(d.folderMention)]}`);
                    if (d.posterMention && d.posterMention !== "none") vis.push(`${T("Affiche", "Affiche", "Poster")}: ${POSTER_OPTS[d.posterMention]}`);
                    if (d.websiteMention !== "none") vis.push(`Website: ${WEBSITE_OPTS[d.websiteMention]}`);
                    if (normLed(d.ledboarding).length) vis.push(`LED: ${ledLabel(d.ledboarding)}`);
                    return (
                      <tr key={d.id}>
                        <td>{d.edition ? d.edition.name : "?"}</td>
                        <td>{d.formulaName || "—"}</td>
                        <td className="gr-r"><strong>{eur(d.cost)}</strong>
                          {d.settlement === "inkind" && <div className="gr-muted" style={{ fontSize: 11 }}>{T("in natura", "en nature", "in kind")}</div>}
                        </td>
                        <td className="gr-muted">{vis.join(" · ") || "—"}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )
        )}

        {/* ---- Vouchers ---- */}
        {sub === "vouchers" && (
          myVouchers.length === 0 ? (
            <p className="gr-empty">{T(
              "Er zijn nog geen tickets of bonnen toegekend.",
              "Aucun ticket ou bon ne vous a encore été attribué.",
              "No tickets or vouchers have been assigned yet.")}</p>
          ) : (
            <>
              <p className="gr-muted" style={{ marginBottom: 8 }}>{T(
                "Wil u een ticket doorgeven aan een collega of klant? Vul zijn naam en e-mailadres in — wij sturen het rechtstreeks naar hem door.",
                "Vous souhaitez transmettre un ticket à un collègue ou un client ? Indiquez son nom et son e-mail — nous le lui envoyons directement.",
                "Want to pass a ticket on to a colleague or client? Fill in their name and email — we'll send it straight to them.")}</p>
              <div className="gr-tablewrap">
                <table className="gr-table gr-compact">
                  <thead><tr>
                    <th>{T("Editie", "Édition", "Edition")}</th>
                    <th>{T("Type", "Type", "Type")}</th>
                    <th className="gr-r">{T("Waarde", "Valeur", "Value")}</th>
                    <th>{T("Status", "Statut", "Status")}</th>
                    <th>{T("Op naam van", "Au nom de", "Assigned to")}</th>
                    <th></th>
                  </tr></thead>
                  <tbody>
                    {myVouchers.map((v) => {
                      const ed = editions.find((e) => e.id === v.editionId);
                      const st = VOUCHER_STATUS[v.status] || VOUCHER_STATUS.pending;
                      return (
                        <tr key={v.id} className={v.status === "cancelled" ? "gr-cancelled" : undefined}>
                          <td>{ed ? ed.name : "—"}</td>
                          <td>{VOUCHER_TYPES[v.type]?.label || v.type}</td>
                          <td className="gr-r">{v.value > 0 ? eur(v.value) : "—"}</td>
                          <td><Tag tone={st.tone}>{st.label}</Tag></td>
                          <td>{v.recipientName || v.recipientEmail
                            ? <>{v.recipientName}<div className="gr-muted" style={{ fontSize: 11 }}>{v.recipientEmail}</div></>
                            : <span className="gr-muted">—</span>}</td>
                          <td className="gr-rowbtns">
                            {v.url && <a className="gr-mini gr-btn-link" href={v.url} target="_blank" rel="noreferrer">{T("Bekijk", "Voir", "View")}</a>}
                            {v.status !== "cancelled" && (
                              <button className="gr-mini" onClick={() => setAssigning(v)}>
                                {v.recipientEmail ? T("Wijzig", "Modifier", "Change") : T("Doorgeven", "Transmettre", "Pass on")}
                              </button>
                            )}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </>
          )
        )}

        {assigning && (
          <Modal title={T("Ticket doorgeven", "Transmettre le ticket", "Pass on ticket")} onClose={() => setAssigning(null)}>
            <p className="gr-muted">{VOUCHER_TYPES[assigning.type]?.label}{assigning.value > 0 ? ` · ${eur(assigning.value)}` : ""}</p>
            <Field label={T("Naam", "Nom", "Name")}>
              <input value={assignDraft.name}
                onChange={(e) => setAssignDraft({ ...assignDraft, name: e.target.value })} />
            </Field>
            <Field label="Email">
              <EmailInput value={assignDraft.email} lang={lang}
                onChange={(e) => setAssignDraft({ ...assignDraft, email: e.target.value })} />
            </Field>
            <p className="gr-muted">{T(
              "Wij sturen het ticket op naam naar dit adres. U kan dit later nog wijzigen.",
              "Nous enverrons le ticket nominatif à cette adresse. Vous pouvez le modifier plus tard.",
              "We'll send the personalised ticket to this address. You can change this later.")}</p>
            <div className="gr-actions">
              {assigning.recipientEmail && (
                <button className="gr-btn-ghost gr-danger" onClick={() => {
                  onAssignVoucher(assigning.id, { recipientName: "", recipientEmail: "" });
                  setAssigning(null);
                }}>{T("Terugnemen", "Reprendre", "Take back")}</button>
              )}
              <button className="gr-btn-ghost" onClick={() => setAssigning(null)}>{T("Annuleren", "Annuler", "Cancel")}</button>
              <button className="gr-btn"
                disabled={!validateEmail(assignDraft.email)?.valid || !assignDraft.name.trim()}
                onClick={() => {
                  onAssignVoucher(assigning.id, {
                    recipientName: assignDraft.name.trim(),
                    recipientEmail: emailToStore(assignDraft.email),
                  });
                  setAssigning(null);
                }}>{T("Doorgeven", "Transmettre", "Pass on")}</button>
            </div>
          </Modal>
        )}
      </main>
    </div>
  );
}

/* ============================================================
   Main app
   ============================================================ */

export default function GrensrockApp() {
  const [data, setData] = useState({ sponsors: [], editions: [], deals: [], users: [], settings: { teamCode: "" } });
  const [loaded, setLoaded] = useState(false);
  const [saveErr, setSaveErr] = useState(false);
  const [mode, setMode] = useState({ view: "landing" }); // landing | team | portal
  const [userId, setUserId] = useState(null);
  const [tab, setTab] = useState("overview");
  const [modal, setModal] = useState(null); // {type, payload}
  const [query, setQuery] = useState("");
  const [openSponsorId, setOpenSponsorId] = useState(null);
  const [invEdition, setInvEdition] = useState("");
  const [voEdition, setVoEdition] = useState("");
  const [voSponsor, setVoSponsor] = useState("");
  const [voStatus, setVoStatus] = useState("");
  const [voSel, setVoSel] = useState([]);
  const [voBusy, setVoBusy] = useState(false);

  /* ----- load & save (shared storage: whole team + sponsors work on the same data) ----- */
  useEffect(() => {
    (async () => {
      let d = null;
      try {
        const r = await window.storage.get(STORAGE_KEY, true);
        if (r && r.value) d = JSON.parse(r.value);
      } catch { /* no shared data yet */ }
      if (!d) {
        // One-time migration from the old per-user storage
        try {
          const old = await window.storage.get(STORAGE_KEY);
          if (old && old.value) {
            d = JSON.parse(old.value);
            await window.storage.set(STORAGE_KEY, JSON.stringify(migrate(d)), true);
          }
        } catch { /* nothing to migrate */ }
      }
      if (d) {
        const migrated = migrate(d);
        setData(migrated);
        // Persist newly generated codes/keys so they stay stable across sessions
        if (JSON.stringify(migrated) !== JSON.stringify(d)) {
          try { await window.storage.set(STORAGE_KEY, JSON.stringify(migrated), true); } catch { /* retried on next save */ }
        }
      }
      setLoaded(true);
    })();
  }, []);

  const persist = useCallback(async (next) => {
    setData(next);
    try {
      await window.storage.set(STORAGE_KEY, JSON.stringify(next), true);
      setSaveErr(false);
    } catch { setSaveErr(true); }
  }, []);

  /* ----- derived ----- */
  const { sponsors, editions, deals } = data;
  const users = data.users || [];
  const vouchers = data.vouchers || [];
  const me = users.find((u) => u.id === userId) || null;
  const admin = users.length === 0 ? true : isAdmin(me); // bootstrap: first entry is admin
  const activeEditions = editions.filter((e) => e.active);
  const sortedEditions = [...editions].sort((a, b) => (b.startDate || "").localeCompare(a.startDate || ""));

  const filteredSponsors = useMemo(() => {
    const q = query.trim().toLowerCase();
    const list = [...sponsors].sort((a, b) => a.companyName.localeCompare(b.companyName));
    if (!q) return list;
    return list.filter((s) =>
      [s.companyName, s.vatNumber, responsibleName(s, users), s.address,
       ...sponsorContacts(s).flatMap((c) => [contactName(c), c.email])]
        .some((f) => (f || "").toLowerCase().includes(q)));
  }, [sponsors, query]);

  const openSponsor = sponsors.find((s) => s.id === openSponsorId);

  /* ----- mutations ----- */
  const saveUser = (u) => {
    const bootstrap = users.length === 0;
    const created = { ...u, id: uid() };
    const next = u.id
      ? { ...data, users: users.map((x) => (x.id === u.id ? { ...x, ...u } : x)) }
      : { ...data, users: [...users, bootstrap ? { ...created, role: "admin" } : created] };
    persist(next); setModal(null);
    if (bootstrap) setUserId(created.id); // stay logged in as the new admin
  };
  const deleteUser = (id) => {
    const u = users.find((x) => x.id === id);
    const admins = users.filter(isAdmin);
    if (isAdmin(u) && admins.length <= 1) { window.alert("You can't remove the last admin."); return; }
    if (!window.confirm(`Remove the account of ${userName(u)}? They lose access immediately.`)) return;
    persist({ ...data, users: users.filter((x) => x.id !== id) });
    if (id === userId) { setUserId(null); setMode({ view: "landing" }); }
  };
  /* ----- vouchers ----- */
  const updateVoucher = (id, patch) =>
    persist({ ...data, vouchers: vouchers.map((v) => (v.id === id ? { ...v, ...patch } : v)) });

  /* Create voucher records for everything the agreements of an edition entitle to.
     Existing (incl. cancelled) records are kept; only the shortfall is added. */
  const generateVouchers = (editionId) => {
    const edDeals = deals.filter((d) => d.editionId === editionId);
    const added = [];
    edDeals.forEach((d) => {
      const wanted = expectedVouchers(d);
      const have = vouchers.filter((v) => v.dealId === d.id && v.status !== "cancelled");
      const countBy = (list, t, val) => list.filter((x) => x.type === t && Number(x.value) === Number(val)).length;
      const seen = new Set();
      wanted.forEach((w) => {
        const key = `${w.type}|${w.value}`;
        if (seen.has(key)) return;
        seen.add(key);
        const need = countBy(wanted, w.type, w.value) - countBy(have, w.type, w.value);
        for (let i = 0; i < need; i++) {
          added.push({
            id: uid(), sponsorId: d.sponsorId, editionId, dealId: d.id,
            type: w.type, value: w.value, status: "pending",
            code: "", url: "", recipientName: "", recipientEmail: "",
            createdAt: null, sentAt: null, cancelledAt: null, error: "",
          });
        }
      });
    });
    if (added.length === 0) { window.alert("Everything is already generated for this edition."); return; }
    persist({ ...data, vouchers: [...vouchers, ...added] });
    window.alert(`${added.length} voucher(s) added as "to create".`);
  };

  /* Run a Tickoweb action over a selection, one by one so a failure doesn't stop the rest */
  const runVoucherAction = async (action, ids) => {
    const cfg = data.settings?.tickoweb || defaultTickoweb;
    if (action === "cancel" && !window.confirm(`Cancel ${ids.length} voucher(s)?`)) return;
    setVoBusy(true);
    let next = vouchers;
    for (const id of ids) {
      const v = next.find((x) => x.id === id);
      if (!v) continue;
      const sponsor = sponsors.find((s) => s.id === v.sponsorId);
      const edition = editions.find((e) => e.id === v.editionId);
      const target = v.recipientEmail
        ? { name: v.recipientName, email: v.recipientEmail }
        : (() => {
            const c = contactsFor(sponsor, "vouchers")[0];
            return c ? { name: contactName(c), email: c.email } : null;
          })();
      try {
        let patch = {};
        if (action === "createSend") {
          if (v.status === "pending") {
            const r = await tickoweb.create(cfg, { voucher: v, sponsor, edition, recipient: target });
            patch = { ...patch, code: r.code || v.code, url: r.url || v.url, createdAt: new Date().toISOString(), status: "created", error: "" };
          }
          const sendable = { ...v, ...patch };
          if (sendable.code || cfg.mode !== "live") {
            await tickoweb.send(cfg, { voucher: sendable, recipient: target });
            patch = { ...patch, status: "sent", sentAt: new Date().toISOString() };
          }
        } else if (action === "resend") {
          await tickoweb.send(cfg, { voucher: v, recipient: target });
          patch = { status: "sent", sentAt: new Date().toISOString(), error: "" };
        } else if (action === "cancel") {
          if (v.code) await tickoweb.cancel(cfg, { voucher: v });
          patch = { status: "cancelled", cancelledAt: new Date().toISOString(), error: "" };
        }
        next = next.map((x) => (x.id === id ? { ...x, ...patch } : x));
      } catch (ex) {
        next = next.map((x) => (x.id === id ? { ...x, status: "error", error: String(ex.message || ex) } : x));
      }
    }
    await persist({ ...data, vouchers: next });
    setVoSel([]);
    setVoBusy(false);
  };

  const saveSponsor = (s) => {
    const next = s.id
      ? { ...data, sponsors: sponsors.map((x) => (x.id === s.id ? s : x)) }
      : { ...data, sponsors: [...sponsors, { ...s, id: uid() }] };
    persist(next); setModal(null);
  };
  const updateSponsorInfo = (id, patch) =>
    persist({ ...data, sponsors: sponsors.map((s) => (s.id === id ? { ...s, ...patch } : s)) });
  const addSponsorInline = (s) => {
    const created = { ...emptySponsor, ...s, id: uid() };
    persist({ ...data, sponsors: [...sponsors, created] });
    return created;
  };
  const importSponsors = (list) => {
    const created = list.map(({ vatInvalid, mailInvalid, contactPreview, emailPreview, langPreview, ...s }) =>
      ({ ...emptySponsor, ...s, id: uid() }));
    persist({ ...data, sponsors: [...sponsors, ...created] });
  };
  const deleteSponsor = (id) => {
    if (!window.confirm("Delete this sponsor and all their agreements?")) return;
    persist({ ...data, sponsors: sponsors.filter((s) => s.id !== id), deals: deals.filter((d) => d.sponsorId !== id) });
    window.storage.delete(logoKey(id), true).catch(() => { /* no logo stored */ });
    setOpenSponsorId(null);
  };
  const saveEdition = (ed) => {
    const next = ed.id
      ? { ...data, editions: editions.map((x) => (x.id === ed.id ? { ...x, ...ed } : x)) }
      : { ...data, editions: [...editions, { ...ed, id: uid(), formulas: ed.formulas || [] }] };
    persist(next); setModal(null);
  };
  const toggleEdition = (id) =>
    persist({ ...data, editions: editions.map((e) => (e.id === id ? { ...e, active: !e.active } : e)) });
  const deleteEdition = (id) => {
    const n = deals.filter((d) => d.editionId === id).length;
    if (!window.confirm(n ? `This edition has ${n} agreement(s). Delete edition and agreements?` : "Delete this edition?")) return;
    persist({ ...data, editions: editions.filter((e) => e.id !== id), deals: deals.filter((d) => d.editionId !== id) });
  };
  const saveFormula = (editionId, f, originalName) => {
    persist({
      ...data,
      editions: editions.map((e) => {
        if (e.id !== editionId) return e;
        const fs = e.formulas || [];
        return {
          ...e,
          formulas: originalName
            ? fs.map((x) => (x.name === originalName ? f : x))
            : [...fs, f],
        };
      }),
    });
    setModal(null);
  };
  const deleteFormula = (editionId, name) =>
    persist({ ...data, editions: editions.map((e) => e.id === editionId ? { ...e, formulas: (e.formulas || []).filter((f) => f.name !== name) } : e) });
  const saveDeal = (d) => {
    const next = d.id
      ? { ...data, deals: deals.map((x) => (x.id === d.id ? { ...x, ...d } : x)) }
      : { ...data, deals: [...deals, { ...d, id: uid(), createdAt: new Date().toISOString(), responsible: d.responsible || userName(me) || "" }] };
    persist(next);
    setModal(null);
    // Offer the email right after creating a new agreement
    if (!d.id) {
      const created = next.deals[next.deals.length - 1];
      setModal({ type: "email", payload: created });
    }
  };
  const markEmailSent = (dealId) => {
    persist({ ...data, deals: deals.map((d) => d.id === dealId ? { ...d, emailSentAt: new Date().toISOString() } : d) });
    setModal(null);
  };
  const setInvoice = (dealId, patch) =>
    persist({
      ...data,
      deals: deals.map((d) => {
        if (d.id !== dealId) return d;
        const next = { ...d, ...patch };
        // Never allow "invoice created" while a required reference is still missing
        if (refMissing(next, sponsors.find((x) => x.id === next.sponsorId))) next.invoiceCreated = false;
        return next;
      }),
    });

  /* ----- overview stats ----- */
  const overviewEdition = activeEditions[0] || sortedEditions[0];
  const ovDeals = overviewEdition ? deals.filter((d) => d.editionId === overviewEdition.id) : [];
  const ovTotal = ovDeals.reduce((s, d) => s + (Number(d.cost) || 0), 0);
  const ovCash = ovDeals.reduce((s, d) => s + invoiceAmount(d), 0);
  const ovKind = ovTotal - ovCash;
  const ovBillable = ovDeals.filter(needsInvoice);
  const ovInvoiced = ovBillable.filter((d) => d.invoiceCreated).length;

  if (!loaded) return <div className="gr-root"><style>{CSS}</style><p className="gr-loading">Loading…</p></div>;

  /* ----- access modes ----- */
  if (mode.view === "landing") {
    return (
      <div className="gr-root"><style>{CSS}</style>
        <Landing
          users={users}
          sponsors={sponsors}
          onTeam={(uid2) => { setUserId(uid2); setMode({ view: "team" }); setTab("overview"); }}
          onPortal={(sponsorId, contactId) => setMode({ view: "portal", sponsorId, contactId })}
        />
      </div>
    );
  }
  if (mode.view === "portal") {
    const ps = sponsors.find((s) => s.id === mode.sponsorId);
    if (!ps) {
      return (
        <div className="gr-root"><style>{CSS}</style>
          <div className="gr-landing">
            <p style={{ color: "#fff" }}>This sponsor page is no longer available.</p>
            <button className="gr-btn-ghost" onClick={() => setMode({ view: "landing" })}>Back to start</button>
          </div>
        </div>
      );
    }
    return (
      <SponsorPortal
        sponsor={ps}
        asContact={sponsorContacts(ps).find((c) => c.id === mode.contactId)}
        deals={deals} editions={editions} vouchers={vouchers}
        onSaveSponsor={updateSponsorInfo}
        onAssignVoucher={(id, patch) => updateVoucher(id, patch)}
        onExit={() => setMode({ view: "landing" })}
      />
    );
  }

  const invEd = editions.find((e) => e.id === (invEdition || overviewEdition?.id));
  const invDeals = invEd ? deals.filter((d) => d.editionId === invEd.id) : [];

  return (
    <div className="gr-root">
      <style>{CSS}</style>

      <header className="gr-header">
        <div className="gr-brand">
          <PickLogo size={54} />
          <span className="gr-brandsub">Sponsor management</span>
        </div>
        <nav className="gr-nav">
          {[["overview", "Overview"], ["sponsors", "Sponsors"], ["editions", "Editions & formulas"], ["vouchers", "Vouchers"],
            ...(admin ? [["invoicing", "Invoicing"], ["team", "Team"]] : [])].map(([k, l]) => (
            <button key={k} className={tab === k ? "on" : ""} onClick={() => { setTab(k); setOpenSponsorId(null); }}>{l}</button>
          ))}
          <span className="gr-whoami">
            {me ? <>{userName(me)} <Tag tone={admin ? "green" : "grey"}>{admin ? "admin" : "user"}</Tag></> : "setup"}
          </span>
          <button onClick={() => { setUserId(null); setMode({ view: "landing" }); }} title="Log out">Log out</button>
        </nav>
      </header>
      <div className="gr-borderline" aria-hidden="true" />
      {saveErr && <div className="gr-warn">Couldn't save the last change — check your connection and try again.</div>}
      {users.length === 0 && (
        <div className="gr-setupbar">
          No team accounts yet — anyone with the link can get in.
          <button className="gr-mini" onClick={() => setModal({ type: "user", payload: { role: "admin" } })}>Create the first admin</button>
        </div>
      )}

      <main className="gr-main">

        {/* ---------- OVERVIEW ---------- */}
        {tab === "overview" && (
          <section>
            {editions.length === 0 && sponsors.length === 0 ? (
              <div className="gr-onboard">
                <h2 className="gr-h2">Welcome 👋</h2>
                <p>Set up in three steps:</p>
                <ol>
                  <li><strong>Create an edition</strong> (e.g. Grensrock 2026) and define its sponsor formulas.</li>
                  <li><strong>Add your sponsors</strong> with their contact details.</li>
                  <li><strong>Register agreements</strong> — pick a formula, adjust, and send the confirmation email.</li>
                </ol>
                <div className="gr-actions" style={{ justifyContent: "flex-start" }}>
                  <button className="gr-btn" onClick={() => setModal({ type: "edition" })}>Create first edition</button>
                  <button className="gr-btn-ghost" onClick={() => setModal({ type: "sponsor" })}>Add a sponsor</button>
                </div>
              </div>
            ) : (
              <>
                <h2 className="gr-h2">{overviewEdition ? overviewEdition.name : "No edition yet"}</h2>
                {overviewEdition && (
                  <p className="gr-muted">
                    {overviewEdition.startDate}{overviewEdition.endDate ? " – " + overviewEdition.endDate : ""}
                    {overviewEdition.location && " · " + overviewEdition.location}
                    {" · "}{overviewEdition.active ? <Tag tone="green">active</Tag> : <Tag>inactive</Tag>}
                  </p>
                )}
                <div className="gr-statrow">
                  <div className="gr-stat"><span>{ovDeals.length}</span>sponsors this edition</div>
                  <div className="gr-stat"><span>{eur(ovTotal)}</span>total sponsorship value</div>
                  <div className="gr-stat"><span>{eur(ovCash)}</span>to invoice{ovKind > 0 ? ` · ${eur(ovKind)} in kind` : ""}</div>
                  <div className="gr-stat"><span>{ovInvoiced} / {ovBillable.length}</span>invoiced</div>
                </div>
                <div className="gr-actions" style={{ justifyContent: "flex-start" }}>
                  <button className="gr-btn" onClick={() => setModal({ type: "deal" })}>+ New agreement</button>
                  <button className="gr-btn-ghost" onClick={() => setModal({ type: "sponsor" })}>+ New sponsor</button>
                </div>
              </>
            )}
          </section>
        )}

        {/* ---------- SPONSORS ---------- */}
        {tab === "sponsors" && !openSponsor && (
          <section>
            <div className="gr-toolbar">
              <input className="gr-search" placeholder="Search name, VAT, contact, responsible…" value={query} onChange={(e) => setQuery(e.target.value)} />
              <button className="gr-btn-ghost" onClick={() => setModal({ type: "import" })}>Import list</button>
              <button className="gr-btn" onClick={() => setModal({ type: "sponsor" })}>+ New sponsor</button>
            </div>
            {filteredSponsors.length === 0 ? (
              <p className="gr-empty">{sponsors.length === 0 ? "No sponsors yet — add your first one." : "No sponsors match your search."}</p>
            ) : (
              <div className="gr-tablewrap">
                <table className="gr-table gr-clickable">
                  <thead>
                    <tr><th>Company</th><th>Contact</th><th>Language</th><th>Responsible</th><th className="gr-r">Editions</th><th className="gr-r">Lifetime</th></tr>
                  </thead>
                  <tbody>
                    {filteredSponsors.map((s) => {
                      const hs = deals.filter((d) => d.sponsorId === s.id);
                      const tot = hs.reduce((sum, d) => sum + (Number(d.cost) || 0), 0);
                      return (
                        <tr key={s.id} onClick={() => setOpenSponsorId(s.id)}>
                          <td><strong>{s.companyName}</strong>{s.vatNumber && <span className="gr-muted"> · {s.vatNumber}</span>}
                            {s.refRequired && <> <Tag tone="amber">ref.</Tag></>}</td>
                          <td>{(() => {
                            const pc = primaryContact(s);
                            const extra = sponsorContacts(s).length - 1;
                            return pc
                              ? <>{contactName(pc)}{pc.email && <span className="gr-muted"> · {pc.email}</span>}
                                  {extra > 0 && <span className="gr-muted"> +{extra}</span>}</>
                              : <span className="gr-muted">—</span>;
                          })()}</td>
                          <td>{[...new Set(sponsorContacts(s).map((c) => (c.language || "nl").toUpperCase()))].join(", ") || "—"}</td>
                          <td>{responsibleName(s, users) || "—"}</td>
                          <td className="gr-r">{hs.length}</td>
                          <td className="gr-r"><strong>{eur(tot)}</strong></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </section>
        )}

        {tab === "sponsors" && openSponsor && (
          <SponsorDetail
            sponsor={openSponsor} deals={deals} editions={editions} users={users} vouchers={vouchers}
            onBack={() => setOpenSponsorId(null)}
            onEdit={() => setModal({ type: "sponsor", payload: openSponsor })}
            canDelete={admin}
            onDelete={() => deleteSponsor(openSponsor.id)}
            onAddDeal={() => setModal({ type: "deal", payload: { sponsorId: openSponsor.id, lockSponsor: true } })}
            onEditDeal={(d) => setModal({ type: "deal", payload: d })}
            onEmail={(d) => setModal({ type: "email", payload: d })}
          />
        )}

        {/* ---------- EDITIONS ---------- */}
        {tab === "editions" && (
          <section>
            <div className="gr-toolbar">
              <h2 className="gr-h2" style={{ margin: 0 }}>Festival editions</h2>
              {admin && <button className="gr-btn" onClick={() => setModal({ type: "edition" })}>+ New edition</button>}
            </div>
            {sortedEditions.length === 0 && <p className="gr-empty">No editions yet.</p>}
            {sortedEditions.map((ed) => {
              const edDeals = deals.filter((d) => d.editionId === ed.id);
              const tot = edDeals.reduce((s, d) => s + (Number(d.cost) || 0), 0);
              return (
                <div key={ed.id} className="gr-card">
                  <div className="gr-cardhead">
                    <div>
                      <h3 className="gr-h3">{ed.name} {ed.active ? <Tag tone="green">active</Tag> : <Tag>inactive</Tag>}</h3>
                      <p className="gr-muted">
                        {ed.startDate}{ed.endDate ? " – " + ed.endDate : ""}{ed.location && " · " + ed.location}
                        {" · "}{edDeals.length} sponsor(s) · {eur(tot)}
                      </p>
                    </div>
                    <div className="gr-detail-btns">
                      {admin && <><button className="gr-mini" onClick={() => setModal({ type: "edition", payload: ed })}>Edit</button>
                      <button className="gr-mini" onClick={() => toggleEdition(ed.id)}>{ed.active ? "Deactivate" : "Activate"}</button>
                      <button className="gr-mini gr-danger" onClick={() => deleteEdition(ed.id)}>Delete</button></>}
                    </div>
                  </div>
                  <div className="gr-formulas">
                    <div className="gr-formulahead">
                      <span className="gr-label">Formulas</span>
                      {admin && <button className="gr-mini" onClick={() => setModal({ type: "formula", payload: { editionId: ed.id } })}>+ Formula</button>}
                    </div>
                    {(ed.formulas || []).length === 0 ? (
                      <p className="gr-muted" style={{ margin: "4px 0 0" }}>No formulas yet for this edition.</p>
                    ) : (
                      <div className="gr-tablewrap">
                        <table className="gr-table gr-compact gr-clickable">
                          <thead>
                            <tr><th>Name</th><th className="gr-r">Cost</th><th className="gr-r">VIP fr/sa/guest</th><th className="gr-r">Drinks</th><th className="gr-r">Food&drink</th><th>Folder</th><th>Website</th><th>Poster</th><th>LED</th><th></th></tr>
                          </thead>
                          <tbody>
                            {(ed.formulas || []).map((f) => (
                              <tr key={f.name} title="Click to view or edit this formula"
                                onClick={() => admin && setModal({ type: "formula", payload: { editionId: ed.id, formula: f } })}>
                                <td><strong>{f.name}</strong></td>
                                <td className="gr-r">{eur(f.cost)}</td>
                                <td className="gr-r">{f.vipFriday || 0} / {f.vipSaturday || 0} / {f.vipGuests || 0}</td>
                                <td className="gr-r">{f.drinkTickets || 0}</td>
                                <td className="gr-r">{Number(f.foodDrinkValue) > 0 ? eur(f.foodDrinkValue) : "—"}</td>
                                <td>{normFolder(f.folderMention) !== "none" ? FOLDER_OPTS[normFolder(f.folderMention)] : "—"}</td>
                                <td>{f.websiteMention !== "none" ? WEBSITE_OPTS[f.websiteMention] : "—"}</td>
                                <td>{f.posterMention && f.posterMention !== "none" ? POSTER_OPTS[f.posterMention] : "—"}</td>
                                <td>{normLed(f.ledboarding).length > 0 ? ledLabel(f.ledboarding) : "—"}</td>
                                <td className="gr-rowbtns">
                                  {admin && <button className="gr-mini gr-danger" title="Delete formula"
                                    onClick={(e) => { e.stopPropagation(); deleteFormula(ed.id, f.name); }}>✕</button>}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </section>
        )}

        {/* ---------- VOUCHERS ---------- */}
        {tab === "vouchers" && (() => {
          const ved = editions.find((e) => e.id === (voEdition || overviewEdition?.id));
          const all = ved ? vouchers.filter((v) => v.editionId === ved.id) : [];
          const shown = all.filter((v) =>
            (voSponsor ? v.sponsorId === voSponsor : true) &&
            (voStatus ? v.status === voStatus : true));
          const counts = Object.keys(VOUCHER_STATUS).reduce((a, k) => ({ ...a, [k]: all.filter((v) => v.status === k).length }), {});
          const selectable = shown.filter((v) => v.status !== "cancelled");
          const cfg = data.settings?.tickoweb || defaultTickoweb;

          return (
            <section>
              <div className="gr-toolbar">
                <h2 className="gr-h2" style={{ margin: 0 }}>Vouchers &amp; tickets</h2>
                <div className="gr-detail-btns">
                  {admin && <button className="gr-mini" onClick={() => setModal({ type: "tickoweb" })}>Tickoweb settings</button>}
                  {ved && <button className="gr-btn" onClick={() => generateVouchers(ved.id)}>Generate from agreements</button>}
                </div>
              </div>

              <div className="gr-toolbar">
                <select className="gr-search" style={{ maxWidth: 220 }} value={voEdition || overviewEdition?.id || ""}
                  onChange={(e) => { setVoEdition(e.target.value); setVoSel([]); }}>
                  {sortedEditions.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
                </select>
                <select className="gr-search" style={{ maxWidth: 220 }} value={voSponsor} onChange={(e) => setVoSponsor(e.target.value)}>
                  <option value="">All sponsors</option>
                  {[...new Set(all.map((v) => v.sponsorId))].map((id) => {
                    const sp = sponsors.find((x) => x.id === id);
                    return <option key={id} value={id}>{sp ? sp.companyName : "?"}</option>;
                  })}
                </select>
                <select className="gr-search" style={{ maxWidth: 200 }} value={voStatus} onChange={(e) => setVoStatus(e.target.value)}>
                  <option value="">All statuses</option>
                  {Object.entries(VOUCHER_STATUS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
                </select>
              </div>

              {cfg.mode !== "live" && (
                <p className="gr-blockbanner" style={{ background: "#FBEBDD", color: "var(--orange-deep)" }}>
                  Manual mode — nothing is sent to Tickoweb automatically. Create the voucher there and paste the code back here.
                </p>
              )}

              <div className="gr-statrow">
                {Object.entries(VOUCHER_STATUS).map(([k, v]) => (
                  <div className="gr-stat" key={k}><span>{counts[k] || 0}</span>{v.label.toLowerCase()}</div>
                ))}
              </div>

              {shown.length === 0 ? (
                <p className="gr-empty">
                  {all.length === 0
                    ? "No vouchers yet for this edition — use \"Generate from agreements\"."
                    : "No vouchers match these filters."}
                </p>
              ) : (
                <>
                  <div className="gr-toolbar">
                    <div className="gr-detail-btns">
                      <button className="gr-mini" onClick={() => setVoSel(selectable.map((v) => v.id))}>Select all shown</button>
                      <button className="gr-mini" onClick={() => setVoSel([])}>Clear</button>
                    </div>
                    <div className="gr-detail-btns">
                      <button className="gr-btn" disabled={voSel.length === 0 || voBusy}
                        onClick={() => runVoucherAction("createSend", voSel)}>
                        {voBusy ? "Working…" : `Create & send (${voSel.length})`}
                      </button>
                      <button className="gr-mini" disabled={voSel.length === 0 || voBusy}
                        onClick={() => runVoucherAction("resend", voSel)}>Resend</button>
                      <button className="gr-mini gr-danger" disabled={voSel.length === 0 || voBusy}
                        onClick={() => runVoucherAction("cancel", voSel)}>Cancel</button>
                    </div>
                  </div>
                  <div className="gr-tablewrap">
                    <table className="gr-table">
                      <thead>
                        <tr>
                          <th></th><th>Sponsor</th><th>Type</th><th className="gr-r">Value</th>
                          <th>Status</th><th>Voucher code</th><th>Assigned to</th><th></th>
                        </tr>
                      </thead>
                      <tbody>
                        {shown.map((v) => {
                          const sp = sponsors.find((x) => x.id === v.sponsorId);
                          const st = VOUCHER_STATUS[v.status] || VOUCHER_STATUS.pending;
                          return (
                            <tr key={v.id} className={v.status === "cancelled" ? "gr-cancelled" : undefined}>
                              <td>
                                <input type="checkbox" disabled={v.status === "cancelled"}
                                  checked={voSel.includes(v.id)}
                                  onChange={(e) => setVoSel(e.target.checked
                                    ? [...voSel, v.id]
                                    : voSel.filter((x) => x !== v.id))} />
                              </td>
                              <td>{sp ? sp.companyName : "?"}</td>
                              <td>{VOUCHER_TYPES[v.type]?.label || v.type}</td>
                              <td className="gr-r">{v.value > 0 ? eur(v.value) : "—"}</td>
                              <td><Tag tone={st.tone}>{st.label}</Tag>
                                {v.error && <div className="gr-muted" style={{ color: "var(--red)", fontSize: 11 }}>{v.error}</div>}</td>
                              <td>
                                <input className="gr-inline-input" placeholder="code from Tickoweb"
                                  value={v.code || ""}
                                  onChange={(e) => updateVoucher(v.id, { code: e.target.value })} />
                              </td>
                              <td>{v.recipientName || v.recipientEmail
                                ? <>{v.recipientName}<div className="gr-muted" style={{ fontSize: 11 }}>{v.recipientEmail}</div></>
                                : <span className="gr-muted">sponsor</span>}</td>
                              <td className="gr-rowbtns">
                                {v.url && <a className="gr-mini gr-btn-link" href={v.url} target="_blank" rel="noreferrer">View</a>}
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </>
              )}
            </section>
          );
        })()}

        {/* ---------- TEAM ---------- */}
        {tab === "team" && admin && (
          <section>
            <div className="gr-toolbar">
              <h2 className="gr-h2" style={{ margin: 0 }}>Team accounts</h2>
              <button className="gr-btn" onClick={() => setModal({ type: "user" })}>+ New account</button>
            </div>
            {users.length === 0 ? (
              <p className="gr-empty">
                No accounts yet. Create the first admin account — after that, everyone logs in with their email address.
              </p>
            ) : (
              <div className="gr-tablewrap">
                <table className="gr-table gr-clickable">
                  <thead><tr><th>Name</th><th>Email (login)</th><th>Role</th><th></th></tr></thead>
                  <tbody>
                    {users.map((u) => (
                      <tr key={u.id} title="Click to edit this account"
                        onClick={() => setModal({ type: "user", payload: u })}>
                        <td><strong>{userName(u)}</strong>{u.id === userId && <span className="gr-muted"> · you</span>}</td>
                        <td>{u.email
                          ? u.email
                          : <span style={{ color: "var(--red)" }}>⚠ no email — can't log in</span>}</td>
                        <td>{isAdmin(u) ? <Tag tone="green">admin</Tag> : <Tag>user</Tag>}</td>
                        <td className="gr-rowbtns" onClick={(e) => e.stopPropagation()}>
                          <CopyUserInvite user={u} />
                          <button className="gr-mini gr-danger" onClick={() => deleteUser(u.id)}>✕</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            <p className="gr-muted" style={{ marginTop: 12 }}>
              <strong>Admin</strong> — everything: editions, formulas, invoicing and team accounts.<br />
              <strong>User</strong> — can view and update all sponsors and their agreements.
            </p>
            <div className="gr-portalbox" style={{ marginTop: 14 }}>
              Everyone logs in with their email address and the shared password
              <strong className="gr-code" style={{ marginLeft: 6 }}>{SHARED_PASSWORD}</strong>
              <p className="gr-muted" style={{ margin: "6px 0 0" }}>
                Temporary arrangement — personal passwords come with the move to a real backend.
              </p>
            </div>
          </section>
        )}

        {/* ---------- INVOICING ---------- */}
        {tab === "invoicing" && admin && (
          <section>
            <div className="gr-toolbar">
              <h2 className="gr-h2" style={{ margin: 0 }}>Invoicing (BillToBox — manual)</h2>
              <select value={invEdition || overviewEdition?.id || ""} onChange={(e) => setInvEdition(e.target.value)} className="gr-search" style={{ maxWidth: 260 }}>
                {sortedEditions.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
              </select>
            </div>
            {!invEd ? <p className="gr-empty">Create an edition first.</p> : invDeals.length === 0 ? (
              <p className="gr-empty">No agreements for {invEd.name} yet.</p>
            ) : (() => {
              const billable = invDeals.filter(needsInvoice);
              const inKind = invDeals.filter((d) => !needsInvoice(d));
              const blockedCount = billable.filter((d) => refMissing(d, sponsors.find((x) => x.id === d.sponsorId))).length;
              return (
                <>
                  {blockedCount > 0 && (
                    <p className="gr-blockbanner">
                      {blockedCount} agreement{blockedCount > 1 ? "s" : ""} can't be invoiced yet — a required reference is still missing.
                    </p>
                  )}
                  {billable.length > 0 && (
                    <div className="gr-tablewrap">
                      <table className="gr-table">
                        <thead>
                          <tr><th>Sponsor</th><th>VAT</th><th className="gr-r">To invoice</th><th>Reference</th><th>Invoice created</th><th>Invoice number</th></tr>
                        </thead>
                        <tbody>
                          {billable.map((d) => {
                            const s = sponsors.find((x) => x.id === d.sponsorId);
                            const blocked = refMissing(d, s);
                            return (
                              <tr key={d.id} className={blocked ? "gr-blocked" : undefined}>
                                <td><strong>{s ? s.companyName : "?"}</strong>
                                  {d.settlement === "mixed" && <> <Tag tone="amber">partly in kind</Tag></>}</td>
                                <td>{s?.vatNumber || "—"}</td>
                                <td className="gr-r">{eur(invoiceAmount(d))}
                                  {d.settlement === "mixed" && <div className="gr-muted" style={{ fontSize: 11 }}>of {eur(d.cost)} total</div>}</td>
                                <td>
                                  {refRequiredFor(d, s) ? (
                                    <>
                                      <input className="gr-inline-input" placeholder="required reference"
                                        value={d.invoiceReference || ""}
                                        style={blocked ? { borderColor: "var(--red)" } : undefined}
                                        onChange={(e) => setInvoice(d.id, { invoiceReference: e.target.value })} />
                                      {blocked && <div className="gr-muted" style={{ color: "var(--red)", fontSize: 11 }}>required before invoicing</div>}
                                    </>
                                  ) : <span className="gr-muted">—</span>}
                                </td>
                                <td>
                                  <input type="checkbox" checked={!!d.invoiceCreated} disabled={blocked}
                                    title={blocked ? "Fill in the required reference first" : undefined}
                                    onChange={(e) => setInvoice(d.id, { invoiceCreated: e.target.checked })} />
                                </td>
                                <td>
                                  <input className="gr-inline-input" placeholder="e.g. 2026-014" value={d.invoiceNumber || ""}
                                    onChange={(e) => setInvoice(d.id, { invoiceNumber: e.target.value })} />
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    </div>
                  )}
                  {inKind.length > 0 && (
                    <>
                      <h4 className="gr-subhead">Not invoiced — settled in kind</h4>
                      <div className="gr-tablewrap">
                        <table className="gr-table gr-compact">
                          <thead><tr><th>Sponsor</th><th className="gr-r">Value</th><th>Provides</th></tr></thead>
                          <tbody>
                            {inKind.map((d) => {
                              const s = sponsors.find((x) => x.id === d.sponsorId);
                              return (
                                <tr key={d.id}>
                                  <td><strong>{s ? s.companyName : "?"}</strong></td>
                                  <td className="gr-r">{eur(d.cost)}</td>
                                  <td>{d.inKindDescription || <span className="gr-muted">—</span>}</td>
                                </tr>
                              );
                            })}
                          </tbody>
                        </table>
                      </div>
                    </>
                  )}
                </>
              );
            })()}
          </section>
        )}
      </main>

      {/* ---------- modals ---------- */}
      {modal?.type === "sponsor" && (
        <Modal title={modal.payload ? "Edit sponsor" : "New sponsor"} onClose={() => setModal(null)}>
          <SponsorForm initial={modal.payload} teamMembers={users} onSave={saveSponsor} onCancel={() => setModal(null)} />
        </Modal>
      )}
      {modal?.type === "tickoweb" && (
        <Modal title="Tickoweb integration" onClose={() => setModal(null)} wide>
          <TickowebSettings
            value={data.settings?.tickoweb || defaultTickoweb}
            onSave={(cfg) => {
              persist({ ...data, settings: { ...(data.settings || {}), tickoweb: cfg } });
              setModal(null);
            }}
            onCancel={() => setModal(null)} />
        </Modal>
      )}
      {modal?.type === "user" && (
        <Modal title={modal.payload ? "Edit account" : "New team account"} onClose={() => setModal(null)}>
          <UserForm
            initial={modal.payload}
            existing={users}
            isOnlyAdmin={!!modal.payload && isAdmin(modal.payload) && users.filter(isAdmin).length <= 1}
            onSave={saveUser}
            onCancel={() => setModal(null)} />
        </Modal>
      )}
      {modal?.type === "import" && (
        <ImportModal sponsors={sponsors} onImport={importSponsors} onClose={() => setModal(null)} />
      )}
      {modal?.type === "edition" && (
        <Modal title={modal.payload ? "Edit edition" : "New edition"} onClose={() => setModal(null)}>
          <EditionForm initial={modal.payload} onSave={saveEdition} onCancel={() => setModal(null)} />
        </Modal>
      )}
      {modal?.type === "formula" && (
        <Modal title={modal.payload.formula ? "Edit formula" : "New formula"} onClose={() => setModal(null)} wide>
          <FormulaForm
            initial={modal.payload.formula}
            onSave={(f) => saveFormula(modal.payload.editionId, f, modal.payload.formula?.name)}
            onCancel={() => setModal(null)} />
        </Modal>
      )}
      {modal?.type === "deal" && (
        <Modal title={modal.payload?.id ? "Edit agreement" : "New agreement"} onClose={() => setModal(null)} wide>
          <DealForm initial={modal.payload} sponsors={sponsors} editions={editions} teamMembers={users}
            onSave={saveDeal} onCancel={() => setModal(null)} onAddSponsor={addSponsorInline} />
        </Modal>
      )}
      {modal?.type === "email" && (() => {
        const d = deals.find((x) => x.id === modal.payload.id) || modal.payload;
        const s = sponsors.find((x) => x.id === d.sponsorId);
        const e = editions.find((x) => x.id === d.editionId);
        if (!s || !e) return null;
        return <EmailModal deal={d} sponsor={s} edition={e}
          onClose={() => setModal(null)} onMarkSent={() => markEmailSent(d.id)} />;
      })()}
    </div>
  );
}

/* ============================================================
   Styles — Grensrock house style: black chrome, the plectrum
   mark, thin multicolour pick outlines and the five brand
   colours (blue, green, yellow, orange, pink) as accents.
   ============================================================ */

const CSS = `
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

.gr-root { --stage:#0A0A0A; --paper:#FCFBF8; --ink:#1C1A1C; --line:#E4E1DA;
  --pink:#C9518D; --pink-deep:#A0356C; --blue:#4A90C4; --blue-deep:#2F6E9C;
  --orange:#DE8140; --orange-deep:#AD5A1D; --yellow:#C9C463;
  --green:#2E7D4F; --red:#B3362B; --mut:#6E6A73;
  --rainbow:linear-gradient(90deg,#4A90C4,#4FA05F,#C9C463,#DE8140,#C9518D);
  font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper);
  min-height:100vh; }
.gr-root * { box-sizing:border-box; }

.gr-header { background:var(--stage); color:#fff; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.gr-brand { display:flex; align-items:center; gap:14px; }
.gr-brandsub { display:block; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#B9B4C0; }
.gr-nav { display:flex; gap:4px; flex-wrap:wrap; align-self:flex-end; }
.gr-nav button { background:none; border:none; color:#CFCAD6; font:600 14px 'IBM Plex Sans',sans-serif;
  padding:9px 14px; cursor:pointer; border-radius:6px 6px 0 0; }
.gr-nav button:hover { color:#fff; }
.gr-nav button.on { background:var(--paper); color:var(--ink); }
.gr-nav button:focus-visible, .gr-root button:focus-visible, .gr-root a:focus-visible,
.gr-root input:focus-visible, .gr-root select:focus-visible, .gr-root textarea:focus-visible
  { outline:2px solid var(--blue-deep); outline-offset:1px; }

.gr-borderline { height:4px; background:var(--rainbow); }

.gr-main { max-width:1080px; margin:0 auto; padding:26px 28px 60px; }
.gr-h2 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:24px; margin:0 0 4px; }
.gr-h3 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; margin:0; }
.gr-subhead { font:600 13px 'IBM Plex Sans',sans-serif; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--mut); border-top:1px dashed var(--line); padding-top:14px; margin:16px 0 6px; }
.gr-muted { color:var(--mut); font-size:13.5px; margin:2px 0; }
.gr-loading { padding:40px; color:var(--mut); }
.gr-warn { background:#FBEAE7; color:var(--red); padding:8px 28px; font-size:13px; }

.gr-onboard { max-width:560px; }
.gr-onboard ol { padding-left:20px; line-height:1.9; }

.gr-statrow { display:flex; gap:14px; flex-wrap:wrap; margin:18px 0; }
.gr-stat { border:1px solid var(--line); border-left:4px solid var(--blue); background:#fff;
  border-radius:8px; padding:12px 18px 10px; font-size:12px; color:var(--mut); min-width:140px; }
.gr-stat:nth-child(2) { border-left-color:var(--pink); }
.gr-stat:nth-child(3) { border-left-color:var(--orange); }
.gr-stat:nth-child(4) { border-left-color:var(--yellow); }
.gr-stat span { display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:var(--ink); }

.gr-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; }
.gr-search { flex:1; min-width:220px; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
  font:14px 'IBM Plex Sans',sans-serif; background:#fff; }

.gr-btn { background:var(--stage); color:#fff; border:none; border-radius:8px; padding:10px 18px;
  font:600 14px 'IBM Plex Sans',sans-serif; cursor:pointer; }
.gr-btn:hover { background:#2A2731; }
.gr-btn:disabled { opacity:.4; cursor:not-allowed; }
.gr-btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:10px 16px; font:600 14px 'IBM Plex Sans',sans-serif; cursor:pointer; text-decoration:none; display:inline-block; }
.gr-btn-ghost:hover { border-color:var(--ink); }
.gr-mini { background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 10px;
  font:600 12px 'IBM Plex Sans',sans-serif; cursor:pointer; }
.gr-mini:hover { border-color:var(--ink); }
.gr-danger { color:var(--red); }
.gr-back { background:none; border:none; color:var(--mut); font:600 13px 'IBM Plex Sans',sans-serif;
  cursor:pointer; padding:0; margin-bottom:12px; }
.gr-back:hover { color:var(--ink); }

.gr-tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.gr-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.gr-table th { text-align:left; font:600 11px 'IBM Plex Sans',sans-serif; text-transform:uppercase;
  letter-spacing:1px; color:var(--mut); padding:10px 12px; border-bottom:2px solid var(--line); white-space:nowrap; }
.gr-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.gr-table tr:last-child td { border-bottom:none; }
.gr-table .gr-r { text-align:right; }
.gr-clickable tbody tr { cursor:pointer; }
.gr-clickable tbody tr:hover { background:#FBF3F7; }
.gr-clickable input, .gr-clickable button { cursor:auto; }
.gr-compact th, .gr-compact td { padding:7px 10px; }
.gr-rowbtns { white-space:nowrap; } .gr-rowbtns .gr-mini { margin-left:4px; }
.gr-inline-input { border:1px solid var(--line); border-radius:6px; padding:5px 8px; font:13px 'IBM Plex Sans',sans-serif; width:130px; }

.gr-tag { display:inline-block; font:600 11px 'IBM Plex Sans',sans-serif; padding:2px 8px; border-radius:20px; }
.gr-tag-grey { background:#EFEDE8; color:var(--mut); }
.gr-tag-green { background:#E2F1E7; color:var(--green); }
.gr-tag-amber { background:#FBEBDD; color:var(--orange-deep); }

.gr-card { border:1px solid var(--line); border-radius:10px; background:#fff; padding:16px 18px; margin-bottom:16px; }
.gr-cardhead { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gr-formulas { margin-top:12px; border-top:1px dashed var(--line); padding-top:10px; }
.gr-formulahead { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }

.gr-detail-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.gr-detail-btns { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.gr-empty { color:var(--mut); border:1px dashed var(--line); border-radius:8px; padding:22px; text-align:center; }

.gr-field { display:block; margin-bottom:12px; }
.gr-label { display:block; font:600 11px 'IBM Plex Sans',sans-serif; text-transform:uppercase;
  letter-spacing:1px; color:var(--mut); margin-bottom:4px; }
.gr-hint { display:block; font-size:12px; color:var(--pink-deep); margin-top:3px; }
.gr-field input, .gr-field select, .gr-field textarea { width:100%; padding:9px 12px;
  border:1px solid var(--line); border-radius:8px; font:14px 'IBM Plex Sans',sans-serif; background:#fff; }
.gr-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.gr-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; }
@media (max-width:640px){ .gr-grid2,.gr-grid3 { grid-template-columns:1fr; } .gr-main{padding:20px 16px 50px;} .gr-header{padding:16px;} }

.gr-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }

.gr-overlay { position:fixed; inset:0; background:rgba(23,21,27,.55); display:flex;
  align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:50; overflow-y:auto; }
.gr-modal { background:var(--paper); border-radius:12px; width:100%; max-width:520px;
  border-top:5px solid transparent; border-image:var(--rainbow) 1; overflow:hidden; }
.gr-modal-wide { max-width:680px; }
.gr-modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 0; }
.gr-modal-head h3 { font-family:'Montserrat',sans-serif; font-weight:800; margin:0; font-size:18px; }
.gr-x { background:none; border:none; font-size:15px; cursor:pointer; color:var(--mut); }
.gr-modal-body { padding:14px 20px 20px; }

.gr-whoami { display:flex; align-items:center; gap:6px; color:#CFCAD6; font-size:13px;
  padding:9px 10px 9px 16px; border-left:1px solid #2A2731; margin-left:8px; }
.gr-setupbar { background:#FBEBDD; color:var(--orange-deep); padding:9px 28px; font-size:13.5px;
  font-weight:600; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.gr-linkbtn { background:none; border:none; color:var(--mut); font:600 13px 'IBM Plex Sans',sans-serif;
  cursor:pointer; padding:0; text-decoration:underline; align-self:flex-start; }
.gr-linkbtn:hover { color:var(--ink); }

.gr-contactcard { border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px;
  background:#fff; padding:12px 14px 2px; margin-bottom:10px; }
.gr-contacthead { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.gr-contactline { display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:8px 0; border-bottom:1px dashed var(--line); }
.gr-contactline:last-child { border-bottom:none; }
.gr-commtags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.gr-check-sm { padding:5px 10px; font-size:12.5px; }

.gr-subnav { display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid var(--line); margin:18px 0 18px; }
.gr-subnav button { background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:9px 14px; font:600 13.5px 'IBM Plex Sans',sans-serif; color:var(--mut); cursor:pointer; }
.gr-subnav button:hover { color:var(--ink); }
.gr-subnav button.on { color:var(--ink); border-bottom-color:var(--pink); }

.gr-dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:13.5px; }
.gr-dl dt { color:var(--mut); font-weight:600; }
.gr-dl dd { margin:0; }

.gr-cancelled { opacity:.55; text-decoration:line-through; }
.gr-cancelled input, .gr-cancelled a { text-decoration:none; }

.gr-blocked { background:#FEF6F5; }
.gr-blockbanner { background:#FBEAE7; color:var(--red); border-radius:8px; padding:10px 14px;
  font-size:13.5px; font-weight:600; margin:0 0 14px; }

.gr-settle { border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; background:#F8FBFD; }
.gr-settle .gr-field:last-of-type { margin-bottom:6px; }

.gr-vouchers { border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; background:#FFFBFD; }
.gr-voucherquick { display:flex; gap:6px; flex-wrap:wrap; }
.gr-voucherrow { display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.gr-voucherrow input { width:90px; padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  font:14px 'IBM Plex Sans',sans-serif; background:#fff; }
.gr-voucherline { min-width:86px; text-align:right; font-weight:600; font-size:13.5px; }
.gr-voucherstatus { font-size:13px; color:var(--pink-deep); margin:6px 0 0; }
.gr-voucherstatus.ok { color:var(--green); }

.gr-landing { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; background:#000; text-align:center; overflow:hidden; }
.gr-picklines { position:absolute; inset:0; width:100%; height:100%; opacity:.85; pointer-events:none; }
.gr-landing > * { position:relative; z-index:1; }
.gr-landcards { display:flex; gap:18px; margin-top:34px; flex-wrap:wrap; justify-content:center; }
.gr-landcard { background:var(--paper); border-radius:14px; border-top:5px solid transparent;
  border-image:var(--rainbow) 1;
  padding:22px 24px; width:290px; text-align:left; display:flex; flex-direction:column; gap:10px; }
.gr-landcard input { padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font:14px 'IBM Plex Sans',sans-serif; }
.gr-landing > p { color:#F3B7B0; }

.gr-logoblock { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.gr-logoframe { width:150px; height:100px; border:1px solid var(--line); border-radius:10px;
  background:repeating-conic-gradient(#F1EFE9 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gr-logoframe img { max-width:100%; max-height:100%; object-fit:contain; }
.gr-logoframe .gr-muted { background:#fff; padding:2px 6px; border-radius:4px; font-size:12px; }
.gr-logobtns { display:flex; flex-direction:column; gap:8px; align-items:flex-start; max-width:220px; }
.gr-filebtn { display:inline-block; }

.gr-portalbox { border:1px solid var(--line); border-radius:10px; background:#fff; padding:14px 16px; font-size:13.5px; }
.gr-code { font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:1px; color:var(--pink-deep);
  background:#FAE7F0; padding:2px 8px; border-radius:6px; }
.gr-exit { align-self:center; }

.gr-file { display:block; width:100%; padding:22px; border:2px dashed var(--line); border-radius:10px;
  background:#fff; font:14px 'IBM Plex Sans',sans-serif; cursor:pointer; margin:8px 0; }
.gr-file:hover { border-color:var(--pink-deep); }

.gr-checkrow { display:flex; gap:8px; flex-wrap:wrap; }
.gr-check { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px;
  background:#fff; padding:8px 14px; font:500 13.5px 'IBM Plex Sans',sans-serif; cursor:pointer; }
.gr-check:hover { border-color:var(--ink); }
.gr-check.on { border-color:var(--pink-deep); background:#FAE7F0; }
.gr-check input { accent-color:var(--pink-deep); }

.gr-picker { position:relative; }
.gr-picker input { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  font:14px 'IBM Plex Sans',sans-serif; background:#fff; }
.gr-picker-list { border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:6px;
  max-height:260px; overflow-y:auto; box-shadow:0 6px 18px rgba(23,21,27,.08); }
.gr-picker-item { display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:1px solid var(--line); padding:9px 12px; cursor:pointer; font:13.5px 'IBM Plex Sans',sans-serif; }
.gr-picker-item:hover { background:#FBF3F7; }
.gr-picker-item strong { display:block; }
.gr-picker-item .gr-muted { font-size:12px; }
.gr-picker-item:last-child { border-bottom:none; }
.gr-picker-new { color:var(--pink-deep); font-weight:600; }
.gr-picker-none { padding:10px 12px; color:var(--mut); font-size:13px; border-bottom:1px solid var(--line); }
.gr-picked { display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:8px;
  background:#fff; padding:9px 12px; font-size:14px; }

.gr-emailpreview { border:1px solid var(--line); border-radius:8px; background:#fff; margin-top:8px; }
.gr-email-subject { font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); }
.gr-emailpreview pre { margin:0; padding:14px; font:13px/1.55 'IBM Plex Sans',sans-serif;
  white-space:pre-wrap; max-height:340px; overflow-y:auto; }

@media (prefers-reduced-motion: no-preference) {
  .gr-modal { animation:grpop .18s ease-out; }
  @keyframes grpop { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
}
`;