// Bellia — Paramètres multi-restaurants
// 3 variations divergentes : A cartes visuelles · B tableau dense pro · C split workspace

const GROUP = {
  name: 'Cantine Corner',
  legal: 'SARL Cantine Corner',
  siren: '892 451 770',
  owner: 'Yannis Bellia',
  since: '2021',
};

const RESTAURANTS_FULL = [
  {
    id: 'rep', short: 'République', city: 'Paris 11e', addr: '12 rue Oberkampf',
    initials: 'CR', color: '#E89B6C', cover: 'linear-gradient(135deg,#F7D7BD 0%,#E89B6C 100%)',
    status: 'actif', covers: 78, openSince: 'mars 2021',
    director: { name: 'Marc Delaunay', initials: 'MD', email: 'marc.d@cantinecorner.fr' },
    ca: 105674, target: 110000, foodcost: 32, foodcostTarget: 28, mass: 35, massTarget: 32,
    margin: 68, trend: 8.1, tickets: 2980,
    siret: '892 451 770 00021', tva: 'FR 32 892 451 770', regime: 'Normal — TVA mensuelle',
    integrations: { caisse: 'Lightspeed', banque: 'Qonto', livraison: 'Uber Eats + Deliveroo', paie: 'PayFit' },
    intgStatus: { caisse: 'ok', banque: 'ok', livraison: 'ok', paie: 'warn' },
    spark: [82, 88, 95, 91, 102, 98, 110, 115, 108, 122, 130, 125, 138, 142],
  },
  {
    id: 'bat', short: 'Bastille', city: 'Paris 12e', addr: '38 rue de la Roquette',
    initials: 'CB', color: '#C97849', cover: 'linear-gradient(135deg,#FBE9D5 0%,#C97849 100%)',
    status: 'actif', covers: 62, openSince: 'sept. 2022',
    director: { name: 'Aline Lacombe', initials: 'AL', email: 'aline.l@cantinecorner.fr' },
    ca: 84320, target: 88000, foodcost: 29, foodcostTarget: 28, mass: 33, massTarget: 32,
    margin: 71, trend: 4.2, tickets: 2410,
    siret: '892 451 770 00039', tva: 'FR 32 892 451 770', regime: 'Normal — TVA mensuelle',
    integrations: { caisse: 'Lightspeed', banque: 'Qonto', livraison: 'Uber Eats', paie: 'PayFit' },
    intgStatus: { caisse: 'ok', banque: 'ok', livraison: 'ok', paie: 'ok' },
    spark: [70, 72, 78, 75, 82, 86, 88, 84, 90, 92, 96, 98, 102, 105],
  },
  {
    id: 'mtg', short: 'Montrouge', city: 'Hauts-de-Seine', addr: '4 av. de la République',
    initials: 'CM', color: '#D9923B', cover: 'linear-gradient(135deg,#FCEDDC 0%,#D9923B 100%)',
    status: 'attention', covers: 54, openSince: 'janv. 2024',
    director: { name: 'Théo Roux', initials: 'TR', email: 'theo.r@cantinecorner.fr' },
    ca: 62180, target: 72000, foodcost: 35, foodcostTarget: 28, mass: 38, massTarget: 32,
    margin: 64, trend: -2.4, tickets: 1860,
    siret: '892 451 770 00054', tva: 'FR 32 892 451 770', regime: 'Normal — TVA mensuelle',
    integrations: { caisse: 'Tiller', banque: 'Qonto', livraison: '—', paie: 'Silae' },
    intgStatus: { caisse: 'ok', banque: 'ok', livraison: 'off', paie: 'warn' },
    spark: [62, 58, 65, 60, 68, 62, 70, 65, 72, 68, 65, 70, 66, 63],
  },
];

// Group consolidated KPIs
const GROUP_KPIS = (() => {
  const ca = RESTAURANTS_FULL.reduce((a, r) => a + r.ca, 0);
  const target = RESTAURANTS_FULL.reduce((a, r) => a + r.target, 0);
  const tickets = RESTAURANTS_FULL.reduce((a, r) => a + r.tickets, 0);
  const margin = RESTAURANTS_FULL.reduce((a, r) => a + r.margin * r.ca, 0) / ca;
  const foodcost = RESTAURANTS_FULL.reduce((a, r) => a + r.foodcost * r.ca, 0) / ca;
  return { ca, target, tickets, margin, foodcost, count: RESTAURANTS_FULL.length };
})();

const TEAM = [
  { id: 'yb', name: 'Yannis Bellia',  role: 'Propriétaire',     initials: 'YB', c: '#E89B6C', email: 'yannis@cantinecorner.fr', scope: 'Tous les restaurants',  perms: 'Admin global',       last: 'à l\'instant' },
  { id: 'md', name: 'Marc Delaunay',  role: 'Directeur de site', initials: 'MD', c: '#C97849', email: 'marc.d@cantinecorner.fr', scope: 'République',           perms: 'Lecture + édition',  last: 'il y a 12 min' },
  { id: 'al', name: 'Aline Lacombe',  role: 'Directrice de site', initials: 'AL', c: '#D9923B', email: 'aline.l@cantinecorner.fr', scope: 'Bastille',            perms: 'Lecture + édition',  last: 'il y a 1 h' },
  { id: 'tr', name: 'Théo Roux',      role: 'Directeur de site', initials: 'TR', c: '#7FB069', email: 'theo.r@cantinecorner.fr', scope: 'Montrouge',            perms: 'Lecture + édition',  last: 'hier' },
  { id: 'cb', name: 'Cabinet Berthier', role: 'Comptable externe', initials: 'CB', c: '#8A7B69', email: 'compta@berthier.fr',     scope: 'Tous (lecture seule)', perms: 'Lecture',             last: 'lun. 09:00' },
];

const STATUS_MAP = {
  actif:     { c: C.ok, bg: C.okSft, label: 'Actif', dot: C.ok },
  attention: { c: C.warn, bg: C.warnSft, label: 'Attention', dot: C.warn },
  pause:     { c: C.mute, bg: C.cardSoft, label: 'En pause', dot: C.mute2 },
};

const INTG_STATUS = {
  ok:   { c: C.ok, bg: C.okSft, label: 'Connecté', icon: 'checkC' },
  warn: { c: C.warn, bg: C.warnSft, label: 'À vérifier', icon: 'alertT' },
  off:  { c: C.mute, bg: C.cardSoft, label: 'Non connecté', icon: 'x' },
};

// ============================================================
// MAIN SCREEN
// ============================================================
const RestaurantsScreenWrapper = ({ onNav }) => {
  const [variant, setVariant] = React.useState(() => {
    try { return localStorage.getItem('bellia-restos-variant') || 'A'; } catch { return 'A'; }
  });
  const setTweak = (k, v) => {
    if (k === 'variant') {
      setVariant(v);
      try { localStorage.setItem('bellia-restos-variant', v); } catch {}
    }
  };
  return <RestaurantsScreen onNav={onNav} tweaks={{ variant }} setTweak={setTweak} />;
};

const RestaurantsScreen = ({ onNav, tweaks, setTweak }) => {
  const variant = tweaks?.variant || 'A';

  return (
    <PageShell current="restaurants" onNav={onNav}>
      <Header
        title="Paramètres restaurants"
        subtitle={`${GROUP.name} · ${GROUP_KPIS.count} restaurants actifs · SIREN ${GROUP.siren}`}
        right={<>
          <Btn kind="ghost" icon={<Icon name="download" size={14} color={C.ink2} />}>Exporter</Btn>
          <Btn kind="primary" icon={<Icon name="plus" size={14} />}>Ajouter un restaurant</Btn>
        </>}
      />

      {/* Sub-tabs (paramètres groupe) */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22, gap: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'inline-flex', padding: 5, background: C.cardWash, border: `1px solid ${C.line}`, borderRadius: 999, gap: 2 }}>
          {[
            { id: 'restos', l: 'Restaurants', n: 3, active: true },
            { id: 'team',   l: 'Équipe & droits', n: 5 },
            { id: 'group',  l: 'Groupe' },
            { id: 'integ',  l: 'Intégrations' },
            { id: 'bill',   l: 'Facturation' },
          ].map(t => (
            <button key={t.id} style={{
              padding: '8px 16px', borderRadius: 999,
              background: t.active ? C.card : 'transparent',
              color: t.active ? C.ink : C.mute,
              border: t.active ? `1px solid ${C.line}` : '1px solid transparent',
              cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              boxShadow: t.active ? '0 1px 2px rgba(0,0,0,0.04)' : 'none',
            }}>
              {t.l}
              {t.n != null && <span style={{ fontSize: 10, opacity: 0.7, padding: '1px 6px', borderRadius: 999, background: t.active ? C.cardSoft : 'transparent' }}>{t.n}</span>}
            </button>
          ))}
        </div>

        {/* Variation switcher */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11, color: C.mute, fontWeight: 600, letterSpacing: 0.4 }}>VARIATION</span>
          <div style={{ display: 'inline-flex', padding: 4, background: C.card, border: `1px solid ${C.line}`, borderRadius: 999, gap: 2 }}>
            {[
              { id: 'A', l: 'Cartes' },
              { id: 'B', l: 'Tableau' },
              { id: 'C', l: 'Atelier' },
            ].map(v => (
              <button key={v.id} onClick={() => setTweak?.('variant', v.id)} style={{
                padding: '6px 14px', borderRadius: 999,
                background: variant === v.id ? C.orange : 'transparent',
                color: variant === v.id ? '#fff' : C.mute,
                border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 11, fontWeight: 600,
              }}>{v.l}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Hero KPI consolidé groupe — partagé par les 3 variations */}
      <GroupHero />

      {/* Variation body */}
      <div style={{ marginTop: 22 }}>
        {variant === 'A' && <VariantA />}
        {variant === 'B' && <VariantB />}
        {variant === 'C' && <VariantC />}
      </div>

      {/* Section Équipe & droits — toujours visible en bas */}
      <TeamSection />
    </PageShell>
  );
};

// ============================================================
// HERO consolidé
// ============================================================
const GroupHero = () => {
  const k = GROUP_KPIS;
  return (
    <div style={{
      background: `linear-gradient(135deg, ${C.orangeWh} 0%, ${C.cardSoft} 100%)`,
      border: `1px solid ${C.line}`, borderRadius: 24, padding: 24,
      display: 'grid', gridTemplateColumns: 'minmax(0, 1.8fr) repeat(4, minmax(0, 1fr))', gap: 22, alignItems: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', right: -120, top: -160, width: 320, height: 320, borderRadius: 999, background: C.cream, opacity: 0.55 }} />

      <div style={{ position: 'relative', minWidth: 0 }}>
        <Pill kind="accent" style={{ marginBottom: 10 }}>
          <Icon name="store" size={11} color={C.orangeDp} /> Groupe consolidé · mai 2026
        </Pill>
        <div style={{ fontSize: 11, color: C.mute, fontWeight: 700, letterSpacing: 0.6 }}>CA TTC CUMULÉ</div>
        <div style={{ fontSize: 36, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -1, lineHeight: 1.05, marginTop: 4, whiteSpace: 'nowrap' }}>{eur(k.ca)}</div>
        <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
          <Pill kind="ok" size="sm" icon={<Icon name="trendUp" size={10} />}>+5,6 % vs N-1</Pill>
          <span style={{ fontSize: 11, color: C.mute }}>
            Objectif <span style={{ color: C.ink2, fontWeight: 600 }}>{eur(k.target)}</span> ·
            <span style={{ color: C.orangeDp, fontWeight: 600 }}> {pct((k.ca / k.target) * 100, 0)}</span> atteint
          </span>
        </div>
      </div>

      <HeroStat label="Restaurants" value={`${k.count} actifs`} sub="0 en pause" />
      <HeroStat label="Tickets cumulés" value={num(k.tickets)} sub="+6,3 % vs N-1" subKind="ok" />
      <HeroStat label="Marge moyenne" value={pct(k.margin, 1)} sub="cible 70 %" subKind={k.margin >= 70 ? 'ok' : 'warn'} />
      <HeroStat label="Food cost moyen" value={pct(k.foodcost, 1)} sub="cible 28 %" subKind="warn" />
    </div>
  );
};

const HeroStat = ({ label, value, sub, subKind }) => {
  const subColor = subKind === 'ok' ? C.ok : subKind === 'warn' ? C.warn : C.mute;
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.6 }}>{label.toUpperCase()}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color: C.ink, marginTop: 5, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.3, lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 11, color: subColor, fontWeight: 600, marginTop: 4 }}>{sub}</div>
    </div>
  );
};

// ============================================================
// VARIANT A — CARTES VISUELLES + BENCHMARK BAR
// ============================================================
const VariantA = () => (
  <>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: C.ink, letterSpacing: -0.2 }}>Vos restaurants</div>
        <div style={{ fontSize: 11, color: C.mute, marginTop: 3 }}>Cliquez sur une carte pour gérer le détail · les indicateurs sont mis à jour en temps réel</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <Btn kind="ghost" size="sm" icon={<Icon name="filter" size={13} color={C.ink2} />}>Filtres</Btn>
        <Btn kind="soft" size="sm" icon={<Icon name="layers" size={13} color={C.ink2} />}>Comparer</Btn>
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {RESTAURANTS_FULL.map(r => <RestoCard key={r.id} resto={r} />)}
    </div>

    <BenchmarkBar />
  </>
);

const RestoCard = ({ resto }) => {
  const s = STATUS_MAP[resto.status];
  const targetPct = (resto.ca / resto.target) * 100;
  return (
    <div style={{
      background: C.card, border: `1px solid ${C.line}`, borderRadius: 22, overflow: 'hidden',
      transition: 'transform .15s ease, box-shadow .15s ease, border-color .15s ease', cursor: 'pointer',
    }}
    onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 16px 36px -24px rgba(36,27,18,0.3)'; e.currentTarget.style.borderColor = C.orangeSft; }}
    onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = C.line; }}
    >
      {/* cover */}
      <div style={{ height: 92, background: resto.cover, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 14 }}>
        <div style={{ position: 'absolute', right: 14, top: 14 }}>
          <Pill kind={resto.status === 'actif' ? 'ok' : resto.status === 'attention' ? 'warn' : 'neutral'} icon={
            <span style={{ width: 6, height: 6, borderRadius: 999, background: s.dot }} />
          }>{s.label}</Pill>
        </div>
        <div style={{
          width: 50, height: 50, borderRadius: 16, background: C.card, color: resto.color,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18,
          border: `3px solid ${C.card}`, marginBottom: -32,
        }}>{resto.initials}</div>
      </div>

      <div style={{ padding: '40px 18px 18px' }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: C.ink, letterSpacing: -0.3 }}>{resto.short}</div>
        <div style={{ fontSize: 11, color: C.mute, marginTop: 2 }}>{resto.addr} · {resto.city}</div>

        {/* KPI */}
        <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.4 }}>CA MAI</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.4, lineHeight: 1, marginTop: 4 }}>{eur(resto.ca)}</div>
          </div>
          <Pill kind={resto.trend >= 0 ? 'ok' : 'err'} size="sm" icon={<Icon name={resto.trend >= 0 ? 'trendUp' : 'trendDn'} size={10} />}>
            {signedPct(resto.trend)}
          </Pill>
        </div>

        <div style={{ marginTop: 10 }}>
          <Sparkline data={resto.spark} accent={resto.color} height={36} />
        </div>

        <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 10, color: C.mute }}>Objectif {eur(resto.target)}</span>
          <span style={{ fontSize: 10, color: C.orangeDp, fontWeight: 700 }}>{pct(targetPct, 0)}</span>
        </div>

        {/* 3 mini KPI */}
        <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px dashed ${C.line}`, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          <MiniInline label="Marge" value={pct(resto.margin, 0)} kind="ok" />
          <MiniInline label="Food cost" value={pct(resto.foodcost, 0)} kind={resto.foodcost > resto.foodcostTarget ? 'err' : 'ok'} />
          <MiniInline label="Masse sal." value={pct(resto.mass, 0)} kind={resto.mass > resto.massTarget ? 'warn' : 'ok'} />
        </div>

        {/* Directeur */}
        <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
            <Avatar initials={resto.director.initials} size={26} c={resto.color} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 11, color: C.ink2, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{resto.director.name}</div>
              <div style={{ fontSize: 9, color: C.mute }}>Directeur</div>
            </div>
          </div>
          <button style={{
            background: C.cardSoft, border: 'none', borderRadius: 999, padding: '6px 12px', cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 11, fontWeight: 600, color: C.ink2,
            display: 'inline-flex', alignItems: 'center', gap: 3,
          }}>Gérer <Icon name="arrowR" size={11} /></button>
        </div>
      </div>
    </div>
  );
};

const MiniInline = ({ label, value, kind }) => {
  const color = kind === 'ok' ? C.ok : kind === 'warn' ? C.warn : kind === 'err' ? C.err : C.ink;
  return (
    <div>
      <div style={{ fontSize: 9, color: C.mute, fontWeight: 600, letterSpacing: 0.3 }}>{label.toUpperCase()}</div>
      <div style={{ fontSize: 13, fontWeight: 700, color, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
};

// Benchmark
const BenchmarkBar = () => {
  const metrics = [
    { id: 'ca',   label: 'CA TTC',    fmt: v => eur(v),        sort: (a, b) => b - a, key: 'ca',       higherBetter: true  },
    { id: 'mar',  label: 'Marge',     fmt: v => pct(v, 0),     sort: (a, b) => b - a, key: 'margin',   higherBetter: true  },
    { id: 'fc',   label: 'Food cost', fmt: v => pct(v, 0),     sort: (a, b) => a - b, key: 'foodcost', higherBetter: false },
    { id: 'tr',   label: 'Évolution', fmt: v => signedPct(v),  sort: (a, b) => b - a, key: 'trend',    higherBetter: true  },
  ];
  return (
    <div style={{ marginTop: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink }}>Benchmark inter-restaurants</div>
          <div style={{ fontSize: 11, color: C.mute, marginTop: 3 }}>Sur mai 2026 · meilleur = orange foncé</div>
        </div>
        <Btn kind="ghost" size="sm">Exporter le benchmark</Btn>
      </div>

      <Card style={{ padding: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {metrics.map(m => {
            const sorted = [...RESTAURANTS_FULL].sort((a, b) => m.sort(a[m.key], b[m.key]));
            const max = Math.max(...RESTAURANTS_FULL.map(r => Math.abs(r[m.key])));
            return (
              <div key={m.id}>
                <div style={{ fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.5, marginBottom: 12 }}>{m.label.toUpperCase()}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {sorted.map((r, i) => {
                    const val = r[m.key];
                    const w = (Math.abs(val) / max) * 100;
                    const isBest = i === 0;
                    return (
                      <div key={r.id}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                            <Avatar initials={r.initials} size={16} c={r.color} style={{ fontSize: 8 }} />
                            <span style={{ fontSize: 11, color: C.ink2, fontWeight: isBest ? 700 : 500 }}>{r.short}</span>
                          </div>
                          <span style={{ fontSize: 11, color: isBest ? C.orangeDp : C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{m.fmt(val)}</span>
                        </div>
                        <div style={{ height: 5, borderRadius: 999, background: C.lineSoft, overflow: 'hidden' }}>
                          <div style={{ width: `${w}%`, height: '100%', background: isBest ? C.orange : C.orangeSft, borderRadius: 999 }} />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
};

// ============================================================
// VARIANT B — TABLEAU DENSE PRO + LIGNES EXPANDABLES
// ============================================================
const VariantB = () => {
  const [expanded, setExpanded] = React.useState('rep');
  const [selected, setSelected] = React.useState(['rep', 'bat', 'mtg']);
  const toggle = id => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);

  return (
    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '18px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${C.lineSoft}`, background: C.cardWash, gap: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: C.ink, whiteSpace: 'nowrap' }}>Vue tableau · {GROUP_KPIS.count} restos</div>
          {selected.length > 0 && (
            <Pill kind="accent" size="sm">{selected.length} sélectionné{selected.length > 1 ? 's' : ''}</Pill>
          )}
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
          <button aria-label="Colonnes" title="Personnaliser les colonnes" style={{ width: 30, height: 30, borderRadius: 10, background: C.card, border: `1px solid ${C.line}`, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: C.ink2 }}>
            <Icon name="layers" size={13} />
          </button>
          <button aria-label="Filtres" title="Filtres" style={{ width: 30, height: 30, borderRadius: 10, background: C.card, border: `1px solid ${C.line}`, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: C.ink2 }}>
            <Icon name="filter" size={13} />
          </button>
          <Btn kind="primary" size="sm" icon={<Icon name="layers" size={12} />}>Consolider</Btn>
        </div>
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: C.card }}>
            <th style={thStyle(40, 'center')}>
              <input type="checkbox" checked={selected.length === RESTAURANTS_FULL.length} readOnly style={{ accentColor: C.orange }} />
            </th>
            {['Restaurant', 'Statut', 'CA TTC', 'Objectif', 'Marge', 'Food cost', 'Masse sal.', 'Tickets', 'Évolution', 'Directeur', ''].map((h, i) => (
              <th key={h+i} style={thStyle(null, ['CA TTC','Objectif','Marge','Food cost','Masse sal.','Tickets','Évolution'].includes(h) ? 'right' : 'left')}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {RESTAURANTS_FULL.map((r, i) => {
            const s = STATUS_MAP[r.status];
            const isExp = expanded === r.id;
            const targetPct = (r.ca / r.target) * 100;
            return (
              <React.Fragment key={r.id}>
                <tr style={{
                  borderBottom: isExp ? 'none' : `1px solid ${C.lineSoft}`,
                  background: isExp ? C.cardWash : C.card,
                  transition: 'background .12s ease',
                }}>
                  <td style={tdStyle('center')}>
                    <input type="checkbox" checked={selected.includes(r.id)} onChange={() => toggle(r.id)} style={{ accentColor: C.orange, cursor: 'pointer' }} />
                  </td>
                  <td style={tdStyle('left')}>
                    <button onClick={() => setExpanded(isExp ? null : r.id)} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}>
                      <Avatar initials={r.initials} size={32} c={r.color} />
                      <div>
                        <div style={{ fontSize: 13, color: C.ink, fontWeight: 700, letterSpacing: -0.1 }}>{r.short}</div>
                        <div style={{ fontSize: 10, color: C.mute, marginTop: 2 }}>{r.city} · {r.covers} couverts</div>
                      </div>
                      <Icon name={isExp ? 'chevDown' : 'chevRight'} size={13} color={C.mute} style={{ marginLeft: 4 }} />
                    </button>
                  </td>
                  <td style={tdStyle('left')}>
                    <Pill kind={r.status === 'actif' ? 'ok' : r.status === 'attention' ? 'warn' : 'neutral'} size="sm" icon={
                      <span style={{ width: 6, height: 6, borderRadius: 999, background: s.dot }} />
                    }>{s.label}</Pill>
                  </td>
                  <td style={tdStyle('right', true)}>{eur(r.ca)}</td>
                  <td style={tdStyle('right')}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                      <span style={{ fontSize: 11, color: C.mute, fontVariantNumeric: 'tabular-nums' }}>{eur(r.target)}</span>
                      <div style={{ width: 70, height: 4, borderRadius: 999, background: C.lineSoft, overflow: 'hidden' }}>
                        <div style={{ width: `${Math.min(100, targetPct)}%`, height: '100%', background: targetPct >= 90 ? C.ok : C.orange }} />
                      </div>
                    </div>
                  </td>
                  <td style={tdStyle('right', true, C.ok)}>{pct(r.margin, 0)}</td>
                  <td style={tdStyle('right', true, r.foodcost > r.foodcostTarget ? C.err : C.ok)}>{pct(r.foodcost, 0)}</td>
                  <td style={tdStyle('right', true, r.mass > r.massTarget ? C.warn : C.ok)}>{pct(r.mass, 0)}</td>
                  <td style={tdStyle('right', true)}>{num(r.tickets)}</td>
                  <td style={tdStyle('right')}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: r.trend >= 0 ? C.ok : C.err, fontSize: 12, fontWeight: 700 }}>
                      <Icon name={r.trend >= 0 ? 'trendUp' : 'trendDn'} size={11} /> {signedPct(r.trend)}
                    </span>
                  </td>
                  <td style={tdStyle('left')}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Avatar initials={r.director.initials} size={24} c={r.color} style={{ fontSize: 10 }} />
                      <span style={{ fontSize: 11, color: C.ink2 }}>{r.director.name.split(' ')[0]}</span>
                    </div>
                  </td>
                  <td style={tdStyle('center')}>
                    <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: C.mute, display: 'flex', padding: 4 }}>
                      <Icon name="more" size={14} />
                    </button>
                  </td>
                </tr>

                {isExp && (
                  <tr style={{ background: C.cardWash, borderBottom: `1px solid ${C.lineSoft}` }}>
                    <td></td>
                    <td colSpan={10} style={{ padding: '4px 22px 20px' }}>
                      <ExpandedDetail resto={r} />
                    </td>
                  </tr>
                )}
              </React.Fragment>
            );
          })}
          {/* footer totals */}
          <tr style={{ background: C.cardWash }}>
            <td></td>
            <td style={{ padding: '14px 16px', fontSize: 11, color: C.mute, fontWeight: 700, letterSpacing: 0.4 }}>TOTAL GROUPE</td>
            <td></td>
            <td style={tdStyle('right', true)}>{eur(GROUP_KPIS.ca)}</td>
            <td style={tdStyle('right')}><span style={{ fontSize: 11, color: C.mute }}>{eur(GROUP_KPIS.target)}</span></td>
            <td style={tdStyle('right', true, C.ok)}>{pct(GROUP_KPIS.margin, 1)}</td>
            <td style={tdStyle('right', true, C.warn)}>{pct(GROUP_KPIS.foodcost, 1)}</td>
            <td style={tdStyle('right', true)}>—</td>
            <td style={tdStyle('right', true)}>{num(GROUP_KPIS.tickets)}</td>
            <td style={tdStyle('right', true, C.ok)}>+5,6 %</td>
            <td colSpan={2}></td>
          </tr>
        </tbody>
      </table>
    </Card>
  );
};

const thStyle = (w, align) => ({
  padding: '14px 16px', textAlign: align || 'left', width: w || 'auto',
  fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
  borderBottom: `1px solid ${C.line}`, whiteSpace: 'nowrap',
});
const tdStyle = (align, num, color) => ({
  padding: '14px 16px', textAlign: align || 'left',
  fontSize: 12.5, color: color || C.ink, fontWeight: num ? 700 : 400,
  fontVariantNumeric: num ? 'tabular-nums' : 'normal',
  verticalAlign: 'middle',
});

const ExpandedDetail = ({ resto }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr', gap: 18, paddingTop: 14, borderTop: `1px dashed ${C.line}` }}>
    <DetailBlock title="Identité légale" icon="shield">
      <DetailRow k="SIRET" v={resto.siret} mono />
      <DetailRow k="N° TVA" v={resto.tva} mono />
      <DetailRow k="Régime" v={resto.regime} />
      <DetailRow k="Ouverture" v={resto.openSince} />
    </DetailBlock>

    <DetailBlock title="Objectifs & seuils" icon="activity">
      <DetailRow k="Food cost cible" v={pct(resto.foodcostTarget, 0)} accent={resto.foodcost > resto.foodcostTarget ? 'err' : 'ok'} actual={`actuel ${pct(resto.foodcost, 0)}`} />
      <DetailRow k="Masse sal. cible" v={pct(resto.massTarget, 0)} accent={resto.mass > resto.massTarget ? 'warn' : 'ok'} actual={`actuel ${pct(resto.mass, 0)}`} />
      <DetailRow k="CA cible" v={eur(resto.target)} accent={resto.ca >= resto.target ? 'ok' : 'warn'} actual={`atteint ${pct((resto.ca / resto.target) * 100, 0)}`} />
    </DetailBlock>

    <DetailBlock title="Intégrations" icon="zap" right={<Btn kind="ghost" size="sm">Tout gérer</Btn>}>
      {Object.entries(resto.integrations).map(([k, v]) => {
        const st = INTG_STATUS[resto.intgStatus[k]];
        return (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '5px 0' }}>
            <div>
              <div style={{ fontSize: 10, color: C.mute, fontWeight: 600, textTransform: 'capitalize' }}>{k}</div>
              <div style={{ fontSize: 12, color: C.ink, fontWeight: 600, marginTop: 1 }}>{v}</div>
            </div>
            <Pill kind={resto.intgStatus[k] === 'ok' ? 'ok' : resto.intgStatus[k] === 'warn' ? 'warn' : 'neutral'} size="sm" icon={<Icon name={st.icon} size={10} />}>{st.label}</Pill>
          </div>
        );
      })}
    </DetailBlock>
  </div>
);

const DetailBlock = ({ title, icon, children, right }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name={icon} size={13} color={C.orangeDp} />
        <span style={{ fontSize: 11, color: C.mute, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>{title}</span>
      </div>
      {right}
    </div>
    <div style={{ background: C.card, borderRadius: 14, padding: 14, border: `1px solid ${C.lineSoft}`, display: 'flex', flexDirection: 'column', gap: 6 }}>
      {children}
    </div>
  </div>
);

const DetailRow = ({ k, v, mono, accent, actual }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, padding: '5px 0' }}>
    <span style={{ fontSize: 11, color: C.mute }}>{k}</span>
    <div style={{ textAlign: 'right' }}>
      <span style={{ fontSize: 12, color: accent === 'err' ? C.err : accent === 'warn' ? C.warn : accent === 'ok' ? C.ok : C.ink, fontWeight: 700, fontFamily: mono ? 'SF Mono, Menlo, monospace' : 'inherit' }}>{v}</span>
      {actual && <div style={{ fontSize: 10, color: C.mute, marginTop: 1 }}>{actual}</div>}
    </div>
  </div>
);

// ============================================================
// VARIANT C — SPLIT WORKSPACE (liste + fiche détail)
// ============================================================
const VariantC = () => {
  const [sel, setSel] = React.useState('rep');
  const r = RESTAURANTS_FULL.find(x => x.id === sel);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16, alignItems: 'flex-start' }}>
      {/* Liste */}
      <div style={{ background: C.card, border: `1px solid ${C.line}`, borderRadius: 20, padding: 12, position: 'sticky', top: 24 }}>
        <div style={{ padding: '8px 10px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: C.mute, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Restaurants · 3</span>
          <button aria-label="Ajouter" style={{ width: 24, height: 24, borderRadius: 999, background: C.orangeWh, color: C.orangeDp, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="plus" size={13} />
          </button>
        </div>

        <div style={{ padding: '0 8px 10px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', height: 34,
            background: C.cardWash, borderRadius: 12, border: `1px solid ${C.lineSoft}`,
          }}>
            <Icon name="search" size={13} color={C.mute} />
            <input placeholder="Filtrer…" style={{ background: 'transparent', border: 'none', outline: 'none', fontSize: 12, flex: 1, fontFamily: 'inherit', padding: 0 }} />
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {RESTAURANTS_FULL.map(rr => {
            const active = sel === rr.id;
            const s = STATUS_MAP[rr.status];
            return (
              <button key={rr.id} onClick={() => setSel(rr.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 14,
                background: active ? C.orangeWh : 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: 'inherit', textAlign: 'left', width: '100%',
              }}
              onMouseEnter={e => !active && (e.currentTarget.style.background = C.cardWash)}
              onMouseLeave={e => !active && (e.currentTarget.style.background = 'transparent')}
              >
                <Avatar initials={rr.initials} size={30} c={rr.color} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, color: active ? C.orangeDp : C.ink, fontWeight: 700 }}>{rr.short}</div>
                  <div style={{ fontSize: 10, color: C.mute, marginTop: 2 }}>{rr.city} · {eur(rr.ca)}</div>
                </div>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: s.dot }} />
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: 8, padding: '10px 12px', borderTop: `1px dashed ${C.line}` }}>
          <div style={{ fontSize: 10, color: C.mute, fontWeight: 700, letterSpacing: 0.4, marginBottom: 6 }}>VUE GROUPE</div>
          <button style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '8px 4px', borderRadius: 10,
            background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', width: '100%',
          }}>
            <div style={{ width: 30, height: 30, borderRadius: 9, background: C.cardSoft, color: C.orangeDp, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="layers" size={15} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: C.ink2, fontWeight: 600 }}>Consolidation 3/3</div>
              <div style={{ fontSize: 10, color: C.mute }}>{eur(GROUP_KPIS.ca)}</div>
            </div>
          </button>
        </div>
      </div>

      {/* Fiche détail */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <RestoDetailPanel resto={r} />
      </div>
    </div>
  );
};

const RestoDetailPanel = ({ resto }) => {
  const s = STATUS_MAP[resto.status];
  return (
    <>
      {/* Cover + ident */}
      <div style={{ background: C.card, border: `1px solid ${C.line}`, borderRadius: 22, overflow: 'hidden' }}>
        <div style={{ height: 132, background: resto.cover, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, padding: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <button style={{ background: 'rgba(255,253,248,0.85)', border: 'none', borderRadius: 999, padding: '6px 12px', fontFamily: 'inherit', fontSize: 11, color: C.ink2, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <Icon name="plus" size={11} /> Changer la couverture
            </button>
            <Pill kind={resto.status === 'actif' ? 'ok' : 'warn'} icon={<span style={{ width: 6, height: 6, borderRadius: 999, background: s.dot }} />}>{s.label}</Pill>
          </div>
        </div>

        <div style={{ padding: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
          <div style={{ display: 'flex', gap: 18 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 18, background: C.card, color: resto.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 22,
              border: `4px solid ${C.card}`, boxShadow: '0 4px 14px -6px rgba(36,27,18,0.18)',
              marginTop: -50,
            }}>{resto.initials}</div>
            <div>
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, letterSpacing: -0.5 }}>Cantine Corner — {resto.short}</div>
              <div style={{ fontSize: 12, color: C.mute, marginTop: 4 }}>{resto.addr} · {resto.city} · {resto.covers} couverts · ouvert depuis {resto.openSince}</div>
              <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar initials={resto.director.initials} size={22} c={resto.color} style={{ fontSize: 9 }} />
                <span style={{ fontSize: 11, color: C.ink2 }}>Dirigé par <b>{resto.director.name}</b></span>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn kind="ghost" size="sm" icon={<Icon name="logout" size={12} color={C.ink2} />}>Archiver</Btn>
            <Btn kind="primary" size="sm" icon={<Icon name="settings" size={12} />}>Modifier la fiche</Btn>
          </div>
        </div>
      </div>

      {/* KPI ribbon */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        <KpiCompact label="CA TTC" value={eur(resto.ca)} delta={signedPct(resto.trend)} deltaKind={resto.trend >= 0 ? 'ok' : 'err'} />
        <KpiCompact label="Marge" value={pct(resto.margin, 0)} delta={`cible ${pct(70, 0)}`} deltaKind={resto.margin >= 70 ? 'ok' : 'warn'} />
        <KpiCompact label="Food cost" value={pct(resto.foodcost, 0)} delta={`cible ${pct(resto.foodcostTarget, 0)}`} deltaKind={resto.foodcost > resto.foodcostTarget ? 'err' : 'ok'} />
        <KpiCompact label="Masse sal." value={pct(resto.mass, 0)} delta={`cible ${pct(resto.massTarget, 0)}`} deltaKind={resto.mass > resto.massTarget ? 'warn' : 'ok'} />
      </div>

      {/* Sections settings */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <SettingsCard title="Identité légale" icon="shield" desc="Données utilisées pour la TVA et les exports comptables">
          <FieldShow k="Raison sociale" v={`${GROUP.legal} — ${resto.short}`} />
          <FieldShow k="SIRET" v={resto.siret} mono />
          <FieldShow k="N° TVA intracom." v={resto.tva} mono />
          <FieldShow k="Régime fiscal" v={resto.regime} />
        </SettingsCard>

        <SettingsCard title="Branding restaurant" icon="sparkles" desc="Apparaît sur les rapports et la fiche publique">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '4px 0' }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: resto.cover, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 18 }}>{resto.initials}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: C.ink, fontWeight: 600 }}>Logo & monogramme</div>
              <div style={{ fontSize: 10, color: C.mute, marginTop: 2 }}>SVG · 240 × 240 · mis à jour il y a 2 mois</div>
            </div>
            <Btn kind="ghost" size="sm">Modifier</Btn>
          </div>
          <FieldShow k="Couleur principale" v={
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 14, height: 14, borderRadius: 5, background: resto.color }} />
              <code style={{ fontSize: 11, color: C.ink, fontFamily: 'SF Mono, Menlo, monospace' }}>{resto.color}</code>
            </span>
          } />
          <FieldShow k="Couverture" v="Dégradé orange crème" />
        </SettingsCard>

        <SettingsCard title="Objectifs & seuils" icon="activity" desc="Déclenchent les alertes des agents IA">
          <SliderField label="Food cost cible" value={resto.foodcostTarget} actual={resto.foodcost} unit="%" warn={resto.foodcost > resto.foodcostTarget} />
          <SliderField label="Masse salariale cible" value={resto.massTarget} actual={resto.mass} unit="%" warn={resto.mass > resto.massTarget} />
          <SliderField label="CA mensuel cible" value={resto.target / 1000} actual={resto.ca / 1000} unit=" k€" max={150} warn={resto.ca < resto.target * 0.9} />
        </SettingsCard>

        <SettingsCard title="Intégrations" icon="zap" desc="Sources de données connectées à Bellia" right={<Btn kind="ghost" size="sm" icon={<Icon name="plus" size={11} color={C.ink2} />}>Ajouter</Btn>}>
          {Object.entries(resto.integrations).map(([k, v]) => {
            const st = INTG_STATUS[resto.intgStatus[k]];
            return (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderTop: `1px dashed ${C.lineSoft}` }}>
                <div style={{ width: 34, height: 34, borderRadius: 10, background: C.cardWash, color: C.orangeDp, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={k === 'caisse' ? 'card' : k === 'banque' ? 'euro' : k === 'livraison' ? 'truck' : 'users'} size={15} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, color: C.ink, fontWeight: 600, textTransform: 'capitalize' }}>{k}</div>
                  <div style={{ fontSize: 10, color: C.mute, marginTop: 1 }}>{v}</div>
                </div>
                <Pill kind={resto.intgStatus[k] === 'ok' ? 'ok' : resto.intgStatus[k] === 'warn' ? 'warn' : 'neutral'} size="sm" icon={<Icon name={st.icon} size={10} />}>{st.label}</Pill>
              </div>
            );
          })}
        </SettingsCard>
      </div>
    </>
  );
};

const SettingsCard = ({ title, icon, desc, children, right }) => (
  <Card>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: C.orangeWh, color: C.orangeDp, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={icon} size={15} />
        </div>
        <div>
          <div style={{ fontSize: 13, color: C.ink, fontWeight: 700, letterSpacing: -0.1 }}>{title}</div>
          <div style={{ fontSize: 11, color: C.mute, marginTop: 2 }}>{desc}</div>
        </div>
      </div>
      {right}
    </div>
    <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
  </Card>
);

const FieldShow = ({ k, v, mono }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderTop: `1px dashed ${C.lineSoft}`, gap: 12 }}>
    <span style={{ fontSize: 11, color: C.mute }}>{k}</span>
    <span style={{ fontSize: 12, color: C.ink, fontWeight: 600, fontFamily: mono ? 'SF Mono, Menlo, monospace' : 'inherit', textAlign: 'right' }}>{v}</span>
  </div>
);

const SliderField = ({ label, value, actual, unit, max, warn }) => {
  const m = max || 50;
  const pos = (value / m) * 100;
  const actualPos = (actual / m) * 100;
  return (
    <div style={{ padding: '10px 0', borderTop: `1px dashed ${C.lineSoft}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span style={{ fontSize: 11, color: C.mute }}>{label}</span>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontSize: 10, color: C.mute }}>actuel <b style={{ color: warn ? C.warn : C.ok }}>{actual.toFixed(0)}{unit}</b></span>
          <span style={{ fontSize: 14, color: C.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{value}{unit}</span>
        </div>
      </div>
      <div style={{ position: 'relative', height: 6, background: C.lineSoft, borderRadius: 999, overflow: 'visible' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${pos}%`, background: C.orange, borderRadius: 999 }} />
        <div style={{
          position: 'absolute', left: `${pos}%`, top: '50%', transform: 'translate(-50%, -50%)',
          width: 16, height: 16, borderRadius: 999, background: '#fff', border: `2px solid ${C.orange}`, boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        }} />
        <div style={{
          position: 'absolute', left: `${actualPos}%`, top: '50%', transform: 'translate(-50%, -50%)',
          width: 2, height: 12, background: warn ? C.warn : C.ok, borderRadius: 2,
        }} />
      </div>
    </div>
  );
};

// ============================================================
// TEAM SECTION (commun aux 3 variantes)
// ============================================================
const TeamSection = () => (
  <div style={{ marginTop: 28 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 14 }}>
      <div>
        <div style={{ fontSize: 16, fontWeight: 700, color: C.ink, letterSpacing: -0.3 }}>Équipe & droits</div>
        <div style={{ fontSize: 12, color: C.mute, marginTop: 4 }}>5 utilisateurs · 2 dirigeants, 3 directeurs de site · accès comptable externe en lecture seule</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <Btn kind="ghost" size="sm" icon={<Icon name="shield" size={12} color={C.ink2} />}>Rôles & permissions</Btn>
        <Btn kind="primary" size="sm" icon={<Icon name="plus" size={12} />}>Inviter</Btn>
      </div>
    </div>

    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: C.cardWash }}>
            {['Membre', 'Rôle', 'Restaurants', 'Permissions', 'Dernière activité', ''].map(h => (
              <th key={h} style={thStyle(null, 'left')}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {TEAM.map((t, i) => (
            <tr key={t.id} style={{ borderBottom: i < TEAM.length - 1 ? `1px solid ${C.lineSoft}` : 'none' }}>
              <td style={tdStyle('left')}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                  <Avatar initials={t.initials} size={32} c={t.c} />
                  <div>
                    <div style={{ fontSize: 13, color: C.ink, fontWeight: 700 }}>{t.name}</div>
                    <div style={{ fontSize: 10, color: C.mute }}>{t.email}</div>
                  </div>
                </div>
              </td>
              <td style={tdStyle('left')}>
                <Pill kind={t.role.includes('Propriétaire') ? 'accent' : t.role.includes('externe') ? 'neutral' : 'neutral'}>{t.role}</Pill>
              </td>
              <td style={tdStyle('left')}>
                <span style={{ fontSize: 12, color: C.ink2, fontWeight: 600 }}>{t.scope}</span>
              </td>
              <td style={tdStyle('left')}>
                <span style={{ fontSize: 12, color: C.ink2 }}>{t.perms}</span>
              </td>
              <td style={tdStyle('left')}>
                <span style={{ fontSize: 11, color: C.mute }}>{t.last}</span>
              </td>
              <td style={tdStyle('center')}>
                <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: C.mute, display: 'flex', padding: 4 }}>
                  <Icon name="more" size={14} />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </div>
);

window.RestaurantsScreen = RestaurantsScreen;
window.RestaurantsScreenWrapper = RestaurantsScreenWrapper;
window.RESTAURANTS_FULL = RESTAURANTS_FULL;
window.GROUP_KPIS = GROUP_KPIS;
window.STATUS_MAP_R = STATUS_MAP;
