// TownPost — "More" hub + secondary screens (Jobs, Local Businesses)

// ─── Data ──────────────────────────
const TP_JOBS = [
  { id: 'j1', title: 'Line cook · evenings', org: 'The Owl Café', kind: 'Part-time', pay: '$18/hr + tips', dist: '0.3mi', tag: 'Hiring now', tagColor: 'forest', posted: '2h', hue: 0 },
  { id: 'j2', title: 'Library page (weekends)', org: 'Quinte West Library', kind: 'Part-time', pay: '$16.55/hr', dist: '0.8mi', tag: 'Official', tagColor: 'terracotta', posted: '1d', hue: 1, official: true },
  { id: 'j3', title: 'Apprentice plumber', org: 'Hollow & Sons', kind: 'Full-time · trades', pay: '$22-28/hr', dist: '1.2mi', tag: 'Trade', tagColor: 'ochre', posted: '1d', hue: 4 },
  { id: 'j4', title: 'Saturday market vendor support', org: 'Eastgate Market Co-op', kind: 'Casual · Sat AM', pay: '$80/shift', dist: '0.5mi', posted: '2d', hue: 5 },
  { id: 'j5', title: 'After-school tutor (math · gr 6-8)', org: 'St. Anne\'s Community School', kind: 'Part-time', pay: '$25/hr', dist: '0.4mi', posted: '3d', hue: 2, official: true, tag: 'Official', tagColor: 'terracotta' },
  { id: 'j6', title: 'Dog walker · weekday afternoons', org: 'Renee Okonkwo', kind: 'Casual · neighbor', pay: '$20/walk', dist: '0.2mi', posted: '4d', hue: 3 },
];

const TP_BUSINESSES = [
  { id: 'b1', name: 'The Owl Café', cat: 'Café · breakfast', rating: 4.8, reviews: 142, dist: '0.3mi', open: 'Open · closes 4pm', hue: 0, tag: 'Locally owned',
    addr: '218 Linden Sq', phone: '(613) 555-0142', web: 'theowlcafe.ca', est: 2014,
    owner: { name: 'Marisol Hayes', title: 'Owner & head baker', hue: 1 },
    story: 'Marisol opened The Owl in 2014 after years of running brunch pop-ups out of her apartment. The croissants are laminated by hand every morning at 5am. She knows most of her regulars by their drink order.',
    hours: [['Mon','7am — 4pm'], ['Tue','7am — 4pm'], ['Wed','7am — 4pm'], ['Thu','7am — 4pm'], ['Fri','7am — 5pm'], ['Sat','8am — 5pm'], ['Sun','8am — 3pm']],
    highlights: ['Hand-laminated croissants', 'Single-origin pourovers', 'Outdoor patio'],
    badges: ['Neighbor-owned', 'Verified', 'Pet-friendly'],
    topReview: { author: 'Priya N.', hue: 1, rating: 5, time: '4d', text: 'The almond croissant is genuinely the best in town. Marisol remembered my kid\'s name on our second visit. We come every Saturday now.', helpful: 18 } },
  { id: 'b2', name: 'Hollow & Sons Plumbing', cat: 'Trades · plumbing', rating: 4.9, reviews: 89, dist: '1.2mi', open: 'Open · 24hr emerg.', hue: 4, tag: 'Verified · 30 yrs',
    addr: 'Mobile · serves Quinte West', phone: '(613) 555-0117', web: 'hollowandsons.ca', est: 1994,
    owner: { name: 'Curt Hollow', title: 'Master plumber, second-generation', hue: 0 },
    story: 'Curt took over from his dad in 2008 and runs the business with his nephew Theo. Specializes in old-house jobs — galvanized pipe replacements, vintage fixtures, anything pre-1950. Will tell you straight if you don\'t need the work yet.',
    hours: [['Mon','7am — 6pm'], ['Tue','7am — 6pm'], ['Wed','7am — 6pm'], ['Thu','7am — 6pm'], ['Fri','7am — 6pm'], ['Sat','9am — 2pm'], ['Sun','Emergencies only']],
    highlights: ['Honest pricing', '24hr emergency', 'Old-house specialist'],
    badges: ['Licensed', 'Insured', 'Background-checked'],
    topReview: { author: 'Marisol H.', hue: 1, rating: 5, time: '1w', text: 'Showed up at 7am the day after we called for a burst pipe and didn\'t charge an emergency fee because, quote, "it\'s a Tuesday."', helpful: 22 } },
  { id: 'b3', name: 'Linden Books', cat: 'Bookstore · used', rating: 4.7, reviews: 56, dist: '0.5mi', open: 'Closed · opens 10am', hue: 1,
    addr: '47 Linden Sq', phone: '(613) 555-0184', web: 'lindenbooks.ca', est: 2008,
    owner: { name: 'Renee Okonkwo', title: 'Owner', hue: 4 },
    story: 'Renee started Linden as a single shelf in her living room in 2006 and opened the storefront two years later. The kids\' loft on the second floor has hosted Saturday story-time for 14 years running.',
    hours: [['Mon','10am — 7pm'], ['Tue','10am — 7pm'], ['Wed','10am — 7pm'], ['Thu','10am — 7pm'], ['Fri','10am — 8pm'], ['Sat','9am — 8pm'], ['Sun','11am — 5pm']],
    highlights: ['Saturday story-time', 'Buy-back program', 'Local author shelf'],
    badges: ['Independent', 'Cash or card'],
    topReview: { author: 'Lily A.', hue: 5, rating: 5, time: '2w', text: 'Renee found me a 1972 first-edition I\'d been hunting for two years and held it for me until I could afford it. This place is the heart of the neighborhood.', helpful: 14 } },
  { id: 'b4', name: 'Eastgate Hardware', cat: 'Hardware · garden', rating: 4.6, reviews: 211, dist: '0.7mi', open: 'Open · closes 7pm', hue: 5, tag: 'Family-owned',
    addr: '801 Eastgate Rd', phone: '(613) 555-0123', web: 'eastgatehardware.ca', est: 1962,
    owner: { name: 'David Park', title: 'Third-generation owner', hue: 3 },
    story: 'Eastgate has been on the same corner since 1962 — three generations of the Park family. David runs it now with his sister and two of their kids on weekends. If they don\'t have it, they\'ll order it.',
    hours: [['Mon','7am — 7pm'], ['Tue','7am — 7pm'], ['Wed','7am — 7pm'], ['Thu','7am — 7pm'], ['Fri','7am — 8pm'], ['Sat','8am — 6pm'], ['Sun','9am — 5pm']],
    highlights: ['Tool rental', 'Key cutting', 'Knowledgeable staff'],
    badges: ['Family-owned', 'Est. 1962'],
    topReview: { author: 'Curt H.', hue: 0, rating: 5, time: '5d', text: 'David walked me through three different valve options and didn\'t try to upsell once. Got the right part on the first trip.', helpful: 9 } },
  { id: 'b5', name: 'Marisol\'s Tamales', cat: 'Food · takeout', rating: 4.9, reviews: 38, dist: '0.4mi', open: 'Open · closes 8pm', hue: 1, tag: 'Neighbor-run',
    addr: '12 Maple Park Ln', phone: '(613) 555-0166', web: 'marisolstamales.ca', est: 2021,
    owner: { name: 'Marisol Hernández', title: 'Owner', hue: 1 },
    story: 'A pandemic side-hustle that became a real business. Marisol cooks everything in small batches from her grandmother\'s recipes. Pickup orders open Sunday at 6pm and usually sell out by Tuesday.',
    hours: [['Mon','Closed'], ['Tue','3pm — 8pm'], ['Wed','3pm — 8pm'], ['Thu','3pm — 8pm'], ['Fri','3pm — 9pm'], ['Sat','12pm — 9pm'], ['Sun','12pm — 8pm']],
    highlights: ['Small batch', 'Family recipes', 'Order online'],
    badges: ['Neighbor-run', 'Cash-friendly'],
    topReview: { author: 'Theo P.', hue: 7, rating: 5, time: '3d', text: 'Mole tamales are unreal. We\'ve been ordering every other Friday for a year. Marisol throws in extra salsa when she remembers our kids.', helpful: 11 } },
  { id: 'b6', name: 'Quinte Bike Co.', cat: 'Bikes · repair', rating: 4.8, reviews: 73, dist: '0.9mi', open: 'Open · closes 6pm', hue: 2,
    addr: '305 Old Mill Rd', phone: '(613) 555-0199', web: 'quintebikeco.ca', est: 2017,
    owner: { name: 'Renee Okonkwo', title: 'Co-owner & mechanic', hue: 4 },
    story: 'Started as a Saturday repair stand at the farmers market. Now a full shop with three mechanics. Specializes in vintage steel frames and commuter tune-ups. Free quick fixes for kids.',
    hours: [['Mon','10am — 6pm'], ['Tue','10am — 6pm'], ['Wed','10am — 6pm'], ['Thu','10am — 6pm'], ['Fri','10am — 7pm'], ['Sat','9am — 5pm'], ['Sun','Closed']],
    highlights: ['Vintage steel', 'Commuter tune-ups', 'Free kid repairs'],
    badges: ['Independent', 'Member-owned'],
    topReview: { author: 'Ben T.', hue: 0, rating: 5, time: '1w', text: 'Brought in my dad\'s 1978 Peugeot. Renee replaced the bottom bracket, hand-built new wheels, and didn\'t charge for the diagnosis. It rides like new.', helpful: 16 } },
];

const TP_GROUPS = [
  { id: 'g1', name: 'Belleville & Surrounding Area', members: 247, role: 'Your block', hue: 0 },
  { id: 'g2', name: 'Quinte West Parents', members: 1840, role: 'Joined', hue: 1 },
  { id: 'g3', name: 'Local Trades & Services', members: 412, role: 'Joined', hue: 4 },
];

// ─── More hub: 8 tiles + groups + recents ──────────────────────────
function ScreenMore({ onNav = () => {}, onGo = () => {} }) {
  const tiles = [
    { id: 'map',        label: 'Map',             sub: 'See your block live',     icon: 'tabMap',   color: 'forest' },
    { id: 'profile',    label: 'You',             sub: 'Profile & reputation',    icon: 'tabProfile', color: 'terracotta' },
    { id: 'events',     label: 'Events',          sub: '12 this week',            icon: 'calendar', color: 'ochre' },
    { id: 'jobs',       label: 'Job Hub',         sub: '38 open · 6 nearby',      icon: 'briefcase', color: 'forest' },
    { id: 'businesses', label: 'Reputable Businesses',sub: '212 in your area',        icon: 'tabMarket', color: 'terracotta' },
    { id: 'notifs',     label: 'Notifications',   sub: '5 unread',                icon: 'bell',     color: 'ink', badge: 5 },
    { id: 'messages',   label: 'Messages',        sub: '7 unread',                icon: 'mail',     color: 'ink', badge: 7 },
    { id: 'onboarding', label: 'Settings',        sub: 'Preferences & block',     icon: 'settings', color: 'muted' },
  ];

  const colorMap = {
    forest: { bg: TP.greenTint, fg: TP.forest },
    terracotta: { bg: TP.redTint, fg: TP.terracotta },
    ochre: { bg: TP.amberTint, fg: TP.ochre },
    ink: { bg: TP.cream, fg: TP.ink },
    muted: { bg: TP.cream, fg: TP.inkSoft },
  };

  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{ padding: '14px 16px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <TPAvatar name="Dev Krishnan" hue={2} size={48} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.3 }}>Dev Krishnan</div>
            <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft, marginTop: 2 }}>Belleville & Surrounding Area · 4.9 trust · 8 helpful posts</div>
          </div>
          <button onClick={() => onGo('profile')} style={{ padding: '6px 12px', borderRadius: TP.r.pill, background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, color: TP.ink, fontFamily: TP.sans, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>View</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: TP.cream, borderRadius: TP.r.pill, padding: '8px 14px' }}>
            <TPIcon name="search" size={14} color={TP.muted} />
            <span style={{ fontFamily: TP.sans, fontSize: 13, color: TP.muted }}>Search the neighborhood…</span>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Tile grid */}
        <div style={{ padding: '14px 12px 8px' }}>
          <div style={{ padding: '0 4px 8px', fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Explore</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {tiles.map(t => {
              const c = colorMap[t.color];
              return (
                <button key={t.id} onClick={() => onGo(t.id)} style={{
                  position: 'relative',
                  background: TP.paper, border: `1px solid ${TP.hairline}`, borderRadius: TP.r.md,
                  padding: '14px 12px 12px', textAlign: 'left', cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', gap: 8,
                }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: c.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <TPIcon name={t.icon} size={18} color={c.fg} stroke={2} />
                  </div>
                  {t.badge && (
                    <div style={{ position: 'absolute', top: 12, right: 12, minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9, background: TP.terracotta, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TP.sans, fontSize: 10, fontWeight: 700 }}>{t.badge}</div>
                  )}
                  <div>
                    <div style={{ fontFamily: TP.sans, fontSize: 14, fontWeight: 700, color: TP.ink, lineHeight: 1.2 }}>{t.label}</div>
                    <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 2, lineHeight: 1.3 }}>{t.sub}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Your groups */}
        <div style={{ padding: '12px 16px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Your groups</div>
          <span style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.terracotta, fontWeight: 600 }}>See all</span>
        </div>
        <div style={{ background: TP.paper, borderTop: `1px solid ${TP.hairline}`, borderBottom: `1px solid ${TP.hairline}` }}>
          {TP_GROUPS.map((g, i) => (
            <div key={g.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 16px',
              borderBottom: i < TP_GROUPS.length - 1 ? `1px solid ${TP.hairline}` : 'none',
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: TP.amberTint, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <TPIcon name="profile" size={18} color={TP.ochre} stroke={2} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 700, color: TP.ink }}>{g.name}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 1 }}>{g.members.toLocaleString()} members · {g.role}</div>
              </div>
              <TPIcon name="chevronRight" size={16} color={TP.muted} />
            </div>
          ))}
        </div>

        {/* Quick links */}
        <div style={{ padding: '12px 16px 4px', fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Quick</div>
        <div style={{ background: TP.paper, borderTop: `1px solid ${TP.hairline}`, borderBottom: `1px solid ${TP.hairline}` }}>
          {[
            { icon: 'shield', label: 'Saved & bookmarks', sub: '14 posts saved' },
            { icon: 'flag', label: 'Report a concern', sub: 'Direct to mods' },
            { icon: 'briefcase', label: 'Post a job', sub: 'Reach 1,200+ neighbors' },
            { icon: 'plus', label: 'Invite a neighbor', sub: 'Earn a Founder badge' },
          ].map((row, i, arr) => (
            <div key={row.label} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 16px',
              borderBottom: i < arr.length - 1 ? `1px solid ${TP.hairline}` : 'none',
              cursor: 'pointer',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: TP.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <TPIcon name={row.icon} size={15} color={TP.inkSoft} stroke={2} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600, color: TP.ink }}>{row.label}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 1 }}>{row.sub}</div>
              </div>
              <TPIcon name="chevronRight" size={15} color={TP.muted} />
            </div>
          ))}
        </div>

        <div style={{ padding: '18px 16px 24px', textAlign: 'center', fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>
          TownPost · v1.0 · Quinte West
        </div>
        <div style={{ height: 80 }} />
      </div>

      <TPTabBar active="more" onChange={onNav} />
    </div>
  );
}

// ─── Job Hub ──────────────────────────
function ScreenJobs({ onNav = () => {}, onBack = () => {}, onTap = () => {} }) {
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Part-time', 'Full-time', 'Trades', 'Casual', 'Official'];
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 16px 14px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <button onClick={onBack} style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginLeft: -4 }}>
            <TPIcon name="chevronLeft" size={20} color={TP.ink} />
          </button>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.3 }}>Job Hub</div>
            <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase', marginTop: 2 }}>38 OPEN · 6 WITHIN 1MI · UPDATED 12M</div>
          </div>
          <button style={{ padding: '6px 12px', borderRadius: TP.r.pill, background: TP.forest, border: 'none', display: 'flex', alignItems: 'center', gap: 4, color: TP.cream, fontFamily: TP.sans, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
            <TPIcon name="plus" size={12} color={TP.cream} stroke={2.5} /> Post
          </button>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: TP.cream, borderRadius: TP.r.pill, padding: '8px 14px' }}>
          <TPIcon name="search" size={14} color={TP.muted} />
          <span style={{ fontFamily: TP.sans, fontSize: 13, color: TP.muted, flex: 1 }}>Search jobs, roles, skills…</span>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Filter chips */}
        <div style={{ display: 'flex', gap: 6, padding: '10px 16px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          {filters.map(f => (
            <button key={f} onClick={() => setFilter(f)} style={{
              flexShrink: 0, padding: '5px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${filter === f ? TP.ink : TP.hairlineStrong}`,
              background: filter === f ? TP.ink : 'transparent',
              color: filter === f ? TP.cream : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 12, fontWeight: 600, cursor: 'pointer',
            }}>{f}</button>
          ))}
        </div>

        {/* Featured / urgent banner */}
        <div style={{ padding: '12px 16px 0' }}>
          <div style={{ background: TP.greenTint, border: `1px solid ${TP.forest}40`, borderRadius: TP.r.md, padding: '12px 14px', display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: TP.forest, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <TPIcon name="briefcase" size={16} color={TP.cream} stroke={2.2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 700, color: TP.forest, letterSpacing: -0.1 }}>Hiring fair · Sat May 10</div>
              <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.inkSoft, marginTop: 1 }}>14 local employers · Quinte West Library · 10am-2pm</div>
            </div>
            <TPIcon name="chevronRight" size={16} color={TP.forest} />
          </div>
        </div>

        {/* Job list */}
        <div style={{ padding: '12px 12px 80px' }}>
          {TP_JOBS.map(j => (
            <div key={j.id} onClick={() => onTap(j)} style={{
              background: TP.paper, border: `1px solid ${TP.hairline}`, borderRadius: TP.r.md,
              padding: '14px', marginBottom: 8, cursor: 'pointer',
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: `oklch(85% 0.07 ${[20, 70, 140, 200, 30, 50][j.hue % 6]})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <TPIcon name={j.tag === 'Trade' ? 'briefcase' : 'briefcase'} size={20} color={TP.ink} stroke={1.8} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 3 }}>
                    <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 14, fontWeight: 700, color: TP.ink, lineHeight: 1.3 }}>{j.title}</div>
                    {j.tag && (
                      <span style={{
                        flexShrink: 0,
                        padding: '2px 7px', borderRadius: TP.r.pill,
                        background: j.tagColor === 'forest' ? TP.greenTint : j.tagColor === 'terracotta' ? TP.redTint : TP.amberTint,
                        color: j.tagColor === 'forest' ? TP.forest : j.tagColor === 'terracotta' ? TP.terracotta : TP.ochre,
                        fontFamily: TP.mono, fontSize: 9, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                      }}>{j.tag}</span>
                    )}
                  </div>
                  <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
                    {j.org}{j.official && <TPIcon name="shield" size={11} color={TP.terracotta} stroke={2.2} />}
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, fontFamily: TP.sans, fontSize: 11, color: TP.muted, alignItems: 'center' }}>
                    <span style={{ fontWeight: 600, color: TP.forest }}>{j.pay}</span>
                    <span>·</span>
                    <span>{j.kind}</span>
                    <span>·</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}><TPIcon name="location" size={10} color={TP.muted} stroke={2} />{j.dist}</span>
                    <span style={{ marginLeft: 'auto', fontFamily: TP.mono, fontSize: 9.5, fontWeight: 600 }}>{j.posted}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

// ─── Local Businesses ──────────────────────────
function ScreenBusinesses({ onNav = () => {}, onBack = () => {}, onTap = () => {} }) {
  const [cat, setCat] = React.useState('All');
  const cats = ['All', 'Food', 'Trades', 'Retail', 'Services', 'Health'];
  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 16px 14px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <button onClick={onBack} style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginLeft: -4 }}>
            <TPIcon name="chevronLeft" size={20} color={TP.ink} />
          </button>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.3 }}>Reputable Businesses</div>
            <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase', marginTop: 2 }}>212 LISTED · 47 NEIGHBOR-OWNED</div>
          </div>
          <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <TPIcon name="filter" size={15} color={TP.ink} />
          </button>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: TP.cream, borderRadius: TP.r.pill, padding: '8px 14px' }}>
          <TPIcon name="search" size={14} color={TP.muted} />
          <span style={{ fontFamily: TP.sans, fontSize: 13, color: TP.muted, flex: 1 }}>Search businesses, services…</span>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Categories */}
        <div style={{ display: 'flex', gap: 6, padding: '10px 16px', overflowX: 'auto', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)} style={{
              flexShrink: 0, padding: '5px 12px', borderRadius: TP.r.pill,
              border: `1px solid ${cat === c ? TP.ink : TP.hairlineStrong}`,
              background: cat === c ? TP.ink : 'transparent',
              color: cat === c ? TP.cream : TP.inkSoft,
              fontFamily: TP.sans, fontSize: 12, fontWeight: 600, cursor: 'pointer',
            }}>{c}</button>
          ))}
        </div>

        {/* Featured: neighbor-owned */}
        <div style={{ padding: '14px 16px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Neighbor-owned · this week</div>
        </div>
        <div style={{ display: 'flex', gap: 10, padding: '0 16px 14px', overflowX: 'auto' }}>
          {TP_BUSINESSES.filter(b => b.tag).slice(0, 4).map(b => (
            <div key={b.id} onClick={() => onTap(b)} style={{
              flexShrink: 0, width: 200, background: TP.paper, border: `1px solid ${TP.hairline}`, borderRadius: TP.r.md, overflow: 'hidden', cursor: 'pointer',
            }}>
              <TPImage label={b.name} height={90} hue={b.hue} radius={0} />
              <div style={{ padding: '10px 12px 12px' }}>
                <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 700, color: TP.ink, lineHeight: 1.2, marginBottom: 2 }}>{b.name}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, marginBottom: 6 }}>{b.cat}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: TP.sans, fontSize: 11, color: TP.inkSoft }}>
                  <span style={{ color: TP.ochre, fontWeight: 700 }}>★ {b.rating}</span>
                  <span>· {b.reviews}</span>
                  <span style={{ marginLeft: 'auto', fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 600 }}>{b.dist}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* All businesses list */}
        <div style={{ padding: '4px 16px 6px' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>All · sorted by distance</div>
        </div>
        <div style={{ background: TP.paper, borderTop: `1px solid ${TP.hairline}`, borderBottom: `1px solid ${TP.hairline}` }}>
          {TP_BUSINESSES.map((b, i) => (
            <div key={b.id} onClick={() => onTap(b)} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 16px',
              borderBottom: i < TP_BUSINESSES.length - 1 ? `1px solid ${TP.hairline}` : 'none',
              cursor: 'pointer',
            }}>
              <div style={{ width: 48, height: 48, borderRadius: 10, background: `oklch(86% 0.07 ${[20, 70, 140, 200, 30, 50][b.hue % 6]})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontFamily: TP.serif, fontSize: 18, color: TP.ink, fontWeight: 700, letterSpacing: -0.5 }}>{b.name[0]}</span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 1 }}>
                  <span style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 700, color: TP.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{b.name}</span>
                  {b.tag && <TPIcon name="shield" size={11} color={TP.forest} stroke={2.2} />}
                </div>
                <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginBottom: 3 }}>{b.cat} · {b.dist}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontFamily: TP.sans }}>
                  <span style={{ color: TP.ochre, fontWeight: 700 }}>★ {b.rating}</span>
                  <span style={{ color: TP.muted }}>· {b.reviews} reviews</span>
                  <span style={{ marginLeft: 'auto', color: b.open.startsWith('Open') ? TP.forest : TP.muted, fontWeight: 600, fontSize: 11 }}>{b.open}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 80 }} />
      </div>

      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

// ─── Business Detail — full beautiful page ──────────────────────────
function ScreenBusinessDetail({ business, onNav = () => {}, onBack = () => {}, onTap = () => {} }) {
  const b = business || TP_BUSINESSES[0];
  const today = new Date().getDay(); // 0=Sun..6=Sat
  // hours array is Mon-first, so dayIdx 0=Mon..6=Sun
  const todayIdx = today === 0 ? 6 : today - 1;
  const accentHues = ['#A8551E', '#5D7349', '#7A5410', '#4A6B89', '#7A4220', '#3F7A3A', '#8B2A20', '#5C3A78'];
  const accent = accentHues[b.hue % accentHues.length];

  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Hero */}
      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ position: 'relative', height: 220 }}>
          <TPImage label={b.name} height={220} hue={b.hue} radius={0} />
          {/* Top gradient for legibility */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,22,0.35) 0%, transparent 35%, transparent 65%, rgba(31,27,22,0.5) 100%)', pointerEvents: 'none' }} />
          {/* Back & save */}
          <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between' }}>
            <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}>
              <TPIcon name="chevronLeft" size={18} color={TP.ink} />
            </button>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}>
                <TPIcon name="share" size={15} color={TP.ink} stroke={1.8} />
              </button>
              <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}>
                <TPIcon name="bookmark" size={15} color={TP.ink} stroke={1.8} />
              </button>
            </div>
          </div>
          {/* Photo count chip */}
          <div style={{ position: 'absolute', bottom: 14, right: 14, background: 'rgba(31,27,22,0.6)', color: TP.cream, padding: '5px 10px', borderRadius: TP.r.pill, fontFamily: TP.mono, fontSize: 10, fontWeight: 700, letterSpacing: 0.8, display: 'flex', alignItems: 'center', gap: 5 }}>
            <TPIcon name="image" size={11} color={TP.cream} stroke={2} /> 24 PHOTOS
          </div>
        </div>

        {/* Title block — overlaps hero subtly */}
        <div style={{ background: TP.paper, marginTop: -18, borderRadius: '18px 18px 0 0', padding: '20px 18px 16px', position: 'relative' }}>
          {/* Trust badges row */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
            {b.badges.map(t => (
              <span key={t} style={{ fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', color: accent, background: `${accent}15`, padding: '4px 9px', borderRadius: TP.r.pill, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <TPIcon name="check" size={10} color={accent} stroke={2.4} /> {t}
              </span>
            ))}
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 30, color: TP.ink, lineHeight: 1.05, letterSpacing: -0.6, marginBottom: 4 }}>{b.name}</div>
          <div style={{ fontFamily: TP.sans, fontSize: 13, color: TP.muted, marginBottom: 12 }}>{b.cat} · Est. {b.est}</div>
          {/* Rating + open + dist row */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 12, borderTop: `1px solid ${TP.hairline}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ color: TP.ochre, fontSize: 14, fontWeight: 700 }}>★</span>
              <span style={{ fontFamily: TP.serif, fontSize: 18, color: TP.ink, fontWeight: 700, letterSpacing: -0.3 }}>{b.rating}</span>
              <span style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted }}>({b.reviews})</span>
            </div>
            <div style={{ width: 1, height: 18, background: TP.hairline }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: b.open.startsWith('Open') ? TP.forest : TP.muted }} />
              <span style={{ fontFamily: TP.sans, fontSize: 12, color: TP.ink, fontWeight: 600 }}>{b.open}</span>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, fontFamily: TP.mono, fontSize: 11, color: TP.muted, fontWeight: 600 }}>
              <TPIcon name="location" size={11} color={TP.muted} stroke={2} /> {b.dist}
            </div>
          </div>
        </div>

        {/* Action row — sticky-feel under title */}
        <div style={{ background: TP.paper, padding: '4px 18px 18px', borderBottom: `1px solid ${TP.hairline}`, display: 'flex', gap: 8 }}>
          <button onClick={() => onTap('call')} style={{ flex: 1, background: TP.forest, color: TP.cream, border: 'none', padding: '12px 0', borderRadius: TP.r.md, fontFamily: TP.sans, fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, letterSpacing: -0.1 }}>
            <TPIcon name="profile" size={14} color={TP.cream} stroke={2.2} /> Call
          </button>
          <button onClick={() => onTap('message')} style={{ flex: 1, background: TP.paper, color: TP.ink, border: `1px solid ${TP.hairlineStrong}`, padding: '11px 0', borderRadius: TP.r.md, fontFamily: TP.sans, fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, letterSpacing: -0.1 }}>
            <TPIcon name="chat" size={14} color={TP.ink} stroke={2} /> Message
          </button>
          <button onClick={() => onTap('directions')} style={{ flex: 1, background: TP.paper, color: TP.ink, border: `1px solid ${TP.hairlineStrong}`, padding: '11px 0', borderRadius: TP.r.md, fontFamily: TP.sans, fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, letterSpacing: -0.1 }}>
            <TPIcon name="tabMap" size={14} color={TP.ink} stroke={2} /> Directions
          </button>
        </div>

        {/* Owner story */}
        <div style={{ background: TP.paper, padding: '18px 18px 20px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 12 }}>Meet the owner</div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <TPAvatar name={b.owner.name} hue={b.owner.hue} size={52} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TP.serif, fontSize: 18, color: TP.ink, lineHeight: 1.1, letterSpacing: -0.3, marginBottom: 2 }}>{b.owner.name}</div>
              <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.muted }}>{b.owner.title}</div>
            </div>
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 15, color: TP.ink, lineHeight: 1.55, letterSpacing: -0.1, fontStyle: 'italic', position: 'relative', paddingLeft: 14 }}>
            <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: accent, borderRadius: 2 }} />
            "{b.story}"
          </div>
        </div>

        {/* Highlights chips */}
        <div style={{ background: TP.paper, padding: '16px 18px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>What people love</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {b.highlights.map(h => (
              <span key={h} style={{ fontFamily: TP.sans, fontSize: 12, fontWeight: 600, color: TP.ink, background: TP.cream, padding: '7px 12px', borderRadius: TP.r.pill, border: `1px solid ${TP.hairline}` }}>{h}</span>
            ))}
          </div>
        </div>

        {/* Hours */}
        <div style={{ background: TP.paper, padding: '16px 18px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Hours</div>
            <span style={{ fontFamily: TP.sans, fontSize: 11, color: b.open.startsWith('Open') ? TP.forest : TP.muted, fontWeight: 600 }}>{b.open}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', rowGap: 8, columnGap: 12, fontFamily: TP.sans, fontSize: 13 }}>
            {b.hours.map(([day, range], i) => {
              const isToday = i === todayIdx;
              return (
                <React.Fragment key={day}>
                  <div style={{ color: isToday ? TP.ink : TP.muted, fontWeight: isToday ? 700 : 500 }}>{day}{isToday && <span style={{ marginLeft: 6, fontFamily: TP.mono, fontSize: 8.5, color: accent, fontWeight: 700, letterSpacing: 0.8 }}>TODAY</span>}</div>
                  <div style={{ color: isToday ? TP.ink : TP.inkSoft, fontWeight: isToday ? 600 : 500, fontVariantNumeric: 'tabular-nums' }}>{range}</div>
                </React.Fragment>
              );
            })}
          </div>
        </div>

        {/* Contact */}
        <div style={{ background: TP.paper, padding: '16px 18px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>Contact & location</div>
          {[
            { icon: 'location', label: b.addr, action: 'directions' },
            { icon: 'profile', label: b.phone, action: 'call' },
            { icon: 'mail', label: b.web, action: 'web' },
          ].map(row => (
            <div key={row.label} onClick={() => onTap(row.action)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', cursor: 'pointer', borderTop: `1px solid ${TP.hairline}` }}>
              <div style={{ width: 32, height: 32, borderRadius: '50%', background: TP.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <TPIcon name={row.icon} size={14} color={TP.ink} stroke={1.8} />
              </div>
              <span style={{ fontFamily: TP.sans, fontSize: 13.5, color: TP.ink, flex: 1 }}>{row.label}</span>
              <TPIcon name="chevronRight" size={14} color={TP.muted} />
            </div>
          ))}
        </div>

        {/* Top review */}
        <div style={{ background: TP.paper, padding: '18px', borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>Top review</div>
            <span style={{ fontFamily: TP.sans, fontSize: 11.5, color: accent, fontWeight: 700, cursor: 'pointer' }}>See all {b.reviews} →</span>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
            <TPAvatar name={b.topReview.author} hue={b.topReview.hue} size={36} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 700, color: TP.ink, lineHeight: 1.2 }}>{b.topReview.author}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontFamily: TP.mono, fontSize: 10.5, color: TP.muted, marginTop: 1 }}>
                <span style={{ color: TP.ochre, letterSpacing: 1 }}>{'★'.repeat(b.topReview.rating)}</span>
                <span>· {b.topReview.time}</span>
              </div>
            </div>
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 15, color: TP.ink, lineHeight: 1.55, letterSpacing: -0.1, marginBottom: 12 }}>
            "{b.topReview.text}"
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, fontWeight: 600 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <TPIcon name="heart" size={12} color={TP.muted} stroke={2} /> {b.topReview.helpful} helpful
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <TPIcon name="chat" size={12} color={TP.muted} stroke={2} /> Reply
            </span>
          </div>
        </div>

        {/* Write a review CTA */}
        <div style={{ padding: '18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={() => onTap('review')} style={{ background: TP.ink, color: TP.cream, border: 'none', padding: '14px 0', borderRadius: TP.r.md, fontFamily: TP.sans, fontSize: 13.5, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, letterSpacing: -0.1 }}>
            <TPIcon name="plus" size={14} color={TP.cream} stroke={2.4} /> Write a review
          </button>
          <button onClick={() => onTap('flag')} style={{ background: 'transparent', color: TP.muted, border: 'none', padding: '8px 0', fontFamily: TP.sans, fontSize: 12, fontWeight: 500, cursor: 'pointer', textAlign: 'center' }}>
            Suggest an edit · Report a problem
          </button>
        </div>

        <div style={{ height: 80 }} />
      </div>

      <TPTabBar active="" onChange={onNav} />
    </div>
  );
}

Object.assign(window, { ScreenMore, ScreenJobs, ScreenBusinesses, ScreenBusinessDetail });