const { useState: useS, useEffect: useE } = React;

const COPY = {
  es: {
    nav: { filosofia: 'filosofía', productos: 'productos', manifiesto: 'manifiesto' },
    eyebrow: 'apps y webs con inteligencia artificial, hechas con cariño',
    heroA: 'Software',
    heroB: 'para gente',
    heroC: 'de a pie.',
    heroEm: 'copado',
    lede: <>Hacemos <b>apps y webs con IA</b> que entiende tu abuela, que usa tu tío el del taller y que te sirve a vos que te rompés el lomo todos los días. La inteligencia artificial acá no se ve: <b>simple, linda, sin vueltas</b>. Hace el laburo y se calla.</>,
    metaA: <>Desde <b>Buenos Aires</b><br/>al mundo</>,
    metaB: <><b>3 productos</b> vivos<br/>más de los que vienen</>,
    metaC: <>Sin login obligatorio,<br/>sin humo, <b>sin truco</b>.</>,
    ticker: ['apps y webs con IA', 'que se entienden sin manual', 'la IA invisible', 'sin humo', 'sin suscripción trampa', 'sin dark patterns', 'che, probala', 'para laburantes', 'para la familia', 'para vos'],
    sec1Num: '01 — filosofía',
    sec1Title: <>Hacemos las cosas <em>al revés</em> de todos.</>,
    steps: [
      { tag: '/// primero', art: 'el usuario', h: 'Primero pensamos en tu vieja.', p: 'Si no lo entiende alguien que no nació con un celu en la mano, no lo sacamos. Así de simple.' },
      { tag: '/// después', art: 'la función', h: 'La IA que trabaja en silencio.', p: 'Usamos inteligencia artificial donde de verdad hace falta: entender lo que escribís, ordenar lo que anotás, adivinar lo que necesitás. Sin chatbots, sin humo.' },
      { tag: '/// al final', art: 'la belleza', h: 'Y al final, que sea lindo.', p: 'Porque lo que usás todos los días merece ser lindo. No es vanidad, es respeto.' },
    ],
    demoEyebrow: '02 — producto vivo',
    demoTitle: <>Conocé <em>Obra Simple</em>.</>,
    demoBody: <>El primer producto del estudio. Una app para que <b>arquitectos, maestros mayores y constructoras</b> manejen sus obras sin papelitos, sin Excel, sin volverse locos. <b>Ya está vivo</b> — andá, probalo, contanos qué te parece.</>,
    demoBullets: ['gestión de obras en lenguaje natural', 'la IA arma los presupuestos por vos', 'pensado para el día a día en obra', 'funciona en el celu, en la oficina, donde sea'],
    demoCtaPrimary: 'entrar a obrasimple.com.ar',
    demoCtaSecondary: 'entrar a obrasimple.lat',
    demoTag: 'producto vivo',
    demoCardKicker: 'obra simple',
    demoCardTitle: 'gestión de obra, simple.',
    demoCardSub: 'la app para que tu obra dé menos vueltas que una pava.',
    sec3Num: '03 — manifiesto',
    manifesto: <><b>CHE</b> viene del mapuche y significa <em>gente</em>. <b>SIMPLE</b> es cómo hacemos las cosas. <b>AI</b> es la herramienta que hace posible la simpleza. Por eso nuestros productos llevan <em>Simple</em> en el nombre — como <b>Obra Simple</b> — porque creemos que la mejor IA es <b>la que no se nota</b>. La que tu vieja usa sin preguntarte, la que el pibe del kiosco abre mientras atiende, la que <em>simplemente funciona</em>. No hacemos apps para ganar premios. Las hacemos para la gente que <b>sale a laburar todos los días</b>.</>,
    sig: '— el equipo de CHESIMPLE/AI',
    manifestoMetaA: 'Buenos Aires, Argentina',
    manifestoMetaB: 'un producto nuevo cada trimestre',
    footBig: <>Hola, <em>decinos</em> qué necesitás.</>,
    footColA: { h: 'productos', items: ['Obra Simple — obrasimple.com.ar', 'Obra Simple — obrasimple.lat'] },
    footColB: { h: 'compañía', items: ['filosofía', 'manifiesto', 'chesimpleai@gmail.com'] },
    footBottom: '© 2026 CHESIMPLE/AI — hecho a mano, en Buenos Aires',
  },
  en: {
    nav: { filosofia: 'philosophy', productos: 'products', manifiesto: 'manifesto' },
    eyebrow: 'apps and websites with AI, made with care',
    heroA: 'Software',
    heroB: 'for everyday',
    heroC: 'people.',
    heroEm: 'that rules',
    lede: <>We make <b>apps and websites with AI</b> your grandma gets, that your uncle at the shop uses, and that actually helps you — the one breaking your back every day. Here AI is invisible: <b>simple, beautiful, no BS</b>. Does the work and shuts up.</>,
    metaA: <>From <b>Buenos Aires</b><br/>to the world</>,
    metaB: <><b>3 live products</b><br/>more on the way</>,
    metaC: <>No forced login,<br/>no hype, <b>no tricks</b>.</>,
    ticker: ['apps & websites with AI', 'that work without a manual', 'invisible AI', 'no BS', 'no dark patterns', 'no fake trials', 'hey, try it', 'for working people', 'for family', 'for you'],
    sec1Num: '01 — philosophy',
    sec1Title: <>We do things <em>backwards</em> from everyone else.</>,
    steps: [
      { tag: '/// first', art: 'the user', h: 'First we think about your mom.', p: "If someone who didn't grow up with a phone in their hand can't use it, we don't ship it. That simple." },
      { tag: '/// then', art: 'the function', h: 'AI that works in silence.', p: 'We use AI where it actually helps: understanding what you type, sorting what you jot down, guessing what you need. No chatbots, no hype.' },
      { tag: '/// finally', art: 'the beauty', h: 'And finally, make it beautiful.', p: "Because what you use every day deserves to be beautiful. It's not vanity — it's respect." },
    ],
    demoEyebrow: '02 — live product',
    demoTitle: <>Meet <em>Obra Simple</em>.</>,
    demoBody: <>The studio's first product. An app for <b>architects, site managers, and construction companies</b> to run their projects without paper notes, without Excel, without losing their minds. <b>It's already live</b> — go check it out, try it, tell us what you think.</>,
    demoBullets: ['project management in plain language', 'AI builds the budgets for you', 'designed for everyday life on site', 'works on phone, in the office, anywhere'],
    demoCtaPrimary: 'open obrasimple.com.ar',
    demoCtaSecondary: 'open obrasimple.lat',
    demoTag: 'live product',
    demoCardKicker: 'obra simple',
    demoCardTitle: 'construction management, simple.',
    demoCardSub: 'the app that takes the chaos out of running your projects.',
    sec3Num: '03 — manifesto',
    manifesto: <><b>CHE</b> comes from Mapuche and means <em>people</em>. <b>SIMPLE</b> is how we build things. <b>AI</b> is the tool that makes simplicity possible. That's why every product has <em>Simple</em> in its name — like <b>Obra Simple</b> — because we believe the best AI is <b>the kind you don't notice</b>. The kind your mom uses without asking for help, the kind the kiosk kid opens while helping a customer, the kind that <em>simply works</em>. We don't make apps to win awards. We make them for the people who <b>go out and work every day</b>.</>,
    sig: '— the CHESIMPLE/AI team',
    manifestoMetaA: 'Buenos Aires, Argentina',
    manifestoMetaB: 'a new product every quarter',
    footBig: <>Hi, <em>tell us</em> what you need.</>,
    footColA: { h: 'products', items: ['Obra Simple — obrasimple.com.ar', 'Obra Simple — obrasimple.lat'] },
    footColB: { h: 'company', items: ['philosophy', 'manifesto', 'chesimpleai@gmail.com'] },
    footBottom: '© 2026 CHESIMPLE/AI — handmade, in Buenos Aires',
  }
};

function BrandMark({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="55 60 290 300" fill="none" aria-hidden="true" style={{ flexShrink: 0 }}>
      <path
        d="M 302 146 A 118 118 0 0 1 145 309 L 83 345 L 96 260 A 118 118 0 0 1 240 94"
        stroke="var(--ink)" strokeWidth="28" strokeLinecap="round" strokeLinejoin="round"
      />
      <circle cx="285" cy="104" r="20" fill="var(--accent)"/>
      <rect x="156" y="156" width="22" height="54" rx="11" fill="var(--ink)"/>
      <rect x="222" y="156" width="22" height="54" rx="11" fill="var(--ink)"/>
      <path d="M 140 240 Q 200 296 260 240" stroke="var(--ink)" strokeWidth="24" strokeLinecap="round"/>
    </svg>
  );
}

function LangSeg({ lang, setLang }) {
  return (
    <div className="seg" role="group" aria-label="Language">
      <button aria-pressed={lang === 'es'} onClick={() => setLang('es')}>ES</button>
      <button aria-pressed={lang === 'en'} onClick={() => setLang('en')}>EN</button>
    </div>
  );
}

function ThemeChip({ theme, setTheme }) {
  return (
    <button className="chip" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} aria-label="Theme">
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: theme === 'light' ? 'var(--accent)' : 'var(--bg)', border: '1px solid var(--line)' }}/>
      {theme === 'light' ? 'día' : 'noche'}
    </button>
  );
}

function StepArt({ kind }) {
  if (kind === 'el usuario' || kind === 'the user') {
    return (
      <svg viewBox="0 0 200 100" width="100%" height="100%">
        {/* Three little silhouettes — generic */}
        <g transform="translate(40,30)">
          <circle cx="0" cy="0" r="12" fill="var(--ink)"/>
          <rect x="-14" y="10" width="28" height="32" rx="8" fill="var(--ink)"/>
        </g>
        <g transform="translate(100,26)">
          <circle cx="0" cy="0" r="14" fill="var(--accent)"/>
          <rect x="-16" y="12" width="32" height="36" rx="8" fill="var(--accent)"/>
        </g>
        <g transform="translate(160,32)">
          <circle cx="0" cy="0" r="11" fill="var(--ink)" opacity=".6"/>
          <rect x="-13" y="9" width="26" height="30" rx="7" fill="var(--ink)" opacity=".6"/>
        </g>
      </svg>
    );
  }
  if (kind === 'la función' || kind === 'the function') {
    return (
      <svg viewBox="0 0 200 100" width="100%" height="100%">
        <rect x="30" y="28" width="140" height="44" rx="10" fill="var(--card)" stroke="var(--line)"/>
        <circle cx="52" cy="50" r="10" fill="var(--accent)"/>
        <rect x="72" y="44" width="70" height="5" rx="2" fill="var(--ink)"/>
        <rect x="72" y="54" width="40" height="4" rx="2" fill="var(--muted)"/>
      </svg>
    );
  }
  // belleza
  return (
    <svg viewBox="0 0 200 100" width="100%" height="100%">
      <circle cx="60" cy="50" r="26" fill="var(--accent)"/>
      <rect x="92" y="30" width="40" height="40" rx="10" fill="var(--ink)"/>
      <path d="M140 70 Q158 38, 180 70" stroke="var(--ink)" strokeWidth="3" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

function App() {
  const [theme, setTheme] = useS(() => {
    try { return localStorage.getItem('chesimple.theme') || 'light'; } catch (_) { return 'light'; }
  });
  const [lang, setLang] = useS(() => {
    try {
      const saved = localStorage.getItem('chesimple.lang');
      if (saved) return saved;
      return (window.__TWEAKS__ && window.__TWEAKS__.language) || 'es';
    } catch (_) { return 'es'; }
  });
  const [tweaksOpen, setTweaksOpen] = useS(false);

  useE(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('chesimple.theme', theme); } catch (_) {}
  }, [theme]);

  useE(() => {
    document.documentElement.setAttribute('lang', lang);
    try { localStorage.setItem('chesimple.lang', lang); } catch (_) {}
  }, [lang]);

  // Edit mode / tweaks
  useE(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweaksOpen(true);
      if (d.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setLangPersist = (v) => {
    setLang(v);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { language: v } }, '*');
    } catch(_) {}
  };

  const C = COPY[lang];
  const ticker = [...C.ticker, ...C.ticker];

  return (
    <>
      {/* NAV */}
      <header className="nav">
        <div className="nav-inner">
          <div className="brand">
            <BrandMark/>
            CHESIMPLE/AI
          </div>
          <nav className="nav-links">
            <a href="#filosofia">{C.nav.filosofia}</a>
            <a href="#productos">{C.nav.productos}</a>
            <a href="#manifiesto">{C.nav.manifiesto}</a>
          </nav>
          <div className="nav-actions">
            <LangSeg lang={lang} setLang={setLangPersist}/>
            <ThemeChip theme={theme} setTheme={setTheme}/>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="hero" style={{ paddingTop: 56, paddingBottom: 48 }}>
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <span className="eyebrow"><span className="blip"/>{C.eyebrow}</span>
              <h1>
                {C.heroA}<br/>
                <em>{C.heroEm}</em> {C.heroB}<br/>
                {C.heroC}
              </h1>
              <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 32, alignItems: 'end' }} className="hero-sub">
                <p className="hero-lede">{C.lede}</p>
                <div className="hero-meta">
                  <span>{C.metaA}</span>
                  <span>{C.metaB}</span>
                  <span>{C.metaC}</span>
                </div>
              </div>
            </div>
            <div>
              <Mascot/>
            </div>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <div className="ticker" aria-hidden="true">
        <div className="ticker-track">
          {ticker.map((t, i) => (
            <span key={i}><span className="dot">✦</span> &nbsp; {t}</span>
          ))}
        </div>
      </div>

      {/* FILOSOFÍA */}
      <section id="filosofia">
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-num">{C.sec1Num}</div>
            <h2 className="sec-title">{C.sec1Title}</h2>
          </div>
          <div className="steps">
            {C.steps.map((s, i) => (
              <div className="step" key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <span className="step-tag">{s.tag}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>0{i+1}/03</span>
                </div>
                <div className="step-art">
                  <StepArt kind={s.art}/>
                </div>
                <div>
                  <h3>{s.h}</h3>
                  <p style={{ marginTop: 10 }}>{s.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* OBRA SIMPLE — featured real product */}
      <section id="obra" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="wrap">
          <div style={{
            background: '#0A0A0A',
            color: '#F6F2E9',
            borderRadius: 32,
            padding: 'clamp(40px, 5vw, 72px)',
            display: 'grid',
            gridTemplateColumns: '1.2fr 1fr',
            gap: 48,
            alignItems: 'center',
            position: 'relative',
            overflow: 'hidden',
          }} className="obra-card">
            {/* Background grid accent */}
            <div aria-hidden style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(ellipse at 85% 20%, rgba(243,183,10,.12), transparent 60%)',
              pointerEvents: 'none',
            }}/>
            <div style={{ position: 'relative' }}>
              <span className="mono" style={{ fontSize: 11, color: '#F3B70A', letterSpacing: '.08em', textTransform: 'uppercase' }}>
                /// {lang === 'es' ? 'producto destacado' : 'featured product'}
              </span>
              <h3 style={{
                fontFamily: 'var(--sans)',
                fontWeight: 800,
                fontSize: 'clamp(40px, 5.5vw, 76px)',
                letterSpacing: '-0.035em',
                lineHeight: 0.95,
                margin: '18px 0 8px',
              }}>
                OBRA<br/>
                <span style={{ color: '#F3B70A' }}>SIMPLE</span>
              </h3>
              <div style={{
                fontFamily: 'var(--mono)',
                fontSize: 13,
                letterSpacing: '.12em',
                textTransform: 'uppercase',
                borderTop: '1px solid rgba(246,242,233,.2)',
                paddingTop: 14,
                marginTop: 8,
                color: '#F6F2E9',
                display: 'inline-block',
                paddingRight: 40,
              }}>
                {lang === 'es' ? 'bajo control' : 'under control'}
              </div>
              <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: '48ch', marginTop: 28, color: 'rgba(246,242,233,.85)' }}>
                {lang === 'es'
                  ? <>La <b style={{ color: '#F6F2E9' }}>PWA</b> que usan los maestros mayores y los capataces para saber, sin entrar a una planilla, <b style={{ color: '#F6F2E9' }}>en qué está cada obra</b>. Materiales, pagos, avance. Todo en el bolsillo, sin bajar nada.</>
                  : <>The <b style={{ color: '#F6F2E9' }}>PWA</b> foremen and site managers use to know, without opening a spreadsheet, <b style={{ color: '#F6F2E9' }}>where every site stands</b>. Materials, payments, progress. All in their pocket — no install needed.</>}
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 20, flexWrap: 'wrap' }}>
                <a href="https://obrasimple.com.ar" target="_blank" rel="noopener" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: '#F3B70A', color: '#0A0A0A',
                  padding: '10px 16px', borderRadius: 999,
                  fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600,
                  textDecoration: 'none', letterSpacing: '.02em',
                }}>→ obrasimple.com.ar</a>
                <a href="https://obrasimple.lat" target="_blank" rel="noopener" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: 'transparent', color: '#F6F2E9',
                  border: '1px solid rgba(246,242,233,.3)',
                  padding: '10px 16px', borderRadius: 999,
                  fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 500,
                  textDecoration: 'none', letterSpacing: '.02em',
                }}>obrasimple.lat</a>
              </div>
              <div style={{ display: 'flex', gap: 24, marginTop: 24, flexWrap: 'wrap', fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(246,242,233,.7)' }}>
                <span><b style={{ color: '#F3B70A', fontWeight: 600 }}>PWA</b> {lang === 'es' ? 'funciona offline' : 'works offline'}</span>
                <span><b style={{ color: '#F3B70A', fontWeight: 600 }}>+140</b> {lang === 'es' ? 'obras activas' : 'active sites'}</span>
                <span><b style={{ color: '#F3B70A', fontWeight: 600 }}>2026</b> {lang === 'es' ? 'lanzamiento' : 'launched'}</span>
              </div>
            </div>

            {/* Logo tile */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <div style={{
                width: '100%', maxWidth: 360, aspectRatio: '1/1',
                background: '#0A0A0A',
                borderRadius: 20,
                border: '1px solid rgba(246,242,233,.12)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 24, position: 'relative',
              }}>
                <img src="obra-simple-logo.png" alt="Obra Simple" style={{ width: '100%', height: '100%', objectFit: 'contain' }}/>
                {/* corner tag */}
                <div style={{
                  position: 'absolute', top: 14, left: 14,
                  fontFamily: 'var(--mono)', fontSize: 10,
                  color: 'rgba(246,242,233,.4)', letterSpacing: '.1em'
                }}>/// PWA · en vivo</div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 860px) {
            .obra-card { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* PRODUCTO / DEMO */}
      <section id="productos" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div className="sec-head">
            <div className="sec-num">{C.demoEyebrow}</div>
            <h2 className="sec-title">{C.demoTitle}</h2>
          </div>
          <div className="demo-wrap">
            <div className="demo-copy">
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', margin: '0 0 24px' }}>{C.demoBody}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
                {C.demoBullets.map((b, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--mono)', fontSize: 13 }}>
                    <span style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--accent)', color: 'var(--accent-ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>✓</span>
                    {b}
                  </li>
                ))}
              </ul>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
                <a href="https://obrasimple.com.ar" target="_blank" rel="noopener noreferrer"
                   style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 22px', background: 'var(--accent)', color: 'var(--accent-ink)', fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 700, textDecoration: 'none', borderRadius: 8, textTransform: 'lowercase' }}>
                  {C.demoCtaPrimary} ↗
                </a>
                <a href="https://obrasimple.lat" target="_blank" rel="noopener noreferrer"
                   style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 22px', border: '1px solid var(--rule)', color: 'var(--ink)', fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 700, textDecoration: 'none', borderRadius: 8, textTransform: 'lowercase' }}>
                  {C.demoCtaSecondary} ↗
                </a>
              </div>
            </div>
            <div>
              <ObraSimpleCard C={C} />
            </div>
          </div>
        </div>
      </section>

      {/* MANIFIESTO */}
      <section id="manifiesto">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: 32 }}>
            <div className="sec-num">{C.sec3Num}</div>
            <div/>
          </div>
          <div className="manifesto">
            <div className="manifesto-inner">
              <div className="sig">{C.manifesto}</div>
              <div className="manifesto-meta">
                <div className="signature">{C.sig}</div>
                <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
                  <span>{C.manifestoMetaA}</span>
                  <span>{C.manifestoMetaB}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer>
        <div className="wrap">
          <div className="foot-grid">
            <h2 className="foot-big">{C.footBig}</h2>
            <div className="foot-col">
              <h4>{C.footColA.h}</h4>
              <ul>{C.footColA.items.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
            </div>
            <div className="foot-col">
              <h4>{C.footColB.h}</h4>
              <ul>{C.footColB.items.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
            </div>
          </div>
          <div className="foot-bottom">
            <span>{C.footBottom}</span>
            <span>v0.3 · {lang.toUpperCase()} · {theme === 'light' ? 'día' : 'noche'}</span>
          </div>
        </div>
      </footer>

      {/* TWEAKS */}
      <div className={`tweaks ${tweaksOpen ? 'open' : ''}`}>
        <h5>Tweaks</h5>
        <div className="tweak-row">
          <span>idioma</span>
          <LangSeg lang={lang} setLang={setLangPersist}/>
        </div>
        <div className="tweak-row">
          <span>tema</span>
          <div className="seg">
            <button aria-pressed={theme === 'light'} onClick={() => setTheme('light')}>día</button>
            <button aria-pressed={theme === 'dark'} onClick={() => setTheme('dark')}>noche</button>
          </div>
        </div>
      </div>
    </>
  );
}

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