/* ------------------------------------------------------------------ *
 *  App — calculateur de ROI SprintRay
 * ------------------------------------------------------------------ */

const {
  CATALOGUE, MACHINES, MIDAS_MATERIAUX, MODES_DESIGN,
  Segmented, SelectCard, KpiCard, NumberInput, Icon, Wordmark,
  IndicationsTable, Dashboard, ModuleTempsFauteuil, ModuleFinancement, ModuleCamera,
  DarkModeToggle, CurrencyPicker,
  calculerLigne, calculerTotaux,
  LangProvider, LangPicker, useLang,
  useIsMobile, MobileWizard, printPdf,
} = window;

function AppDesktop() {
  const { t, fmt, currencySymbol } = useLang();

  const [machine, setMachine] = useState('both');
  const [midasMat, setMidasMat] = useState('ceramic-crown');
  const [midasMatCouts, setMidasMatCouts] = useState({
    'ceramic-crown': 25,
    'crown-ht':      25,
    'onx':           29,
  });

  const fraisDesign = 0;

  const [prixEcosysteme, setPrixEcosysteme] = useState(MACHINES.find(m => m.id === 'both').prixDefaut);
  const [prixCustomise, setPrixCustomise] = useState(false);
  function changeMachine(id) {
    setMachine(id);
    if (!prixCustomise) {
      setPrixEcosysteme(MACHINES.find(m => m.id === id).prixDefaut);
    }
  }
  function changePrix(v) { setPrixEcosysteme(v); setPrixCustomise(true); }

  const [allRows, setAllRows] = useState(() =>
    CATALOGUE.map(c => ({
      ...c,
      def: { ...c.defauts, coutMateriau: c.defauts.coutMateriau ?? null },
      values: {
        coutLabo:     c.defauts.coutLabo,
        honoraire:    c.defauts.honoraire,
        volume:       c.defauts.volume,
        coutMateriau: c.defauts.coutMateriau ?? 0,
        ...(c.machine !== 'midas' ? {
          designMode: 'sprintray',
          laboCost: 0,
        } : {
          designMode: 'ia',
          srCost: 12,
          laboCost: 0,
        }),
      },
      actif: true,
    }))
  );

  const visibleRows = useMemo(() => {
    return allRows
      .filter(r => machine === 'both' ? true : r.machine === machine)
      .map(r => {
        if (r.machine === 'midas' && r.midasUtiliseMateriau) {
          const midasMatLabel = MIDAS_MATERIAUX.find(m => m.id === midasMat).label;
          return {
            ...r,
            _midasMaterialLabel: midasMatLabel,
            values: { ...r.values, coutMateriau: midasMatCouts[midasMat] || 0 },
          };
        }
        return r;
      });
  }, [allRows, machine, midasMat, midasMatCouts]);

  function setVisibleRows(updater) {
    setAllRows(rs => {
      const nextVisible = typeof updater === 'function' ? updater(visibleRows) : updater;
      const byId = new Map(nextVisible.map(r => [r.id, r]));

      const midasRow = nextVisible.find(r => r.machine === 'midas' && r.midasUtiliseMateriau);
      if (midasRow) {
        const newMat = midasRow.values.coutMateriau;
        if (newMat !== midasMatCouts[midasMat]) {
          setMidasMatCouts(m => ({ ...m, [midasMat]: newMat }));
        }
      }

      return rs.map(r => {
        const upd = byId.get(r.id);
        if (!upd) return r;
        if (r.machine === 'midas' && r.midasUtiliseMateriau) {
          const { coutMateriau, ...rest } = upd.values;
          return { ...r, ...upd, values: { ...r.values, ...rest } };
        }
        return { ...r, ...upd, values: { ...r.values, ...upd.values } };
      });
    });
  }

  const totaux = useMemo(
    () => calculerTotaux(visibleRows, fraisDesign),
    [visibleRows, fraisDesign]
  );

  const [tempsOn, setTempsOn] = useState(false);
  const [tempsParams, setTempsParams] = useState({
    tarifActe: 150,
    tauxRemplissage: 80,
    casProvisoiresMois: 8,
    economieProvisoireParCas: 25,
  });

  const [finOn, setFinOn] = useState(false);
  const [finParams, setFinParams] = useState({
    dureeMois: 60,
    tauxAnnuel: 0,
    loyerManuel: 0,
  });

  const [cameraOn, setCameraOn] = useState(false);
  const [cameraParams, setCameraParams] = useState({
    prix: 0,
    dureeMois: 60,
    tauxAnnuel: 0,
    mensualiteManuelle: 0,
  });

  const [synthOpen, setSynthOpen] = useState(false);

  const showMidasMat = machine === 'midas' || machine === 'both';

  return (
    <div className="min-h-screen">
      <header className="bg-white/80 backdrop-blur border-b border-ink-100 sticky top-0 z-30 print:hidden">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
          <Wordmark/>
          <div className="flex items-center gap-2">
            <button onClick={printPdf}
                    title={t('synth.pdf')}
                    aria-label={t('synth.pdf')}
                    className="w-8 h-8 rounded-lg border border-ink-200 bg-white hover:bg-ink-50 text-ink-500 hover:text-ink-700 grid place-items-center shadow-card transition">
              <Icon.doc/>
            </button>
            <DarkModeToggle/>
            <CurrencyPicker/>
            <LangPicker/>
            <button onClick={() => setSynthOpen(true)}
                    className="inline-flex items-center gap-2 bg-ink-900 hover:bg-ink-800 text-white text-[13px] font-medium px-3.5 py-2 rounded-lg shadow-pop transition">
              <Icon.doc/>
              {t('header.synthese')}
            </button>
          </div>
        </div>
      </header>

      <div id="print-area">
      <section className="max-w-[1400px] mx-auto px-6 pt-8 pb-4">
        <div className="flex items-end justify-between gap-6 flex-wrap">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 text-[11.5px] uppercase tracking-[0.12em] font-medium text-brand-700 bg-brand-50 px-2 py-1 rounded-md">
              <Icon.spark/> {t('hero.badge')}
            </div>
            <h1 className="mt-3 text-[28px] md:text-[34px] leading-[1.1] font-semibold text-ink-900 tracking-tight" style={{textWrap:'balance'}}>
              {t('hero.h1a')} <span className="text-brand-500">{t('hero.h1em')}</span> {t('hero.h1b')}
            </h1>
            <p className="mt-3 text-[14.5px] text-ink-500 max-w-xl leading-relaxed"
               dangerouslySetInnerHTML={{ __html: t('hero.p') }}/>
          </div>

          <div className="flex flex-col gap-3 max-w-xs shrink-0">
            {/* Partner lab notice */}
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3.5 shadow-card">
              <div className="flex items-center gap-1.5 text-[12px] font-medium text-rose-700 mb-1.5">
                <Icon.heart/> {t('hero.partner.title')}
              </div>
              <p className="text-[11px] text-rose-700 leading-snug">{t('hero.partner.body')}</p>
            </div>
            {/* Method */}
            <div className="text-[12px] text-ink-500 bg-white border border-ink-200 rounded-xl p-3.5 shadow-card">
              <div className="font-medium text-ink-700 mb-1">{t('method.title')}</div>
              <code className="block text-[11px] text-ink-600 font-mono leading-snug">
                {t('method.line1')}<br/>
                {t('method.line2')}
              </code>
            </div>
          </div>
        </div>
      </section>

      <section className="max-w-[1400px] mx-auto px-6 py-5">
        <div className="bg-white border border-ink-200 rounded-2xl shadow-card p-5">

          <Selector step="1" title={t('sel1.title')} sub={t('sel1.sub')} icon={<Icon.printer/>}>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              {MACHINES.map(m => (
                <SelectCard key={m.id}
                            title={t('machines.' + m.id + '.label')}
                            sub={t('machines.' + m.id + '.sub')}
                            hint={t('machines.' + m.id + '.blurb')}
                            active={machine === m.id}
                            onClick={() => changeMachine(m.id)}/>
              ))}
            </div>
            <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-[12.5px]">
              <label className="flex items-center gap-2">
                <span className="text-ink-600">{t('sel1.prix.label')}</span>
                <NumberInput value={prixEcosysteme} onChange={changePrix} suffix={currencySymbol}
                             className="bg-ink-50 rounded-lg px-2 py-1"/>
                {prixCustomise && (
                  <button onClick={() => { setPrixCustomise(false); setPrixEcosysteme(MACHINES.find(m => m.id === machine).prixDefaut); }}
                          className="text-[11px] text-ink-400 hover:text-brand-500 underline">
                    {t('sel1.prix.restore')}
                  </button>
                )}
              </label>
              <span className="text-[11.5px] text-ink-400 italic">{t('sel1.prix.note')}</span>
            </div>
          </Selector>

          {showMidasMat && (
            <>
              <Divider/>
              <Selector step="2" title={t('sel2.title')} sub={t('sel2.sub')} icon={<Icon.spark/>}>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                  {MIDAS_MATERIAUX.map(m => (
                    <button key={m.id} onClick={() => setMidasMat(m.id)}
                            className={`group text-left p-4 rounded-2xl border transition
                                        ${midasMat === m.id
                                          ? 'border-brand-500 bg-white shadow-pop ring-1 ring-brand-500/20'
                                          : 'border-ink-200 bg-white hover:border-ink-300 shadow-card'}`}>
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="font-semibold text-ink-900 text-[15px]">{m.label}</div>
                          <div className="text-[12.5px] text-ink-500 mt-0.5">{t('mat.' + m.id + '.sub')}</div>
                          <div className="text-[11.5px] text-ink-400 mt-1.5">{t('mat.' + m.id + '.blurb')}</div>
                        </div>
                        <div className={`w-4 h-4 rounded-full border-2 mt-0.5 shrink-0
                                        ${midasMat === m.id ? 'border-brand-500 bg-brand-500' : 'border-ink-300 bg-white'}`}>
                          {midasMat === m.id && <span className="block w-full h-full rounded-full ring-2 ring-white"></span>}
                        </div>
                      </div>
                      <div className="mt-3 pt-3 border-t border-ink-100 flex items-center justify-between">
                        <span className="text-[11px] uppercase tracking-wider text-ink-400">{t('sel2.cout')}</span>
                        <span onClick={e => e.stopPropagation()}>
                          <NumberInput value={midasMatCouts[m.id]}
                                       onChange={v => setMidasMatCouts(c => ({ ...c, [m.id]: v }))}
                                       suffix={currencySymbol} step={0.01}
                                       ariaLabel={t('sel2.cout') + ' ' + m.label}/>
                        </span>
                      </div>
                    </button>
                  ))}
                </div>
                <p className="mt-2 text-[11.5px] text-ink-400 italic">{t('sel2.note')}</p>
              </Selector>
            </>
          )}


        </div>
      </section>

      <section className="max-w-[1400px] mx-auto px-6 pb-5">
        <IndicationsTable
          rows={visibleRows}
          setRows={setVisibleRows}
        />
      </section>

      <section className="max-w-[1400px] mx-auto px-6 pb-5">
        <Dashboard
          rows={visibleRows}
          fraisDesign={fraisDesign}
          prixEcosysteme={prixEcosysteme}
          totaux={totaux}
          machineLabel={t('machines.' + machine + '.label')}
        />
      </section>

      <section className="max-w-[1400px] mx-auto px-6 pb-5">
        <div className="mb-3 flex items-end justify-between">
          <div>
            <h2 className="text-[16px] font-semibold text-ink-900">{t('opts.title')}</h2>
            <p className="text-[12.5px] text-ink-500">{t('opts.sub')}</p>
          </div>
        </div>
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-5">
          {machine !== 'pro2' && (
            <ModuleTempsFauteuil
              enabled={tempsOn} onToggle={setTempsOn}
              params={tempsParams} setParams={setTempsParams}
              rows={visibleRows}
            />
          )}
          <ModuleFinancement
            enabled={finOn} onToggle={setFinOn}
            params={finParams} setParams={setFinParams}
            economieMois={totaux.economieMois}
            prixEcosysteme={prixEcosysteme}
            className={machine === 'pro2' ? 'xl:col-span-2' : ''}
          />
          <ModuleCamera
            enabled={cameraOn} onToggle={setCameraOn}
            params={cameraParams} setParams={setCameraParams}
            economieMois={totaux.economieMois}
            prixEcosysteme={prixEcosysteme}
            className="xl:col-span-2"
          />
        </div>
      </section>

      <footer className="max-w-[1400px] mx-auto px-6 pb-12 pt-4">
        <div className="bg-ink-100/60 rounded-xl p-4 text-[11.5px] leading-relaxed text-ink-500 max-w-4xl">
          <div className="font-medium text-ink-700 mb-1">{t('footer.disclaimer.title')}</div>
          {t('footer.disclaimer.body')}
        </div>
        <div className="mt-3 text-[11px] text-ink-400">{t('footer.copy')}</div>
      </footer>
      </div>

      {synthOpen && (
        <SyntheseModal
          onClose={() => setSynthOpen(false)}
          context={{
            machine: MACHINES.find(m => m.id === machine),
            midasMat: MIDAS_MATERIAUX.find(m => m.id === midasMat),
            midasMatCout: midasMatCouts[midasMat],
            prixEcosysteme,
            totaux,
            rows: visibleRows,
            tempsOn, tempsParams,
            finOn, finParams,
            cameraOn, cameraParams,
          }}
        />
      )}
    </div>
  );
}

function Selector({ step, title, sub, icon, children }) {
  return (
    <div className="py-4 first:pt-0 last:pb-0">
      <div className="flex items-start gap-3 mb-3">
        <div className="w-7 h-7 rounded-lg bg-brand-50 text-brand-700 grid place-items-center text-[12px] font-semibold tnum">
          {step}
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-1.5">
            <h2 className="text-[14.5px] font-semibold text-ink-900">{title}</h2>
            {icon && <span className="text-ink-300">{icon}</span>}
          </div>
          <p className="text-[12.5px] text-ink-500">{sub}</p>
        </div>
      </div>
      {children}
    </div>
  );
}

function Divider() {
  return <div className="my-1 border-t border-ink-100"></div>;
}

function buildSynthCopyText(t, fmt, {
  machine, economieMois, economieAn, beneficeAn1, rentable, moisROI,
  finOn, finData, finParams,
  cameraOn, camData,
  tempsOn, tempsData,
}) {
  const lines = [
    `${t('synth.title')} · ${fmt.date(new Date())}`,
    t('machines.' + machine.id + '.label'),
    '',
    `${t('dash.roi.label')} : ${rentable ? t('synth.gen.roiOk', moisROI) : t('synth.gen.roiKo')}`,
    `${t('dash.eco.label')} : ${fmt.EUR(economieAn)}`,
    `${t('dash.ben.label')} : ${fmt.EURc(beneficeAn1)}`,
    `${t('synth.gen.ecoMois')} : ${fmt.EUR(economieMois)}`,
  ];
  if (finOn && finData) {
    const taux = finParams.tauxAnnuel > 0 ? ` · ${finParams.tauxAnnuel}%` : '';
    lines.push('', `${t('mod.fin.title')} · ${finParams.dureeMois} ${t('synth.gen.fin.mois')}${taux} : ${fmt.EUR(finData.loyer)}/mois · net ${fmt.EURc(finData.net)}/mois`);
  }
  if (cameraOn && camData) {
    lines.push('', `${t('mod.cam.title')} : ${fmt.EUR(camData.mensualite)}/mois → ROI ${camData.roiAjuste ? t('synth.gen.roiOk', camData.roiAjuste) : t('synth.gen.roiKo')}`);
  }
  if (tempsOn && tempsData && tempsData.creneaux > 0) {
    lines.push('', `${t('mod.temps.title')} : ${tempsData.creneaux} ${t('mod.temps.creneaux')} → ${fmt.EUR(tempsData.potentiel)}/mois`);
  }
  lines.push('', 'https://simuprint.lamouqueterie.com');
  return lines.join('\n');
}

function SyntheseModal({ onClose, context }) {
  const { t, fmt } = useLang();
  const {
    machine, prixEcosysteme, totaux, rows,
    tempsOn, tempsParams, finOn, finParams,
    cameraOn, cameraParams,
  } = context;

  const economieMois = totaux.economieMois;
  const economieAn   = totaux.economieAn;
  const beneficeAn1  = economieAn - prixEcosysteme;
  const rentable     = economieMois > 0;
  const moisROI      = rentable ? Math.ceil(prixEcosysteme / economieMois) : null;

  const finData = useMemo(() => {
    if (!finOn) return null;
    const r = finParams.tauxAnnuel > 0 ? finParams.tauxAnnuel / 100 / 12 : 0;
    const n = finParams.dureeMois;
    const loyerCalc = n > 0 ? (r > 0 ? prixEcosysteme * r / (1 - Math.pow(1 + r, -n)) : prixEcosysteme / n) : 0;
    const loyer = finParams.loyerManuel > 0 ? finParams.loyerManuel : loyerCalc;
    return { loyer, net: economieMois - loyer };
  }, [finOn, finParams, prixEcosysteme, economieMois]);

  const camData = useMemo(() => {
    if (!cameraOn) return null;
    const mensualite = cameraParams.mensualiteManuelle || 0;
    const eco = economieMois - mensualite;
    return { mensualite, roiAjuste: eco > 0 ? Math.ceil(prixEcosysteme / eco) : null };
  }, [cameraOn, cameraParams, prixEcosysteme, economieMois]);

  const tempsData = useMemo(() => {
    if (!tempsOn) return null;
    const creneaux = rows.filter(r => r.actif && r.machine === 'midas').reduce((s, r) => s + (r.values.volume || 0), 0);
    const potentiel = creneaux * (tempsParams.tauxRemplissage / 100) * tempsParams.tarifActe;
    return { creneaux, potentiel };
  }, [tempsOn, tempsParams, rows]);

  const copyText = buildSynthCopyText(t, fmt, {
    machine, economieMois, economieAn, beneficeAn1, rentable, moisROI,
    finOn, finData, finParams,
    cameraOn, camData,
    tempsOn, tempsData,
  });

  const [copied, setCopied] = useState(false);
  async function copy() {
    try {
      await navigator.clipboard.writeText(copyText);
    } catch (_) {
      const ta = document.getElementById('synth-copy-ta');
      if (ta) { ta.select(); document.execCommand('copy'); }
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }
  async function share() {
    try { await navigator.share({ title: t('synth.title'), text: copyText }); } catch (_) {}
  }
  const canShare = !!navigator.share;

  return (
    <div className="fixed inset-0 z-50 grid place-items-center p-4 bg-ink-900/50 backdrop-blur-sm fade-up"
         onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-pop w-full max-w-md max-h-[90vh] flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}>

        {/* Header */}
        <div className="px-5 py-4 border-b border-ink-100 flex items-center justify-between">
          <div>
            <h2 className="text-[15px] font-semibold text-ink-900">{t('synth.title')}</h2>
            <p className="text-[12px] text-ink-500">{fmt.date(new Date())} · {t('machines.' + machine.id + '.label')}</p>
          </div>
          <button onClick={onClose} className="text-ink-400 hover:text-ink-700 p-1"><Icon.close/></button>
        </div>

        {/* Body */}
        <div className="px-5 py-5 overflow-y-auto flex-1 space-y-3">

          {/* ROI Hero */}
          <div className={`rounded-2xl px-5 py-5 ${rentable ? 'bg-gradient-to-br from-brand-500 to-brand-700' : 'bg-ink-100'}`}>
            <div className={`text-[10.5px] uppercase tracking-widest font-semibold ${rentable ? 'text-brand-100' : 'text-ink-500'}`}>
              {t('synth.roi.hero')}
            </div>
            <div className={`flex items-baseline gap-2 mt-1.5 ${rentable ? 'text-white' : 'text-ink-800'}`}>
              <span className="text-[54px] font-bold tnum leading-none">{rentable ? moisROI : '—'}</span>
              {rentable && <span className="text-[22px] font-light">{t('synth.gen.fin.mois')}</span>}
            </div>
            <p className={`text-[12.5px] mt-2 leading-snug ${rentable ? 'text-brand-100' : 'text-ink-500'}`}>
              {rentable ? t('synth.roi.sub', fmt.EUR(economieAn)) : t('synth.gen.roiKo')}
            </p>
          </div>

          {/* 3 KPIs */}
          <div className="grid grid-cols-3 gap-2">
            {[
              { label: t('dash.eco.label'),    value: fmt.EUR(economieAn),    sub: t('synth.peryear'),  color: 'text-ink-900' },
              { label: t('dash.ben.label'),    value: fmt.EURc(beneficeAn1),  sub: t('synth.year1'),    color: beneficeAn1 >= 0 ? 'text-emerald-700' : 'text-rose-700' },
              { label: t('synth.gen.ecoMois'), value: fmt.EUR(economieMois),  sub: t('synth.permonth'), color: 'text-ink-900' },
            ].map((k, i) => (
              <div key={i} className="rounded-xl bg-ink-50 border border-ink-200 px-2.5 py-3 text-center">
                <div className="text-[9.5px] uppercase tracking-wider text-ink-400 leading-tight mb-1.5 line-clamp-2">{k.label}</div>
                <div className={`text-[15px] font-semibold tnum leading-none ${k.color}`}>{k.value}</div>
                <div className="text-[9.5px] text-ink-400 mt-0.5">{k.sub}</div>
              </div>
            ))}
          </div>

          {/* Optional layers */}
          {finOn && finData && (
            <div className="rounded-xl border border-ink-200 px-4 py-3 flex items-center gap-3">
              <div className={`w-8 h-8 rounded-lg grid place-items-center shrink-0 ${finData.net >= 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'}`}>
                <Icon.flow/>
              </div>
              <div className="min-w-0">
                <div className="text-[12.5px] font-semibold text-ink-900">
                  {t('mod.fin.title')} · {finParams.dureeMois} {t('synth.gen.fin.mois')}
                  {finParams.tauxAnnuel > 0 && <span className="font-normal text-ink-500"> · {finParams.tauxAnnuel}%</span>}
                </div>
                <div className="text-[12px] text-ink-500">
                  {fmt.EUR(finData.loyer)}/mois · net <span className={`font-semibold ${finData.net >= 0 ? 'text-emerald-600' : 'text-amber-600'}`}>{fmt.EURc(finData.net)}/mois</span>
                </div>
              </div>
            </div>
          )}

          {cameraOn && camData && (
            <div className="rounded-xl border border-ink-200 px-4 py-3 flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-violet-50 text-violet-600 grid place-items-center shrink-0">
                <Icon.camera/>
              </div>
              <div className="min-w-0">
                <div className="text-[12.5px] font-semibold text-ink-900">
                  {t('mod.cam.title')} · {fmt.EUR(camData.mensualite)}/mois
                </div>
                <div className="text-[12px] text-ink-500">
                  {t('synth.gen.cam.roi')} : <span className="font-semibold text-ink-800">{camData.roiAjuste ? t('synth.gen.roiOk', camData.roiAjuste) : t('synth.gen.roiKo')}</span>
                  {camData.roiAjuste && moisROI && camData.roiAjuste !== moisROI && (
                    <span className="text-ink-400 ml-1">({t('synth.instead', moisROI)})</span>
                  )}
                </div>
              </div>
            </div>
          )}

          {tempsOn && tempsData && tempsData.creneaux > 0 && (
            <div className="rounded-xl border border-ink-200 px-4 py-3 flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-brand-50 text-brand-600 grid place-items-center shrink-0">
                <Icon.chair/>
              </div>
              <div className="min-w-0">
                <div className="text-[12.5px] font-semibold text-ink-900">
                  {t('mod.temps.title')} · {tempsData.creneaux} {t('mod.temps.creneaux')}
                </div>
                <div className="text-[12px] text-ink-500">{t('synth.temps.pot', fmt.EUR(tempsData.potentiel))}</div>
              </div>
            </div>
          )}

          <p className="text-[10.5px] text-ink-400 pt-1 leading-snug">{t('synth.gen.disclaimer')}</p>
        </div>

        {/* Hidden textarea for copy fallback */}
        <textarea id="synth-copy-ta" readOnly value={copyText} className="sr-only" aria-hidden="true"/>

        {/* Footer */}
        <div className="px-5 py-4 border-t border-ink-100 flex items-center justify-end gap-2 bg-white">
          <button onClick={onClose}
                  className="px-3.5 py-2 text-[13px] text-ink-700 hover:bg-ink-50 rounded-lg transition">
            {t('synth.close')}
          </button>
          {canShare && (
            <button onClick={share}
                    className="inline-flex items-center gap-2 px-3.5 py-2 text-[13px] font-medium rounded-lg transition shadow-pop bg-brand-500 text-white hover:bg-brand-600">
              <Icon.flow/> {t('mob.share')}
            </button>
          )}
          <button onClick={copy}
                  className={`inline-flex items-center gap-2 px-3.5 py-2 text-[13px] font-medium rounded-lg transition shadow-pop
                              ${copied ? 'bg-emerald-500 text-white' : 'bg-ink-900 text-white hover:bg-ink-800'}`}>
            {copied ? <><Icon.check/> {t('synth.copied')}</> : <><Icon.copy/> {t('synth.copy')}</>}
          </button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const isMobile = useIsMobile();
  if (isMobile) return <MobileWizard />;
  return <AppDesktop />;
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <LangProvider>
    <App />
  </LangProvider>
);