// Tools: actual utilities for 3D printing. Filament calculator is the main one.

function ToolsSection() {
  const [openTool, setOpenTool] = React.useState('filament');

  const tools = [
    { id: 'filament',   name: 'Filament calculator', desc: 'Work out how much filament a print will eat before you start it.',       icon: 'Scale' },
    { id: 'time',       name: 'Print-time estimator', desc: 'Rough print time from volume, speed, and layer height.',                 icon: 'Clock' },
    { id: 'cost',       name: 'Cost per print',       desc: 'What the thing actually costs — filament, electricity, wear.',           icon: 'PoundSterling' },
    { id: 'scale',      name: 'Resize & scale',       desc: 'Scale a model and see how filament, time, and strength change with it.', icon: 'Maximize2' },
  ];

  return (
    <section id="tools-section" className="mx-auto max-w-[1200px] px-6 lg:px-12 py-24" style={{ borderTop: '1px solid var(--line-1)' }}>
      <SectionHead
        eyebrow="Tools"
        title="Utilities for printing."
        subtitle="Small web tools I built because I got tired of opening a calculator. All free, all run in your browser, nothing gets uploaded."
      />

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Tool picker */}
        <div className="lg:col-span-4 flex flex-col gap-3">
          {tools.map(t => (
            <ToolPickerCard key={t.id} {...t} active={openTool === t.id} onClick={() => setOpenTool(t.id)} />
          ))}
        </div>

        {/* Active tool */}
        <div className="lg:col-span-8">
          <div style={{
            background: 'var(--bg-2)',
            border: '1px solid var(--line-1)',
            borderRadius: 'var(--radius-lg)',
            padding: 24,
            minHeight: 520,
          }}>
            {openTool === 'filament' && <FilamentCalculator />}
            {openTool === 'time' &&     <TimeEstimator />}
            {openTool === 'cost' &&     <CostCalculator />}
            {openTool === 'scale' &&    <ScaleTool />}
          </div>
        </div>
      </div>
    </section>
  );
}

function ToolPickerCard({ name, desc, icon, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  const bd = active ? 'var(--brand-pink)' : (hover ? 'var(--brand-pink-line)' : 'var(--line-1)');
  const bg = active ? 'var(--brand-pink-dim)' : (hover ? 'var(--bg-3)' : 'var(--bg-2)');
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'left', display: 'flex', gap: 14, alignItems: 'flex-start',
        padding: 16, borderRadius: 'var(--radius-md)',
        border: `1px solid ${bd}`, background: bg, cursor: 'pointer',
        transition: 'all 200ms cubic-bezier(0.16,1,0.3,1)',
      }}
    >
      <div style={{
        width: 40, height: 40, borderRadius: 8, flexShrink: 0,
        background: active ? 'var(--brand-pink)' : 'var(--bg-3)',
        color: active ? '#0a0a0b' : 'var(--brand-pink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <LucideIcon name={icon} size={20} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
          {name}
          {active && <LucideIcon name="ArrowRight" size={14} style={{ color: 'var(--brand-pink)' }} />}
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5 }}>{desc}</div>
      </div>
    </button>
  );
}

/* -------------------- Filament Calculator -------------------- */

function FilamentCalculator() {
  const [ftypes, setFtypes] = React.useState([
    { id: 1, name: 'PLA',  cost: 18.99, color: '#f7a4a2' },
    { id: 2, name: 'PETG', cost: 22.50, color: '#7ed6a5' },
    { id: 3, name: 'ABS',  cost: 20.00, color: '#f5c971' },
    { id: 4, name: 'TPU',  cost: 35.00, color: '#c98bff' },
  ]);
  const [prints, setPrints] = React.useState([
    { id: 1, name: '', weight: '', ftId: 1 },
  ]);
  const [nextFtId, setNextFtId] = React.useState(5);
  const [nextPlId, setNextPlId] = React.useState(2);
  const [spool750, setSpool750] = React.useState(false);

  const spoolG = spool750 ? 750 : 1000;

  const addFt = () => {
    const cols = ['#e91e63', '#9c27b0', '#00bcd4', '#8bc34a', '#ffc107', '#ff9800'];
    setFtypes(prev => [...prev, { id: nextFtId, name: '', cost: 20.00, color: cols[nextFtId % cols.length] }]);
    setNextFtId(n => n + 1);
  };
  const delFt = (id) => {
    if (ftypes.length <= 1) return;
    const fallback = ftypes.find(f => f.id !== id)?.id;
    setFtypes(prev => prev.filter(f => f.id !== id));
    setPrints(prev => prev.map(p => p.ftId === id ? { ...p, ftId: fallback } : p));
  };
  const setFt = (id, key, val) => setFtypes(prev => prev.map(f => f.id === id ? { ...f, [key]: val } : f));

  const addPl = () => {
    setPrints(prev => [...prev, { id: nextPlId, name: '', weight: '', ftId: ftypes[0]?.id || 1 }]);
    setNextPlId(n => n + 1);
  };
  const delPl = (id) => setPrints(prev => prev.filter(p => p.id !== id));
  const setPl = (id, key, val) => setPrints(prev => prev.map(p => p.id === id ? { ...p, [key]: val } : p));

  const summary = React.useMemo(() => {
    const map = {};
    ftypes.forEach(ft => { map[ft.id] = { ft, g: 0, cost: 0 }; });
    let totalG = 0, totalCost = 0;
    prints.forEach(p => {
      const w = parseFloat(p.weight) || 0;
      const ft = ftypes.find(f => f.id === p.ftId);
      if (ft && map[ft.id] !== undefined) {
        map[ft.id].g    += w;
        map[ft.id].cost += (w / 1000) * ft.cost;
        totalG    += w;
        totalCost += (w / 1000) * ft.cost;
      }
    });
    let totalSpools = 0;
    Object.values(map).forEach(t => { if (t.g > 0) totalSpools += Math.ceil(t.g / spoolG); });
    return { totalG, totalCost, totalSpools, byType: Object.values(map).filter(t => t.g > 0) };
  }, [ftypes, prints, spoolG]);

  const lineCost = (p) => {
    const w = parseFloat(p.weight) || 0;
    const ft = ftypes.find(f => f.id === p.ftId);
    if (!ft || w === 0) return '—';
    return '£' + ((w / 1000) * ft.cost).toFixed(2);
  };

  const panelStyle = { border: '1px solid var(--line-1)', borderRadius: 'var(--radius-md)', overflow: 'hidden', marginBottom: 14 };
  const panelHeadStyle = {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '11px 16px', background: 'var(--bg-1)', borderBottom: '1px solid var(--line-1)',
  };
  const panelBodyStyle = { padding: 16, background: 'var(--bg-2)' };
  const monoLabel = { fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-3)', display: 'block', marginBottom: 5 };
  const inputBase = {
    background: 'var(--bg-3)', border: '1px solid var(--line-1)',
    color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 13,
    padding: '7px 10px', borderRadius: 5, width: '100%', outline: 'none',
    transition: 'border-color 150ms',
  };
  const panelPill = {
    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.08em',
    color: 'var(--brand-pink)', border: '1px solid var(--brand-pink-line)',
    padding: '3px 8px', borderRadius: 999,
  };
  const panelTitle = { fontSize: 12, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-1)' };

  return (
    <div>
      <ToolHeader name="Filament calculator" icon="Scale" tag="Live" />

      <div style={{ marginTop: 20 }}>

        {/* 01 — Filament Library */}
        <div style={panelStyle}>
          <div style={panelHeadStyle}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={panelPill}>01</span>
              <span style={panelTitle}>Filament Library</span>
            </div>
            <button
              onClick={addFt}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '7px 14px', borderRadius: 5, fontSize: 12, fontWeight: 600,
                fontFamily: 'var(--font-body)',
                background: 'var(--brand-pink)', color: '#0a0a0b', border: 'none', cursor: 'pointer',
                transition: 'background 150ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--brand-pink-hover)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'var(--brand-pink)'; }}
            >+ Add Type</button>
          </div>
          <div style={{ ...panelBodyStyle, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {ftypes.map(ft => (
              <div key={ft.id} style={{
                display: 'grid', gridTemplateColumns: '1.6fr 1fr auto auto',
                gap: 10, alignItems: 'end',
                padding: 14, background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 7,
              }}>
                <div>
                  <span style={monoLabel}>Type Name</span>
                  <input type="text" value={ft.name} placeholder="e.g. PLA"
                    onChange={e => setFt(ft.id, 'name', e.target.value)}
                    style={inputBase}
                    onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
                    onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
                  />
                </div>
                <div>
                  <span style={monoLabel}>Cost / kg (£)</span>
                  <input type="number" value={ft.cost} min="0" step="0.01" placeholder="0.00"
                    onChange={e => setFt(ft.id, 'cost', parseFloat(e.target.value) || 0)}
                    style={{ ...inputBase, textAlign: 'right' }}
                    onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
                    onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
                  />
                </div>
                <div>
                  <span style={monoLabel}>Colour</span>
                  <div style={{ position: 'relative' }}>
                    <div
                      style={{ width: 34, height: 34, borderRadius: 6, background: ft.color, border: '2px solid var(--line-2)', cursor: 'pointer', transition: 'transform 150ms' }}
                      onClick={() => document.getElementById(`cp-${ft.id}`)?.click()}
                      onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.1)'; }}
                      onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
                      title="Pick colour"
                    />
                    <input type="color" id={`cp-${ft.id}`} value={ft.color}
                      onChange={e => setFt(ft.id, 'color', e.target.value)}
                      style={{ position: 'absolute', opacity: 0, width: 1, height: 1, pointerEvents: 'none' }}
                    />
                  </div>
                </div>
                <button
                  onClick={() => delFt(ft.id)}
                  disabled={ftypes.length <= 1}
                  style={{
                    background: 'transparent', color: 'var(--fg-4)', border: '1px solid transparent',
                    padding: '7px 9px', fontSize: 14, borderRadius: 4,
                    cursor: ftypes.length <= 1 ? 'not-allowed' : 'pointer', alignSelf: 'flex-end',
                    transition: 'all 150ms',
                  }}
                  onMouseEnter={e => { if (ftypes.length > 1) { e.currentTarget.style.color = '#ff4060'; e.currentTarget.style.background = 'rgba(255,64,96,0.1)'; } }}
                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--fg-4)'; e.currentTarget.style.background = 'transparent'; }}
                >✕</button>
              </div>
            ))}
          </div>
        </div>

        {/* 02 — Print Queue */}
        <div style={panelStyle}>
          <div style={panelHeadStyle}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={panelPill}>02</span>
              <span style={panelTitle}>Print Queue</span>
            </div>
          </div>
          <div style={panelBodyStyle}>
            <div style={{
              display: 'grid', gridTemplateColumns: '2fr 1fr 1.4fr 80px 36px',
              gap: 8, padding: '4px 10px',
              fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.15em',
              textTransform: 'uppercase', color: 'var(--fg-4)', marginBottom: 6,
            }}>
              <span>STL Name</span>
              <span style={{ textAlign: 'right' }}>Weight (g)</span>
              <span>Filament</span>
              <span style={{ textAlign: 'right' }}>Cost</span>
              <span />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {prints.length === 0 ? (
                <div style={{ padding: 24, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>
                  // no prints added yet
                </div>
              ) : prints.map(p => {
                const ft = ftypes.find(f => f.id === p.ftId) || ftypes[0];
                return (
                  <div key={p.id} style={{
                    display: 'grid', gridTemplateColumns: '2fr 1fr 1.4fr 80px 36px',
                    gap: 8, alignItems: 'center',
                    padding: '8px 10px', background: 'var(--bg-1)',
                    border: '1px solid var(--line-1)', borderRadius: 7,
                  }}>
                    <input type="text" value={p.name} placeholder="STL name…"
                      onChange={e => setPl(p.id, 'name', e.target.value)}
                      style={{ ...inputBase, padding: '6px 8px' }}
                      onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
                      onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
                    />
                    <input type="number" value={p.weight} min="0" step="0.1" placeholder="0"
                      onChange={e => setPl(p.id, 'weight', e.target.value)}
                      style={{ ...inputBase, padding: '6px 8px', textAlign: 'right' }}
                      onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
                      onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
                    />
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <span style={{ width: 9, height: 9, borderRadius: '50%', background: ft.color, flexShrink: 0 }} />
                      <div style={{ position: 'relative', flex: 1 }}>
                        <select value={p.ftId}
                          onChange={e => setPl(p.id, 'ftId', parseInt(e.target.value))}
                          style={{ ...inputBase, padding: '6px 22px 6px 8px', appearance: 'none', WebkitAppearance: 'none' }}
                          onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
                          onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; }}
                        >
                          {ftypes.map(f => (
                            <option key={f.id} value={f.id} style={{ background: 'var(--bg-2)' }}>
                              {f.name || 'Unnamed'}
                            </option>
                          ))}
                        </select>
                        <span style={{ position: 'absolute', right: 7, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-3)', fontSize: 11, pointerEvents: 'none' }}>▾</span>
                      </div>
                    </div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#7ed6a5', textAlign: 'right' }}>
                      {lineCost(p)}
                    </span>
                    <button onClick={() => delPl(p.id)}
                      style={{ background: 'transparent', color: 'var(--fg-4)', border: '1px solid transparent', padding: '6px 8px', fontSize: 14, borderRadius: 4, cursor: 'pointer' }}
                      onMouseEnter={e => { e.currentTarget.style.color = '#ff4060'; e.currentTarget.style.background = 'rgba(255,64,96,0.1)'; }}
                      onMouseLeave={e => { e.currentTarget.style.color = 'var(--fg-4)'; e.currentTarget.style.background = 'transparent'; }}
                    >✕</button>
                  </div>
                );
              })}
            </div>

            <button onClick={addPl}
              style={{
                width: '100%', marginTop: 10, padding: 10, borderRadius: 6, fontSize: 13,
                fontWeight: 600, fontFamily: 'var(--font-body)',
                background: 'transparent', color: 'var(--brand-pink)',
                border: '1px dashed var(--brand-pink-line)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                transition: 'background 150ms, border-color 150ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--brand-pink-dim)'; e.currentTarget.style.borderColor = 'var(--brand-pink)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'var(--brand-pink-line)'; }}
            >＋ Add Print</button>
          </div>
        </div>

        {/* 03 — Summary */}
        <div style={panelStyle}>
          <div style={panelHeadStyle}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={panelPill}>03</span>
              <span style={panelTitle}>Project Summary</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: !spool750 ? 'var(--brand-pink)' : 'var(--fg-4)', transition: 'color 200ms' }}>1 KG</span>
              <button
                onClick={() => setSpool750(v => !v)}
                style={{
                  width: 40, height: 22, borderRadius: 999, position: 'relative', cursor: 'pointer', padding: 0,
                  background: spool750 ? 'var(--brand-pink-dim)' : 'var(--bg-3)',
                  border: `1px solid ${spool750 ? 'var(--brand-pink-line)' : 'var(--line-1)'}`,
                  transition: 'all 200ms cubic-bezier(0.16,1,0.3,1)',
                }}
              >
                <span style={{
                  position: 'absolute', top: 2, left: spool750 ? 20 : 2,
                  width: 16, height: 16, borderRadius: 999, background: 'var(--brand-pink)',
                  transition: 'left 200ms cubic-bezier(0.16,1,0.3,1)',
                  boxShadow: '0 0 8px var(--brand-pink-dim)',
                }} />
              </button>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: spool750 ? 'var(--brand-pink)' : 'var(--fg-4)', transition: 'color 200ms' }}>750 G</span>
            </div>
          </div>
          <div style={panelBodyStyle}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 18 }}>
              <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 8, padding: 16 }}>
                <div style={{ ...monoLabel, marginBottom: 8, display: 'block' }}>Total Weight</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.03em', color: 'var(--fg-1)', lineHeight: 1 }}>
                  {summary.totalG.toFixed(0)} <span style={{ fontSize: 14, color: 'var(--fg-3)', fontFamily: 'var(--font-body)', fontWeight: 400 }}>g</span>
                </div>
              </div>
              <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 8, padding: 16 }}>
                <div style={{ ...monoLabel, marginBottom: 8, display: 'block' }}>Spools Needed</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.03em', color: 'var(--brand-pink)', lineHeight: 1 }}>
                  {summary.totalSpools}
                </div>
              </div>
              <div style={{ background: 'var(--brand-pink-dim)', border: '1px solid var(--brand-pink-line)', borderRadius: 8, padding: 16 }}>
                <div style={{ ...monoLabel, marginBottom: 8, display: 'block' }}>Total Cost</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.03em', color: 'var(--brand-pink)', lineHeight: 1 }}>
                  £{summary.totalCost.toFixed(2)}
                </div>
              </div>
            </div>

            {summary.byType.length === 0 ? (
              <div style={{ padding: '10px 0', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>
                // add prints to see breakdown
              </div>
            ) : (
              <div style={{ borderTop: '1px solid var(--line-1)', paddingTop: 16 }}>
                <div style={{ ...monoLabel, marginBottom: 12, display: 'block' }}>Per-Filament Breakdown</div>
                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                  <thead>
                    <tr>
                      {['Filament', 'Weight', 'Spools', 'Cost'].map((h, i) => (
                        <th key={h} style={{
                          fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.15em',
                          textTransform: 'uppercase', color: 'var(--fg-4)',
                          textAlign: i === 0 ? 'left' : 'right',
                          padding: '0 10px 10px', borderBottom: '1px solid var(--line-1)', fontWeight: 600,
                        }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {summary.byType.map(t => {
                      const spools = Math.ceil(t.g / spoolG);
                      const rem = t.g % spoolG;
                      const lastLbl = rem === 0 ? 'full' : Math.round((rem / spoolG) * 100) + '%';
                      return (
                        <tr key={t.ft.id}>
                          <td style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-2)', padding: '10px 10px', borderBottom: '1px solid rgba(38,39,44,0.5)' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                              <span style={{ width: 8, height: 8, borderRadius: '50%', background: t.ft.color, flexShrink: 0 }} />
                              {t.ft.name || 'Unnamed'}
                            </div>
                          </td>
                          <td style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-1)', padding: '10px 10px', textAlign: 'right', borderBottom: '1px solid rgba(38,39,44,0.5)' }}>
                            {t.g.toFixed(1)}g
                          </td>
                          <td style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-1)', padding: '10px 10px', textAlign: 'right', borderBottom: '1px solid rgba(38,39,44,0.5)' }}>
                            {spools} <span style={{ color: 'var(--fg-4)', fontSize: 11 }}>({lastLbl})</span>
                          </td>
                          <td style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--brand-pink)', padding: '10px 10px', textAlign: 'right', borderBottom: '1px solid rgba(38,39,44,0.5)' }}>
                            £{t.cost.toFixed(2)}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}

            <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-4)', borderTop: '1px dashed var(--line-1)', paddingTop: 12, lineHeight: 1.6, marginTop: 16 }}>
              // cost based on actual weight per print — no slicer estimation.
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

/* -------------------- Time Estimator -------------------- */

function TimeEstimator() {
  const [volume, setVolume] = React.useState(120); // cm³
  const [speed, setSpeed]   = React.useState(150); // mm/s
  const [layerH, setLayerH] = React.useState(0.2); // mm
  const [nozzleW, setNozzleW] = React.useState(0.4);

  // volumetric speed ~ speed * layerH * nozzleW  (mm³/s)
  const flow = speed * layerH * nozzleW; // mm³/s
  const secs = (volume * 1000) / flow;  // cm³→mm³ / mm³/s
  const totalH = secs / 3600;
  const h = Math.floor(totalH);
  const m = Math.round((totalH - h) * 60);

  return (
    <div>
      <ToolHeader name="Print-time estimator" icon="Clock" tag="Live" />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
        <div className="flex flex-col gap-5">
          <Field label={`Model volume · ${volume} cm³`}>
            <Slider value={volume} onChange={setVolume} min={1} max={500} step={1} />
          </Field>
          <Field label={`Print speed · ${speed} mm/s`}>
            <Slider value={speed} onChange={setSpeed} min={30} max={500} step={5} />
          </Field>
          <Field label={`Layer height · ${layerH.toFixed(2)} mm`}>
            <Slider value={layerH} onChange={setLayerH} min={0.08} max={0.32} step={0.02} />
          </Field>
          <Field label={`Nozzle width · ${nozzleW.toFixed(2)} mm`}>
            <Slider value={nozzleW} onChange={setNozzleW} min={0.2} max={0.8} step={0.1} />
          </Field>
        </div>
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-md)', padding: 20, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <BigResult label="Estimated print time" value={`${h}h ${m}m`} unit="" accent />
          <div style={{ height: 1, background: 'var(--line-1)' }} />
          <StatRow label="Volumetric flow" value={`${flow.toFixed(1)} mm³/s`} />
          <StatRow label="Total seconds" value={Math.round(secs).toLocaleString()} />
          <StatRow label="Layers" value={`~${Math.round(50 / layerH)} for 50mm`} />

          {flow > 25 && (
            <div style={{ background: 'rgba(245,201,113,0.10)', border: '1px solid rgba(245,201,113,0.3)', borderRadius: 8, padding: 12, fontSize: 12, color: 'var(--tag-medium)', display: 'flex', gap: 8 }}>
              <LucideIcon name="TriangleAlert" size={16} />
              <span>Flow exceeds most hotends. Consider a high-flow nozzle (CHT / Volcano).</span>
            </div>
          )}
          <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-4)', borderTop: '1px dashed var(--line-1)', paddingTop: 12, lineHeight: 1.6 }}>
            // estimate assumes constant flow. Real print <br />
            // time adds travel, retraction, and seam moves.
          </div>
        </div>
      </div>
    </div>
  );
}

/* -------------------- Cost Calculator -------------------- */

function CostCalculator() {
  const [weight, setWeight] = React.useState(85);
  const [pricePerKg, setPricePerKg] = React.useState(22);
  const [hours, setHours] = React.useState(6);
  const [watts, setWatts] = React.useState(120);
  const [pricePerKwh, setPricePerKwh] = React.useState(0.29);
  const [wear, setWear] = React.useState(0.15); // £/hr printer wear

  const filamentCost = (weight / 1000) * pricePerKg;
  const electricityCost = (watts / 1000) * hours * pricePerKwh;
  const wearCost = hours * wear;
  const total = filamentCost + electricityCost + wearCost;

  return (
    <div>
      <ToolHeader name="Cost per print" icon="PoundSterling" tag="Live" />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
        <div className="flex flex-col gap-5">
          <Field label={`Filament used · ${weight} g`}>
            <Slider value={weight} onChange={setWeight} min={1} max={1000} step={1} />
          </Field>
          <Field label={`Filament price (£/kg) · £${pricePerKg}`}>
            <Slider value={pricePerKg} onChange={setPricePerKg} min={10} max={80} step={1} />
          </Field>
          <Field label={`Print time · ${hours}h`}>
            <Slider value={hours} onChange={setHours} min={0.5} max={48} step={0.5} />
          </Field>
          <Field label={`Printer draw · ${watts} W`}>
            <Slider value={watts} onChange={setWatts} min={50} max={400} step={10} />
          </Field>
          <Field label={`Electricity · £${pricePerKwh.toFixed(2)}/kWh`}>
            <Slider value={pricePerKwh} onChange={setPricePerKwh} min={0.10} max={0.50} step={0.01} />
          </Field>
          <Field label={`Printer wear · £${wear.toFixed(2)}/hr`}>
            <Slider value={wear} onChange={setWear} min={0} max={1} step={0.05} />
          </Field>
        </div>
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-md)', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <BigResult label="Total cost" value={`£${total.toFixed(2)}`} unit="" accent />
          <div style={{ height: 1, background: 'var(--line-1)' }} />

          {/* cost bar */}
          <div style={{ display: 'flex', height: 28, borderRadius: 8, overflow: 'hidden', border: '1px solid var(--line-1)' }}>
            <div title="Filament" style={{ width: `${(filamentCost/total)*100}%`, background: 'var(--brand-pink)' }} />
            <div title="Electricity" style={{ width: `${(electricityCost/total)*100}%`, background: '#f5c971' }} />
            <div title="Wear" style={{ width: `${(wearCost/total)*100}%`, background: '#7ed6a5' }} />
          </div>
          <StatRow label={<span style={{ display:'inline-flex', alignItems:'center', gap:8 }}><Dot c="var(--brand-pink)"/>Filament</span>} value={`£${filamentCost.toFixed(2)}`} />
          <StatRow label={<span style={{ display:'inline-flex', alignItems:'center', gap:8 }}><Dot c="#f5c971"/>Electricity</span>} value={`£${electricityCost.toFixed(2)}`} />
          <StatRow label={<span style={{ display:'inline-flex', alignItems:'center', gap:8 }}><Dot c="#7ed6a5"/>Printer wear</span>} value={`£${wearCost.toFixed(2)}`} />
        </div>
      </div>
    </div>
  );
}

function Dot({ c }) {
  return <span style={{ width: 8, height: 8, borderRadius: 999, background: c, display: 'inline-block' }} />;
}

/* -------------------- Scale Tool -------------------- */

function ScaleTool() {
  const [scale, setScale] = React.useState(100);
  const base = { w: 60, h: 40, d: 30, weight: 45, time: 4 };
  const f = scale / 100;
  const scaled = {
    w: base.w * f, h: base.h * f, d: base.d * f,
    weight: base.weight * f ** 3,
    time: base.time * f ** 3,
    strength: f < 1 ? Math.pow(f, 2) * 100 : Math.min(400, 100 + (f - 1) * 120),
  };

  return (
    <div>
      <ToolHeader name="Resize & scale" icon="Maximize2" tag="Live" />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
        <div className="flex flex-col gap-5">
          <Field label={`Scale · ${scale}%`}>
            <Slider value={scale} onChange={setScale} min={25} max={300} step={5} />
          </Field>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.6 }}>
            Base model: 60×40×30mm, 45g, ~4h print.
            Scaling doesn't just change size — volume (and so weight + time) scales with the cube. Strength scales roughly with area.
          </div>
          <div style={{
            padding: 16, borderRadius: 8, background: 'var(--bg-1)', border: '1px solid var(--line-1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 180,
          }}>
            <div style={{
              width: scaled.w * 1.8, height: scaled.h * 1.8,
              border: '1.5px solid var(--brand-pink)', borderRadius: 6,
              background: 'var(--brand-pink-dim)',
              transition: 'all 200ms cubic-bezier(0.16,1,0.3,1)',
              maxWidth: 280, maxHeight: 180,
            }} />
          </div>
        </div>
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-1)', borderRadius: 'var(--radius-md)', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <BigResult label="New dimensions" value={`${scaled.w.toFixed(0)}×${scaled.h.toFixed(0)}×${scaled.d.toFixed(0)}`} unit="mm" accent />
          <div style={{ height: 1, background: 'var(--line-1)' }} />
          <StatRow label="New weight" value={`${scaled.weight.toFixed(1)} g`} delta={f**3 * 100 - 100} />
          <StatRow label="New print time" value={`~${scaled.time.toFixed(1)}h`} delta={f**3 * 100 - 100} />
          <StatRow label="Relative strength" value={`${scaled.strength.toFixed(0)}%`} />
        </div>
      </div>
    </div>
  );
}

/* -------------------- Shared tool UI primitives -------------------- */

function ToolHeader({ name, icon, tag }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: 'var(--brand-pink)', color: '#0a0a0b',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <LucideIcon name={icon} size={18} />
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', color: 'var(--fg-1)', flex: 1 }}>
        {name}
      </div>
      <span style={{
        fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.08em',
        color: 'var(--brand-pink)',
        border: '1px solid var(--brand-pink-line)', padding: '3px 8px', borderRadius: 999,
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-pink)', animation: 'pulse 2s ease-in-out infinite' }} />
        {tag}
      </span>
      <style>{`@keyframes pulse { 0%, 100%{opacity:1} 50%{opacity:0.4} }`}</style>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
        {label}
      </div>
      {children}
    </div>
  );
}

function NumInput({ value, onChange, min, max, suffix }) {
  return (
    <div style={{ position: 'relative' }}>
      <input type="number" value={value} min={min} max={max}
        onChange={e => onChange(Number(e.target.value))}
        style={{
          width: '100%', background: 'var(--bg-3)', border: '1px solid var(--line-1)',
          color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 500,
          padding: '10px 28px 10px 12px', borderRadius: 6, outline: 'none',
        }}
        onFocus={e => { e.currentTarget.style.borderColor = 'var(--brand-pink)'; e.currentTarget.style.boxShadow = '0 0 0 4px var(--brand-pink-dim)'; }}
        onBlur={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; e.currentTarget.style.boxShadow = 'none'; }}
      />
      {suffix && <span style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>{suffix}</span>}
    </div>
  );
}

function Slider({ value, onChange, min, max, step = 1 }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ position: 'relative', height: 32 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, top: '50%', transform: 'translateY(-50%)',
        height: 4, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden',
      }}>
        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--brand-pink)' }} />
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => onChange(Number(e.target.value))}
        style={{
          position: 'absolute', inset: 0, width: '100%', opacity: 0, cursor: 'pointer', margin: 0,
        }}
      />
      <div style={{
        position: 'absolute', left: `calc(${pct}% - 8px)`, top: '50%', transform: 'translateY(-50%)',
        width: 16, height: 16, borderRadius: 999, background: '#0a0a0b',
        border: '2px solid var(--brand-pink)', pointerEvents: 'none',
      }} />
    </div>
  );
}

function BigResult({ label, value, unit, accent }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
        {label}
      </div>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 56, letterSpacing: '-0.03em', lineHeight: 1,
        color: accent ? 'var(--brand-pink)' : 'var(--fg-1)',
        display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap',
      }}>
        {value}
        {unit && <span style={{ fontSize: 24, color: 'var(--fg-2)', fontFamily: 'var(--font-display)' }}>{unit}</span>}
      </div>
    </div>
  );
}

function StatRow({ label, value, delta }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14 }}>
      <span style={{ color: 'var(--fg-2)' }}>{label}</span>
      <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--fg-1)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        {value}
        {delta !== undefined && delta !== 0 && (
          <span style={{
            fontSize: 11, padding: '2px 6px', borderRadius: 4,
            background: delta > 0 ? 'rgba(247,164,162,0.14)' : 'rgba(126,214,165,0.14)',
            color: delta > 0 ? 'var(--brand-pink)' : '#7ed6a5',
          }}>
            {delta > 0 ? '+' : ''}{delta.toFixed(0)}%
          </span>
        )}
      </span>
    </div>
  );
}

window.ToolsSection = ToolsSection;