// Root app — manages tasks, theme, and assembles Gantt + Editor

const THEMES_FALLBACK = [
  { id: 'farina', label: 'Farina' },
  { id: 'editorial', label: 'Editorial' },
  { id: 'studio', label: 'Studio' },
  { id: 'console', label: 'Console' },
  { id: 'brutalist', label: 'Brutalist' },
  { id: 'midnight', label: 'Midnight' },
  { id: 'neon', label: 'Neon' },
  { id: 'sakura', label: 'Sakura' },
  { id: 'ocean', label: 'Ocean' },
  { id: 'retro', label: 'Retro' },
  { id: 'forest', label: 'Forest' },
];

const SAMPLE_TASKS = [
  { id: 't1', name: 'Ricerca utenti', start: isoOffset(-12), end: isoOffset(-2), color: '#d97757', progress: 100 },
  { id: 't2', name: 'Wireframe', start: isoOffset(-4), end: isoOffset(6), color: '#4f6d7a', progress: 70 },
  { id: 't3', name: 'Design system', start: isoOffset(2), end: isoOffset(18), color: '#8a9a5b', progress: 30 },
  { id: 't4', name: 'Prototipo hi-fi', start: isoOffset(10), end: isoOffset(28), color: '#c9a76b', progress: 10 },
  { id: 't5', name: 'Test e iterazioni', start: isoOffset(24), end: isoOffset(38), color: '#7d6b91', progress: 0 },
  { id: 't6', name: 'Handoff sviluppo', start: isoOffset(34), end: isoOffset(44), color: '#c46e6e', progress: 0 },
];

function isoOffset(days) {
  return window.fmtISO(window.addDays(new Date(), days));
}

function getSwatchesFromData(themeData, themeId) {
  const found = themeData.find((t) => t.id === themeId);
  if (!found || !found.vars) return [];
  return [1, 2, 3, 4, 5, 6, 7, 8]
    .map((i) => (found.vars[`--swatch-${i}`] || '').trim())
    .filter(Boolean);
}

function applyThemeVars(el, themeData, themeId) {
  if (!el) return;
  const style = el.style;
  const allVarNames = new Set(
    themeData.flatMap((t) => Object.keys(t.vars || {}))
  );
  allVarNames.forEach((name) => style.removeProperty(name));
  const found = themeData.find((t) => t.id === themeId);
  if (found && found.vars) {
    Object.entries(found.vars).forEach(([k, v]) => style.setProperty(k, v));
  }
}

function App() {
  const [themeData, setThemeData] = React.useState(THEMES_FALLBACK);
  const [theme, setTheme] = React.useState(() => {
    try {
      const saved = localStorage.getItem('gantt-theme');
      if (saved && THEMES_FALLBACK.some((t) => t.id === saved)) return saved;
    } catch {}
    return 'editorial';
  });

  const themedRef = React.useRef(null);

  React.useEffect(() => {
    fetch('themes.json')
      .then((r) => r.json())
      .then((data) => {
        if (data && Array.isArray(data.themes)) {
          setThemeData(data.themes);
        }
      })
      .catch(() => {});
  }, []);
  const [tasks, setTasks] = React.useState(() => {
    try {
      const saved = localStorage.getItem('gantt-tasks');
      if (saved) return JSON.parse(saved);
    } catch {}
    return SAMPLE_TASKS;
  });
  const [selectedId, setSelectedId] = React.useState(null);
  const [editingId, setEditingId] = React.useState(null);
  const [swatches, setSwatches] = React.useState([]);
  const [exporting, setExporting] = React.useState(false);
  const [exportFlash, setExportFlash] = React.useState(null);
  const [showSidebar, setShowSidebar] = React.useState(() => {
    try {
      const v = localStorage.getItem('gantt-show-sidebar');
      return v === null ? true : v === 'true';
    } catch { return true; }
  });
  const [showSettings, setShowSettings] = React.useState(false);
  const [paddingBefore, setPaddingBefore] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-padding-before'); return v !== null ? Number(v) : 5; } catch { return 5; }
  });
  const [paddingAfter, setPaddingAfter] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-padding-after'); return v !== null ? Number(v) : 5; } catch { return 5; }
  });
  const [showTodayLine, setShowTodayLine] = React.useState(() => {
    try { return localStorage.getItem('gantt-show-todayline') === 'true'; } catch { return false; }
  });
  const [showWeekends, setShowWeekends] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-show-weekends'); return v === null ? true : v === 'true'; } catch { return true; }
  });
  const [showDayGrid, setShowDayGrid] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-show-daygrid'); return v === null ? true : v === 'true'; } catch { return true; }
  });
  const [showRowLines, setShowRowLines] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-show-rowlines'); return v === null ? true : v === 'true'; } catch { return true; }
  });
  const [barContent, setBarContent] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-bar-content'); return v ? JSON.parse(v) : ['title']; } catch { return ['title']; }
  });
  const [rowHeight, setRowHeight] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-row-height'); return v ? Number(v) : 48; } catch { return 48; }
  });
  const [barHeight, setBarHeight] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-bar-height'); return v ? Number(v) : 32; } catch { return 32; }
  });
  const [timelineView, setTimelineView] = React.useState(() => {
    try { const v = localStorage.getItem('gantt-timeline-view'); return v === 'weeks' ? 'weeks' : 'days'; } catch { return 'days'; }
  });

  const ganttRef = React.useRef(null);
  const cardRef = React.useRef(null);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-show-sidebar', String(showSidebar)); } catch {}
  }, [showSidebar]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-tasks', JSON.stringify(tasks)); } catch {}
  }, [tasks]);

  React.useLayoutEffect(() => {
    applyThemeVars(themedRef.current, themeData, theme);
  }, [theme, themeData]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-theme', theme); } catch {}
    setSwatches(getSwatchesFromData(themeData, theme));
  }, [theme, themeData]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-padding-before', String(paddingBefore)); } catch {}
  }, [paddingBefore]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-padding-after', String(paddingAfter)); } catch {}
  }, [paddingAfter]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-show-todayline', String(showTodayLine)); } catch {}
  }, [showTodayLine]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-show-weekends', String(showWeekends)); } catch {}
  }, [showWeekends]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-show-daygrid', String(showDayGrid)); } catch {}
  }, [showDayGrid]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-show-rowlines', String(showRowLines)); } catch {}
  }, [showRowLines]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-bar-content', JSON.stringify(barContent)); } catch {}
  }, [barContent]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-row-height', String(rowHeight)); } catch {}
  }, [rowHeight]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-bar-height', String(barHeight)); } catch {}
  }, [barHeight]);

  React.useEffect(() => {
    try { localStorage.setItem('gantt-timeline-view', timelineView); } catch {}
  }, [timelineView]);

  const toggleBarContent = (key) => {
    setBarContent((prev) =>
      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
    );
  };

  const handleSelectTask = (id) => {
    setSelectedId(id);
    if (id !== null) {
      setShowSettings(false);
      if (editingId !== null) setEditingId(id);
    }
  };

  const handleEditTask = (id) => {
    setSelectedId(id);
    setEditingId(id);
    setShowSettings(false);
  };

  const handleAdd = () => {
    let start = window.fmtISO(new Date());
    let end = window.fmtISO(window.addDays(new Date(), 7));
    if (tasks.length > 0) {
      const latest = tasks.reduce((acc, t) => (t.end > acc ? t.end : acc), tasks[0].end);
      start = window.fmtISO(window.addDays(window.parseISO(latest), -2));
      end = window.fmtISO(window.addDays(window.parseISO(latest), 8));
    }
    const palette = getSwatchesFromData(themeData, theme);
    const color = palette[tasks.length % palette.length] || '#d97757';
    const newTask = {
      id: `t${Date.now()}`,
      name: `Nuova attività ${tasks.length + 1}`,
      start,
      end,
      color,
      progress: 0,
    };
    setTasks([...tasks, newTask]);
    setSelectedId(newTask.id);
  };

  const handleUpdate = (id, patch) => {
    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, ...patch } : t)));
  };

  const handleReorder = (fromId, toIndex) => {
    setTasks((prev) => {
      const fromIndex = prev.findIndex((t) => t.id === fromId);
      if (fromIndex === -1) return prev;
      const insertAt = toIndex > fromIndex ? toIndex - 1 : toIndex;
      if (insertAt === fromIndex) return prev;
      const next = [...prev];
      const [moved] = next.splice(fromIndex, 1);
      next.splice(insertAt, 0, moved);
      return next;
    });
  };

  const handleDelete = (id) => {
    setTasks((prev) => prev.filter((t) => t.id !== id));
    setSelectedId(null);
    setEditingId(null);
  };

  const handleClearAll = () => {
    if (tasks.length === 0) return;
    if (confirm('Eliminare tutte le attività?')) {
      setTasks([]);
      setSelectedId(null);
    }
  };

  const handleReset = () => {
    setTasks(SAMPLE_TASKS.map((t) => ({ ...t })));
    setSelectedId(null);
  };

  const handleExport = async (format) => {
    if (!cardRef.current || tasks.length === 0) return;
    setExporting(true);
    setSelectedId(null);

    await new Promise((r) => requestAnimationFrame(r));
    await new Promise((r) => setTimeout(r, 80));

    const node = cardRef.current;

    const chartEl = node.querySelector('.gantt-chart');
    const sidebarEl = node.querySelector('.gantt-sidebar');
    const prevChartOverflow = chartEl ? chartEl.style.overflow : '';
    const prevSidebarOverflow = sidebarEl ? sidebarEl.style.overflow : '';
    const prevHeight = node.style.height;
    const naturalHeight = Math.max(
      chartEl ? chartEl.scrollHeight : 0,
      sidebarEl ? sidebarEl.scrollHeight : 0
    );

    if (chartEl) chartEl.style.overflow = 'visible';
    if (sidebarEl) sidebarEl.style.overflow = 'visible';
    node.style.height = `${Math.max(naturalHeight, node.clientHeight)}px`;

    try {
      const bg = getComputedStyle(node).getPropertyValue('--bg').trim() || '#ffffff';
      const opts = {
        backgroundColor: bg,
        pixelRatio: 2,
        cacheBust: true,
        style: { transform: 'none' },
      };
      let dataUrl;
      if (format === 'jpg') {
        dataUrl = await window.htmlToImage.toJpeg(node, { ...opts, quality: 0.95 });
      } else {
        dataUrl = await window.htmlToImage.toPng(node, opts);
      }
      if (format === 'copy') {
        const blob = await (await fetch(dataUrl)).blob();
        await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
        setExportFlash('Copiato!');
        setTimeout(() => setExportFlash(null), 1800);
      } else {
        const a = document.createElement('a');
        a.href = dataUrl;
        a.download = `gantt-${theme}-${new Date().toISOString().slice(0, 10)}.${format}`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        setExportFlash('Esportato!');
        setTimeout(() => setExportFlash(null), 1800);
      }
    } catch (err) {
      console.error('Export error', err);
      setExportFlash('Errore export');
      setTimeout(() => setExportFlash(null), 2200);
    } finally {
      if (chartEl) chartEl.style.overflow = prevChartOverflow;
      if (sidebarEl) sidebarEl.style.overflow = prevSidebarOverflow;
      node.style.height = prevHeight;
      setExporting(false);
    }
  };

  const selectedTask = tasks.find((t) => t.id === selectedId);
  const editingTask = tasks.find((t) => t.id === editingId);

  return (
    <div className="app">
      <div className="topbar">
        <div className="brand">
          <span className="brand-mark">Gantt</span>
          <span className="brand-sub">Builder · v1</span>
        </div>
        <div className="topbar-actions">
          <select
            className="theme-select"
            value={theme}
            onChange={(e) => setTheme(e.target.value)}
            title="Tema"
            aria-label="Tema"
          >
            {themeData.map((t) => (
              <option key={t.id} value={t.id}>{t.label}</option>
            ))}
          </select>
          <ExportMenu onExport={handleExport} disabled={tasks.length === 0 || exporting} exporting={exporting} flash={exportFlash} />
          <button className="btn btn-primary" type="button" onClick={handleAdd}>
            <window.PlusIcon /> Aggiungi attività
          </button>
          <div className="topbar-sep"></div>
          <button
            className={`btn btn-icon${showSettings ? ' active' : ''}`}
            type="button"
            onClick={() => { setShowSettings((v) => !v); setSelectedId(null); setEditingId(null); }}
            title="Impostazioni"
            aria-label="Impostazioni"
          >
            <SettingsIcon />
          </button>
        </div>
      </div>

      <div className="main-area">
        <div className="stage">
          <div className="themed" ref={themedRef}>
            <div className="gantt-card" ref={cardRef}>
              <window.Gantt
                tasks={tasks}
                selectedId={selectedId}
                onSelectTask={handleSelectTask}
                onUpdateTask={handleUpdate}
                onAddTask={handleAdd}
                onEditTask={handleEditTask}
                onReorderTasks={handleReorder}
                exportRef={ganttRef}
                showSidebar={showSidebar}
                paddingBefore={paddingBefore}
                paddingAfter={paddingAfter}
                showTodayLine={showTodayLine}
                showWeekends={showWeekends}
                showDayGrid={showDayGrid}
                showRowLines={showRowLines}
                barContent={barContent}
                rowHeight={rowHeight}
                barHeight={barHeight}
                theme={theme}
                timelineView={timelineView}
              />
            </div>
          </div>
        </div>

        {editingTask && !exporting && (
          <div className="panel-shell">
            <window.Editor
              task={editingTask}
              tasks={tasks}
              swatches={swatches}
              onChange={handleUpdate}
              onClose={() => setEditingId(null)}
              onDelete={handleDelete}
            />
          </div>
        )}

        {showSettings && (
          <div className="panel-shell panel-shell--settings">
            <SettingsPanel
              onClose={() => setShowSettings(false)}
              showSidebar={showSidebar}
              onToggleSidebar={setShowSidebar}
              paddingBefore={paddingBefore}
              onChangePaddingBefore={(v) => setPaddingBefore(Math.max(0, Math.min(90, v)))}
              paddingAfter={paddingAfter}
              onChangePaddingAfter={(v) => setPaddingAfter(Math.max(0, Math.min(90, v)))}
              showTodayLine={showTodayLine}
              onToggleTodayLine={setShowTodayLine}
              showWeekends={showWeekends}
              onToggleWeekends={setShowWeekends}
              showDayGrid={showDayGrid}
              onToggleDayGrid={setShowDayGrid}
              showRowLines={showRowLines}
              onToggleRowLines={setShowRowLines}
              barContent={barContent}
              onToggleBarContent={toggleBarContent}
              rowHeight={rowHeight}
              onChangeRowHeight={(v) => setRowHeight(Math.max(32, Math.min(96, v)))}
              barHeight={barHeight}
              onChangeBarHeight={(v) => setBarHeight(Math.max(16, Math.min(rowHeight - 8, v)))}
              onReset={handleReset}
              onClearAll={handleClearAll}
              timelineView={timelineView}
              onChangeTimelineView={setTimelineView}
            />
          </div>
        )}
      </div>

      {exporting && (
        <div className="export-overlay">
          <div className="export-spinner"></div>
          <div className="export-msg">Generazione immagine...</div>
        </div>
      )}
    </div>
  );
}

function Toggle({ checked, onChange, label }) {
  return (
    <label className="toggle">
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} aria-label={label} />
      <span className="toggle-track"><span className="toggle-thumb"></span></span>
    </label>
  );
}

function SettingsPanel({ onClose, showSidebar, onToggleSidebar, paddingBefore, onChangePaddingBefore, paddingAfter, onChangePaddingAfter, showTodayLine, onToggleTodayLine, showWeekends, onToggleWeekends, showDayGrid, onToggleDayGrid, showRowLines, onToggleRowLines, barContent, onToggleBarContent, rowHeight, onChangeRowHeight, barHeight, onChangeBarHeight, onReset, onClearAll, timelineView, onChangeTimelineView }) {
  return (
    <div className="settings-panel open">
      <div className="editor-header">
        <div className="editor-title">Impostazioni</div>
        <button className="close-btn" type="button" onClick={onClose} aria-label="Chiudi">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M3 3L13 13M13 3L3 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          </svg>
        </button>
      </div>
      <div className="settings-body">
        <div className="settings-section">
          <div className="settings-section-label">Dati</div>
          <div className="settings-actions">
            <button className="btn settings-action-btn" type="button" onClick={onReset}>Carica esempio</button>
            <button className="btn btn-danger settings-action-btn" type="button" onClick={onClearAll}>Pulisci tutto</button>
          </div>
        </div>
        <div className="settings-sep"></div>
        <div className="settings-section">
          <div className="settings-section-label">Visualizzazione</div>
          <div className="settings-toggle-row">
            <span>Barra attività</span>
            <Toggle checked={showSidebar} onChange={onToggleSidebar} label="Barra attività" />
          </div>
          <div className="settings-toggle-row">
            <span>Vista settimane</span>
            <Toggle checked={timelineView === 'weeks'} onChange={(v) => onChangeTimelineView(v ? 'weeks' : 'days')} label="Vista settimane" />
          </div>
          <div className="settings-toggle-row">
            <span>Griglia giorni</span>
            <Toggle checked={showDayGrid} onChange={onToggleDayGrid} label="Griglia giorni" />
          </div>
          <div className="settings-toggle-row">
            <span>Sabato e domenica</span>
            <Toggle checked={showWeekends} onChange={onToggleWeekends} label="Sabato e domenica" />
          </div>
          <div className="settings-toggle-row">
            <span>Riga giorno corrente</span>
            <Toggle checked={showTodayLine} onChange={onToggleTodayLine} label="Riga giorno corrente" />
          </div>
          <div className="settings-toggle-row">
            <span>Linee orizzontali</span>
            <Toggle checked={showRowLines} onChange={onToggleRowLines} label="Linee orizzontali" />
          </div>
        </div>
        <div className="settings-sep"></div>
        <div className="settings-section">
          <div className="settings-section-label">Dimensioni</div>
          <div className="settings-num-row">
            <span className="settings-num-label">Altezza riga</span>
            <input type="number" className="num-input" min="32" max="96" step="4"
              value={rowHeight} aria-label="Altezza riga"
              onChange={(e) => onChangeRowHeight(Number(e.target.value))} />
            <span className="settings-num-unit">px</span>
          </div>
          <div className="settings-num-row">
            <span className="settings-num-label">Altezza segmento</span>
            <input type="number" className="num-input" min="16" max="72" step="2"
              value={barHeight} aria-label="Altezza segmento"
              onChange={(e) => onChangeBarHeight(Number(e.target.value))} />
            <span className="settings-num-unit">px</span>
          </div>
        </div>
        <div className="settings-sep"></div>
        <div className="settings-section">
          <div className="settings-section-label">Contenuto segmenti</div>
          <div className="settings-toggle-row">
            <span>Titolo</span>
            <Toggle checked={barContent.includes('title')} onChange={() => onToggleBarContent('title')} label="Titolo" />
          </div>
          <div className="settings-toggle-row">
            <span>Data inizio</span>
            <Toggle checked={barContent.includes('start')} onChange={() => onToggleBarContent('start')} label="Data inizio" />
          </div>
          <div className="settings-toggle-row">
            <span>Data fine</span>
            <Toggle checked={barContent.includes('end')} onChange={() => onToggleBarContent('end')} label="Data fine" />
          </div>
        </div>
        <div className="settings-sep"></div>
        <div className="settings-section">
          <div className="settings-section-label">Margini timeline</div>
          <div className="settings-num-row">
            <span className="settings-num-label">Prima</span>
            <input
              type="number"
              className="num-input"
              min="0"
              max="90"
              value={paddingBefore}
              aria-label="Giorni prima"
              onChange={(e) => onChangePaddingBefore(Number(e.target.value))}
            />
            <span className="settings-num-unit">giorni</span>
          </div>
          <div className="settings-num-row">
            <span className="settings-num-label">Dopo</span>
            <input
              type="number"
              className="num-input"
              min="0"
              max="90"
              value={paddingAfter}
              aria-label="Giorni dopo"
              onChange={(e) => onChangePaddingAfter(Number(e.target.value))}
            />
            <span className="settings-num-unit">giorni</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExportMenu({ onExport, disabled, exporting, flash }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [open]);

  return (
    <div className="export-menu" ref={ref}>
      <button
        className="btn"
        type="button"
        disabled={disabled}
        onClick={() => setOpen((v) => !v)}
        title="Esporta come immagine"
      >
        <window.DownloadIcon /> {flash ? flash : exporting ? 'Esporto...' : 'Esporta'}
      </button>
      {open && !disabled && (
        <div className="export-dropdown">
          <button className="export-option" type="button" onClick={() => { setOpen(false); onExport('png'); }}>
            <span className="opt-label">PNG</span>
            <span className="opt-sub">qualità massima</span>
          </button>
          <button className="export-option" type="button" onClick={() => { setOpen(false); onExport('jpg'); }}>
            <span className="opt-label">JPG</span>
            <span className="opt-sub">file più leggero</span>
          </button>
          <button className="export-option" type="button" onClick={() => { setOpen(false); onExport('copy'); }}>
            <span className="opt-label"><window.CopyIcon /> Copia Immagine</span>
            <span className="opt-sub">negli appunti</span>
          </button>
        </div>
      )}
    </div>
  );
}

function SidebarIcon({ open }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="1.5" y="2" width="11" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.4" />
      <line x1="5" y1="2.5" x2="5" y2="11.5" stroke="currentColor" strokeWidth="1.4" />
      {open && <rect x="1.5" y="2" width="3.5" height="10" fill="currentColor" opacity="0.25" />}
    </svg>
  );
}

function SettingsIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
      <path d="M6.07 1.5a.5.5 0 0 0-.49.4l-.22 1.1a4.5 4.5 0 0 0-.9.52l-1.06-.36a.5.5 0 0 0-.6.23L1.8 4.61a.5.5 0 0 0 .1.63l.85.73a4.6 4.6 0 0 0 0 1.06l-.85.73a.5.5 0 0 0-.1.63l1 1.72a.5.5 0 0 0 .6.23l1.06-.36c.28.2.58.38.9.52l.22 1.1a.5.5 0 0 0 .49.4h2a.5.5 0 0 0 .49-.4l.22-1.1c.32-.14.62-.32.9-.52l1.06.36a.5.5 0 0 0 .6-.23l1-1.72a.5.5 0 0 0-.1-.63l-.85-.73a4.6 4.6 0 0 0 0-1.06l.85-.73a.5.5 0 0 0 .1-.63l-1-1.72a.5.5 0 0 0-.6-.23l-1.06.36a4.5 4.5 0 0 0-.9-.52l-.22-1.1A.5.5 0 0 0 8.07 1.5h-2ZM7.07 5.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z" stroke="currentColor" strokeWidth="1" fill="none" strokeLinejoin="round"/>
    </svg>
  );
}

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