const MODULES = [
  {
    id: 'compras', icon: 'Cart', title: 'Compras',
    items: ['Órdenes de Compra', 'Facturas', 'Insumos'],
    blurb: 'Fijás un objetivo de compra semanal y el sistema te muestra cuánto generaste, cuánto entró y cuánto falta. Cuando llega la factura, se controla contra la orden.',
    bullets: ['Facturas con foto desde el celular, o imagen y PDF desde la PC', 'Objetivo semanal con desvío e historial de cumplimiento', 'Control de entregas: pediste 36 lt, llegó 18 lt', 'Semáforo de diferencias: no entregado, cant. menor, precio dif., agregado', 'Histórico de precios por insumo y proveedor'],
  },
  {
    id: 'cocina', icon: 'Chef', title: 'Cocina',
    items: ['Elaboraciones', 'Recetas', 'Carta'],
    blurb: 'Fichas técnicas con costo por porción, elaboraciones anidadas y la carta entera con su semáforo de incidencia.',
    bullets: ['Costo x porción en vivo, con rinde y composición', 'Elaboraciones reutilizables (salsas, fondos, masas)', 'Precio sugerido según margen objetivo', 'En carta / fuera de carta / ejecutivos / especiales'],
  },
  {
    id: 'barra', icon: 'Wine', title: 'Barra',
    items: ['Vinos', 'Tragos'],
    blurb: 'La bodega y la coctelería con la misma lógica de costeo que la cocina. Porque la barra también tiene incidencia.',
    bullets: ['Vinos por bodega, cepa y zona', 'Costo, precio sugerido y contribución por botella', 'Carta de vinos generada desde el sistema', 'Tragos costeados por medida'],
  },
  {
    id: 'operacion', icon: 'Dollar', title: 'Operación',
    items: ['Ventas', 'Inventario'],
    blurb: 'Cargás la venta del día y el consumo real de cocina. El sistema separa mediodía, noche y eventos, y te dice cuántos servicios tenés cargados.',
    bullets: ['Ventas por servicio y por cubierto', 'Consumo real por insumo, con su origen', 'Muestreo explícito: 20 de 21 servicios', 'Inventario y papelera con recuperación'],
  },
  {
    id: 'analisis', icon: 'Trend', title: 'Análisis',
    items: ['Incidencia', 'Ranking', 'Ingeniería de menú', 'Histórico'],
    blurb: 'La incidencia real contra la teórica, plato por plato. Y una matriz por sección que te dice qué hacer con cada uno: subirlo, moverlo de lugar o sacarlo de la carta.',
    bullets: ['Incidencia real vs. teórica, con el desvío en puntos', 'Ingeniería de menú: estrella, caballo, rompecabezas, perro', 'Ranking por unidades, facturación y contribución', 'Histórico mensual con semáforo ≤30 / 31-35 / >35'],
  },
  {
    id: 'informes', icon: 'Bars', title: 'Informes',
    items: ['Estadísticas'],
    blurb: 'El cierre de mes en una pantalla, comparado contra el anterior. Listo para mandarle al contador o al socio.',
    bullets: ['Cierre de mes con comparativo y PDF', 'Compras por rubro y por proveedor', 'Variación de precios por categoría', 'ABC de insumos: dónde está tu plata'],
  },
];

const Features = () => {
  const [active, setActive] = React.useState('compras');
  const m = MODULES.find(x => x.id === active);

  return (
    <section id="producto" style={{ paddingTop: 112 }}>
      <div className="container">
        <SectionHead eyebrow="Módulos"
          title={<>Toda la operación, <em>en un solo lugar.</em></>}
          blurb="Seis módulos que cubren desde el objetivo de compra semanal hasta la ingeniería de menú. Todo alimentado por los mismos datos, así que nunca hay dos números distintos para la misma pregunta."/>

        <div className="no-scrollbar" style={{ display: 'flex', gap: 6, marginBottom: 22, overflowX: 'auto', paddingBottom: 4 }}>
          {MODULES.map(x => {
            const on = x.id === active;
            return (
              <button key={x.id} onClick={() => setActive(x.id)} style={{
                padding: '9px 15px', borderRadius: 999, cursor: 'pointer',
                border: '1px solid ' + (on ? 'var(--primary)' : 'var(--line)'),
                background: on ? 'var(--primary)' : 'var(--bg-card)',
                color: on ? '#fff' : 'var(--ink-soft)',
                fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
                whiteSpace: 'nowrap', transition: 'all 150ms ease',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ display: 'inline-flex', opacity: .85 }}>{React.createElement(Icon[x.icon], { size: 15 })}</span>
                {x.title}
              </button>
            );
          })}
        </div>

        <div className="feat-grid" style={{
          display: 'grid', gridTemplateColumns: '340px 1fr', gap: 0,
          background: 'var(--bg-card)', border: '1px solid var(--line)',
          borderRadius: 'var(--radius-xl)', overflow: 'hidden', minHeight: 470,
        }}>
          <div style={{ padding: 34, display: 'flex', flexDirection: 'column' }}>
            <div style={{
              width: 42, height: 42, borderRadius: 10, background: 'var(--primary-tint)', color: 'var(--primary)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
            }}>{React.createElement(Icon[m.icon], { size: 21 })}</div>

            <h3 className="display" style={{ fontSize: 33, margin: '0 0 8px' }}>{m.title}</h3>
            <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 16 }}>
              {m.items.map(it => (
                <span key={it} style={{
                  fontFamily: 'var(--mono)', fontSize: 9.5, padding: '3px 8px',
                  background: 'var(--bg-soft)', border: '1px solid var(--line)',
                  borderRadius: 999, color: 'var(--ink-muted)',
                }}>{it}</span>
              ))}
            </div>
            <p className="body" style={{ fontSize: 15, marginBottom: 24 }}>{m.blurb}</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {m.bullets.map(b => (
                <li key={b} style={{ display: 'flex', gap: 9, alignItems: 'flex-start', fontSize: 14, color: 'var(--ink-soft)' }}>
                  <span style={{ color: 'var(--accent)', marginTop: 3, flexShrink: 0 }}><Icon.Check size={14}/></span>{b}
                </li>
              ))}
            </ul>
          </div>

          <div style={{ background: 'var(--bg)', borderLeft: '1px solid var(--line)', padding: 22, display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }} className="feat-visual">
            <ScaleToFit design={430}>
              {active === 'compras' && <OcVisual/>}
              {active === 'cocina' && <CocinaVisual/>}
              {active === 'barra' && <BarraVisual/>}
              {active === 'operacion' && <OperacionVisual/>}
              {active === 'analisis' && <AnalisisVisual/>}
              {active === 'informes' && <InformesVisual/>}
            </ScaleToFit>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:940px){.feat-grid{grid-template-columns:1fr !important}.feat-visual{border-left:none !important;border-top:1px solid var(--line)}}@media (max-width:560px){.feat-grid>div:first-child{padding:24px !important}.feat-visual{padding:16px !important}}`}</style>
    </section>
  );
};

const FCard = ({ children, pad }) => (
  <div style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 10, padding: pad || 14, boxShadow: 'var(--shadow-sm)' }}>{children}</div>
);
const fth = { fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-muted)' };

const OcVisual = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <FCard pad={13}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 9, gap: 10 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600 }}>Compras de la semana</div>
          <div style={{ fontSize: 9.5, color: 'var(--ink-muted)', marginTop: 2 }}>17/08 al 23/08 · con IVA, sin vinos · 11 órdenes</div>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-muted)', whiteSpace: 'nowrap' }}>
          Objetivo <span style={{ color: 'var(--ink)', fontWeight: 600 }}>$4.500.000</span>
        </div>
      </div>
      <div style={{ height: 5, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden', marginBottom: 11 }}>
        <div style={{ width: '95%', height: '100%', background: '#A8873E' }}/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
        {[
          ['GENERADO', '$4.264.349', '95% del objetivo', '#A8873E'],
          ['RECIBIDO', '$3.229.897', 'ya ingresó', null],
          ['PENDIENTE', '$1.034.451', 'falta llegar', null],
          ['QUEDA', '$235.651', 'para el objetivo', null],
        ].map(([l, v, n, c]) => (
          <div key={l}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 7.5, letterSpacing: '.09em', color: 'var(--ink-muted)', marginBottom: 3 }}>{l}</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600, color: c || 'var(--ink)', lineHeight: 1.1 }}>{v}</div>
            <div style={{ fontSize: 8, color: 'var(--ink-muted)', marginTop: 2 }}>{n}</div>
          </div>
        ))}
      </div>
    </FCard>

    <FCard pad={13}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 9 }}>
        <span style={{ color: 'var(--bad)', display: 'inline-flex' }}><Icon.Box size={12}/></span>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--bad)' }}>No llegó completo</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-muted)' }}>(10)</span>
      </div>
      {[
        ['Aceite de oliva salon', 'Delico · 0006-00055364', 'pediste 36 lt', 'llegó 18 lt'],
        ['Salmon filet', 'Alamenia · 00002-00084650', 'pediste 8 kg', 'llegó 6,7 kg'],
        ['Lentejon', 'El triunfo · 00004-00128024', 'pediste 1 unidad', 'no llegó'],
        ['Asado a 10 cost.', 'Marilu Damiano · 0007-00687122', 'pediste 6 kg', 'llegó 5,48 kg'],
        ['Sal fina', 'El triunfo · 00004-00128024', 'pediste 15 kg', 'llegó 12 kg'],
      ].map(([n, s, ped, lleg]) => (
        <div key={n} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10,
          padding: '7px 0', borderTop: '1px solid var(--line)',
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</div>
            <div style={{ fontSize: 8.5, color: 'var(--ink-muted)', fontFamily: 'var(--mono)' }}>{s}</div>
          </div>
          <div style={{ textAlign: 'right', flexShrink: 0, fontFamily: 'var(--mono)' }}>
            <div style={{ fontSize: 8.5, color: 'var(--ink-muted)' }}>{ped}</div>
            <div style={{ fontSize: 10, color: 'var(--bad)', fontWeight: 600 }}>{lleg}</div>
          </div>
        </div>
      ))}
    </FCard>
  </div>
);

const AnalisisVisual = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
      <KpiCard label="Inc. teórica" value="33.1%" note="según fichas"/>
      <KpiCard label="Inc. real" value="25.1%" note="muestreo 20/21" highlight/>
      <KpiCard label="Desvío" value="−8.0 pts" note="real vs teórica"/>
    </div>
    <FCard pad={13}>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 3 }}>Ingeniería de menú</div>
      <div style={{ fontSize: 9.5, color: 'var(--ink-muted)', marginBottom: 11 }}>Promociones · 5 productos · una matriz por sección</div>
      <MenuMatrix compact/>
    </FCard>
  </div>
);

const COCINA_PLATOS = [
  { n: 'Mejillones Provenzal', d: 'Mejillones frescos cocidos en su jugo con vino blanco, aceite de oliva, abundante ajo y perejil.', i: 'Mejillones frescos · Vino · Aceite de oliva', c: 5393 },
  { n: 'Molleja al Verdeo', d: 'Mollejas de res salteadas al momento en salsa de crema, cebolla de verdeo y vino blanco.', i: 'Papa · Molleja', c: 7282 },
  { n: 'Petit Camambert', d: 'Queso Camembert entero al horno con mermelada artesanal de morrón, jamón crudo serrano y rúcula.', i: 'Morron rojo · Rucula · Camambert · Jamon crudo', c: 5782 },
  { n: 'Rabas al Romana', d: 'Anillos de calamar rebozados al estilo tradicional, acompañados de salsa tártara casera y limón.', i: 'Tubo de calamar · Harina 0000 · Salsa tartara', c: 6234 },
];

const CocinaVisual = () => (
  <FCard>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 21, marginBottom: 3 }}>Recetas</div>
    <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginBottom: 14 }}>Entradas · 11 platos</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
      {COCINA_PLATOS.map(p => (
        <div key={p.n} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', paddingBottom: 9, borderBottom: '1px solid var(--line)' }}>
          <span style={{
            width: 24, height: 24, borderRadius: 6, background: 'var(--accent-tint)', color: 'var(--accent)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}><Icon.Chef size={13}/></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, marginBottom: 2 }}>{p.n}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-muted)', fontStyle: 'italic', lineHeight: 1.4, marginBottom: 3 }}>{p.d}</div>
            <div style={{ fontSize: 9.5, color: 'var(--ink-muted)', fontFamily: 'var(--mono)' }}>{p.i}</div>
          </div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--good)', fontWeight: 600, flexShrink: 0 }}>{ars(p.c)}</span>
        </div>
      ))}
    </div>
  </FCard>
);

const BarraVisual = () => (
  <FCard>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 21, marginBottom: 3 }}>Carta de Vinos</div>
    <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginBottom: 14 }}>Tintos · 47 etiquetas</div>
    <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 70px 70px 54px', gap: 6, padding: '6px 0', borderBottom: '1px solid var(--line)' }}>
      <span style={fth}>Vino</span>
      <span style={{ ...fth, textAlign: 'right' }}>Costo</span>
      <span style={{ ...fth, textAlign: 'right' }}>P.Carta</span>
      <span style={{ ...fth, textAlign: 'right' }}>FC</span>
    </div>
    {[
      { n: 'Bianchi — Enzo Bianchi', s: 'Malbec · Luján de Cuyo (Mendoza)', c: 54167, p: 190000, fc: 28.5 },
      { n: 'Bianchi — Particular', s: 'Malbec · Mendoza', c: 9167, p: 42000, fc: 21.8 },
      { n: 'Catena Zapata — Alamos', s: 'Malbec · Luján de Cuyo (Mendoza)', c: 5460, p: 18000, fc: 30.3 },
      { n: 'Catena Zapata — Angélica', s: 'Cabernet Franc · Valle de Uco', c: 19850, p: 59000, fc: 33.6 },
      { n: 'Rutini — Colección', s: 'Cabernet Sauvignon · Tupungato', c: 14200, p: 52000, fc: 27.3 },
    ].map(v => (
      <div key={v.n} style={{ display: 'grid', gridTemplateColumns: '1.5fr 70px 70px 54px', gap: 6, padding: '7px 0', borderBottom: '1px dashed var(--line)', fontSize: 11, alignItems: 'center' }}>
        <span style={{ minWidth: 0 }}>
          <span style={{ display: 'block', fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.n}</span>
          <span style={{ fontSize: 9.5, color: 'var(--ink-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block' }}>{v.s}</span>
        </span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, textAlign: 'right', color: 'var(--ink-soft)' }}>{ars(v.c)}</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, textAlign: 'right', fontWeight: 600 }}>{ars(v.p)}</span>
        <span style={{ textAlign: 'right' }}><FcPill pct={v.fc} showIcon={false}/></span>
      </div>
    ))}
  </FCard>
);

const OperacionVisual = () => {
  const inc = [23.5, 23.8, 22.6, 25.9, 25.7];
  const meses = ['Abr', 'May', 'Jun', 'Jul', 'Ago'];
  const w = 300, h = 88, lo = 18, hi = 34;
  const pts = inc.map((v, i) => [(i / (inc.length - 1)) * w, h - ((v - lo) / (hi - lo)) * h]);
  const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const y30 = h - ((30 - lo) / (hi - lo)) * h;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <KpiCard label="Ventas del mes" value="$41.750.699" delta="↓ 48.6% vs anterior" deltaTone="bad"/>
        <KpiCard label="Cubiertos" value="1.654" note="ticket prom. $25.242" highlight/>
      </div>
      <FCard>
        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>Evolución de incidencia real — Mediodía</div>
        <svg viewBox={`0 0 ${w} ${h + 16}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
          <line x1="0" y1={y30} x2={w} y2={y30} stroke="var(--good)" strokeWidth="1" strokeDasharray="4 4" opacity=".6"/>
          <path d={line} fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
          {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="3.2" fill="var(--bg-card)" stroke="var(--primary)" strokeWidth="1.8"/>)}
          {meses.map((mm, i) => (
            <text key={mm} x={pts[i][0]} y={h + 12} textAnchor="middle" fontSize="8.5" fill="var(--ink-muted)" fontFamily="var(--mono)">{mm}</text>
          ))}
        </svg>
        <div style={{ fontSize: 9.5, color: 'var(--ink-muted)', fontFamily: 'var(--mono)', marginTop: 4 }}>línea punteada = objetivo 30%</div>
      </FCard>
      <FCard pad={12}>
        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>Ventas por servicio</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Donut size={68} thickness={13} slices={[
            { pct: 55, color: '#A8873E' }, { pct: 35, color: '#D5825C' }, { pct: 10, color: '#1B3A2D' },
          ]}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[['Mediodía', '55%', '#A8873E'], ['Eventos', '35%', '#D5825C'], ['Noche', '10%', '#1B3A2D']].map(([l, p, c]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: c }}/>
                <span style={{ color: 'var(--ink-soft)' }}>{l}</span>
                <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </FCard>
    </div>
  );
};

const InformesVisual = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
      <div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1 }}>Cierre de Mes</div>
        <div style={{ fontSize: 10.5, color: 'var(--ink-muted)', marginTop: 3 }}>Agosto 2026 · contra Julio 2026</div>
      </div>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 10px',
        border: '1px solid var(--line-strong)', borderRadius: 6, fontSize: 10.5, background: 'var(--bg-card)',
      }}><Icon.Doc size={11}/>Descargar PDF</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
      <KpiCard label="Compras" value="$13.809.575" delta="↓ 45.1%" deltaTone="good"/>
      <KpiCard label="Incidencia real" value="25.1%" delta="↑ +0.1 pts" note="muestreo: 20 de 21"/>
      <KpiCard label="Ticket prom." value="$25.242" delta="↓ 13.1%" deltaTone="bad"/>
    </div>
    <FCard>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>Compras por rubro</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 80px 62px 46px', gap: 6, padding: '5px 0', borderBottom: '1px solid var(--line)' }}>
        <span style={fth}>Rubro</span>
        <span style={{ ...fth, textAlign: 'right' }}>Mes</span>
        <span style={{ ...fth, textAlign: 'right' }}>Var.</span>
        <span style={{ ...fth, textAlign: 'right' }}>% tot.</span>
      </div>
      {[
        ['Carnes', 5618458, '−44.6%', '40.7%'], ['Almacén', 3153801, '−4.3%', '22.8%'],
        ['Verduras y Frutas', 1665430, '−46.5%', '12.1%'], ['Lácteos y Fiambres', 1505966, '−28.6%', '10.9%'],
        ['Pescados y Mariscos', 1200643, '−35.4%', '8.7%'], ['Bebidas', 665277, '−83.5%', '4.8%'],
      ].map(([r, v, d, p]) => (
        <div key={r} style={{ display: 'grid', gridTemplateColumns: '1.2fr 80px 62px 46px', gap: 6, padding: '6px 0', borderBottom: '1px dashed var(--line)', fontSize: 11, alignItems: 'center' }}>
          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, textAlign: 'right', fontWeight: 600 }}>{ars(v)}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, textAlign: 'right', color: 'var(--good)' }}>{d}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, textAlign: 'right', color: 'var(--ink-muted)' }}>{p}</span>
        </div>
      ))}
    </FCard>
  </div>
);

window.Features = Features;