/* global React, ReactDOM, htmlToImage, JSZip, Figurinha, RARITIES, ICON_NAMES, Icons */

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ============ Defaults & types ============
const TYPES = [
  { id: "camisa", label: "Camisa" },
  { id: "jogador", label: "Jogador" },
  { id: "estadio", label: "Estádio" },
  { id: "momento", label: "Momento" },
  { id: "taca", label: "Taça" },
  { id: "campeoes", label: "Campeões" },
  { id: "foto", label: "Foto" },
];

const RARITY_LIST = ["comum", "raro", "epico", "lendario"];

// stat presets per type — sensible defaults the user can override
const STAT_PRESETS = {
  camisa: [
    { icon: "trophy", label: "MUNDIAIS", value: "5" },
    { icon: "star", label: "TÍTULOS", value: "5" },
    { icon: "ball", label: "GOLS MARCADOS", value: "229" },
  ],
  jogador: [
    { icon: "position", label: "POSIÇÃO", value: "ATAC" },
    { icon: "calendar", label: "ESTREIA", value: "1976" },
    { icon: "ball", label: "GOLS", value: "62" },
  ],
  estadio: [
    { icon: "people", label: "CAPACIDADE", value: "99.354" },
    { icon: "calendar", label: "FUNDADO", value: "1957" },
    { icon: "flag", label: "PAÍS", value: "BRA" },
  ],
  momento: [
    { icon: "trophy", label: "PLACAR", value: "2-0" },
    { icon: "calendar", label: "ANO", value: "2002" },
    { icon: "shield", label: "FASE", value: "FINAL" },
  ],
  taca: [
    { icon: "trophy", label: "EDIÇÃO", value: "2002" },
    { icon: "crown", label: "CAMPEÃO", value: "BRA" },
    { icon: "star", label: "ESTRELAS", value: "5" },
  ],
  campeoes: [
    { icon: "trophy", label: "VITÓRIAS", value: "7" },
    { icon: "ball", label: "GOLS", value: "18" },
    { icon: "shield", label: "SOFRIDOS", value: "4" },
  ],
  foto: [
    { icon: "people",   label: "CAPACIDADE:",                 value: "72.327 PESSOAS" },
    { icon: "calendar", label: "INAUGURAÇÃO:",                value: "1998" },
    { icon: "trophy",   label: "FINAL DA COPA DO MUNDO 2002", value: "BRASIL 2 X 0 ALEMANHA" },
    { icon: "ball",     label: "GOLS DO FENÔMENO",           value: "R9 FEZ OS 2 GOLS DA FINAL" },
  ],
};

// per-type defaults for layout flags
const TYPE_DEFAULTS = {
  camisa:   { photoLayout: false, hideFlag: false },
  jogador:  { photoLayout: false, hideFlag: false },
  estadio:  { photoLayout: false, hideFlag: false },
  momento:  { photoLayout: false, hideFlag: false },
  taca:     { photoLayout: false, hideFlag: false },
  campeoes: { photoLayout: false, hideFlag: false },
  foto:     { photoLayout: true,  hideFlag: true  },
};

function makeDefault(type = "camisa", rarity = "comum") {
  const defaultName = {
    camisa: "BRASIL",
    jogador: "FENÔMENO",
    estadio: "MARACANÃ",
    momento: "GOL DO REI",
    taca: "TAÇA",
    campeoes: "CAMPEÕES",
    foto: "INTERNATIONAL STADIUM YOKOHAMA",
  }[type] || "NOVA";
  const defaultSubtitle = type === "foto" ? "YOKOHAMA, JAPÃO" : "";
  const d = TYPE_DEFAULTS[type] || { photoLayout: false, hideFlag: false };
  return {
    id: Math.random().toString(36).slice(2, 10),
    type,
    rarity,
    name: defaultName,
    subtitle: defaultSubtitle,
    image: null,
    flag: null,
    stars: 5,
    stats: STAT_PRESETS[type].map(s => ({ ...s })),
    photoLayout: d.photoLayout,
    hideFlag: d.hideFlag,
  };
}

// ============ LocalStorage ============
const STORAGE_KEY = "figurinhas-v1";

function loadLib() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) {
    return null;
  }
}

function saveLib(state) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  } catch (e) {
    /* quota */
  }
}

// ============ File → dataURL ============
function fileToDataURL(file) {
  return new Promise((resolve, reject) => {
    const r = new FileReader();
    r.onload = () => resolve(r.result);
    r.onerror = reject;
    r.readAsDataURL(file);
  });
}

// ============ Export ============
async function exportCardPng(node, filename) {
  // node is the .card-frame element (400x512)
  const dataUrl = await htmlToImage.toPng(node, {
    width: 400,
    height: 512,
    pixelRatio: 1,
    cacheBust: true,
    backgroundColor: null,
    style: { transform: "none" },
  });
  const a = document.createElement("a");
  a.href = dataUrl;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

async function exportAllZip(cards) {
  const zip = new JSZip();
  for (let i = 0; i < cards.length; i++) {
    const c = cards[i];
    const node = document.getElementById(`exp-${c.id}`);
    if (!node) continue;
    const dataUrl = await htmlToImage.toPng(node, {
      width: 400,
      height: 512,
      pixelRatio: 1,
      cacheBust: true,
      backgroundColor: null,
      style: { transform: "none" },
    });
    const blob = await (await fetch(dataUrl)).blob();
    const safe = c.name.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
    zip.file(`${safe || "card"}_${c.rarity}_${c.type}.png`, blob);
  }
  const out = await zip.generateAsync({ type: "blob" });
  const url = URL.createObjectURL(out);
  const a = document.createElement("a");
  a.href = url;
  a.download = `figurinhas_${new Date().toISOString().slice(0,10)}.zip`;
  a.click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

// ============ Components ============

function Segmented({ value, onChange, options, columns }) {
  const colClass = columns ? `seg seg-${columns}` : "seg";
  return (
    <div className={colClass}>
      {options.map(opt => (
        <button
          key={opt.value}
          className={`seg-btn ${value === opt.value ? "active" : ""}`}
          onClick={() => onChange(opt.value)}
          type="button"
        >
          {opt.label}
        </button>
      ))}
    </div>
  );
}

function IconPicker({ value, onChange }) {
  return (
    <div className="icon-picker">
      {ICON_NAMES.map(name => (
        <button
          key={name}
          type="button"
          className={`icon-pick-btn ${value === name ? "active" : ""}`}
          onClick={() => onChange(name)}
          title={name}
        >
          <PixelIcon name={name} color="currentColor" pixelSize={1} />
        </button>
      ))}
    </div>
  );
}

function Upload({ value, onChange, label, sublabel }) {
  const inputRef = useRef(null);
  const onPick = async e => {
    const file = e.target.files?.[0];
    if (!file) return;
    const dataUrl = await fileToDataURL(file);
    onChange(dataUrl);
  };
  return (
    <div
      className="upload"
      onClick={() => inputRef.current?.click()}
    >
      {value ? (
        <img className="upload-preview" src={value} alt="" />
      ) : (
        <div className="upload-preview" style={{ display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted)", fontSize: 20 }}>
          ＋
        </div>
      )}
      <div className="upload-text">
        <div className="upload-title">{label}</div>
        <div className="upload-sub">{sublabel}</div>
      </div>
      {value && (
        <button
          className="btn ghost"
          style={{ padding: "4px 8px", fontSize: 11 }}
          onClick={e => { e.stopPropagation(); onChange(null); }}
        >
          ✕
        </button>
      )}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        style={{ display: "none" }}
        onChange={onPick}
      />
    </div>
  );
}

function Stars({ value, onChange }) {
  return (
    <div className="stars-input">
      {[1,2,3,4,5].map(n => (
        <button
          key={n}
          type="button"
          className={`star-btn ${n <= value ? "on" : ""}`}
          onClick={() => onChange(n === value && n === 1 ? 0 : n)}
        >
          {n <= value ? "★" : "☆"}
        </button>
      ))}
    </div>
  );
}

function StatEditor({ stat, onChange }) {
  const [iconOpen, setIconOpen] = useState(false);
  return (
    <div style={{ background: "var(--surface-2)", borderRadius: 7, padding: 10, marginBottom: 8 }}>
      <div style={{ display: "grid", gridTemplateColumns: "36px 1fr 80px", gap: 6, marginBottom: 6, alignItems: "center" }}>
        <button
          type="button"
          className="btn"
          style={{ padding: 0, width: 36, height: 32, display: "flex", alignItems: "center", justifyContent: "center" }}
          onClick={() => setIconOpen(!iconOpen)}
        >
          <span style={{ display: "inline-flex", color: "var(--accent)" }}>
            <PixelIcon name={stat.icon} color="currentColor" pixelSize={1} />
          </span>
        </button>
        <input
          className="input"
          placeholder="LABEL"
          value={stat.label}
          onChange={e => onChange({ ...stat, label: e.target.value.toUpperCase() })}
        />
        <input
          className="input"
          placeholder="valor"
          value={stat.value}
          onChange={e => onChange({ ...stat, value: e.target.value })}
        />
      </div>
      {iconOpen && (
        <IconPicker
          value={stat.icon}
          onChange={name => { onChange({ ...stat, icon: name }); setIconOpen(false); }}
        />
      )}
    </div>
  );
}

// ============ Library (left sidebar) ============
function Library({ cards, activeId, onSelect, onAdd, onDelete }) {
  return (
    <aside className="panel left">
      <div className="panel-header">
        <h2>Biblioteca · {cards.length}</h2>
      </div>
      <div className="panel-body">
        {cards.length === 0 && (
          <div className="empty">
            Nenhuma figurinha ainda.
            <br />Clique em <b>＋ Nova</b> abaixo.
          </div>
        )}
        {cards.map(c => {
          const r = RARITIES[c.rarity];
          return (
            <div
              key={c.id}
              className={`lib-item ${activeId === c.id ? "active" : ""}`}
              onClick={() => onSelect(c.id)}
            >
              {c.image ? (
                <img className="lib-thumb" src={c.image} alt="" />
              ) : (
                <div className="lib-thumb" style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  background: r.bgBottom,
                  color: r.accent,
                  fontSize: 9,
                  fontFamily: "'Press Start 2P', monospace",
                }}>?</div>
              )}
              <div className="lib-meta">
                <div className="lib-name">{c.name}</div>
                <div className="lib-sub" style={{ color: r.accent }}>{r.label} · {c.type}</div>
              </div>
              <button
                className="lib-del"
                onClick={e => { e.stopPropagation(); onDelete(c.id); }}
                title="Excluir"
              >×</button>
            </div>
          );
        })}
      </div>
      <div className="panel-footer">
        <button className="btn primary btn-full" onClick={onAdd}>＋ Nova figurinha</button>
      </div>
    </aside>
  );
}

// ============ Editor (right sidebar) ============
function Editor({ card, onChange, onDuplicate, onExport }) {
  if (!card) {
    return (
      <aside className="panel right">
        <div className="panel-header"><h2>Editor</h2></div>
        <div className="empty">Selecione uma figurinha para editar.</div>
      </aside>
    );
  }

  const update = patch => onChange({ ...card, ...patch });

  return (
    <aside className="panel right">
      <div className="panel-header">
        <h2>Editor</h2>
        <button className="btn ghost" style={{ padding: "4px 8px", fontSize: 11 }} onClick={onDuplicate}>
          ⧉ Duplicar
        </button>
      </div>
      <div className="panel-body">

        <div className="section-title">Raridade</div>
        <Segmented
          value={card.rarity}
          onChange={v => update({ rarity: v })}
          options={RARITY_LIST.map(r => ({ value: r, label: RARITIES[r].label }))}
        />

        <div className="section-title">Tipo</div>
        <div className="seg seg-4" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {TYPES.slice(0, 4).map(t => (
            <button key={t.id} type="button" className={`seg-btn ${card.type === t.id ? "active" : ""}`}
              onClick={() => {
                const d = (window.TYPE_DEFAULTS || {})[t.id] || { photoLayout: false, hideFlag: false };
                update({
                  type: t.id,
                  stats: STAT_PRESETS[t.id].map(s => ({...s})),
                  photoLayout: d.photoLayout,
                  hideFlag: d.hideFlag,
                  subtitle: t.id === "foto" ? (card.subtitle || "") : (card.subtitle || ""),
                });
              }}>{t.label}</button>
          ))}
        </div>
        <div className="seg seg-3" style={{ marginTop: 4 }}>
          {TYPES.slice(4, 7).map(t => (
            <button key={t.id} type="button" className={`seg-btn ${card.type === t.id ? "active" : ""}`}
              onClick={() => {
                const d = (window.TYPE_DEFAULTS || {})[t.id] || { photoLayout: false, hideFlag: false };
                update({
                  type: t.id,
                  stats: STAT_PRESETS[t.id].map(s => ({...s})),
                  photoLayout: d.photoLayout,
                  hideFlag: d.hideFlag,
                });
              }}>{t.label}</button>
          ))}
        </div>

        <div className="section-title">Layout</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <label className="toggle-row">
            <input
              type="checkbox"
              checked={!!card.photoLayout}
              onChange={e => update({ photoLayout: e.target.checked })}
            />
            <div>
              <div className="toggle-title">Imagem em tela cheia</div>
              <div className="toggle-sub">A imagem preenche o card todo (estilo foto)</div>
            </div>
          </label>
          <label className="toggle-row">
            <input
              type="checkbox"
              checked={!!card.hideFlag}
              onChange={e => update({ hideFlag: e.target.checked })}
            />
            <div>
              <div className="toggle-title">Ocultar bandeira</div>
              <div className="toggle-sub">Esconde o ícone à esquerda do nome</div>
            </div>
          </label>
        </div>

        <div className="section-title">Conteúdo</div>
        <div className="field">
          <label className="field-label">Nome principal</label>
          <input
            className="input"
            value={card.name}
            onChange={e => update({ name: e.target.value })}
            style={{ fontFamily: "'Oswald', sans-serif", fontSize: 16, fontWeight: 600, letterSpacing: "0.04em" }}
          />
        </div>

        <div className="field">
          <label className="field-label">Subtítulo (opcional)</label>
          <input
            className="input"
            value={card.subtitle || ""}
            placeholder="Ex: YOKOHAMA, JAPÃO"
            onChange={e => update({ subtitle: e.target.value })}
            style={{ fontFamily: "'Oswald', sans-serif", fontSize: 13, letterSpacing: "0.06em" }}
          />
        </div>

        <div className="field">
          <Upload
            value={card.image}
            onChange={v => update({ image: v })}
            label={card.photoLayout ? "Imagem do card (tela cheia)" : "Arte central"}
            sublabel={card.photoLayout ? "Ideal: 352×240 px (ou 1056×720 · 3x)" : "PNG transparente • pixel art"}
          />
        </div>

        {!card.hideFlag && (
          <div className="field">
            <Upload
              value={card.flag}
              onChange={v => update({ flag: v })}
              label="Bandeira / ícone"
              sublabel="PNG quadrado pequeno"
            />
          </div>
        )}

        <div className="section-title">{card.photoLayout ? "Estatísticas (lista)" : "Estatísticas"}</div>
        {card.photoLayout && (
          <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 8, lineHeight: 1.4 }}>
            Use o <b>label</b> como título curto e o <b>valor</b> como frase descritiva.
          </div>
        )}
        {card.stats.map((s, i) => (
          <StatEditor
            key={i}
            stat={s}
            onChange={newStat => {
              const next = card.stats.slice();
              next[i] = newStat;
              update({ stats: next });
            }}
          />
        ))}
        <div style={{ display: "flex", gap: 6 }}>
          {card.stats.length < 4 && (
            <button
              className="btn"
              onClick={() => update({ stats: [...card.stats, { icon: "star", label: "LABEL", value: "0" }] })}
            >＋ Stat</button>
          )}
          {card.stats.length > 0 && (
            <button
              className="btn"
              onClick={() => update({ stats: card.stats.slice(0, -1) })}
            >− Stat</button>
          )}
          <button
            className="btn"
            onClick={() => update({ stats: STAT_PRESETS[card.type].map(s => ({...s})) })}
          >↻ Preset</button>
        </div>

      </div>
      <div className="panel-footer">
        <button className="btn primary btn-full" onClick={onExport}>
          ↓ Exportar PNG
        </button>
      </div>
    </aside>
  );
}

// ============ Auto-scaling wrapper ============
function CardScaler({ children, baseWidth = 400, baseHeight = 512, padding = 48 }) {
  const wrapRef = useRef(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    if (!wrapRef.current) return;
    const ro = new ResizeObserver(entries => {
      for (const e of entries) {
        const w = e.contentRect.width;
        const h = e.contentRect.height;
        const sx = (w - padding) / baseWidth;
        const sy = (h - padding) / baseHeight;
        const s = Math.min(1, Math.max(0.2, Math.min(sx, sy)));
        setScale(s);
      }
    });
    ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, [baseWidth, baseHeight, padding]);

  return (
    <div ref={wrapRef} style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", minHeight: 0 }}>
      <div
        className="card-scaler"
        style={{
          width: baseWidth,
          height: baseHeight,
          transform: `scale(${scale})`,
        }}
      >
        {children}
      </div>
    </div>
  );
}

// ============ Stage (center preview) ============
function Stage({ card, toolbar, showAllRarities, allRaritiesData }) {
  if (showAllRarities && allRaritiesData) {
    return (
      <main className="stage">
        {toolbar}
        <div className="stage-scroll">
          <div className="stage-inner" style={{ padding: 16 }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(2, 200px)",
              gap: "12px 12px",
              placeItems: "center",
              width: "max-content",
            }}>
              {RARITY_LIST.map(r => (
                <div key={r} style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                  alignItems: "center",
                  width: 200,
                }}>
                  <div style={{ width: 200, height: 256, position: "relative", overflow: "visible" }}>
                    <div style={{ transform: "scale(0.5)", transformOrigin: "top left" }}>
                      <Figurinha data={{ ...allRaritiesData, rarity: r }} />
                    </div>
                  </div>
                  <div className="stage-label">{RARITIES[r].label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    );
  }

  if (!card) {
    return (
      <main className="stage">
        {toolbar}
        <div className="stage-scroll">
          <div className="empty" style={{ maxWidth: 360 }}>
            <div style={{ fontSize: 48, marginBottom: 12 }}>🃏</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text)", marginBottom: 6 }}>
              Crie sua primeira figurinha
            </div>
            <div>Configure raridade, tipo, arte central e estatísticas. Exporte como PNG 400×512.</div>
          </div>
        </div>
      </main>
    );
  }
  return (
    <main className="stage">
      {toolbar}
      <div className="stage-scroll">
        <CardScaler>
          <Figurinha data={card} />
        </CardScaler>
      </div>
      <div style={{ padding: "8px 16px 14px", textAlign: "center" }}>
        <div className="stage-label">{card.name.toUpperCase()} · {RARITIES[card.rarity].label} · 400×512 PNG</div>
      </div>
    </main>
  );
}

// ============ Stage toolbar (inline, not floating) ============
function StageToolbar({ cards, onExportAll, onShowAllRarities, onWipe, showAllRarities }) {
  return (
    <div className="stage-toolbar">
      <button className={`btn ${showAllRarities ? "primary" : ""}`} onClick={onShowAllRarities} title="Visualizar nas 4 raridades">
        👁 4 raridades
      </button>
      <button className="btn" onClick={onWipe} title="Limpar biblioteca">
        ⌫ Limpar
      </button>
      <button
        className="btn primary"
        onClick={onExportAll}
        disabled={cards.length === 0}
      >
        ↓ Exportar todas ({cards.length})
      </button>
    </div>
  );
}

// ============ App ============
function App() {
  const [cards, setCards] = useState(() => {
    const loaded = loadLib();
    if (loaded?.cards?.length) return loaded.cards;
    return [makeDefault("camisa", "comum")];
  });
  const [activeId, setActiveId] = useState(() => {
    const loaded = loadLib();
    return loaded?.activeId || null;
  });
  const [toast, setToast] = useState(null);
  const [showAllRarities, setShowAllRarities] = useState(false);

  // initialize activeId if absent
  useEffect(() => {
    if (!activeId && cards.length) setActiveId(cards[0].id);
  }, [activeId, cards]);

  // persist
  useEffect(() => {
    saveLib({ cards, activeId });
  }, [cards, activeId]);

  const active = useMemo(() => cards.find(c => c.id === activeId), [cards, activeId]);

  const flashToast = msg => {
    setToast(msg);
    setTimeout(() => setToast(null), 2200);
  };

  const handleChange = updated => {
    setCards(cs => cs.map(c => c.id === updated.id ? updated : c));
  };

  const handleAdd = () => {
    const last = cards[cards.length - 1];
    const seed = last ? { ...last, id: Math.random().toString(36).slice(2, 10), name: "NOVA" } : makeDefault();
    setCards(cs => [...cs, seed]);
    setActiveId(seed.id);
  };

  const handleDuplicate = () => {
    if (!active) return;
    const copy = { ...active, id: Math.random().toString(36).slice(2, 10), name: active.name + " ·2" };
    setCards(cs => [...cs, copy]);
    setActiveId(copy.id);
    flashToast("Figurinha duplicada");
  };

  const handleDelete = id => {
    setCards(cs => cs.filter(c => c.id !== id));
    if (activeId === id) setActiveId(null);
  };

  const handleExport = async () => {
    if (!active) return;
    const node = document.getElementById(`exp-${active.id}`);
    if (!node) return;
    const safe = active.name.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
    try {
      flashToast("Exportando…");
      await exportCardPng(node, `${safe || "card"}_${active.rarity}_${active.type}.png`);
      flashToast("PNG salvo");
    } catch (e) {
      flashToast("Erro ao exportar");
      console.error(e);
    }
  };

  const handleExportAll = async () => {
    try {
      flashToast(`Exportando ${cards.length} figurinhas…`);
      await exportAllZip(cards);
      flashToast("ZIP gerado");
    } catch (e) {
      flashToast("Erro ao exportar todas");
      console.error(e);
    }
  };

  const handleWipe = () => {
    if (!confirm("Limpar TODA a biblioteca? Esta ação não pode ser desfeita.")) return;
    setCards([makeDefault("camisa", "comum")]);
    setActiveId(null);
  };

  return (
    <>
      <div className="app">
        <Library
          cards={cards}
          activeId={activeId}
          onSelect={setActiveId}
          onAdd={handleAdd}
          onDelete={handleDelete}
        />

        <Stage
          card={active}
          showAllRarities={showAllRarities}
          allRaritiesData={active}
          toolbar={
            <StageToolbar
              cards={cards}
              onExportAll={handleExportAll}
              onShowAllRarities={() => setShowAllRarities(v => !v)}
              onWipe={handleWipe}
              showAllRarities={showAllRarities}
            />
          }
        />

        <Editor
          card={active}
          onChange={handleChange}
          onDuplicate={handleDuplicate}
          onExport={handleExport}
        />
      </div>

      {/* Hidden export nodes (always rendered at exact 400x512 with no transforms) */}
      <div style={{ position: "fixed", top: -10000, left: -10000, pointerEvents: "none" }} aria-hidden>
        {cards.map(c => (
          <div key={c.id} id={`exp-${c.id}`}>
            <Figurinha data={c} ariaId={`exp-${c.id}-inner`} />
          </div>
        ))}
      </div>

      {toast && <div className="toast">{toast}</div>}
    </>
  );
}

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