/* WildTrack — Section 2 — Mobile screens page */

function MobilePage() {
  const [tweaks, setT] = useTweaks(/*EDITMODE-BEGIN*/{
    "displayMode": "light"
  }/*EDITMODE-END*/);
  const mode = tweaks.displayMode;

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

      <main style={{ padding: '64px 48px 96px', background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <Intro/>
          <ScreenGroup
            num="02.1"
            title="Home Dashboard"
            sub="The operative's first surface — zone status, three primary actions, recent activity, and a clear path to start a session or trigger an emergency. Offline state queues actions rather than disabling them."
          >
            <PhoneFrame label="2A · Populated" sub="Online · Session not started">
              <HomePopulated/>
            </PhoneFrame>
            <PhoneFrame label="2A · Offline" sub="3 items queued · SMS fallback">
              <HomeOffline/>
            </PhoneFrame>
          </ScreenGroup>

          <ScreenGroup
            num="02.2"
            title="Map View"
            sub="The primary field surface. Dark topographic tiles, GPS-anchored to the operative, zone polygon overlaid. Tapping a tag opens the inline trace card. Emergency FAB always accessible bottom-right."
          >
            <PhoneFrame label="2B · Map · Tag tapped" sub="WT-2026-00042 in popup">
              <MapView/>
            </PhoneFrame>
          </ScreenGroup>

          <ScreenGroup
            num="02.3"
            title="Tag Registration Flow"
            sub="Three steps: scan the QR on the physical tag, confirm details auto-detected from the device (tag, GPS, time) plus species/activity, then confirmation with a public-trace QR code."
          >
            <PhoneFrame label="2C · Scan" sub="Step 01/03 · QR viewfinder">
              <TagScan/>
            </PhoneFrame>
            <PhoneFrame label="2C · Details" sub="Step 02/03 · Species + activity">
              <TagDetails/>
            </PhoneFrame>
            <PhoneFrame label="2C · Confirm" sub="Step 03/03 · Trace published">
              <TagConfirm/>
            </PhoneFrame>
          </ScreenGroup>

          <ScreenGroup
            num="02.4"
            title="Emergency Alert"
            sub="Categorically separate from the rest of the UI. Held for three seconds to fire, broadcasts GPS to zone members + manager, falls back to SMS when offline. Never ambiguous."
          >
            <PhoneFrame label="2D · Pre-trigger" sub="2 of 3 seconds elapsed">
              <EmergencyPre/>
            </PhoneFrame>
            <PhoneFrame label="2D · Active" sub="Alert sent · members notified">
              <EmergencyPost/>
            </PhoneFrame>
          </ScreenGroup>

          <ScreenGroup
            num="02.5"
            title="Session Summary"
            sub="End of session: the GPS trail, tag count, distance, and a one-tap export to PDF or share-able trace links."
          >
            <PhoneFrame label="2E · Summary" sub="3h 14m · 4 tags · Lake District A">
              <SessionSummary/>
            </PhoneFrame>
          </ScreenGroup>
        </div>
      </main>

      <TweaksPanel title="Mobile Tweaks">
        <TweakSection label="Display behaviour">
          <div style={{ fontSize: 11, color: '#888', marginBottom: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>
            See Section 05 for the full Light · Dark · Field mode treatment of the Map screen.
          </div>
          <a href="Modes.html" style={{
            display: 'block', padding: '10px 14px',
            background: '#2D6A4F', color: 'white',
            borderRadius: 8, textDecoration: 'none',
            fontSize: 13, fontWeight: 500, textAlign: 'center',
          }}>Open Modes →</a>
        </TweakSection>
      </TweaksPanel>
    </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 02</div>
          <h1>Mobile Screens</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', marginBottom: 80 }}>
      <div>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#52B788', fontWeight: 500, marginBottom: 24 }}>
          Section 02 · Mobile
        </div>
        <h2 className="font-display" style={{ fontSize: 56, fontWeight: 700, margin: 0, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          Designed for gloves, sunlight,<br/>
          and a legal obligation.
        </h2>
      </div>
      <div style={{ fontSize: 16, lineHeight: 1.65, color: '#2A2A2A' }}>
        <p style={{ marginTop: 0 }}>
          The operative is outdoors, often alone, often in poor light, and always carrying a firearm. Every screen here is designed against that user — high contrast, minimum 48px tap targets, primary information visible inside two seconds.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 32 }}>
          {[
            ['390 × 844', 'iPhone 14 Pro proportions'],
            ['9 frames', 'Across 5 screen flows'],
            ['3 states', 'Populated · Loading · Empty'],
            ['Field-mode', 'Available · see Section 05'],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: '12px 14px', background: 'white', border: '1px solid #E0E0E0', borderRadius: 8 }}>
              <div className="font-mono" style={{ fontSize: 13, fontWeight: 600, color: '#1B1B1B' }}>{k}</div>
              <div style={{ fontSize: 12, color: '#6C757D', marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ScreenGroup({ num, title, sub, children }) {
  const childArr = React.Children.toArray(children);
  return (
    <section style={{ marginBottom: 96 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, gap: 48 }}>
        <div style={{ maxWidth: 640 }}>
          <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', fontWeight: 500, marginBottom: 8 }}>
            {num} · {childArr.length} frame{childArr.length !== 1 ? 's' : ''}
          </div>
          <h3 className="font-display" style={{ fontSize: 40, fontWeight: 700, margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            {title}
          </h3>
          <p style={{ fontSize: 15, color: '#4A4A4A', lineHeight: 1.55, margin: 0 }}>{sub}</p>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 40, justifyContent: 'flex-start' }}>
        {childArr}
      </div>
    </section>
  );
}

function PhoneFrame({ label, sub, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
      <div className="rh-phone-label">
        <span className="lbl">{label}</span>
        <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>
  );
}

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