/* Profile screen — level badge hero, contributor identity, warmth */

function ProfileScreen({ onTabChange }) {
  const [screen, setScreen] = React.useState('profile');

  if (screen === 'settings') {
    return <ProfileSettings onBack={() => setScreen('profile')} onTabChange={onTabChange}/>;
  }

  return (
    <>
      <StatusBar/>
      <div className="scroll">
        <div style={{padding:'4px 20px 0'}}>
          {/* Identity header */}
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:20}}>
            <div style={{
              width:60, height:60, borderRadius:'50%',
              background:'var(--ink)', color:'var(--bg)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:22, fontWeight:700,
            }}>R</div>
            <div style={{flex:1}}>
              <div style={{fontSize:20, fontWeight:700, letterSpacing:'-0.015em', lineHeight:1.2}}>
                Ren Tanaka
              </div>
              <div style={{fontSize:13, color:'var(--ink-3)', marginTop:2}}>
                @rentanaka · Daikanyama explorer
              </div>
            </div>
            <button onClick={() => setScreen('settings')} aria-label="Open profile settings" style={{
              width:36, height:36, borderRadius:10,
              background:'var(--bg-elev)', border:'1px solid var(--line)',
              cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="3" r="1.4" fill="var(--ink)"/>
                <circle cx="8" cy="8" r="1.4" fill="var(--ink)"/>
                <circle cx="8" cy="13" r="1.4" fill="var(--ink)"/>
              </svg>
            </button>
          </div>

          {/* Level badge hero — the single progression anchor */}
          <LevelBadgeHero/>

          {/* Key stats — just 2, most important */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:20}}>
            <StatCard label="Lifetime GP" value="1,840" sub="+180 this week"/>
            <StatCard label="12-day streak" value="🔥 12" sub="personal best 18"/>
          </div>

          <MapDropAccessPanel/>

          <ReferralPanel/>

          <CommunityPanel/>

          {/* Contribution heatmap */}
          <div className="sec-head">
            <h3>Activity</h3>
            <span className="label">last 12 weeks</span>
          </div>
          <div style={{
            border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
            padding:14, marginBottom:20,
          }}>
            <ContributionGrid/>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:10}}>
              <span style={{fontSize:11, color:'var(--ink-3)'}}>Jan</span>
              <span style={{fontSize:11, color:'var(--ink-3)'}}>Apr</span>
            </div>
            <div style={{display:'flex', alignItems:'center', gap:6, marginTop:6}}>
              <span style={{fontSize:11, color:'var(--ink-3)'}}>Less</span>
              {[0,1,2,3,4].map(i => (
                <div key={i} style={{
                  width:10, height:10, borderRadius:2,
                  background: i === 0 ? 'var(--bg-sunk)' : `oklch(${0.88 - i * 0.08} ${i * 0.03 + 0.04} 185)`,
                  border:'1px solid var(--line)',
                }}/>
              ))}
              <span style={{fontSize:11, color:'var(--ink-3)'}}>More</span>
            </div>
          </div>

          {/* Badges */}
          <div className="sec-head">
            <h3>Badges</h3>
            <span className="label">7 of 24</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8, marginBottom:20}}>
            {[
              {label:'First Mapper', icon:'◇', earned:true,  accent:'var(--status-rare)'},
              {label:'Hidden Gem',   icon:'◆', earned:true,  accent:'var(--status-rare)'},
              {label:'10-day streak',icon:'◐', earned:true,  accent:'var(--status-stale)'},
              {label:'30-day streak',icon:'●', earned:false, accent:'var(--ink-4)'},
              {label:'Verifier',    icon:'✓', earned:true,  accent:'var(--status-done)'},
              {label:'Route Master',icon:'⤳', earned:false, accent:'var(--ink-4)'},
              {label:'Sector ×3',   icon:'▣', earned:true,  accent:'var(--teal-ink)'},
              {label:'Trusted',     icon:'✦', earned:false, accent:'var(--ink-4)'},
            ].map((b,i) => (
              <div key={i} style={{
                aspectRatio:'1', borderRadius:12,
                background: b.earned ? 'var(--bg-elev)' : 'var(--bg-sunk)',
                border:'1px solid ' + (b.earned ? 'var(--line)' : 'transparent'),
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
                gap:5, opacity: b.earned ? 1 : 0.35,
              }}>
                <span style={{fontSize:18, color: b.earned ? b.accent : 'var(--ink-4)'}}>{b.icon}</span>
                <span style={{fontSize:9, color:'var(--ink-3)', textAlign:'center', lineHeight:1.2, padding:'0 4px'}}>{b.label}</span>
              </div>
            ))}
          </div>

          {/* Impact */}
          <div className="sec-head">
            <h3>Impact</h3>
            <span className="label">your data</span>
          </div>
          <div style={{
            border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
            padding:'4px 14px', marginBottom:28,
          }}>
            <ImpactRow label="POI views from your data" value="14.2k"/>
            <ImpactRow label="Verified updates" value="68"/>
            <ImpactRow label="Routes used by others" value="312"/>
            <ImpactRow label="First-discovery contributions" value="7" last/>
          </div>
        </div>
      </div>
      <TabBar active="you" onChange={onTabChange}/>
    </>
  );
}

function MapDropAccessPanel() {
  const access = window.MAP_DROP_ACCESS || {
    completedPoi: 3,
    requiredPoi: 5,
    districtRank: 148,
    rankCutoff: 100,
    districtProgress: 72,
    districtTarget: 100,
  };
  const qualified = window.isMapDropQualified
    ? window.isMapDropQualified(access)
    : (access.completedPoi >= access.requiredPoi || access.districtRank <= access.rankCutoff);
  const remaining = Math.max(0, access.requiredPoi - access.completedPoi);
  const districtPct = Math.min(100, Math.round((access.districtProgress / access.districtTarget) * 100));

  return (
    <div style={{marginBottom:20}}>
      <div className="sec-head">
        <h3>Map Drop access</h3>
        <span className="label">{qualified ? 'qualified' : 'qualification'}</span>
      </div>
      <div style={{
        border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
        padding:14,
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12, marginBottom:12}}>
          <div>
            <div className="mono" style={{fontSize:9, color:'var(--warm)', marginBottom:4}}>TRUSTED CONTRIBUTOR GATE</div>
            <div style={{fontSize:17, fontWeight:700, letterSpacing:'-0.015em'}}>
              {qualified ? 'Map Drops unlocked' : `${remaining} POI missions to unlock`}
            </div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>
              Alternative path: reach Top {access.rankCutoff} in this district.
            </div>
          </div>
          <Pill tone={qualified ? 'teal' : undefined}>{qualified ? 'Open' : 'Locked'}</Pill>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12}}>
          <div style={{background:'var(--bg-sunk)', borderRadius:10, padding:10}}>
            <div style={{fontSize:10.5, color:'var(--ink-3)', marginBottom:5}}>Verified POI missions</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:16, fontWeight:800}}>
              {access.completedPoi}/{access.requiredPoi}
            </div>
          </div>
          <div style={{background:'var(--bg-sunk)', borderRadius:10, padding:10}}>
            <div style={{fontSize:10.5, color:'var(--ink-3)', marginBottom:5}}>District rank</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:16, fontWeight:800}}>
              #{access.districtRank}
            </div>
          </div>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
          <span style={{fontSize:11, color:'var(--ink-3)'}}>Community unlock</span>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-3)'}}>
            {access.districtProgress}/{access.districtTarget}
          </span>
        </div>
        <div style={{height:5, background:'var(--bg-sunk)', borderRadius:999, overflow:'hidden'}}>
          <div style={{height:'100%', width:districtPct + '%', background:'var(--warm)', borderRadius:999}}/>
        </div>
      </div>
    </div>
  );
}

function ReferralPanel() {
  const [copied, setCopied] = React.useState(false);
  const rewards = [
    {count:'1', label:'Local Connector', done:true},
    {count:'5', label:'Hidden Layer beta', done:false},
    {count:'10', label:'City leaderboard pin', done:false},
    {count:'25', label:'City Scout candidate', done:false},
  ];

  function copyLink() {
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1300);
  }

  return (
    <div style={{marginBottom:20}}>
      <div className="sec-head">
        <h3>Referral</h3>
        <span className="label">verified invites only</span>
      </div>
      <div style={{
        border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
        padding:14,
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12, marginBottom:12}}>
          <div>
            <div className="mono" style={{fontSize:9, color:'var(--teal-ink)', marginBottom:4}}>PIONEER PASS</div>
            <div style={{fontSize:17, fontWeight:700, letterSpacing:'-0.015em'}}>2 verified friends</div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>Next unlock: Hidden Layer at 5</div>
          </div>
          <div style={{
            width:54, height:54, borderRadius:14, background:'var(--teal-soft)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--font-mono)', fontSize:18, fontWeight:800, color:'var(--teal-ink)',
          }}>2/5</div>
        </div>
        <div style={{height:5, background:'var(--bg-sunk)', borderRadius:999, overflow:'hidden', marginBottom:12}}>
          <div style={{height:'100%', width:'40%', background:'var(--teal)', borderRadius:999}}/>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:6, marginBottom:12}}>
          {rewards.map(r => (
            <div key={r.count} style={{
              minHeight:64, borderRadius:10, padding:8,
              background:r.done ? 'var(--teal-soft)' : 'var(--bg-sunk)',
              border:'1px solid ' + (r.done ? 'transparent' : 'var(--line)'),
              opacity:r.done ? 1 : 0.78,
            }}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:800, color:r.done ? 'var(--teal-ink)' : 'var(--ink-3)'}}>
                {r.count}
              </div>
              <div style={{fontSize:9.5, color:r.done ? 'var(--teal-ink)' : 'var(--ink-3)', lineHeight:1.2, marginTop:4}}>
                {r.label}
              </div>
            </div>
          ))}
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:8}}>
          <div style={{
            height:40, borderRadius:10, background:'var(--bg-sunk)', border:'1px dashed var(--line-2)',
            display:'flex', alignItems:'center', padding:'0 12px',
            fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-3)', overflow:'hidden',
          }}>govibe.app/r/ren-72h</div>
          <button onClick={copyLink} className="btn-secondary" style={{width:86, height:40}}>
            {copied ? 'Copied' : 'Copy'}
          </button>
        </div>
      </div>
    </div>
  );
}

function CommunityPanel() {
  const ranks = [
    {name:'Explorer', meta:'All verified users', active:true},
    {name:'City Scout', meta:'20 verifies + 5 recent uses', active:true},
    {name:'City Captain', meta:'25 referrals or top 3 challenge', active:false},
  ];
  const ops = [
    ['Monthly POI target', '50 / city'],
    ['Scout Day attendance', '20+'],
    ['Discord support', '3 channels'],
  ];

  return (
    <div style={{marginBottom:20}}>
      <div className="sec-head">
        <h3>Community crew</h3>
        <span className="label">Toronto pilot</span>
      </div>
      <div style={{
        border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)',
        padding:14,
      }}>
        <div style={{display:'grid', gap:8, marginBottom:14}}>
          {ranks.map((r, i) => (
            <div key={r.name} style={{display:'grid', gridTemplateColumns:'26px 1fr auto', gap:10, alignItems:'center'}}>
              <div style={{
                width:24, height:24, borderRadius:'50%',
                background:r.active ? 'var(--ink)' : 'var(--bg-sunk)',
                color:r.active ? 'var(--bg)' : 'var(--ink-3)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--font-mono)', fontSize:11, fontWeight:800,
              }}>{i + 1}</div>
              <div>
                <div style={{fontSize:13, fontWeight:700}}>{r.name}</div>
                <div style={{fontSize:11, color:'var(--ink-3)', marginTop:1}}>{r.meta}</div>
              </div>
              <Pill tone={r.active ? 'teal' : undefined}>{r.active ? 'Open' : 'Next'}</Pill>
            </div>
          ))}
        </div>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:7,
          borderTop:'1px solid var(--line)', paddingTop:12,
        }}>
          {ops.map(row => (
            <div key={row[0]} style={{background:'var(--bg-sunk)', borderRadius:10, padding:9, minHeight:62}}>
              <div style={{fontSize:10.5, color:'var(--ink-3)', lineHeight:1.2}}>{row[0]}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:13, fontWeight:800, marginTop:6}}>{row[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProfileSettings({ onBack, onTabChange }) {
  return (
    <>
      <StatusBar/>
      <div className="scroll">
        <div style={{padding:'4px 20px 28px'}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:22}}>
            <button onClick={onBack} aria-label="Back to profile" style={{
              width:36, height:36, borderRadius:10,
              background:'var(--bg-elev)', border:'1px solid var(--line)',
              cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M11.5 4 L6.5 9 L11.5 14" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <span className="label">Settings</span>
            <div style={{width:36}}/>
          </div>

          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:22}}>
            <div style={{
              width:58, height:58, borderRadius:'50%',
              background:'var(--ink)', color:'var(--bg)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:22, fontWeight:700,
            }}>R</div>
            <div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em'}}>Ren Tanaka</div>
              <div style={{fontSize:13, color:'var(--ink-3)', marginTop:2}}>Mapper · Daikanyama</div>
            </div>
          </div>

          <SettingsGroup title="Account">
            <SettingsRow label="Display name" value="Ren Tanaka"/>
            <SettingsRow label="Username" value="@rentanaka"/>
            <SettingsRow label="Home sector" value="Daikanyama"/>
          </SettingsGroup>

          <SettingsGroup title="Mission preferences">
            <SettingsToggle label="Nearby quick verifies" checked/>
            <SettingsToggle label="Route advanture invites" checked/>
            <SettingsToggle label="Hidden gem alerts" checked/>
          </SettingsGroup>

          <SettingsGroup title="Privacy">
            <SettingsRow label="Profile visibility" value="Local leaderboard"/>
            <SettingsToggle label="Show contribution heatmap" checked/>
            <SettingsToggle label="Share card captions by default"/>
          </SettingsGroup>

          <SettingsGroup title="App">
            <SettingsRow label="Theme" value="System"/>
            <SettingsRow label="Map default" value="Mission layer"/>
            <SettingsRow label="Version" value="Prototype"/>
          </SettingsGroup>
        </div>
      </div>
      <TabBar active="you" onChange={onTabChange}/>
    </>
  );
}

function SettingsGroup({ title, children }) {
  return (
    <div style={{marginBottom:22}}>
      <div className="sec-head" style={{marginBottom:8}}>
        <h3>{title}</h3>
      </div>
      <div style={{
        border:'1px solid var(--line)', borderRadius:14,
        background:'var(--bg-elev)', padding:'2px 14px',
      }}>
        {children}
      </div>
    </div>
  );
}

function SettingsRow({ label, value }) {
  return (
    <div style={{
      minHeight:46, display:'flex', alignItems:'center', justifyContent:'space-between',
      gap:14, borderBottom:'1px dashed var(--line)',
    }}>
      <span style={{fontSize:14, fontWeight:500}}>{label}</span>
      <span style={{fontSize:13, color:'var(--ink-3)', textAlign:'right'}}>{value}</span>
    </div>
  );
}

function SettingsToggle({ label, checked = false }) {
  const [on, setOn] = React.useState(checked);
  return (
    <div style={{
      minHeight:46, display:'flex', alignItems:'center', justifyContent:'space-between',
      gap:14, borderBottom:'1px dashed var(--line)',
    }}>
      <span style={{fontSize:14, fontWeight:500}}>{label}</span>
      <button onClick={() => setOn(v => !v)} role="switch" aria-checked={on} style={{
        width:38, height:22, borderRadius:999, border:0,
        background:on ? 'var(--teal)' : 'var(--line-2)',
        padding:2, cursor:'pointer',
      }}>
        <span style={{
          width:18, height:18, borderRadius:'50%', background:'#fff',
          display:'block', transform:on ? 'translateX(16px)' : 'translateX(0)',
          transition:'transform .15s ease',
          boxShadow:'0 1px 2px rgba(0,0,0,0.18)',
        }}/>
      </button>
    </div>
  );
}

/* Level badge — the hero visual element, like Google Maps' progress badge */
function LevelBadgeHero() {
  const pct = 0.736; // 1840/2500
  const r = 44;
  const circ = 2 * Math.PI * r;
  const filled = circ * pct;

  return (
    <div style={{
      background:'var(--bg-elev)', border:'1px solid var(--line)',
      borderRadius:18, padding:'18px 20px', marginBottom:18,
      display:'flex', alignItems:'center', gap:20,
    }}>
      {/* Large ring */}
      <div style={{flexShrink:0}}>
        <svg width={108} height={108}>
          {/* Outer decorative ring */}
          <circle cx={54} cy={54} r={50} fill="none" stroke="var(--line)" strokeWidth={1}/>
          {/* Track */}
          <circle cx={54} cy={54} r={r} fill="none" stroke="var(--bg-sunk)" strokeWidth={7}/>
          {/* Progress fill */}
          <circle cx={54} cy={54} r={r} fill="none"
            stroke="var(--ink)" strokeWidth={7} strokeLinecap="round"
            strokeDasharray={`${filled} ${circ}`}
            transform="rotate(-90 54 54)"/>
          {/* Level text */}
          <text x={54} y={46} textAnchor="middle"
            fontFamily="var(--font-mono)" fontSize={11} fontWeight={600}
            fill="var(--ink-3)" letterSpacing="0.04em">LV</text>
          <text x={54} y={68} textAnchor="middle"
            fontFamily="var(--font-mono)" fontSize={26} fontWeight={800}
            fill="var(--ink)">04</text>
        </svg>
      </div>

      {/* Progress info */}
      <div style={{flex:1, minWidth:0}}>
        <div style={{
          fontSize:11, fontWeight:600, color:'var(--teal-ink)', marginBottom:4,
          fontFamily:'var(--font-mono)', letterSpacing:'0.05em',
        }}>MAPPER</div>
        <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.015em', marginBottom:6}}>
          3 missions to<br/>
          <span style={{color:'var(--teal-ink)'}}>Pathfinder</span>
        </div>
        <div style={{height:4, background:'var(--bg-sunk)', borderRadius:3, overflow:'hidden', marginBottom:5}}>
          <div style={{height:'100%', width:'73.6%', background:'var(--teal)', borderRadius:3}}/>
        </div>
        <div style={{fontSize:12, color:'var(--ink-3)'}}>1,840 / 2,500 GP</div>
      </div>
    </div>
  );
}

function StatCard({ label, value, sub }) {
  return (
    <div style={{
      border:'1px solid var(--line)', borderRadius:14,
      background:'var(--bg-elev)', padding:'13px 14px',
    }}>
      <div style={{fontSize:12, color:'var(--ink-3)', fontWeight:500, marginBottom:4}}>{label}</div>
      <div style={{
        fontSize:24, fontWeight:700, letterSpacing:'-0.02em', lineHeight:1.1,
      }}>{value}</div>
      <div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>{sub}</div>
    </div>
  );
}

function ImpactRow({ label, value, last }) {
  return (
    <div style={{
      display:'flex', justifyContent:'space-between', alignItems:'center',
      padding:'12px 0', borderBottom: last ? 'none' : '1px dashed var(--line)',
    }}>
      <span style={{fontSize:13, color:'var(--ink-2)'}}>{label}</span>
      <span style={{fontSize:14, fontWeight:700, fontFamily:'var(--font-mono)'}}>{value}</span>
    </div>
  );
}

function ContributionGrid() {
  const cells = [];
  let h = 7;
  for (let w = 0; w < 12; w++) {
    for (let d = 0; d < 7; d++) {
      h = (h * 9301 + 49297) % 233280;
      const v = (h / 233280);
      const lvl = v < 0.4 ? 0 : v < 0.6 ? 1 : v < 0.8 ? 2 : v < 0.93 ? 3 : 4;
      cells.push(lvl);
    }
  }
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap:3}}>
      {Array.from({length:12}).map((_, w) => (
        <div key={w} style={{display:'flex', flexDirection:'column', gap:3}}>
          {Array.from({length:7}).map((_, d) => {
            const lvl = cells[w*7 + d];
            return (
              <div key={d} style={{
                aspectRatio:'1', borderRadius:2,
                background: lvl === 0 ? 'var(--bg-sunk)'
                  : `oklch(${0.88 - lvl * 0.08} ${lvl * 0.03 + 0.04} 185)`,
              }}/>
            );
          })}
        </div>
      ))}
    </div>
  );
}

function YouScreen({ onTabChange, onCardTap }) {
  const [screen, setScreen] = React.useState('you');
  const [sheetTier, setSheetTier] = React.useState('full');
  const [selectedNotice, setSelectedNotice] = React.useState(null);
  const [notifications, setNotifications] = React.useState([
    { id:'n1', title:'Campaign verification accepted', body:'Retail storefront status was accepted for the Kensington pilot.', meta:'+90 GP', read:false },
    { id:'n2', title:'Mori card shared by 4 people', body:'Your latest artifact card generated 4 profile visits.', meta:'Today', read:false },
    { id:'n3', title:'Explorer badge needs 2 reviews', body:'Add two structured reviews to finish the current badge task.', meta:'Next', read:false },
  ]);
  const unread = notifications.filter(n => !n.read).length;
  const cards = [
    { id:'c1', name:'Mori Tea House', place:'Daikanyama · Tokyo', role:'Photo Update', date:'2026.05.09', seed:'mori-tea-house-daikanyama', rarity:'first-refresh' },
    { id:'c2', name:'Onibus Coffee', place:'Naka-Meguro · Tokyo', role:'Hours Verify', date:'2026.05.08', seed:'onibus-coffee-naka-meguro', rarity:'standard' },
    { id:'c3', name:'Sarugakucho 14-3', place:'Daikanyama · Tokyo', role:'Add Place', date:'2026.05.07', seed:'sarugakucho143', rarity:'hidden-gem' },
  ];

  function openNotice(n) {
    setNotifications(list => list.map(item => item.id === n.id ? {...item, read:true} : item));
    setSelectedNotice({...n, read:true});
    setScreen('notification-detail');
  }

  function pushNotification(title, body, meta) {
    const notice = {
      id: 'n' + (notifications.length + 1),
      title,
      body,
      meta,
      read: false,
    };
    setNotifications(list => [notice, ...list]);
  }

  if (screen === 'settings') {
    return <ProfileSettings onBack={() => setScreen('you')} onTabChange={onTabChange}/>;
  }

  let content;
  if (screen === 'collections') content = <YouCollectionsPage cards={cards} onBack={() => setScreen('you')} onCardTap={onCardTap}/>;
  else if (screen === 'notifications') content = <YouNotificationsPage notifications={notifications} onBack={() => setScreen('you')} onOpen={openNotice}/>;
  else if (screen === 'notification-detail') content = <YouNotificationDetail notice={selectedNotice} onBack={() => setScreen('notifications')}/>;
  else if (screen === 'campaign') content = <YouCampaignPage onBack={() => setScreen('you')} onNotify={pushNotification}/>;
  else if (screen === 'earnings') content = <YouEarningsPage onBack={() => setScreen('you')}/>;
  else content = <YouHub unread={unread} onOpen={setScreen}/>;

  return (
    <GlobalMapPanel
      activeTab="you"
      onTabChange={onTabChange}
      tier={sheetTier}
      setTier={setSheetTier}
      meta="YOU"
      summary={screen === 'you' ? 'Profile hub' : screen === 'campaign' ? 'Data campaign' : screen === 'earnings' ? 'My earnings' : screen === 'notifications' ? 'Notifications' : screen === 'collections' ? 'My collections' : 'Detail'}
      action={<Pill tone="teal">{unread ? `${unread} unread` : '2,450 GP'}</Pill>}
    >
      {content}
    </GlobalMapPanel>
  );
}

function YouHub({ unread, onOpen }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <YouProfileHeader onSettings={() => onOpen('settings')}/>
      <YouStatsStrip/>
      <SavedPlacesBlock/>
      <div className="sec-head"><h3>Account tools</h3><span className="label">tap to open</span></div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8, marginBottom:20}}>
        <YouToolButton id="collections" label="My Collections" onClick={() => onOpen('collections')}/>
        <YouToolButton id="notifications" label="Notifications" badge={unread} onClick={() => onOpen('notifications')}/>
        <YouToolButton id="campaign" label="Data Campaign" onClick={() => onOpen('campaign')}/>
        <YouToolButton id="earnings" label="My Earnings" onClick={() => onOpen('earnings')}/>
      </div>
      <div style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:14}}>
        <div className="mono" style={{fontSize:9, color:'var(--teal-ink)', marginBottom:6}}>TODAY</div>
        <div style={{fontSize:17, fontWeight:800, letterSpacing:'-0.015em'}}>2 nearby actions can unlock the Explorer badge.</div>
        <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>Review one saved place and add one storefront photo to finish the weekly path.</div>
      </div>
    </div>
  );
}

function YouProfileHeader({ onSettings }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:18}}>
      <div style={{width:60, height:60, borderRadius:'50%', background:'var(--ink)', color:'var(--bg)', display:'grid', placeItems:'center', fontSize:22, fontWeight:800}}>R</div>
      <div style={{flex:1}}>
        <div style={{fontSize:20, fontWeight:800, letterSpacing:'-0.02em'}}>Ren Tanaka</div>
        <div style={{fontSize:13, color:'var(--ink-3)', marginTop:2}}>@rentanaka · Level 3 · Toronto</div>
        <div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>847 contributions</div>
      </div>
      <button onClick={onSettings} aria-label="Open settings" style={{width:36, height:36, borderRadius:10, background:'var(--bg-elev)', border:'1px solid var(--line)', cursor:'pointer'}}>...</button>
    </div>
  );
}

function YouStatsStrip() {
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:7, marginBottom:18}}>
      {[
        ['Verified', '312'],
        ['Streak', '14d'],
        ['Cards', '28'],
        ['Credits', '2,450'],
      ].map(row => (
        <div key={row[0]} style={{background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:12, padding:'10px 8px', textAlign:'center'}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:14, fontWeight:800}}>{row[1]}</div>
          <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:4}}>{row[0]}</div>
        </div>
      ))}
    </div>
  );
}

function SavedPlacesBlock() {
  return (
    <>
      <div className="sec-head"><h3>Saved Places</h3><span className="label">lists</span></div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginBottom:18}}>
        {[
          ['Favorites', 18],
          ['Want to go', 11],
          ['Custom', 4],
        ].map(row => (
          <div key={row[0]} style={{background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:12, padding:12, minHeight:72}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:16, fontWeight:800}}>{row[1]}</div>
            <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:5}}>{row[0]}</div>
          </div>
        ))}
      </div>
    </>
  );
}

function YouToolButton({ id, label, badge, onClick }) {
  return (
    <button onClick={onClick} style={{border:0, background:'transparent', padding:'8px 3px', minHeight:82, display:'grid', justifyItems:'center', alignContent:'center', gap:7, cursor:'pointer', fontFamily:'var(--font-sans)', position:'relative'}}>
      <span style={{position:'relative', color:'var(--ink)', display:'grid', placeItems:'center', width:34, height:34}}>
        <YouToolIcon id={id}/>
        {!!badge && <span style={{position:'absolute', right:-8, top:-5, minWidth:18, height:18, borderRadius:999, background:'var(--warm)', color:'#fff', fontFamily:'var(--font-mono)', fontSize:10, fontWeight:800, display:'grid', placeItems:'center'}}>{badge}</span>}
      </span>
      <span style={{fontSize:11.5, fontWeight:800, lineHeight:1.12}}>{label}</span>
    </button>
  );
}

function YouToolIcon({ id }) {
  const p = {stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round', fill:'none'};
  if (id === 'collections') return <svg width="28" height="28" viewBox="0 0 28 28"><rect {...p} x="6" y="5" width="11" height="15" rx="2"/><path {...p} d="M11 8h11v15H11z"/></svg>;
  if (id === 'notifications') return <svg width="28" height="28" viewBox="0 0 28 28"><path {...p} d="M8 20h12M10 20V12a4 4 0 0 1 8 0v8M12.5 23a2 2 0 0 0 3 0"/></svg>;
  if (id === 'campaign') return <svg width="28" height="28" viewBox="0 0 28 28"><path {...p} d="M6 20V8l8-3 8 3v12l-8 3-8-3Z"/><path {...p} d="M10 14h8M14 10v8"/></svg>;
  return <svg width="28" height="28" viewBox="0 0 28 28"><path {...p} d="M7 9h14v11H7z"/><path {...p} d="M10 9V7h8v2M10 14h8M10 17h5"/></svg>;
}

function PageTop({ title, sub, onBack }) {
  return (
    <div style={{display:'flex', gap:12, alignItems:'flex-start', marginBottom:16}}>
      <button onClick={onBack} style={{width:34, height:34, borderRadius:10, border:'1px solid var(--line)', background:'var(--bg-elev)', cursor:'pointer'}}>‹</button>
      <div style={{flex:1}}>
        <div style={{fontSize:24, fontWeight:800, letterSpacing:'-0.025em', lineHeight:1.1}}>{title}</div>
        {sub && <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.4, marginTop:4}}>{sub}</div>}
      </div>
    </div>
  );
}

function YouCollectionsPage({ cards, onBack, onCardTap }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="My Collections" sub="Artifact cards, saved contribution sets, and rare unlocks." onBack={onBack}/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginBottom:14}}>
        {[
          ['Cards', '28'],
          ['Rare', '7'],
          ['Cities', '3'],
        ].map(row => <div key={row[0]} style={{background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:12, padding:11}}><div style={{fontFamily:'var(--font-mono)', fontSize:16, fontWeight:800}}>{row[1]}</div><div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>{row[0]}</div></div>)}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
        {cards.map(card => (
          <button key={card.id} onClick={() => onCardTap && onCardTap(card)} style={{border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)', padding:0, overflow:'hidden', textAlign:'left', cursor:'pointer'}}>
            <div style={{height:112, position:'relative'}}><img src={poiPhoto(card.seed, 320, 230)} alt={card.name} className="photo-cover" style={{position:'absolute', inset:0}}/><div className="photo-overlay"/></div>
            <div style={{padding:10}}><div style={{fontSize:13, fontWeight:800, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{card.name}</div><div style={{fontSize:11, color:'var(--ink-3)', marginTop:3}}>{card.role} · {card.date.slice(5)}</div></div>
          </button>
        ))}
      </div>
    </div>
  );
}

function YouNotificationsPage({ notifications, onBack, onOpen }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="Notifications" sub="Updates from reviews, campaigns, collections, and badge progress." onBack={onBack}/>
      <div style={{display:'grid', gap:9}}>
        {notifications.map(n => (
          <button key={n.id} onClick={() => onOpen(n)} style={{border:'1px solid var(--line)', borderRadius:13, background:'var(--bg-elev)', padding:12, display:'grid', gridTemplateColumns:'10px 1fr auto', gap:10, alignItems:'center', textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)'}}>
            <span style={{width:8, height:8, borderRadius:'50%', background:n.read ? 'var(--line-2)' : 'var(--warm)'}}/>
            <span><span style={{display:'block', fontSize:14, fontWeight:800}}>{n.title}</span><span style={{display:'block', fontSize:12, color:'var(--ink-3)', marginTop:3}}>{n.body}</span></span>
            <Pill tone={n.read ? undefined : 'teal'}>{n.meta}</Pill>
          </button>
        ))}
      </div>
    </div>
  );
}

function YouNotificationDetail({ notice, onBack }) {
  const n = notice || {title:'Notification', body:'No detail selected.', meta:'Read'};
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title={n.title} sub={n.meta} onBack={onBack}/>
      <div style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:16}}>
        <div style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.55}}>{n.body}</div>
        <div style={{height:1, background:'var(--line)', margin:'14px 0'}}/>
        <div style={{fontSize:12, color:'var(--ink-3)', lineHeight:1.45}}>This item is now marked as read. Related campaign, card, or badge actions stay available from the You hub.</div>
      </div>
    </div>
  );
}

function YouCampaignPage({ onBack, onNotify }) {
  const [view, setView] = React.useState('hub');
  const [verificationStatus, setVerificationStatus] = React.useState('unverified');
  const [requirementStep, setRequirementStep] = React.useState(0);
  const [companyBalance, setCompanyBalance] = React.useState(420);
  const [selectedApplication, setSelectedApplication] = React.useState(null);
  const [selectedCampaign, setSelectedCampaign] = React.useState(null);
  const [campaignReturnView, setCampaignReturnView] = React.useState('campaigns');
  const [applications, setApplications] = React.useState([
    { id:'A-2026-011', title:'Kensington retail status', status:'approved', area:'Kensington Market', quote:196, submitted:'May 09', summary:'Verify storefront status and hours for 60 retail POIs.' },
    { id:'A-2026-010', title:'Waterfront access audit', status:'rejected', area:'Toronto Waterfront', quote:340, submitted:'May 04', summary:'Rejected because requested photo scope included private interiors.' },
  ]);
  const [campaigns, setCampaigns] = React.useState([
    { id:'C-2026-0042', title:'Kensington retail status', status:'Live', coverage:'72%', spend:'$128 / $196', verified:'41', remaining:'5d 14h', area:'Kensington Market', reward:'3x GP', downloaded:false },
    { id:'C-2026-0037', title:'Queen West facade survey', status:'Completed', coverage:'94%', spend:'$302 / $318', verified:'88', remaining:'Completed', area:'Queen West', reward:'2x GP', downloaded:true },
  ]);
  const verified = verificationStatus === 'verified';
  const liveCampaigns = campaigns.filter(c => c.status === 'Live');
  const approvedApplications = applications.filter(a => a.status === 'approved' || a.status === 'paid').length;

  function submitApplication() {
    const app = {
      id: 'A-2026-012',
      title: 'Daikanyama site condition',
      status: 'review',
      area: 'Daikanyama',
      quote: 295,
      submitted: 'Today',
      summary: 'Collect facade photos, access condition, and open/closed status in a 0.47 km2 area.',
    };
    setApplications(list => list.find(item => item.id === app.id) ? list : [app, ...list]);
    setSelectedApplication(app);
    setRequirementStep(0);
    setView('applications');
  }

  function updateApplicationStatus(app, status) {
    setApplications(list => list.map(item => item.id === app.id ? {...item, status} : item));
    setSelectedApplication({...app, status});
  }

  function activateApplication(app, method) {
    if (method === 'balance') setCompanyBalance(v => Math.max(0, v - app.quote));
    const campaign = {
      id: 'C-' + app.id.slice(2),
      title: app.title,
      status: 'Live',
      coverage: '0%',
      spend: `$0 / $${app.quote}`,
      verified: '0',
      remaining: '7d',
      area: app.area,
      reward: '3x GP',
      downloaded: false,
    };
    setApplications(list => list.map(item => item.id === app.id ? {...item, status:'paid'} : item));
    setCampaigns(list => list.find(item => item.id === campaign.id) ? list : [campaign, ...list]);
    setSelectedCampaign(campaign);
    setCampaignReturnView('campaigns');
    setView('campaign-detail');
  }

  function failVerification() {
    setVerificationStatus('failed');
    onNotify && onNotify(
      'Publisher verification not approved',
      'The platform could not confirm the submitted qualification papers. You can revise the company application and apply again.',
      'Action'
    );
  }

  if (view === 'verification') {
    return <CampaignVerificationPage status={verificationStatus} setStatus={setVerificationStatus} onFail={failVerification} onBack={() => setView('hub')}/>;
  }
  if (view === 'requirement') {
    return <CampaignRequirementFlow step={requirementStep} setStep={setRequirementStep} onBack={() => setView('hub')} onSubmit={submitApplication}/>;
  }
  if (view === 'monitor') {
    return <CampaignMonitorPage verified={verified} campaigns={liveCampaigns} onBack={() => setView('hub')} onVerify={() => setView('verification')} onOpen={(campaign) => { setSelectedCampaign(campaign); setCampaignReturnView('monitor'); setView('campaign-detail'); }}/>;
  }
  if (view === 'campaign-detail') {
    return <CampaignDetailPage campaign={selectedCampaign || campaigns[0]} onBack={() => setView(campaignReturnView)}/>;
  }
  if (view === 'account') {
    return <CompanyAccountPage balance={companyBalance} setBalance={setCompanyBalance} onBack={() => setView('hub')}/>;
  }
  if (view === 'applications') {
    return <CampaignApplicationsPage verified={verified} applications={applications} balance={companyBalance} onBack={() => setView('hub')} onVerify={() => setView('verification')} onOpen={setSelectedApplication} onApprove={(app) => updateApplicationStatus(app, 'approved')} onReject={(app) => updateApplicationStatus(app, 'rejected')} onActivate={activateApplication} selectedApplication={selectedApplication}/>;
  }
  if (view === 'campaigns') {
    return <CampaignHistoryPage campaigns={campaigns} onBack={() => setView('hub')} onOpen={(campaign) => { setSelectedCampaign(campaign); setCampaignReturnView('campaigns'); setView('campaign-detail'); }}/>;
  }
  if (view === 'help' || view === 'terms' || view === 'contact') {
    return <CampaignSupportPage view={view} onBack={() => setView('hub')}/>;
  }

  return (
    <CampaignHub
      onBack={onBack}
      verified={verified}
      verificationStatus={verificationStatus}
      liveCount={liveCampaigns.length}
      applicationCount={applications.length}
      approvedApplications={approvedApplications}
      campaignCount={campaigns.length}
      companyBalance={companyBalance}
      onOpen={(next) => {
        if (!verified && !['verification', 'help', 'terms', 'contact'].includes(next)) setView('verification');
        else if (next === 'requirement') { setRequirementStep(0); setView('requirement'); }
        else if (next === 'applications') { setSelectedApplication(null); setView('applications'); }
        else setView(next);
      }}
    />
  );
}

function CampaignHub({ onBack, verified, verificationStatus, liveCount, applicationCount, approvedApplications, campaignCount, companyBalance, onOpen }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="Data Campaign" sub="Company workspace for paid data requests." onBack={onBack}/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginBottom:14}}>
        <CampaignHubAction kind="verification" label="Verification" status={verificationStatus} onClick={() => onOpen('verification')}/>
        <CampaignHubAction kind="application" label="Submit Data Application" disabled={!verified} status="new" onClick={() => onOpen('requirement')}/>
        <CampaignHubAction kind="monitor" label="Monitor" disabled={!verified} liveCount={liveCount} onClick={() => onOpen('monitor')}/>
        <CampaignHubAction kind="account" label="My Account" disabled={!verified} status={`$${companyBalance.toFixed(0)}`} onClick={() => onOpen('account')}/>
        <CampaignHubAction kind="applications" label="My Applications" disabled={!verified} status={`${approvedApplications}/${applicationCount} approved`} onClick={() => onOpen('applications')}/>
        <CampaignHubAction kind="campaigns" label="My Campaigns" disabled={!verified} status={`${campaignCount} total`} onClick={() => onOpen('campaigns')}/>
      </div>
      <CompanyAccountCard balance={companyBalance} verified={verified} onOpen={() => onOpen('account')}/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginTop:12}}>
        <button className="btn-secondary" style={{height:38}} onClick={() => onOpen('help')}>Help</button>
        <button className="btn-secondary" style={{height:38}} onClick={() => onOpen('terms')}>Terms</button>
        <button className="btn-primary" style={{height:38}} onClick={() => onOpen('contact')}>Contact</button>
      </div>
      <div style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:14, marginTop:12}}>
        <div className="mono" style={{fontSize:9, color:'var(--teal-ink)', marginBottom:6}}>ACCOUNT LOGIC</div>
        <div style={{fontSize:14, fontWeight:800}}>Contributor credits stay separate from company funds.</div>
        <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>Contributors earn credits in My Earnings. Companies submit applications, wait for platform approval, then pay from a company account or instant payment to activate campaigns.</div>
      </div>
    </div>
  );
}

function CampaignHubAction({ kind, label, status, disabled, liveCount, onClick }) {
  return (
    <button onClick={onClick} style={{border:'1px solid var(--line)', background:'var(--bg-elev)', borderRadius:14, minHeight:108, padding:9, display:'grid', justifyItems:'center', alignContent:'center', gap:7, cursor:'pointer', fontFamily:'var(--font-sans)', opacity:disabled ? 0.62 : 1, position:'relative'}}>
      {liveCount > 0 && <span style={{position:'absolute', top:7, right:7, borderRadius:999, background:'var(--status-fresh)', color:'#fff', fontSize:9, fontWeight:900, padding:'3px 6px'}}>LIVE</span>}
      {status === 'verified' && <span style={{position:'absolute', top:7, right:7}}><MetalBadge small/></span>}
      <span style={{width:38, height:38, display:'grid', placeItems:'center', color:disabled ? 'var(--ink-3)' : 'var(--ink)'}}><CampaignIcon kind={kind}/></span>
      <span style={{fontSize:11.5, fontWeight:800, lineHeight:1.1}}>{label}</span>
      {disabled && <span style={{fontSize:9.5, color:'var(--ink-3)'}}>verify first</span>}
      {status && status !== 'verified' && status !== 'new' && <span style={{fontSize:9.5, color:'var(--warm)', lineHeight:1.1}}>{status}</span>}
    </button>
  );
}

function CampaignIcon({ kind }) {
  const p = {stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round', fill:'none'};
  if (kind === 'verification') return <svg width="34" height="34" viewBox="0 0 34 34"><path {...p} d="M17 4.5l10 4v7.5c0 6.1-4.2 10.6-10 13.5C11.2 26.6 7 22.1 7 16V8.5l10-4Z"/><path {...p} d="M12 17l3.5 3.5L23 13"/></svg>;
  if (kind === 'application') return <svg width="34" height="34" viewBox="0 0 34 34"><path {...p} d="M8 26V8h18v18H8Z"/><path {...p} d="M12 13h10M12 18h10M12 23h6"/><path {...p} d="M24 6l4 4"/></svg>;
  if (kind === 'monitor') return <svg width="34" height="34" viewBox="0 0 34 34"><path {...p} d="M6 24h22M9 24V13M17 24V8M25 24v-7"/><path {...p} d="M9 13l8-5 8 9"/></svg>;
  if (kind === 'account') return <svg width="34" height="34" viewBox="0 0 34 34"><rect {...p} x="7" y="10" width="20" height="15" rx="3"/><path {...p} d="M10 10V8h14v2M21 18h4"/></svg>;
  if (kind === 'applications') return <svg width="34" height="34" viewBox="0 0 34 34"><path {...p} d="M10 6h11l4 4v18H10z"/><path {...p} d="M20 6v5h5M13 16h8M13 21h8"/></svg>;
  return <svg width="34" height="34" viewBox="0 0 34 34"><path {...p} d="M7 12h20v14H7z"/><path {...p} d="M11 12V8h12v4M12 18h10M12 22h7"/></svg>;
}

function MetalBadge({ small }) {
  return (
    <span style={{display:'inline-grid', placeItems:'center', width:small ? 24 : 44, height:small ? 24 : 44, borderRadius:'50%', background:'linear-gradient(135deg,#f8fafc,#a8b0ba 42%,#f5d78a 72%,#8f6b24)', color:'#26313c', border:'1px solid rgba(60,55,40,.24)', boxShadow:'inset 0 1px 2px rgba(255,255,255,.75), 0 4px 10px rgba(30,35,40,.16)', fontSize:small ? 13 : 22, fontWeight:900}}>✓</span>
  );
}

function CompanyAccountCard({ balance, verified, onOpen }) {
  return (
    <div style={{border:'1px solid var(--line)', borderRadius:16, background:'var(--bg-elev)', padding:15}}>
      <div style={{display:'flex', justifyContent:'space-between', gap:10, alignItems:'flex-start'}}>
        <div>
          <div className="mono" style={{fontSize:9, color:'var(--warm)', marginBottom:6}}>COMPANY ACCOUNT</div>
          <div style={{fontSize:28, fontWeight:900, letterSpacing:'-0.035em'}}>${balance.toFixed(0)}</div>
          <div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>5% volume discount unlocked · $18 rebate pending</div>
        </div>
        <Pill tone={verified ? 'teal' : undefined}>{verified ? 'verified' : 'locked'}</Pill>
      </div>
      {onOpen && <button className={verified ? 'btn-primary' : 'btn-secondary'} style={{height:40, marginTop:12, width:'100%'}} onClick={onOpen}>{verified ? 'Manage balance' : 'Verify to activate'}</button>}
    </div>
  );
}

function CampaignVerificationPage({ status, setStatus, onFail, onBack }) {
  const isReview = status === 'review';
  const isVerified = status === 'verified';
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="Verification" sub="Confirm company identity before using paid campaign tools." onBack={onBack}/>
      {isVerified ? (
        <div style={{border:'1px solid var(--line)', borderRadius:16, background:'var(--bg-elev)', padding:18, textAlign:'center'}}>
          <MetalBadge/>
          <div style={{fontSize:21, fontWeight:900, marginTop:10}}>Verified publisher</div>
          <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>Company identity, contact domain, and qualification papers have passed platform review.</div>
        </div>
      ) : isReview ? (
        <>
          <div style={{border:'1px solid var(--line)', borderRadius:16, background:'var(--bg-elev)', padding:16, marginBottom:12}}>
            <div className="mono" style={{fontSize:9, color:'var(--warm)', marginBottom:6}}>UNDER REVIEW</div>
            <div style={{fontSize:20, fontWeight:900}}>Platform investigation in progress</div>
            <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>The team checks company registration, buyer identity, email domain, and uploaded qualification papers. Typical result: 1-2 business days.</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
            <button className="btn-secondary" style={{height:40}} onClick={onFail}>Simulate fail</button>
            <button className="btn-primary" style={{height:40}} onClick={() => setStatus('verified')}>Simulate pass</button>
          </div>
        </>
      ) : (
        <>
          {status === 'failed' && <div style={{border:'1px solid rgba(185,92,68,.35)', borderRadius:13, background:'rgba(185,92,68,.08)', padding:12, marginBottom:12}}><div style={{fontSize:13, fontWeight:800}}>Application not approved</div><div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>A notification was sent. Revise the documents and apply again.</div></div>}
          <div style={{display:'grid', gap:9}}>
            {[
              ['Company legal name', 'Northbridge Field Analytics Inc.'],
              ['Industry', 'Retail intelligence'],
              ['Use case', 'POI status and site condition collection'],
              ['Work email', 'ops@northbridge.example'],
            ].map(row => <label key={row[0]} style={{display:'grid', gap:5, fontSize:11, color:'var(--ink-3)', fontWeight:700}}>{row[0]}<input value={row[1]} readOnly style={{height:40, borderRadius:10, border:'1px solid var(--line)', background:'var(--bg-elev)', padding:'0 11px', color:'var(--ink)', fontFamily:'var(--font-sans)', fontWeight:700}}/></label>)}
          </div>
          <div style={{border:'1px dashed var(--line-2)', borderRadius:14, background:'var(--bg-elev)', padding:14, marginTop:12}}>
            <div style={{fontSize:14, fontWeight:800}}>Qualification papers</div>
            <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:4}}>Business registration.pdf · Buyer authorization.pdf · Data-use policy.pdf</div>
          </div>
          <button className="btn-primary" style={{height:42, width:'100%', marginTop:14}} onClick={() => setStatus('review')}>Submit for review</button>
        </>
      )}
    </div>
  );
}

function CampaignFeatureCard({ title, meta, body, cta, onClick }) {
  return (
    <button onClick={onClick} style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:14, textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)'}}>
      <div className="mono" style={{fontSize:9, color:'var(--warm)', marginBottom:6}}>{meta}</div>
      <div style={{fontSize:18, fontWeight:900, letterSpacing:'-0.02em'}}>{title}</div>
      <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>{body}</div>
      <div style={{fontSize:12, fontWeight:900, marginTop:10}}>{cta}</div>
    </button>
  );
}

function LockedCampaignCard({ onVerify }) {
  return (
    <div style={{border:'1px solid var(--line)', borderRadius:16, background:'var(--bg-elev)', padding:16}}>
      <div style={{fontSize:19, fontWeight:900}}>Publisher verification required</div>
      <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:5}}>Only verified company accounts can submit applications, fund approved requests, and monitor campaigns.</div>
      <button className="btn-primary" style={{height:40, width:'100%', marginTop:12}} onClick={onVerify}>Start verification</button>
    </div>
  );
}

function CampaignRequirementFlow({ step, setStep, onBack, onSubmit }) {
  const steps = [
    ['Template', 'Site Condition Survey', [['Template', 'Facade, access, surroundings'], ['Time', '~4 min/point'], ['Base', '$3/pt']]],
    ['Area', 'Daikanyama 0.47 km2', [['Points', '52-68'], ['Contributors', '34 nearby'], ['Coverage', '70% min']]],
    ['Configure', 'Priority, standard verification', [['Timeline', '7 days'], ['Depth', 'Photo + status'], ['Reward', '3x GP']]],
    ['Quote', 'Estimated total $295', [['Base fee', '$37.60'], ['Delivery', '$180'], ['QA + priority', '$77.40']]],
    ['Submit', 'Ready for platform review', [['Status', 'Application'], ['Payment', 'After approval'], ['Next', 'My Applications']]],
  ];
  const current = steps[step];
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="Data Requirement" sub="Collect campaign requirements and calculate cost." onBack={onBack}/>
      <div style={{display:'flex', gap:4, marginBottom:14}}>{steps.map((_, i) => <div key={i} style={{flex:1, height:4, borderRadius:999, background:i <= step ? 'var(--warm)' : 'var(--bg-sunk)'}}/>)}</div>
      <div style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:15, marginBottom:12}}>
        <div className="mono" style={{fontSize:9, color:'var(--warm)', marginBottom:6}}>{current[0]}</div>
        <div style={{fontSize:20, fontWeight:900, letterSpacing:'-0.025em', lineHeight:1.12}}>{current[1]}</div>
      </div>
      <MetricGrid rows={current[2]}/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:14}}>
        <button className="btn-secondary" onClick={() => step === 0 ? onBack() : setStep(s => Math.max(0, s - 1))}>Back</button>
        <button className="btn-primary" onClick={() => step === steps.length - 1 ? onSubmit() : setStep(s => Math.min(steps.length - 1, s + 1))}>{step === steps.length - 1 ? 'Submit' : 'Next'}</button>
      </div>
    </div>
  );
}

function CampaignApplicationsPage({ verified, applications, balance, onBack, onVerify, onOpen, onApprove, onReject, onActivate, selectedApplication }) {
  const selected = selectedApplication;
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="My Applications" sub="Track platform approval and pay to activate approved campaigns." onBack={onBack}/>
      {!verified ? <LockedCampaignCard onVerify={onVerify}/> : selected ? (
        <>
          <ApplicationCard app={selected} onClick={() => {}}/>
          <MetricGrid rows={[['Quote', `$${selected.quote}`], ['Balance', `$${balance.toFixed(0)}`], ['Status', applicationStatusLabel(selected.status)]]}/>
          <div style={{display:'grid', gap:8, marginTop:12}}>
            {selected.status === 'review' && (
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                <button className="btn-secondary" style={{height:40}} onClick={() => onReject(selected)}>Simulate reject</button>
                <button className="btn-primary" style={{height:40}} onClick={() => onApprove(selected)}>Simulate approve</button>
              </div>
            )}
            {selected.status === 'approved' && (
              <>
                <button className="btn-primary" style={{height:42}} onClick={() => onActivate(selected, 'balance')}>Pay from balance</button>
                <button className="btn-secondary" style={{height:42}} onClick={() => onActivate(selected, 'instant')}>Instant payment</button>
              </>
            )}
            {selected.status === 'rejected' && <div style={{border:'1px solid rgba(185,92,68,.35)', borderRadius:13, background:'rgba(185,92,68,.08)', padding:12, fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45}}>Rejected applications can be revised by submitting a new data application with a narrower or safer scope.</div>}
            {selected.status === 'paid' && <div style={{border:'1px solid var(--line)', borderRadius:13, background:'var(--bg-elev)', padding:12, fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45}}>Payment complete. The campaign is now active and available in My Campaigns.</div>}
            <button className="btn-secondary" style={{height:40}} onClick={() => onOpen(null)}>Back to applications</button>
          </div>
        </>
      ) : (
        <div style={{display:'grid', gap:9}}>
          {applications.map(app => <ApplicationCard key={app.id} app={app} onClick={() => onOpen(app)}/>)}
        </div>
      )}
    </div>
  );
}

function ApplicationCard({ app, onClick }) {
  const tone = app.status === 'approved' || app.status === 'paid' ? 'teal' : undefined;
  return (
    <button onClick={onClick} style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:13, textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)'}}>
      <div style={{display:'flex', justifyContent:'space-between', gap:8, alignItems:'center'}}><div style={{fontSize:15, fontWeight:900}}>{app.title}</div><Pill tone={tone}>{applicationStatusLabel(app.status)}</Pill></div>
      <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>{app.id} · {app.area} · submitted {app.submitted}</div>
      <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.4, marginTop:7}}>{app.summary}</div>
    </button>
  );
}

function applicationStatusLabel(status) {
  if (status === 'review') return 'Review';
  if (status === 'approved') return 'Approved';
  if (status === 'paid') return 'Paid';
  return 'Rejected';
}

function CampaignMonitorPage({ verified, campaigns, onBack, onVerify, onOpen }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="Monitor" sub="Active campaign cards only." onBack={onBack}/>
      {!verified ? <LockedCampaignCard onVerify={onVerify}/> : (
        <CampaignCardList campaigns={campaigns} empty="No active campaigns yet. Approved applications become active after payment." onOpen={onOpen}/>
      )}
    </div>
  );
}

function CampaignDetailPage({ campaign, onBack }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title={campaign.title} sub={`${campaign.id} · ${campaign.area}`} onBack={onBack}/>
      <MetricGrid rows={[['Coverage', campaign.coverage], ['Spend', campaign.spend], ['Verified', campaign.verified], ['Reward', campaign.reward], ['Remaining', campaign.remaining], ['Status', campaign.status]]}/>
      <div style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:14, marginTop:12}}>
        <div style={{fontSize:14, fontWeight:900}}>Delivery map status</div>
        <div style={{height:118, borderRadius:12, background:'linear-gradient(135deg, rgba(37,160,137,.15), rgba(220,155,71,.18)), var(--bg-sunk)', border:'1px solid var(--line)', marginTop:10, position:'relative', overflow:'hidden'}}>
          {[18,34,52,71].map((x,i) => <span key={i} style={{position:'absolute', left:x+'%', top:(24+i*13)+'%', width:18, height:18, borderRadius:'50%', background:i < 3 ? 'var(--status-fresh)' : 'var(--warm)', border:'2px solid var(--bg)'}}/>)}
        </div>
      </div>
    </div>
  );
}

function CompanyAccountPage({ balance, setBalance, onBack }) {
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="My Account" sub="Company balance, deposits, withdrawals, rebates, and invoices." onBack={onBack}/>
      <CompanyAccountCard balance={balance} verified/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:12}}>
        <button className="btn-primary" style={{height:40}} onClick={() => setBalance(v => v + 500)}>Deposit $500</button>
        <button className="btn-secondary" style={{height:40}} onClick={() => setBalance(v => Math.max(0, v - 100))}>Withdraw $100</button>
      </div>
      <div style={{display:'grid', gap:8, marginTop:12}}>
        {[
          ['Deposit', '+$500', 'Company account top-up'],
          ['Campaign payment', '-$295', 'Daikanyama site condition'],
          ['Rebate', '+$18', 'Unused coverage guarantee'],
        ].map(row => <div key={row[0]} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:10, border:'1px solid var(--line)', borderRadius:12, background:'var(--bg-elev)', padding:11}}><div><div style={{fontSize:13, fontWeight:800}}>{row[0]}</div><div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:3}}>{row[2]}</div></div><div style={{fontFamily:'var(--font-mono)', fontSize:13, fontWeight:900}}>{row[1]}</div></div>)}
      </div>
    </div>
  );
}

function CampaignHistoryPage({ campaigns, onBack, onOpen }) {
  const active = campaigns.filter(c => c.status === 'Live');
  const history = campaigns.filter(c => c.status !== 'Live');
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title="My Campaigns" sub="Check active and historical campaigns, then download completed data." onBack={onBack}/>
      <div className="sec-head"><h3>Active</h3><span className="label">{active.length}</span></div>
      <CampaignCardList campaigns={active} empty="No active campaigns." onOpen={onOpen}/>
      <div className="sec-head" style={{marginTop:16}}><h3>History</h3><span className="label">{history.length}</span></div>
      <div style={{display:'grid', gap:9}}>
        {history.map(c => (
          <div key={c.id} style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:13}}>
            <div style={{display:'flex', justifyContent:'space-between', gap:8, alignItems:'center'}}><div style={{fontSize:15, fontWeight:900}}>{c.title}</div><Pill>{c.status}</Pill></div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>{c.id} · {c.area} · {c.coverage} coverage</div>
            <button className="btn-primary" style={{height:38, width:'100%', marginTop:10}}>Download data</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function CampaignCardList({ campaigns, empty, onOpen }) {
  if (!campaigns.length) {
    return <div style={{border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-elev)', padding:14, fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45}}>{empty}</div>;
  }
  return (
    <div style={{display:'grid', gap:9}}>
      {campaigns.map(c => (
        <button key={c.id} onClick={() => onOpen(c)} style={{border:'1px solid var(--line)', borderRadius:15, background:'var(--bg-elev)', padding:13, textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)'}}>
          <div style={{display:'flex', justifyContent:'space-between', gap:8, alignItems:'center'}}><div style={{fontSize:15, fontWeight:900}}>{c.title}</div><Pill tone={c.status === 'Live' ? 'teal' : undefined}>{c.status}</Pill></div>
          <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>{c.id} · {c.area} · {c.remaining}</div>
          <MetricGrid rows={[['Coverage', c.coverage], ['Spend', c.spend], ['Verified', c.verified]]} compact/>
        </button>
      ))}
    </div>
  );
}

function CampaignSupportPage({ view, onBack }) {
  const title = view === 'help' ? 'Campaign Help' : view === 'terms' ? 'Campaign Terms' : 'Contact Support';
  const rows = view === 'help'
    ? [['Verification', 'Required before submitting applications because campaigns create paid contributor missions.'], ['Payment', 'Use company balance for prepaid control or instant card payment after platform approval.'], ['Monitoring', 'Track coverage, spend, verified points, and remaining time.']]
    : view === 'terms'
      ? [['Coverage', 'Minimum coverage guarantee applies to eligible paid campaigns.'], ['Rebate', 'Undelivered guaranteed coverage can return as company account credit.'], ['Data use', 'Published requirements must follow platform safety and privacy rules.']]
      : [['Customer service', 'A campaign specialist will review the campaign, account, and payment context.'], ['Response time', 'Most publisher questions receive a response within one business day.']];
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title={title} sub="Publisher support for company campaigns." onBack={onBack}/>
      <div style={{display:'grid', gap:9}}>
        {rows.map(row => <div key={row[0]} style={{border:'1px solid var(--line)', borderRadius:13, background:'var(--bg-elev)', padding:13}}><div style={{fontSize:14, fontWeight:900}}>{row[0]}</div><div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:4}}>{row[1]}</div></div>)}
      </div>
      {view === 'contact' && <button className="btn-primary" style={{height:42, width:'100%', marginTop:12}}>Start support chat</button>}
    </div>
  );
}

function MetricGrid({ rows, compact }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginTop:compact ? 10 : 0}}>
      {rows.map(row => <div key={row[0]} style={{background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:12, padding:compact ? 8 : 10}}><div style={{fontFamily:'var(--font-mono)', fontSize:compact ? 12 : 13, fontWeight:900}}>{row[1]}</div><div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:5}}>{row[0]}</div></div>)}
    </div>
  );
}

function YouEarningsPage({ onBack }) {
  const [view, setView] = React.useState('dashboard');
  return (
    <div style={{padding:'4px 20px 28px'}}>
      <PageTop title={view === 'dashboard' ? 'My Earnings' : view === 'help' ? 'How earnings work' : 'Terms'} sub="GP, credits, campaign points, and withdrawals." onBack={view === 'dashboard' ? onBack : () => setView('dashboard')}/>
      {view === 'dashboard' ? (
        <>
          <div style={{border:'1px solid var(--line)', borderRadius:16, background:'var(--bg-elev)', padding:16, marginBottom:12}}>
            <div className="mono" style={{fontSize:9, color:'var(--teal-ink)', marginBottom:6}}>WITHDRAWABLE</div>
            <div style={{fontSize:30, fontWeight:800, letterSpacing:'-0.035em'}}>$12.50</div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>$3.20 pending review · minimum withdrawal $10</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12}}>
            {[
              ['GP', '2,450', 'Status and perks'],
              ['CaP', '184', 'Revenue-linked'],
              ['Credits', '$12.50', 'Withdrawable'],
              ['Pending', '$3.20', 'Review hold'],
            ].map(row => <div key={row[0]} style={{border:'1px solid var(--line)', borderRadius:12, background:'var(--bg-elev)', padding:11}}><div style={{fontFamily:'var(--font-mono)', fontSize:15, fontWeight:800}}>{row[1]}</div><div style={{fontSize:11, fontWeight:700, marginTop:4}}>{row[0]}</div><div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:2}}>{row[2]}</div></div>)}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
            <button className="btn-primary" style={{height:40}}>Withdraw</button>
            <button className="btn-secondary" style={{height:40}} onClick={() => setView('help')}>Help</button>
            <button className="btn-secondary" style={{height:40}} onClick={() => setView('terms')}>Terms</button>
          </div>
        </>
      ) : (
        <div style={{display:'grid', gap:10}}>
          {(view === 'help' ? [
            ['GP', 'General Points measure contribution activity and unlock status, badges, and access.'],
            ['CaP', 'Campaign Points are linked to enterprise campaigns and may convert into cashable credits.'],
            ['Pending', 'Some rewards wait for AI and reviewer approval before becoming withdrawable.'],
            ['Withdraw', 'Withdrawable credits can be cashed out after minimum balance and account checks.'],
          ] : [
            ['Approval', 'Fraud, unsafe submissions, or unverifiable data can delay or cancel rewards.'],
            ['Revenue share', 'Campaign payouts depend on customer payment, data acceptance, and pool rules.'],
            ['Identity', 'Withdrawals require verified payment details and may require tax information.'],
          ]).map(row => <div key={row[0]} style={{border:'1px solid var(--line)', borderRadius:13, background:'var(--bg-elev)', padding:13}}><div style={{fontSize:14, fontWeight:800}}>{row[0]}</div><div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.45, marginTop:4}}>{row[1]}</div></div>)}
        </div>
      )}
    </div>
  );
}

window.YouScreen = YouScreen;
window.ProfileScreen = ProfileScreen;
window.ProfileSettings = ProfileSettings;