// Main app — hero, nav, contact, footer + composes Timeline + Chatbot
const { useState: useS, useEffect: useE, useRef: useR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 38,
  "accentChroma": 0.13,
  "darkMode": true,
  "showProgressRail": true,
  "heroVariant": "split",
  "transitionStyle": "fade-slide"
}/*EDITMODE-END*/;

function Nav({ activeSection, onJump }) {
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''} ${activeSection === 'hero' ? 'nav-hero' : ''}`}>
      <div className="nav-mark">Jesús <em>Álvarez</em></div>
      <div className="nav-links">
        <a className={`nav-link ${activeSection === 'hero' ? 'active' : ''}`} onClick={() => onJump('hero')}>Intro</a>
        <a className={`nav-link ${activeSection === 'timeline' ? 'active' : ''}`} onClick={() => onJump('timeline')}>Work</a>
        <a className={`nav-link ${activeSection === 'voices' ? 'active' : ''}`} onClick={() => onJump('voices')}>Voices</a>
        <a className={`nav-link ${activeSection === 'toolbelt' ? 'active' : ''}`} onClick={() => onJump('toolbelt')}>Toolbelt</a>
        <button className="nav-cta" onClick={() => onJump('contact')}>Contact ↗</button>
      </div>
    </nav>
  );
}

function Hero({ onJump }) {
  return (
    <section id="hero" className="section hero" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="hero-grid">
        <h1 className="hero-name">
          Jesús<br />
          Álv<em>arez</em>
        </h1>
        <div className="hero-meta">
          <div className="label">
            <span className="label-accent">●</span> Senior Healthcare Data Programmer · Goleta, CA
          </div>
          <div className="hero-tagline">
            Architect of the SAS engine that builds 130+ national healthcare databases each year — from 50 states of patient data, with HIPAA in its bones.
          </div>
          <div className="hero-stats">
            <div>
              <div className="stat-num"><em>35+</em></div>
              <div className="stat-label">Years in Healthcare Data</div>
            </div>
            <div>
              <div className="stat-num"><em>130</em></div>
              <div className="stat-label">DBs / Year (HCUP)</div>
            </div>
            <div>
              <div className="stat-num"><em>2×</em></div>
              <div className="stat-label">Merit Awards</div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-ticker" aria-label="Organizations and agencies represented in Jesús Álvarez's career">
        <Marquee items={window.BRAND_LOGOS} />
      </div>

      <div className="hero-bottom">
        <div>
          <div>● AVAILABLE FOR CONSULTING</div>
          <div style={{ marginTop: 6, color: 'var(--bone-dim)' }}>YU-PA CORPORATION · MINORITY-OWNED · EST. 2000</div>
        </div>
        <div className="scroll-cue" onClick={() => onJump('timeline')} style={{ cursor: 'pointer' }}>
          <span>Scroll the timeline</span>
          <span className="arrow"></span>
        </div>
      </div>
    </section>
  );
}

function Marquee({ items, label }) {
  // duplicate for seamless loop
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <div key={i} className="marquee-item">
            <img src={it.src} alt={it.label} />
            <span className="ml-label">{it.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Voices() {
  const recs = window.RECOMMENDATIONS;
  return (
    <section id="voices" className="section voices-section">
      <div className="voices-inner">
        <div className="voices-intro mobile-snap-panel">
          <div className="label" style={{ marginBottom: 24 }}>
            <span className="label-accent">●</span> 05 — VOICES FROM THE FIELD
          </div>
          <h2 style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 88px)',
            lineHeight: 0.96, letterSpacing: '-0.02em', fontWeight: 400, marginBottom: 56,
          }}>
            What people <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>who worked with him</em> say.
          </h2>
          {recs[0] && (
            <div className="mobile-first-voice">
              <VoiceCard recommendation={recs[0]} />
            </div>
          )}
        </div>
        <div className="voices-grid mobile-snap-panel">
          {recs.map((r, i) => (
            <VoiceCard key={r.name} recommendation={r} extraClass={i === 0 ? 'desktop-first-voice' : ''} />
          ))}
        </div>
      </div>
    </section>
  );
}

function VoiceCard({ recommendation: r, extraClass = '' }) {
  return (
    <div className={`voice-card ${extraClass}`}>
      <div className="voice-quote">
        "{r.quote}"
      </div>
      <div className="voice-meta">
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--accent)', textTransform: 'uppercase' }}>
          — {r.name}
        </div>
        <div style={{ fontSize: 13, color: 'var(--bone-dim)', marginTop: 6 }}>{r.title}</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--bone-faint)', marginTop: 4, textTransform: 'uppercase' }}>
          {r.relation}
        </div>
      </div>
    </div>
  );
}

function Toolbelt() {
  const skillIcon = (skill) => {
    const normalized = skill.toLowerCase();
    if (normalized.includes('sas')) return 'logo images/SAS_logo_horiz.svg - Copy (2) - Copy.png';
    if (normalized.includes('python')) return 'logo images/python-logo - Copy (2) - Copy.png';
    if (normalized === 'sql') return 'logo images/sql-database.png';
    if (normalized.includes('sql server')) return 'logo images/Microsoft_SQL_Server_Logo.svg.png';
    if (normalized.includes('db2')) return 'logo images/db2-tutorial - Copy - Copy.png';
    if (normalized.includes('access')) return 'logo images/microsofta.jpg';
    if (normalized.includes('visual basic')) return 'logo images/visual basic.png';
    if (normalized === 'c') return 'logo images/C_Programming_Language.svg - Copy - Copy.png';
    if (normalized === 'c++') return 'logo images/ISO_C++_Logo - Copy (2) - Copy.svg';
    if (normalized.includes('arduino')) return 'logo images/Arduino.png';
    if (normalized.includes('jcl')) return 'logo images/jcl.png';
    if (normalized.includes('tso')) return 'logo images/tsoLOGON01.png';
    if (normalized.includes('ispf')) return 'logo images/ispf.png';
    if (normalized.includes('syncsort') || normalized.includes('dfsort')) return 'logo images/precisely.png';
    if (normalized.includes('pl/i')) return 'logo images/PL1Microsoft.VisualStudio.Services.Icons.png';
    if (normalized.includes('cobol')) return 'logo images/cobol.png';
    if (normalized.includes('assembler')) return 'logo images/icons8-assembly-100.png';
    if (normalized.includes('fortran')) return 'logo images/Fortran_logo.svg.png';
    if (normalized.includes('icd')) return 'logo images/icd10.png';
    if (normalized.includes('cpt')) return 'logo images/Screenshot 2026-05-01 at 15-52-22 AMA CPT Book ICD-10 Code Book HCPCS Book - 2026 Physician Bundle by AAPC MedicalCodingbyJen.png';
    if (normalized.includes('drg')) return 'logo images/Screenshot 2026-05-01 at 15-53-11 CMS MS-DRG Grouper - DRG grouper software Software IntuitionLabs.ai.png';
    if (normalized.includes('hipaa')) return 'logo images/Screenshot 2026-05-01 at 15-53-53 HIPAA-Compliance-Verification-Seal-of-compliance.webp (WEBP Image 450 × 240 pixels).png';
    if (normalized.includes('dua')) return 'logo images/Healthcare_Cost_and_Utilization_Project_(HCUP)_logo - Copy - Copy.jpg';
    return 'logo images/z-os.jpeg';
  };

  const skillItems = Object.entries(window.SKILLS).flatMap(([category, skills]) =>
    skills.map(skill => ({
      src: skillIcon(skill),
      label: skill,
      category,
    }))
  );

  return (
    <section id="toolbelt" className="section toolbelt-section">
      <div className="toolbelt-inner">
        <div className="toolbelt-intro mobile-snap-panel">
        <div className="toolbelt-header">
          <div>
            <div className="label" style={{ marginBottom: 24 }}>
              <span className="label-accent">●</span> 06 — TOOLBELT
            </div>
            <h2 className="section-title">
              The systems <em>he actually works in.</em>
            </h2>
          </div>
          <a className="resume-download" href="uploads/Jesus_Alvarez_Resume_Rewritten.docx" download="Jesus Alvarez Resume.docx">
            <span>Download Resume</span>
            <span>↓</span>
          </a>
        </div>

        <div className="skills-ticker" aria-label="Jesús Álvarez technical skills">
          <Marquee items={skillItems} />
        </div>
        </div>

        <div className="skills-grid mobile-snap-panel">
          {Object.entries(window.SKILLS).map(([k, vals]) => (
            <div key={k} className="skill-category">
              <div className="skill-category-title">{k}</div>
              <div className="skill-tags">
                {vals.map(v => (
                  <span key={v}>{v}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = useS({ name: '', email: '', company: '', subject: 'General inquiry', message: '' });
  const [sent, setSent] = useS(false);
  const [error, setError] = useS('');
  const [sending, setSending] = useS(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setError('Please complete name, email, and message.');
      return;
    }
    setSending(true);
    setError('');
    try {
      const resp = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        throw new Error(data.error || 'Failed to send');
      }
      setSent(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Please email jesus.alvarez@yupaanalytics.com directly.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contact">
      <div className="contact-grid">
        <div className="contact-left mobile-snap-panel">
          <div className="label">
            <span className="label-accent">●</span> 07 — CONTACT
          </div>
          <h2>Let's <em>build</em> something with data.</h2>
          <p>
            Open to senior programming consulting, federal contract work, healthcare data architecture, and mentorship roles. Yu-Pa Corporation is a certified minority-owned business — government data privacy and DUA compliance baked in from day one.
          </p>

          <div className="contact-direct">
            <div className="contact-direct-row">
              <span className="k">Email</span>
              <span className="v"><a href="mailto:jesus.alvarez@yupaanalytics.com">jesus.alvarez@yupaanalytics.com</a></span>
            </div>
            <div className="contact-direct-row">
              <span className="k">Phone</span>
              <span className="v"><a href="tel:+18054535516">(805) 453-5516</a></span>
            </div>
            <div className="contact-direct-row">
              <span className="k">Location</span>
              <span className="v">Goleta, California</span>
            </div>
            <div className="contact-direct-row">
              <span className="k">Status</span>
              <span className="v" style={{ color: 'var(--accent)' }}>Available for new projects</span>
            </div>
          </div>

          <div className="primary-cta-block">
            <div className="label" style={{ marginBottom: 10 }}>
              <span className="label-accent">●</span> PREFER TO TALK?
            </div>
            <a className="cal-schedule-btn cal-schedule-btn-primary" href="https://cal.com/jesus-alvarez/30min" target="_blank" rel="noopener noreferrer">
              <span>Schedule a 30-min call</span>
              <span>↗</span>
            </a>
            <div className="primary-cta-sub">Free intro chat · pick a time that works</div>
          </div>
        </div>

        <form className="form mobile-snap-panel" onSubmit={submit}>
          {sent ? (
            <div className="form-success">
              ✓ Message sent! Jesús will get back to you soon. If you need immediate assistance, email <a href="mailto:jesus.alvarez@yupaanalytics.com" style={{ color: 'var(--accent)' }}>jesus.alvarez@yupaanalytics.com</a>.
            </div>
          ) : (
            <>
              <div className="label" style={{ marginBottom: 8 }}>SEND A MESSAGE</div>
              <div className="form-row">
                <label htmlFor="name">Your name</label>
                <input id="name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Jane Doe" />
              </div>
              <div className="form-row">
                <label htmlFor="email">Email</label>
                <input id="email" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="jane@company.com" />
              </div>
              <div className="form-row">
                <label htmlFor="company">Company / Org (optional)</label>
                <input id="company" value={form.company} onChange={e => setForm({...form, company: e.target.value})} placeholder="Acme Health" />
              </div>
              <div className="form-row">
                <label htmlFor="subject">Subject</label>
                <select id="subject" value={form.subject} onChange={e => setForm({...form, subject: e.target.value})}>
                  <option>General inquiry</option>
                  <option>Consulting opportunity</option>
                  <option>Federal contract / SAS work</option>
                  <option>Mentorship / advisory</option>
                  <option>Speaking / interview</option>
                </select>
              </div>
              <div className="form-row">
                <label htmlFor="message">Message</label>
                <textarea id="message" value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="Tell Jesús what you're working on..."></textarea>
              </div>
              {error && <div style={{ color: '#d97a3a', fontSize: 12, fontFamily: 'var(--mono)' }}>{error}</div>}
              <button type="submit" className="form-submit" disabled={sending}>
                <span>{sending ? 'SENDING...' : 'SEND TO JESÚS'}</span>
                <span>{sending ? '⋯' : '↗'}</span>
              </button>
            </>
          )}
        </form>
      </div>

    </section>
  );
}

function FooterSection({ onJump }) {
  return (
    <section id="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="footer-big">
            <em>jesús</em>.álvarez
          </div>
          <div className="footer-tag">35 years of healthcare data engineering · Yu-Pa Corporation</div>
        </div>

        <div className="footer-grid">
          <div className="footer-col">
            <div className="label" style={{ marginBottom: 14 }}>
              <span className="label-accent">●</span> EXPLORE
            </div>
            <a className="footer-link" onClick={() => onJump('hero')}>Intro</a>
            <a className="footer-link" onClick={() => onJump('timeline')}>Career timeline</a>
            <a className="footer-link" onClick={() => onJump('voices')}>Recommendations</a>
            <a className="footer-link" onClick={() => onJump('toolbelt')}>Toolbelt</a>
            <a className="footer-link" onClick={() => onJump('contact')}>Contact</a>
          </div>

          <div className="footer-col">
            <div className="label" style={{ marginBottom: 14 }}>
              <span className="label-accent">●</span> CONNECT
            </div>
            <a className="footer-link" href="mailto:jesus.alvarez@yupaanalytics.com">jesus.alvarez@yupaanalytics.com</a>
            <a className="footer-link" href="tel:+18054535516">(805) 453-5516</a>
            <a className="footer-link" href="https://cal.com/jesus-alvarez/30min" target="_blank" rel="noopener noreferrer">Schedule a call ↗</a>
            <a className="footer-link" href="https://www.linkedin.com/in/jes%C3%BAs-%C3%A1lvarez-81668658/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
          </div>

          <div className="footer-col">
            <div className="label" style={{ marginBottom: 14 }}>
              <span className="label-accent">●</span> EXPERTISE
            </div>
            <div className="footer-text">SAS programming</div>
            <div className="footer-text">Healthcare data architecture</div>
            <div className="footer-text">HCUP / HIPAA / DUA compliance</div>
            <div className="footer-text">Federal contracting</div>
            <div className="footer-text">Mentorship & advisory</div>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 · YU-PA CORPORATION</div>
          <div className="footer-built">Built by <a href="https://cloudconquer.ai" target="_blank" rel="noopener noreferrer">Cloud Conquer AI</a> · SAS, grit, and 35 years</div>
        </div>
      </div>
    </section>
  );
}

function ProgressRail({ activeIdx, setActiveIdx, jumpTo, activeSection }) {
  return (
    <div className="progress-rail">
      <button className={`progress-dot ${activeSection === 'hero' ? 'active' : ''}`} data-label="Intro" onClick={() => jumpTo('hero')} />
      {window.EXPERIENCES.map((e, i) => (
        <button key={e.id}
                className={`progress-dot ${activeSection === 'timeline' && activeIdx === i ? 'active' : ''}`}
                data-label={e.year}
                onClick={() => { jumpTo('timeline'); setTimeout(() => setActiveIdx(i), 50); }} />
      ))}
      <button className={`progress-dot ${activeSection === 'voices' ? 'active' : ''}`} data-label="Voices" onClick={() => jumpTo('voices')} />
      <button className={`progress-dot ${activeSection === 'toolbelt' ? 'active' : ''}`} data-label="Toolbelt" onClick={() => jumpTo('toolbelt')} />
      <button className={`progress-dot ${activeSection === 'contact' ? 'active' : ''}`} data-label="Contact" onClick={() => jumpTo('contact')} />
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [activeIdx, setActiveIdx] = useS(0);
  const [activeSection, setActiveSection] = useS('hero');

  // Apply tweak: accent color via oklch
  useE(() => {
    const accent = `oklch(0.68 ${tweaks.accentChroma} ${tweaks.accentHue})`;
    const accentSoft = `oklch(0.68 ${tweaks.accentChroma} ${tweaks.accentHue} / 0.25)`;
    document.documentElement.style.setProperty('--accent', accent);
    document.documentElement.style.setProperty('--accent-soft', accentSoft);
  }, [tweaks.accentHue, tweaks.accentChroma]);

  // Light mode tweak
  useE(() => {
    const r = document.documentElement.style;
    if (!tweaks.darkMode) {
      r.setProperty('--ink', '#f4efe6');
      r.setProperty('--ink-2', '#ebe5d8');
      r.setProperty('--ink-3', '#dfd8c8');
      r.setProperty('--bone', '#1a1814');
      r.setProperty('--bone-dim', '#5a574f');
      r.setProperty('--bone-faint', '#8a857a');
      r.setProperty('--rule', '#cfc8b8');
    } else {
      r.setProperty('--ink', '#0d0d10');
      r.setProperty('--ink-2', '#15151a');
      r.setProperty('--ink-3', '#1d1d24');
      r.setProperty('--bone', '#ece7df');
      r.setProperty('--bone-dim', '#b8b3ab');
      r.setProperty('--bone-faint', '#6b6862');
      r.setProperty('--rule', '#2a2a32');
    }
  }, [tweaks.darkMode]);

  // Track active section
  useE(() => {
    const ids = ['hero', 'timeline', 'voices', 'toolbelt', 'contact', 'footer'];
    const onScroll = () => {
      let cur = 'hero';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top <= window.innerHeight * 0.4) cur = id;
      }
      setActiveSection(cur);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const jumpTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // Full-page scroll snap: one wheel tick = one section, both directions
  useE(() => {
    const COOLDOWN = 950;
    const DELTA_THRESHOLD = 30;
    let locked = false;
    let targetIdx = 0;
    let accDelta = 0;
    let resetAcc = null;

    function getSnapTargets() {
      const targets = [];
      const hero = document.getElementById('hero');
      if (hero) targets.push(hero);
      document.querySelectorAll('.tl-item').forEach(el => targets.push(el));
      if (window.matchMedia('(max-width: 900px)').matches) {
        document.querySelectorAll('#voices .mobile-snap-panel, #toolbelt .mobile-snap-panel, #contact .mobile-snap-panel').forEach(el => targets.push(el));
      } else {
        const voices = document.getElementById('voices');
        if (voices) targets.push(voices);
        const toolbelt = document.getElementById('toolbelt');
        if (toolbelt) targets.push(toolbelt);
        const contact = document.getElementById('contact');
        if (contact) targets.push(contact);
      }
      const footer = document.getElementById('footer');
      if (footer) targets.push(footer);
      return targets;
    }

    function getNearestIdx(targets) {
      let bestIdx = 0, bestDist = Infinity;
      targets.forEach((el, i) => {
        const dist = Math.abs(el.getBoundingClientRect().top);
        if (dist < bestDist) { bestDist = dist; bestIdx = i; }
      });
      return bestIdx;
    }

    function onWheel(e) {
      e.preventDefault();

      // Hard ignore while a snap is in flight — no queuing
      if (locked) return;

      accDelta += e.deltaY;
      clearTimeout(resetAcc);
      resetAcc = setTimeout(() => { accDelta = 0; }, 150);

      if (Math.abs(accDelta) < DELTA_THRESHOLD) return;

      const dir = accDelta > 0 ? 1 : -1;
      accDelta = 0;

      const targets = getSnapTargets();
      if (!targets.length) return;

      const current = getNearestIdx(targets);
      const next = Math.max(0, Math.min(targets.length - 1, current + dir));
      if (next === current) return;

      targetIdx = next;
      locked = true;
      targets[next].scrollIntoView({ behavior: 'smooth', block: 'start' });
      setTimeout(() => { locked = false; accDelta = 0; }, COOLDOWN);
    }

    window.addEventListener('wheel', onWheel, { passive: false });
    return () => window.removeEventListener('wheel', onWheel);
  }, []);

  const { TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakColor } = window;

  return (
    <>
      <Nav activeSection={activeSection} onJump={jumpTo} />
      {tweaks.showProgressRail && (
        <ProgressRail activeIdx={activeIdx} setActiveIdx={setActiveIdx} jumpTo={jumpTo} activeSection={activeSection} />
      )}

      <Hero onJump={jumpTo} />
      <window.Timeline activeIdx={activeIdx} setActiveIdx={setActiveIdx} />
      <Voices />
      <Toolbelt />
      <Contact />
      <FooterSection onJump={jumpTo} />

      <window.Chatbot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color">
          <TweakSlider label="Accent hue" value={tweaks.accentHue} min={0} max={360} step={1}
                       onChange={v => setTweak('accentHue', v)} />
          <TweakSlider label="Accent saturation" value={tweaks.accentChroma} min={0} max={0.25} step={0.01}
                       onChange={v => setTweak('accentChroma', v)} />
          <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={v => setTweak('darkMode', v)} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Show side progress rail" value={tweaks.showProgressRail} onChange={v => setTweak('showProgressRail', v)} />
        </TweakSection>
        <TweakSection title="Quick presets">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <button onClick={() => { setTweak({ accentHue: 38, accentChroma: 0.13, darkMode: true }); }}
                    style={presetBtn}>● Editorial Amber (default)</button>
            <button onClick={() => { setTweak({ accentHue: 145, accentChroma: 0.12, darkMode: true }); }}
                    style={presetBtn}>● Terminal Green</button>
            <button onClick={() => { setTweak({ accentHue: 250, accentChroma: 0.14, darkMode: true }); }}
                    style={presetBtn}>● Federal Indigo</button>
            <button onClick={() => { setTweak({ accentHue: 25, accentChroma: 0.10, darkMode: false }); }}
                    style={presetBtn}>● Cream Editorial (light)</button>
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const presetBtn = {
  background: 'transparent',
  border: '1px solid #2a2a32',
  color: '#ece7df',
  padding: '8px 10px',
  fontFamily: 'JetBrains Mono, monospace',
  fontSize: 11,
  letterSpacing: '0.05em',
  textAlign: 'left',
  cursor: 'pointer',
  borderRadius: 2,
};

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