/* WildTrack — Section 1 — Brand identity */

const { useState } = React;

function BrandPage() {
  const [tweaks, setT] = useTweaks(/*EDITMODE-BEGIN*/{
    "logoDirection": "A"
  }/*EDITMODE-END*/);
  const dir = tweaks.logoDirection;
  const Mark = { A: LogoMarkA, B: LogoMarkB, C: LogoMarkC }[dir];
  const dirName = { A: 'Abstract', B: 'Wordmark', C: 'Emblem' }[dir];

  return (
    <div>
      <PageHeader active="Brand"/>

      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '64px 48px 96px' }}>
        <Intro/>
        <Divider/>
        <LogoSection activeDir={dir}/>
        <Divider/>
        <PaletteSection/>
        <Divider/>
        <TypeSection/>
        <Divider/>
        <ComponentPreview/>
        <Divider/>
        <InContext direction={dir} dirName={dirName}/>
      </main>

      <TweaksPanel title="Brand Tweaks">
        <TweakSection label="Logo Direction">
          <TweakRadio
            value={dir}
            onChange={(v) => setT('logoDirection', v)}
            options={[
              { value: 'A', label: 'Abstract' },
              { value: 'B', label: 'Wordmark' },
              { value: 'C', label: 'Emblem' },
            ]}/>
          <div style={{ fontSize: 11, color: '#888', marginTop: 8, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>
            Affects in-context applications
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

/* ─────────── HEADER + LAYOUT ─────────── */
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 01</div>
          <h1>Brand Identity</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 Divider() {
  return <div className="rh-divider"/>;
}

function SectionLabel({ num, children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
      <span className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', textTransform: 'uppercase', fontWeight: 500 }}>
        {num}
      </span>
      <span className="rh-section-label">{children}</span>
    </div>
  );
}

function SectionTitle({ title, sub }) {
  return (
    <div style={{ marginBottom: 48 }}>
      <h2 className="font-display" style={{ fontSize: 48, fontWeight: 700, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        {title}
      </h2>
      {sub && <p style={{ fontSize: 17, color: '#4A4A4A', maxWidth: 640, marginTop: 16, lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

/* ─────────── INTRO ─────────── */
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 }}>
          Brand Position
        </div>
        <h2 className="font-display" style={{ fontSize: 56, fontWeight: 700, margin: 0, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          Premium field equipment<br/>
          meets modern SaaS.
        </h2>
      </div>
      <div style={{ fontSize: 16, lineHeight: 1.65, color: '#2A2A2A' }}>
        <p style={{ marginTop: 0 }}>
          WildTrack is <strong>not a consumer hunting app</strong>. It is a professional operational platform — Palantir for wildlife management, not a fishing diary.
        </p>
        <p>
          The emotional register is <em>confidence, precision, responsibility</em>. The person using this app has a firearm and a legal obligation; the design must earn their trust immediately.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 40 }}>
          {[
            ['IS', 'Rugged · Refined · Trusted'],
            ['ISN\'T', 'Camo · Cartoon · Green-tech'],
            ['FEELS LIKE', 'Field equipment'],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: '16px 18px', background: '#F5F5F5', borderLeft: '2px solid #2D6A4F', borderRadius: 4 }}>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: '#6C757D', marginBottom: 6 }}>{k}</div>
              <div style={{ fontSize: 13, fontWeight: 500, color: '#1B1B1B' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─────────── LOGO SECTION ─────────── */
function LogoSection({ activeDir }) {
  const dirs = [
    { id: 'A', name: 'Abstract', Mark: LogoMarkA, blurb: 'A geometric tracking reticle wrapped around a GPS pin. Reads as both a precision tool and a location anchor — the platform\'s two functions.' },
    { id: 'B', name: 'Typographic', Mark: LogoMarkB, blurb: 'A geometric W with a tracking chevron above and a dot at the meeting point. Reads as both a mountain-range silhouette and an upward arrow — terrain and movement in a single mark.' },
    { id: 'C', name: 'Emblem', Mark: LogoMarkC, blurb: 'A traditional patch shield with antlers and a crosshair. Sits well on a uniform sleeve, an app icon, or a printed certificate.' },
  ];

  return (
    <section>
      <SectionLabel num="01.1">The Mark</SectionLabel>
      <SectionTitle
        title="Three directions for the mark."
        sub="A single brand can speak in different registers. These three explore the territory: from geometric precision to typographic authority to traditional craft. Each works at 48px and 200px, on both light and dark."
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
        {dirs.map(d => (
          <LogoDirection key={d.id} d={d} highlighted={d.id === activeDir}/>
        ))}
      </div>
    </section>
  );
}

function LogoDirection({ d, highlighted }) {
  const { Mark } = d;
  return (
    <div style={{
      border: '1px solid ' + (highlighted ? '#52B788' : '#E0E0E0'),
      borderRadius: 12,
      padding: 32,
      background: 'white',
      position: 'relative',
    }}>
      {highlighted && (
        <div style={{
          position: 'absolute', top: -1, left: -1,
          background: '#52B788', color: 'white',
          padding: '4px 12px',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em',
          borderRadius: '12px 0 12px 0', textTransform: 'uppercase',
        }}>
          Active · in context below
        </div>
      )}
      <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 48, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <span className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', fontWeight: 500 }}>
              DIR · {d.id}
            </span>
          </div>
          <div className="font-display" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 16 }}>
            {d.name}
          </div>
          <p style={{ color: '#4A4A4A', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{d.blurb}</p>
        </div>

        {/* Sizes grid — light and dark */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          <LogoCell tone="light" label="48px · app icon">
            <Mark size={48} tone="light"/>
          </LogoCell>
          <LogoCell tone="light" label="200px · standard">
            <Mark size={120} tone="light"/>
          </LogoCell>
          <LogoCell tone="light" label="Horizontal lockup">
            <Lockup direction={d.id} tone="light" tagline={true}/>
          </LogoCell>
          <LogoCell tone="dark" label="48px · app icon">
            <Mark size={48} tone="dark"/>
          </LogoCell>
          <LogoCell tone="dark" label="200px · standard">
            <Mark size={120} tone="dark"/>
          </LogoCell>
          <LogoCell tone="dark" label="Horizontal lockup">
            <Lockup direction={d.id} tone="dark" tagline={true}/>
          </LogoCell>
        </div>
      </div>
    </div>
  );
}

function LogoCell({ tone, label, children }) {
  const bg = tone === 'light' ? '#FAFAFA' : '#0F1F18';
  const labelColor = tone === 'light' ? '#6C757D' : '#8BAF96';
  return (
    <div style={{
      background: bg,
      border: '1px solid ' + (tone === 'light' ? '#E0E0E0' : '#1A2F22'),
      borderRadius: 10,
      padding: 24,
      minHeight: 160,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      gap: 16,
    }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
      <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: labelColor, textTransform: 'uppercase' }}>
        {label}
      </div>
    </div>
  );
}

/* ─────────── PALETTE ─────────── */
function PaletteSection() {
  const primary = [
    { name: 'Forest Green', hex: '#2D6A4F', use: 'Primary actions, navigation, headings' },
    { name: 'Accent Green', hex: '#52B788', use: 'Interactive elements, highlights, active' },
    { name: 'Light Green', hex: '#D8F3DC', use: 'Surface fills, success states' },
    { name: 'Charcoal', hex: '#1B1B1B', use: 'Primary text, dark sidebar' },
  ];
  const semantic = [
    { name: 'Warning Amber', hex: '#E9C46A', use: 'Pending states, caution' },
    { name: 'Emergency Red', hex: '#C0392B', use: 'Emergency button — non-negotiable' },
    { name: 'Neutral Grey', hex: '#F5F5F5', use: 'Table rows, card surfaces' },
    { name: 'White', hex: '#FFFFFF', use: 'Surfaces, text on dark' },
  ];
  const dark = [
    { name: 'Background', hex: '#0F1F18', use: 'Dark mode app background' },
    { name: 'Surface', hex: '#1A2F22', use: 'Dark mode card surface' },
    { name: 'Border', hex: '#2A4A38', use: 'Dark mode card borders' },
    { name: 'Muted Text', hex: '#8BAF96', use: 'Dark mode secondary text' },
  ];

  return (
    <section>
      <SectionLabel num="01.2">The Palette</SectionLabel>
      <SectionTitle
        title="A palette earned in the field."
        sub="Forest greens carry the brand. Red is reserved exclusively for the emergency system. Greys are never flat — they pull subtly warm. Maps live in their own dark register."
      />

      <SwatchGroup title="Primary" swatches={primary}/>
      <SwatchGroup title="Semantic" swatches={semantic} style={{ marginTop: 48 }}/>
      <SwatchGroup title="Dark Mode" swatches={dark} dark style={{ marginTop: 48 }}/>

      <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <RuleCard kind="do" rules={[
          'Forest Green for primary navigation and CTAs',
          'Accent Green for interactive states and highlights',
          'Charcoal #1B1B1B as your high-contrast text',
          'Pull greys slightly warm — never flat #808080',
          'Map UI lives on #1A2332 dark topographic tiles',
        ]}/>
        <RuleCard kind="dont" rules={[
          'Use Emergency Red for anything but emergencies',
          'Use purple, neon, or gradient-heavy aesthetics',
          'Substitute the emergency button colour. Ever.',
          'Use camouflage patterns or earth-tone gradients',
          'Lighten Forest Green for "soft" CTAs — use Light Green',
        ]}/>
      </div>
    </section>
  );
}

function SwatchGroup({ title, swatches, dark, style }) {
  return (
    <div style={style}>
      <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 16 }}>
        {title}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {swatches.map(s => <Swatch key={s.hex} {...s} dark={dark}/>)}
      </div>
    </div>
  );
}

function Swatch({ name, hex, use, dark }) {
  const isLight = ['#FFFFFF', '#F5F5F5', '#D8F3DC', '#E9C46A'].includes(hex);
  return (
    <div style={{
      borderRadius: 12,
      overflow: 'hidden',
      border: '1px solid ' + (dark ? '#2A4A38' : '#E0E0E0'),
      background: 'white',
    }}>
      <div style={{
        height: 140,
        background: hex,
        position: 'relative',
        display: 'flex',
        alignItems: 'flex-end',
        padding: 16,
        color: isLight ? '#1B1B1B' : 'white',
      }}>
        <span className="font-mono" style={{ fontSize: 14, fontWeight: 500, letterSpacing: '0.05em' }}>
          {hex}
        </span>
      </div>
      <div style={{ padding: '14px 16px 16px', background: dark ? '#0F1F18' : 'white', color: dark ? 'white' : '#1B1B1B' }}>
        <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{name}</div>
        <div style={{ fontSize: 12, color: dark ? '#8BAF96' : '#6C757D', lineHeight: 1.4 }}>{use}</div>
      </div>
    </div>
  );
}

function RuleCard({ kind, rules }) {
  const isDo = kind === 'do';
  return (
    <div style={{
      border: '1px solid ' + (isDo ? '#52B788' : '#C0392B'),
      borderRadius: 12,
      padding: 24,
      background: isDo ? '#F4FBF7' : '#FDF5F4',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        color: isDo ? '#2D6A4F' : '#C0392B',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600,
        marginBottom: 16,
      }}>
        {isDo ? '✓ DO' : '✗ DON\'T'}
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
        {rules.map((r, i) => (
          <li key={i} style={{
            fontSize: 14, color: '#1B1B1B', lineHeight: 1.5,
            padding: '10px 0',
            borderTop: i > 0 ? '1px solid rgba(0,0,0,0.06)' : 'none',
          }}>
            {r}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ─────────── TYPE ─────────── */
function TypeSection() {
  return (
    <section>
      <SectionLabel num="01.3">The Voice</SectionLabel>
      <SectionTitle
        title="Three voices. One brand."
        sub="Syne does the heavy lifting for authority — it's geometric and confident without being aggressive. DM Sans handles the dense functional UI. JetBrains Mono is reserved for data that must read as data: coordinates, tag codes, timestamps."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32 }}>
        <div>
          <div style={{ borderTop: '1px solid #1B1B1B', padding: '24px 0' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase' }}>
                Display · Syne
              </div>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: '#6C757D' }}>
                500 / 600 / 700 / 800
              </div>
            </div>
            <div className="font-display" style={{ fontSize: 96, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.03em', color: '#1B1B1B' }}>
              From field<br/>to table.
            </div>
            <div className="font-display" style={{ fontSize: 18, fontWeight: 500, color: '#6C757D', marginTop: 16 }}>
              ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789 · &amp;@#%
            </div>
          </div>

          <div style={{ borderTop: '1px solid #1B1B1B', padding: '24px 0', marginTop: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase' }}>
                Body · DM Sans
              </div>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: '#6C757D' }}>
                400 / 500 / 600 / 700
              </div>
            </div>
            <div style={{ fontSize: 28, fontWeight: 500, color: '#1B1B1B', lineHeight: 1.3, marginBottom: 16 }}>
              Every animal, every step. Trace each tag from a GPS-stamped harvest to the plate it ends up on.
            </div>
            <div style={{ fontSize: 15, color: '#4A4A4A', lineHeight: 1.6 }}>
              ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
            </div>
          </div>

          <div style={{ borderTop: '1px solid #1B1B1B', padding: '24px 0', marginTop: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase' }}>
                Mono · JetBrains Mono
              </div>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: '#6C757D' }}>
                400 / 500 / 600
              </div>
            </div>
            <div className="font-mono" style={{ fontSize: 22, color: '#1B1B1B', lineHeight: 1.4, fontWeight: 500 }}>
              WT-2026-00042<br/>
              54.4621°N 2.3010°W<br/>
              14:22 · 14/05/2026
            </div>
          </div>
        </div>

        <div style={{ background: '#F5F5F5', borderRadius: 12, padding: 32, position: 'sticky', top: 32, alignSelf: 'flex-start' }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 24 }}>
            Web Type Scale
          </div>
          {[
            { lbl: 'Hero', size: 56, fam: 'font-display', weight: 800, txt: 'From Field to Table' },
            { lbl: 'H1', size: 36, fam: 'font-display', weight: 700, txt: 'Wildlife Management' },
            { lbl: 'H2', size: 24, fam: 'font-display', weight: 600, txt: 'Active Sessions Today' },
            { lbl: 'H3', size: 18, fam: '', weight: 500, txt: 'Lake District Zone A' },
            { lbl: 'Body', size: 16, fam: '', weight: 400, txt: 'Tag registered at 14:22 by J. MacAllister.' },
            { lbl: 'Small', size: 13, fam: '', weight: 400, txt: 'Last synced 2 minutes ago' },
            { lbl: 'Mono', size: 14, fam: 'font-mono', weight: 500, txt: 'WT-2026-00042 · 54.46°N' },
          ].map(t => (
            <div key={t.lbl} style={{ display: 'flex', alignItems: 'baseline', gap: 16, padding: '10px 0', borderTop: '1px solid #E0E0E0' }}>
              <div className="font-mono" style={{ width: 56, flexShrink: 0, fontSize: 11, color: '#6C757D', letterSpacing: '0.1em' }}>
                {t.lbl} · {t.size}
              </div>
              <div className={t.fam} style={{ fontSize: Math.min(t.size, 32), fontWeight: t.weight, color: '#1B1B1B', lineHeight: 1.2 }}>
                {t.txt}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── COMPONENT PREVIEW ─────────── */
function ComponentPreview() {
  return (
    <section>
      <SectionLabel num="01.4">The Kit</SectionLabel>
      <SectionTitle
        title="The atoms, in brief."
        sub="A sample of the system's building blocks — full library lives in Section 04. No drop shadows; elevation comes from borders."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <KitTile label="Buttons">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="rh-btn rh-btn-primary">Register Tag</button>
              <button className="rh-btn rh-btn-secondary">View Map</button>
              <button className="rh-btn rh-btn-disabled" disabled>Submit</button>
            </div>
            <button className="rh-btn rh-btn-danger" style={{ alignSelf: 'flex-start' }}>
              <span style={{display:'inline-flex', alignItems:'center', gap: 8}}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2 1 21h22L12 2z"/><line x1="12" y1="9" x2="12" y2="14"/></svg>
                Emergency Alert
              </span>
            </button>
          </div>
        </KitTile>

        <KitTile label="Status pills">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <span className="rh-badge rh-badge-active">Active</span>
            <span className="rh-badge rh-badge-pending">Pending</span>
            <span className="rh-badge rh-badge-processing">Processing</span>
            <span className="rh-badge rh-badge-emergency">Emergency</span>
            <span className="rh-badge rh-badge-archived">Archived</span>
          </div>
        </KitTile>

        <KitTile label="Inputs">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <FieldPreview label="Tag ID" value="WT-2026-00042" state="default"/>
            <FieldPreview label="Operative" value="J. MacAllister" state="focus"/>
            <FieldPreview label="GPS accuracy" value="± 22m — outside zone radius" state="error"/>
          </div>
        </KitTile>

        <KitTile label="Tag summary card">
          <TagSummaryCard/>
        </KitTile>
      </div>
    </section>
  );
}

function KitTile({ label, children }) {
  return (
    <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, padding: 24, background: 'white' }}>
      <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 20 }}>
        {label}
      </div>
      {children}
    </div>
  );
}

function FieldPreview({ label, value, state }) {
  const border = state === 'focus' ? '2px solid #52B788' : state === 'error' ? '1px solid #C0392B' : '1px solid #D0D0D0';
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 500, color: '#4A4A4A', marginBottom: 4 }}>{label}</div>
      <div style={{
        height: 42, padding: '0 14px', display: 'flex', alignItems: 'center',
        borderRadius: 8, border,
        fontSize: 14, color: state === 'error' ? '#C0392B' : '#1B1B1B',
        background: 'white',
        boxShadow: state === 'focus' ? '0 0 0 3px rgba(82,183,136,0.18)' : 'none',
        fontFamily: label.toLowerCase().includes('id') || label.toLowerCase().includes('gps') ? 'JetBrains Mono, monospace' : 'DM Sans, sans-serif',
      }}>
        {value}
      </div>
      {state === 'error' && (
        <div style={{ fontSize: 12, color: '#C0392B', marginTop: 4 }}>GPS accuracy below threshold. Retry required.</div>
      )}
    </div>
  );
}

function TagSummaryCard() {
  return (
    <div style={{
      border: '1px solid #E0E0E0', borderRadius: 12, padding: 16,
      display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 14, alignItems: 'center',
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10, background: '#D8F3DC',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#2D6A4F',
      }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M6 4l1 5 2-1 1 3 2-2 2 2 1-3 2 1 1-5"/>
          <circle cx="12" cy="14" r="4"/>
          <path d="M10 17v3M14 17v3"/>
        </svg>
      </div>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
          <span className="font-mono" style={{ fontSize: 13, fontWeight: 500, color: '#1B1B1B' }}>WT-2026-00042</span>
          <span className="rh-badge rh-badge-active" style={{ fontSize: 10, padding: '2px 8px' }}>Tagged</span>
        </div>
        <div style={{ fontSize: 14, color: '#1B1B1B', fontWeight: 500 }}>Red Deer · Harvest</div>
        <div style={{ fontSize: 12, color: '#6C757D', marginTop: 2 }}>J. MacAllister · 14:22 · Lake District A</div>
      </div>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6C757D" strokeWidth="1.5"><polyline points="9 18 15 12 9 6"/></svg>
    </div>
  );
}

/* ─────────── IN CONTEXT ─────────── */
function InContext({ direction, dirName }) {
  const Mark = { A: LogoMarkA, B: LogoMarkB, C: LogoMarkC }[direction];

  return (
    <section>
      <SectionLabel num="01.5">In Context</SectionLabel>
      <SectionTitle
        title="The brand, in the wild."
        sub={`Three applications using the ${dirName} direction. Switch via Tweaks to compare. The brand carries through app icons, hero product screens, and operational notifications.`}
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
        <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, padding: 32, background: 'white' }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 4 }}>
            01 · App Icon
          </div>
          <div className="font-display" style={{ fontSize: 22, fontWeight: 600, color: '#1B1B1B', marginBottom: 24 }}>
            iOS · Android · watchOS
          </div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-end', justifyContent: 'space-around', padding: '24px 0' }}>
            <AppIcon size={120} direction={direction}/>
            <AppIcon size={80} direction={direction}/>
            <AppIcon size={48} direction={direction}/>
          </div>
          <div style={{
            fontSize: 12, color: '#6C757D', marginTop: 24, padding: 12,
            background: '#F5F5F5', borderRadius: 8, lineHeight: 1.5,
          }}>
            Forest Green background, mark in Light Green or Accent Green depending on direction.
          </div>
        </div>

        <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, padding: 32, background: 'white' }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 4 }}>
            02 · Hero Product Screen
          </div>
          <div className="font-display" style={{ fontSize: 22, fontWeight: 600, color: '#1B1B1B', marginBottom: 24 }}>
            Map view · Lake District Zone A
          </div>
          <HeroMapMock Mark={Mark}/>
        </div>

        <div style={{ gridColumn: '1 / -1', border: '1px solid #E0E0E0', borderRadius: 12, padding: 32, background: 'white' }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 4 }}>
            03 · Email &amp; Notification
          </div>
          <div className="font-display" style={{ fontSize: 22, fontWeight: 600, color: '#1B1B1B', marginBottom: 24 }}>
            Trace notification template
          </div>
          <EmailMock Mark={Mark} direction={direction}/>
        </div>
      </div>
    </section>
  );
}

function AppIcon({ size, direction }) {
  const Mark = { A: LogoMarkA, B: LogoMarkB, C: LogoMarkC }[direction];
  const radius = size * 0.22;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: size, height: size,
        background: 'linear-gradient(160deg, #2D6A4F 0%, #1B4332 100%)',
        borderRadius: radius,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 24px -8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent 60%)' }}/>
        <Mark size={size * 0.66} tone="dark"/>
      </div>
      <span className="font-mono" style={{ fontSize: 10, color: '#6C757D', letterSpacing: '0.1em' }}>{size}px</span>
    </div>
  );
}

function HeroMapMock({ Mark }) {
  return (
    <div style={{ position: 'relative', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid #1A2F22' }}>
      <TopoMap width={600} height={380} variant="lake"
        tags={[{ x: 0.35, y: 0.45 }, { x: 0.62, y: 0.35 }, { x: 0.48, y: 0.62 }]}
        others={[{ x: 0.72, y: 0.5, initials: 'TH' }]}
        userPos={[0.38, 0.55]}
        style={{ width: '100%', height: 380 }}
      />
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '16px 20px',
        background: 'linear-gradient(to bottom, rgba(15,31,24,0.92), rgba(15,31,24,0))',
        color: 'white',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Mark size={24} tone="dark"/>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 14, letterSpacing: '0.02em' }}>
              Wild<span style={{ color: '#52B788' }}>Track</span>
            </div>
            <div className="font-mono" style={{ fontSize: 10, color: '#8BAF96', letterSpacing: '0.12em', marginTop: 2 }}>
              LAKE DISTRICT ZONE A
            </div>
          </div>
        </div>
        <div style={{
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(82,183,136,0.2)', border: '1px solid rgba(82,183,136,0.4)',
          fontSize: 11, color: '#52B788',
          fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em',
        }}>
          ± 4m GPS
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        padding: '14px 18px', background: 'rgba(26,47,34,0.92)', backdropFilter: 'blur(8px)',
        borderRadius: 12, border: '1px solid #2A4A38',
        color: 'white',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 4 }}>
            Active Session
          </div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>1h 23m · 4 tags logged</div>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#52B788" strokeWidth="2"><polyline points="9 18 15 12 9 6"/></svg>
      </div>

      <div style={{
        position: 'absolute', bottom: 80, right: 16,
        width: 56, height: 56, borderRadius: 999,
        background: '#C0392B', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 20px -4px rgba(192,57,43,0.5)',
        color: 'white',
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2 1 21h22L12 2z"/><line x1="12" y1="9" x2="12" y2="14"/></svg>
      </div>
    </div>
  );
}

function EmailMock({ Mark, direction }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
      <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, overflow: 'hidden', background: 'white' }}>
        <div style={{ background: '#0F1F18', padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'white' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Mark size={32} tone="dark"/>
            <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 18 }}>
              Wild<span style={{ color: '#52B788' }}>Track</span>
            </span>
          </div>
          <span className="font-mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: '#8BAF96', textTransform: 'uppercase' }}>
            Trace Notification
          </span>
        </div>
        <div style={{ padding: 24 }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: '#52B788', marginBottom: 12, textTransform: 'uppercase' }}>
            ✓ Trace Verified
          </div>
          <div className="font-display" style={{ fontSize: 24, fontWeight: 700, color: '#1B1B1B', marginBottom: 12, lineHeight: 1.2 }}>
            Red Deer · WT-2026-00042<br/>has been processed.
          </div>
          <p style={{ fontSize: 14, color: '#4A4A4A', lineHeight: 1.6, margin: 0 }}>
            The tag has moved to the Kendal Processing Facility on 16 May 2026. View the full provenance trace below.
          </p>
          <button className="rh-btn rh-btn-primary" style={{ marginTop: 20 }}>View Trace →</button>
        </div>
        <div style={{ borderTop: '1px solid #E0E0E0', padding: '14px 24px', fontSize: 11, color: '#6C757D', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em' }}>
          Highland Estate Management · WT-OP-1042
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 16, background: '#F5F5F5', borderRadius: 12, padding: 24 }}>
        <div style={{
          width: 320, padding: '12px 16px',
          background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)',
          borderRadius: 18, border: '1px solid rgba(0,0,0,0.06)',
          boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'linear-gradient(160deg, #2D6A4F, #1B4332)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <Mark size={26} tone="dark"/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.02em', color: '#1B1B1B' }}>WildTrack</span>
              <span style={{ fontSize: 11, color: '#6C757D' }}>now</span>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#1B1B1B', marginBottom: 2 }}>
              New tag registered in your zone
            </div>
            <div style={{ fontSize: 13, color: '#4A4A4A', lineHeight: 1.4 }}>
              J. MacAllister · Red Deer · Lake District A · 14:22
            </div>
          </div>
        </div>

        <div style={{
          width: 320, padding: '12px 16px',
          background: 'rgba(192,57,43,0.95)', backdropFilter: 'blur(20px)',
          borderRadius: 18, color: 'white',
          boxShadow: '0 8px 24px rgba(192,57,43,0.35)',
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M12 2 1 21h22L12 2z"/><line x1="12" y1="9" x2="12" y2="14"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 13, letterSpacing: '0.1em' }}>EMERGENCY</span>
              <span style={{ fontSize: 11, opacity: 0.8 }}>0s ago</span>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
              J. MacAllister has triggered an alert
            </div>
            <div className="font-mono" style={{ fontSize: 12, opacity: 0.9 }}>
              54.4621°N 2.3010°W · Lake District A
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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