/* WildTrack — Section 5 — Display Modes (Light / Dark / Field) */

function ModesPage() {
  return (
    <div style={{ background: '#FAFAFA', minHeight: '100vh' }}>
      <PageHeader active="Modes"/>

      <main style={{ maxWidth: 1480, margin: '0 auto', padding: '64px 48px 96px' }}>
        <Intro/>

        <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', justifyContent: 'flex-start', marginTop: 64 }}>
          <ModeFrame label="01 · Standard Light"
            sub="Default UI · indoor or vehicle-mounted"
            details={['16px body', '48px targets', 'White chrome', '± 4m accuracy in metres']}>
            <LightMap/>
          </ModeFrame>
          <ModeFrame label="02 · Dark"
            sub="Evening · low-light · in-blind use"
            details={['16px body', '48px targets', 'Dark chrome on dark map', 'Same density as Light']}>
            <DarkMap/>
          </ModeFrame>
          <ModeFrame label="03 · Field Mode"
            sub="Sunlight · gloves · single-handed"
            details={['19px body (+20%)', '56px targets minimum', 'GOOD / FAIR / POOR not metres', 'Single primary action only']} highlight>
            <FieldMap/>
          </ModeFrame>
        </div>

        <ChartCompare/>

        <BehaviourNotes/>
      </main>
    </div>
  );
}

function PageHeader({ active }) {
  const sections = ['Overview', 'Brand', 'Mobile', 'Portal', 'Components', 'Modes'];
  const links = { Overview: 'system.html', Brand: 'Brand.html', Mobile: 'Mobile.html', Portal: 'Portal.html', Components: 'Components.html', Modes: 'Modes.html' };
  return (
    <header className="rh-page-header">
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <svg width="32" height="32" viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="78" fill="none" stroke="#52B788" strokeWidth="6" strokeDasharray="38 22" transform="rotate(-20 100 100)"/>
          <circle cx="100" cy="100" r="58" fill="none" stroke="#52B788" strokeWidth="3"/>
          <path d="M100 70 C82 70 78 86 88 100 L100 124 L112 100 C122 86 118 70 100 70 Z" fill="#52B788"/>
        </svg>
        <div>
          <div className="rh-eyebrow">Section 05</div>
          <h1>Display Modes</h1>
        </div>
      </div>
      <nav className="rh-nav">
        {sections.map(s => <a key={s} href={links[s]} className={s === active ? 'active' : ''}>{s}</a>)}
      </nav>
    </header>
  );
}

function Intro() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
      <div>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#52B788', fontWeight: 500, marginBottom: 24 }}>
          Section 05 · Modes
        </div>
        <h2 className="font-display" style={{ fontSize: 56, fontWeight: 700, margin: 0, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          The same screen,<br/>three contexts.
        </h2>
      </div>
      <div style={{ fontSize: 16, lineHeight: 1.65, color: '#2A2A2A' }}>
        <p style={{ marginTop: 0 }}>
          The Map View is the platform's most-used surface. It has to work indoors at a desk, outside at dusk, and at noon in direct sunlight while the user is wearing winter gloves.
        </p>
        <p>
          <strong>Field Mode</strong> is the most aggressive variant — large targets, glanceable GPS quality (no decimal precision the user can't read at arm's length), and a single primary action. It activates automatically when brightness sensors trip a threshold, or manually via a dedicated hardware-toggle gesture.
        </p>
      </div>
    </div>
  );
}

function ModeFrame({ label, sub, details, highlight, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', position: 'relative' }}>
      <div className="rh-phone-label">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="lbl">{label}</span>
          {highlight && (
            <span style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: '#52B788', padding: '2px 8px',
              border: '1px solid #52B788', borderRadius: 999,
            }}>Recommended on bright days</span>
          )}
        </div>
        <span className="name" style={{ fontSize: 13, color: '#6C757D', fontWeight: 400 }}>{sub}</span>
      </div>
      <div className="rh-phone notch">
        <div className="rh-status">
          <span>9:41</span>
          <div className="rh-status-right">
            <Icon.Signal size={14} stroke="currentColor" sw={2}/>
            <Icon.Wifi size={14} stroke="currentColor" sw={2}/>
            <Icon.Battery size={18} stroke="currentColor" sw={2}/>
          </div>
        </div>
        <div className="rh-screen">{children}</div>
      </div>
      <div style={{ width: 390, marginTop: 16, padding: 16, background: 'white', border: '1px solid #E0E0E0', borderRadius: 10 }}>
        <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: '#52B788', textTransform: 'uppercase', marginBottom: 8 }}>
          Spec
        </div>
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {details.map(d => (
            <li key={d} style={{ fontSize: 13, color: '#1B1B1B', display: 'flex', gap: 8 }}>
              <span style={{ color: '#52B788' }}>·</span>
              {d}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

/* ─── LIGHT MAP — light overlays on dark topo (the topo itself is always dark for clarity) ─── */
function LightMap() {
  return (
    <div style={{ height: '100%', position: 'relative', background: '#1A2332', overflow: 'hidden' }}>
      <TopoMap width={390} height={790} variant="lake"
        tags={[{ x: 0.3, y: 0.35 }, { x: 0.55, y: 0.45 }, { x: 0.72, y: 0.55 }, { x: 0.42, y: 0.7 }]}
        others={[{ x: 0.78, y: 0.4, initials: 'TH' }]}
        userPos={[0.38, 0.55]}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />

      {/* Light top bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '14px 16px',
        background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)',
        borderBottom: '1px solid rgba(0,0,0,0.08)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon.ArrowLeft size={20} stroke="#1B1B1B"/>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 14, color: '#1B1B1B' }}>
              Lake District Zone A
            </div>
            <div className="font-mono" style={{ fontSize: 10, color: '#6C757D', letterSpacing: '0.12em', marginTop: 1 }}>
              4 MEMBERS · ACTIVE
            </div>
          </div>
        </div>
        <div style={{
          padding: '6px 10px', borderRadius: 999,
          background: '#D8F3DC', color: '#2D6A4F',
          fontSize: 11, fontFamily: 'JetBrains Mono, monospace', fontWeight: 500,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Icon.Crosshair size={12} stroke="#2D6A4F"/>
          ± 4m
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ position: 'absolute', top: 70, left: 0, right: 0, padding: '8px 16px', display: 'flex', gap: 8, overflowX: 'auto' }}>
        {[
          ['All', '4', true],
          ['Red Deer', '2'],
          ['Roe Deer', '1'],
          ['Pheasant', '1'],
        ].map(([l, c, a]) => (
          <div key={l} style={{
            padding: '6px 12px', borderRadius: 999,
            background: a ? '#2D6A4F' : 'white',
            color: a ? 'white' : '#1B1B1B',
            border: a ? 'none' : '1px solid #E0E0E0',
            fontSize: 12, fontWeight: 500,
            display: 'flex', gap: 6, alignItems: 'center', whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            {l} <span style={{ opacity: 0.7, fontSize: 10 }}>{c}</span>
          </div>
        ))}
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: 'white', borderTop: '1px solid #E0E0E0',
        borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '8px 20px 24px',
      }}>
        <div style={{ width: 36, height: 4, background: '#D0D0D0', borderRadius: 2, margin: '6px auto 14px' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Active Session
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#1B1B1B', marginTop: 4 }}>1h 23m · 4 tags logged</div>
          </div>
          <Icon.ChevronRight size={18} stroke="#6C757D"/>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: '12px',
            background: '#2D6A4F', border: 'none', borderRadius: 10,
            color: 'white', fontWeight: 600, fontSize: 14,
          }}>+ Register Tag</button>
          <button style={{
            padding: '12px',
            background: '#F5F5F5', border: '1px solid #E0E0E0',
            borderRadius: 10, color: '#1B1B1B', fontSize: 13,
          }}>
            <Icon.Layers size={16} stroke="#1B1B1B"/>
          </button>
        </div>
      </div>

      {/* Emergency FAB · 56px */}
      <div style={{
        position: 'absolute', bottom: 150, right: 16,
        width: 56, height: 56, borderRadius: 999, background: '#C0392B',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 24px -4px rgba(192,57,43,0.5)',
      }}>
        <Icon.Alert size={24} stroke="white"/>
      </div>
    </div>
  );
}

/* ─── DARK MAP ─── */
function DarkMap() {
  return (
    <div style={{ height: '100%', position: 'relative', background: '#0F1F18', overflow: 'hidden' }}>
      <TopoMap width={390} height={790} variant="lake"
        tags={[{ x: 0.3, y: 0.35 }, { x: 0.55, y: 0.45 }, { x: 0.72, y: 0.55 }, { x: 0.42, y: 0.7 }]}
        others={[{ x: 0.78, y: 0.4, initials: 'TH' }]}
        userPos={[0.38, 0.55]}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />

      {/* Dark top bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '14px 16px',
        background: 'rgba(15,31,24,0.92)', backdropFilter: 'blur(8px)',
        borderBottom: '1px solid rgba(82,183,136,0.18)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'white',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon.ArrowLeft size={20} stroke="white"/>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 14 }}>Lake District Zone A</div>
            <div className="font-mono" style={{ fontSize: 10, color: '#8BAF96', letterSpacing: '0.12em', marginTop: 1 }}>
              4 MEMBERS · ACTIVE
            </div>
          </div>
        </div>
        <div style={{
          padding: '6px 10px', borderRadius: 999,
          background: 'rgba(82,183,136,0.18)', border: '1px solid rgba(82,183,136,0.4)',
          fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: '#52B788',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Icon.Crosshair size={12} stroke="#52B788"/>
          ± 4m
        </div>
      </div>

      <div style={{ position: 'absolute', top: 70, left: 0, right: 0, padding: '8px 16px', display: 'flex', gap: 8, overflowX: 'auto' }}>
        {[
          ['All', '4', true],
          ['Red Deer', '2'],
          ['Roe Deer', '1'],
          ['Pheasant', '1'],
        ].map(([l, c, a]) => (
          <div key={l} style={{
            padding: '6px 12px', borderRadius: 999,
            background: a ? '#52B788' : 'rgba(26,47,34,0.85)',
            color: a ? '#0F1F18' : 'white',
            border: a ? 'none' : '1px solid rgba(82,183,136,0.25)',
            fontSize: 12, fontWeight: 500,
            display: 'flex', gap: 6, alignItems: 'center', whiteSpace: 'nowrap', flexShrink: 0,
            backdropFilter: 'blur(8px)',
          }}>
            {l} <span style={{ opacity: 0.7, fontSize: 10 }}>{c}</span>
          </div>
        ))}
      </div>

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: '#0F1F18', borderTop: '1px solid #2A4A38',
        borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '8px 20px 24px', color: 'white',
      }}>
        <div style={{ width: 36, height: 4, background: '#3A4A66', borderRadius: 2, margin: '6px auto 14px' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Active Session
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>1h 23m · 4 tags logged</div>
          </div>
          <Icon.ChevronRight size={18} stroke="#8BAF96"/>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: '12px',
            background: '#52B788', border: 'none', borderRadius: 10,
            color: '#0F1F18', fontWeight: 600, fontSize: 14,
          }}>+ Register Tag</button>
          <button style={{
            padding: '12px',
            background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 10, color: 'white', fontSize: 13,
          }}>
            <Icon.Layers size={16} stroke="white"/>
          </button>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 150, right: 16,
        width: 56, height: 56, borderRadius: 999, background: '#C0392B',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 24px -4px rgba(192,57,43,0.5)',
      }}>
        <Icon.Alert size={24} stroke="white"/>
      </div>
    </div>
  );
}

/* ─── FIELD MAP — high contrast, large targets, glanceable info ─── */
function FieldMap() {
  return (
    <div style={{ height: '100%', position: 'relative', background: '#0F1F18', overflow: 'hidden' }}>
      <TopoMap width={390} height={790} variant="lake"
        tags={[{ x: 0.32, y: 0.4 }, { x: 0.55, y: 0.5 }, { x: 0.72, y: 0.55 }]}
        others={[]}
        userPos={[0.4, 0.55]}
        fieldMode
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />

      {/* Top bar — bigger, higher contrast */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '18px 16px',
        background: '#0F1F18',
        borderBottom: '2px solid #52B788',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'white',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 22,
            background: 'rgba(255,255,255,0.12)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.ArrowLeft size={22} stroke="white"/>
          </div>
          <div style={{
            fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 22,
            letterSpacing: '-0.005em',
          }}>
            ZONE A
          </div>
        </div>
        {/* Glanceable GPS — GOOD/FAIR/POOR */}
        <div style={{
          padding: '10px 16px', borderRadius: 12,
          background: '#52B788', color: '#0F1F18',
          fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 18,
          letterSpacing: '0.06em',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Icon.Crosshair size={18} stroke="#0F1F18" sw={2}/>
          GOOD
        </div>
      </div>

      {/* Tap to register — single primary action */}
      <button style={{
        position: 'absolute', bottom: 24, left: 16, right: 16,
        padding: '24px',
        background: '#52B788', color: '#0F1F18',
        border: 'none', borderRadius: 16,
        fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 28,
        letterSpacing: '0.02em',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16,
        boxShadow: '0 20px 40px -10px rgba(82,183,136,0.4)',
      }}>
        <Icon.Plus size={32} stroke="#0F1F18" sw={2.5}/>
        TAG ANIMAL
      </button>

      {/* Emergency · 72px */}
      <div style={{
        position: 'absolute', bottom: 160, right: 16,
        width: 72, height: 72, borderRadius: 999, background: '#C0392B',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 12px 28px -4px rgba(192,57,43,0.6)',
        border: '3px solid white',
      }}>
        <Icon.Alert size={32} stroke="white" sw={2.4}/>
      </div>

      {/* Session info — minimal, large */}
      <div style={{
        position: 'absolute', top: 92, left: 16, right: 16,
        padding: '14px 18px',
        background: 'rgba(15,31,24,0.85)', backdropFilter: 'blur(8px)',
        border: '1px solid rgba(82,183,136,0.3)',
        borderRadius: 12, color: 'white',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Session
          </div>
          <div style={{
            fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 24,
            marginTop: 2, letterSpacing: '-0.005em',
          }}>
            1h 23m
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Tags
          </div>
          <div style={{
            fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 24,
            marginTop: 2, letterSpacing: '-0.005em',
          }}>
            4
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── COMPARE CHART ─── */
function ChartCompare() {
  const rows = [
    { lbl: 'Body text size', l: '16px', d: '16px', f: '19px (+20%)' },
    { lbl: 'Minimum tap target', l: '48px', d: '48px', f: '56px' },
    { lbl: 'GPS accuracy display', l: '± 4m (mono)', d: '± 4m (mono)', f: 'GOOD / FAIR / POOR' },
    { lbl: 'Emergency FAB diameter', l: '56px', d: '56px', f: '72px' },
    { lbl: 'Primary action surface', l: 'Bottom sheet · 2 actions', d: 'Bottom sheet · 2 actions', f: 'Full-width single button' },
    { lbl: 'Chrome opacity', l: '95%', d: '92%', f: '100% — opaque only' },
    { lbl: 'Tag marker size', l: '11px', d: '11px', f: '18px' },
    { lbl: 'Pulse ring radius', l: '11px → 18px', d: '11px → 18px', f: '16px → 24px' },
    { lbl: 'Information density', l: 'Standard', d: 'Standard', f: 'Reduced — critical only' },
  ];
  return (
    <section style={{ marginTop: 96 }}>
      <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', textTransform: 'uppercase', fontWeight: 500, marginBottom: 16 }}>
        05.1 · Specification
      </div>
      <h3 className="font-display" style={{ fontSize: 32, fontWeight: 700, color: '#1B1B1B', margin: '0 0 32px', letterSpacing: '-0.015em' }}>
        What changes, where.
      </h3>
      <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, overflow: 'hidden', background: 'white' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: '#2D6A4F', color: 'white' }}>
              <th style={{ textAlign: 'left', padding: '14px 20px', fontSize: 13, fontWeight: 500, letterSpacing: '0.04em', width: '32%' }}>Attribute</th>
              <th style={{ textAlign: 'left', padding: '14px 20px', fontSize: 13, fontWeight: 500, letterSpacing: '0.04em' }}>Light</th>
              <th style={{ textAlign: 'left', padding: '14px 20px', fontSize: 13, fontWeight: 500, letterSpacing: '0.04em' }}>Dark</th>
              <th style={{ textAlign: 'left', padding: '14px 20px', fontSize: 13, fontWeight: 500, letterSpacing: '0.04em', background: '#1B4332' }}>
                Field <span style={{ fontSize: 10, opacity: 0.7, marginLeft: 6 }}>+</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.lbl} style={{ background: i % 2 === 0 ? 'white' : '#FAFAFA', borderBottom: i < rows.length - 1 ? '1px solid #EAEAEA' : 'none' }}>
                <td style={{ padding: '12px 20px', fontSize: 14, color: '#1B1B1B', fontWeight: 500 }}>{r.lbl}</td>
                <td style={{ padding: '12px 20px', fontSize: 13, color: '#4A4A4A' }}>{r.l}</td>
                <td style={{ padding: '12px 20px', fontSize: 13, color: '#4A4A4A' }}>{r.d}</td>
                <td style={{ padding: '12px 20px', fontSize: 13, color: '#2D6A4F', fontWeight: 500, background: 'rgba(82,183,136,0.06)' }}>{r.f}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function BehaviourNotes() {
  return (
    <section style={{ marginTop: 96 }}>
      <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', textTransform: 'uppercase', fontWeight: 500, marginBottom: 16 }}>
        05.2 · Behaviour
      </div>
      <h3 className="font-display" style={{ fontSize: 32, fontWeight: 700, color: '#1B1B1B', margin: '0 0 32px', letterSpacing: '-0.015em' }}>
        Auto-switching rules.
      </h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { ttl: 'Activated by sensor', sub: 'Ambient brightness > 8,000 lux for 30s, OR direct sunlight detected on screen surface.', ico: Icon.Eye },
          { ttl: 'Activated by gesture', sub: 'Three-finger long-press anywhere on the map view. Confirmable haptic + visual cue.', ico: Icon.Crosshair },
          { ttl: 'Activated manually', sub: 'Settings → Display → Field Mode. Persistent until cleared by the same toggle.', ico: Icon.Settings },
        ].map(b => (
          <div key={b.ttl} style={{ padding: 24, background: 'white', border: '1px solid #E0E0E0', borderRadius: 12 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, background: '#D8F3DC',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#2D6A4F', marginBottom: 16,
            }}>
              <b.ico size={20} stroke="currentColor"/>
            </div>
            <div className="font-display" style={{ fontSize: 18, fontWeight: 600, color: '#1B1B1B', letterSpacing: '-0.01em', marginBottom: 8 }}>
              {b.ttl}
            </div>
            <p style={{ fontSize: 13, color: '#4A4A4A', margin: 0, lineHeight: 1.6 }}>{b.sub}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

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