// Customer app — direction helper + shared widgets
// Three directions: 'calm' | 'cinematic' | 'expert'

const D = (dir) => ({
  // Surface tone
  bg: dir === 'calm' ? '#0E0824' : dir === 'expert' ? '#070111' : '#0A0118',
  panel: dir === 'calm' ? 'rgba(40,20,80,0.45)' : dir === 'expert' ? 'rgba(15,5,30,0.6)' : 'rgba(20,8,40,0.55)',
  border: dir === 'calm' ? 'rgba(167,139,250,0.18)' : dir === 'expert' ? 'rgba(124,58,237,0.25)' : Z.border,
  // Accent intensity
  accent: dir === 'cinematic' ? Z.gradient : dir === 'expert' ? `linear-gradient(135deg, ${Z.brand}, ${Z.brandDeep})` : `linear-gradient(135deg, ${Z.brand}, ${Z.pink})`,
  showRadar: dir === 'cinematic',
  showGrid: dir !== 'calm',
  showLedger: dir === 'expert',
  density: dir === 'expert' ? 'tight' : dir === 'calm' ? 'roomy' : 'normal',
  copyTone: dir === 'calm' ? 'warm' : dir === 'expert' ? 'precise' : 'bold',
  dirLabel: dir === 'calm' ? 'Calm' : dir === 'expert' ? 'Expert' : 'Cinematic',
  dirGlyph: dir === 'calm' ? '◐' : dir === 'expert' ? '◧' : '✦',
});

// Map of 12+ services
const SERVICES = [
  { id: 'plumb',    name: 'Plumbing',     icon: '🔧', from: 199, eta: 18, hot: true,  desc: 'Leaks, taps, drains' },
  { id: 'elec',     name: 'Electrical',   icon: '⚡', from: 249, eta: 22, hot: true,  desc: 'Wiring, fans, switches' },
  { id: 'clean',    name: 'Deep clean',   icon: '✨', from: 999, eta: 90, hot: false, desc: 'Home, sofa, kitchen' },
  { id: 'paint',    name: 'Painting',     icon: '🎨', from: 1499, eta: 240, hot: false, desc: 'Walls, doors, accents' },
  { id: 'ac',       name: 'AC service',   icon: '❄️', from: 449, eta: 45, hot: true,  desc: 'Repair, gas, install' },
  { id: 'carp',     name: 'Carpentry',    icon: '🔨', from: 349, eta: 60, hot: false, desc: 'Doors, locks, hinges' },
  { id: 'app',      name: 'Appliance',    icon: '📺', from: 299, eta: 40, hot: false, desc: 'TV, fridge, washing' },
  { id: 'pest',     name: 'Pest control', icon: '🪲', from: 799, eta: 75, hot: false, desc: 'Roach, termite, rat' },
  { id: 'beauty',   name: 'Beauty (Home)', icon: '💅', from: 599, eta: 90, hot: false, desc: 'Salon at home' },
  { id: 'massage',  name: 'Massage',      icon: '💆', from: 1499, eta: 60, hot: false, desc: 'Deep tissue, swedish' },
  { id: 'fitness',  name: 'Fitness',      icon: '🏋', from: 799, eta: 60, hot: false, desc: 'Trainer at home' },
  { id: 'tutor',    name: 'Tutoring',     icon: '📚', from: 499, eta: 60, hot: false, desc: 'K-12, all subjects' },
  { id: 'tech',     name: 'Tech support', icon: '💻', from: 399, eta: 45, hot: true,  desc: 'WiFi, laptop, printer' },
  { id: 'move',     name: 'Movers',       icon: '📦', from: 1999, eta: 180, hot: false, desc: 'Pack, move, install' },
  { id: 'driver',   name: 'Driver',       icon: '🚗', from: 449, eta: 30, hot: false, desc: 'Hourly chauffeur' },
];

// Customer top header
const CTopHeader = ({ addr = "Indiranagar, B'lore", onTap }) => (
  <div style={{
    position: 'absolute', top: 56, left: 0, right: 0, zIndex: 20,
    padding: '4px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    pointerEvents: 'none',
  }}>
    <div onClick={onTap} style={{
      pointerEvents: 'auto', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 999,
      background: 'rgba(20,8,40,0.7)', backdropFilter: 'blur(12px)',
      border: `0.5px solid ${Z.border}`,
    }}>
      <I.pin size={13} color={Z.brandLite}/>
      <div>
        <div style={{ fontSize: 9, color: Z.text4, letterSpacing: 0.4 }}>Home · 4 min</div>
        <div style={{ fontSize: 11.5, color: Z.text, fontWeight: 600 }}>{addr}</div>
      </div>
      <I.chevD size={12} color={Z.text3} style={{ marginLeft: 4 }}/>
    </div>
    <div style={{
      pointerEvents: 'auto', cursor: 'pointer', position: 'relative',
      width: 34, height: 34, borderRadius: '50%',
      background: 'rgba(20,8,40,0.7)', backdropFilter: 'blur(12px)',
      border: `0.5px solid ${Z.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: Z.text2,
    }}>
      <I.bell size={16}/>
      <div style={{ position: 'absolute', top: 6, right: 7, width: 7, height: 7, borderRadius: '50%', background: Z.pink, border: `1.5px solid ${Z.bg}` }}/>
    </div>
  </div>
);

// Customer tab bar
const C_TABS = [
  { id: 'home',    label: 'Home',    icon: I.home },
  { id: 'browse',  label: 'Browse',  icon: I.search },
  { id: 'orders',  label: 'Orders',  icon: I.briefcase },
  { id: 'chat',    label: 'Chat',    icon: I.msg },
  { id: 'me',      label: 'Profile', icon: I.user },
];

const CTabBar = ({ active, onChange }) => (
  <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 50,
    padding: '8px 10px 28px', display: 'flex', justifyContent: 'space-around',
    background: 'rgba(10,1,24,0.85)', backdropFilter: 'blur(28px) saturate(180%)',
    borderTop: `0.5px solid ${Z.border}`,
  }}>
    {C_TABS.map(t => {
      const on = active === t.id;
      return (
        <div key={t.id} onClick={() => onChange(t.id)} style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          padding: '6px 0', cursor: 'pointer', position: 'relative',
        }}>
          <div style={{
            color: on ? Z.brandLite : Z.text4, transition: 'all .2s',
            filter: on ? `drop-shadow(0 0 8px ${Z.brand})` : 'none',
          }}>
            <t.icon size={22} stroke={on ? 2.2 : 1.6}/>
          </div>
          <div style={{ fontSize: 9.5, fontWeight: on ? 700 : 500, color: on ? Z.brandLite : Z.text4 }}>{t.label}</div>
          {on && <div style={{ position: 'absolute', top: -8, width: 22, height: 2.5, borderRadius: 999, background: Z.gradient, boxShadow: `0 0 8px ${Z.brand}` }}/>}
        </div>
      );
    })}
  </div>
);

// ─── HOME ────────────────────────────────────────────────────
const CHome = ({ nav, dir }) => {
  const d = D(dir);
  const hot = SERVICES.filter(s => s.hot).slice(0, 4);
  const recent = SERVICES.slice(0, 6);

  return (
    <div style={{ padding: '0 18px 120px', position: 'relative' }}>
      {/* Greeting */}
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 12, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Good evening</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>What needs fixing, Priya?</div>
      </div>

      {/* Hero AI describe-it card */}
      <div onClick={() => nav.go('createTicket', { variant: 'ai' })} style={{
        position: 'relative', overflow: 'hidden', cursor: 'pointer',
        padding: 18, borderRadius: 22, marginBottom: 18,
        background: 'linear-gradient(160deg, rgba(124,58,237,0.32), rgba(236,72,153,0.16))',
        border: `1px solid ${Z.brand}`,
        boxShadow: `0 12px 40px ${Z.brand}33`,
      }}>
        {d.showGrid && (
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.16,
            backgroundImage: `linear-gradient(${Z.brandLite} 1px, transparent 1px), linear-gradient(90deg, ${Z.brandLite} 1px, transparent 1px)`,
            backgroundSize: '24px 24px',
            maskImage: 'radial-gradient(ellipse at 100% 50%, black, transparent 70%)',
            WebkitMaskImage: 'radial-gradient(ellipse at 100% 50%, black, transparent 70%)',
          }}/>
        )}
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <I.spark size={14} color={Z.brandLite}/>
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.8, color: Z.brandLite, textTransform: 'uppercase' }}>AI assist</span>
          </div>
          <div style={{ fontSize: 19, fontWeight: 700, color: Z.text, letterSpacing: -0.4, lineHeight: 1.25, marginBottom: 14 }}>
            Describe the problem.<br/>We'll find the right pro.
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
            background: 'rgba(0,0,0,0.32)', borderRadius: 14,
          }}>
            <I.spark size={16} color={Z.brandLite}/>
            <div style={{ flex: 1, fontSize: 13, color: Z.text3 }}>Try "sink is leaking under counter…"</div>
            <div style={{
              width: 30, height: 30, borderRadius: '50%',
              background: Z.gradient, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', boxShadow: `0 0 14px ${Z.brand}`,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zM19 11a7 7 0 0 1-14 0M12 18v3M9 21h6" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
            </div>
          </div>
        </div>
      </div>

      {/* Hot near you */}
      <SectionH action="See all">Available near you</SectionH>
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginBottom: 22, paddingBottom: 4, marginLeft: -4, paddingLeft: 4 }} className="scroll-x">
        {hot.map(s => (
          <div key={s.id} onClick={() => nav.go('serviceDetail', { svc: s })} style={{
            minWidth: 138, padding: 14, borderRadius: 16, cursor: 'pointer',
            background: d.panel, border: `0.5px solid ${d.border}`, position: 'relative',
          }}>
            <div style={{ fontSize: 28, marginBottom: 10 }}>{s.icon}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: Z.text }}>{s.name}</div>
            <div style={{ fontSize: 10.5, color: Z.text3, marginTop: 2 }}>{s.desc}</div>
            <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ ...mono, fontSize: 12, fontWeight: 600, color: Z.text }}>₹{s.from}+</div>
              <div style={{ fontSize: 9.5, color: Z.success, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
                <div style={{ width: 5, height: 5, borderRadius: '50%', background: Z.success, boxShadow: `0 0 6px ${Z.success}` }}/>
                ~{s.eta}m
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Active ticket teaser */}
      <div onClick={() => nav.go('tracking', { stage: 'matched' })} style={{
        padding: 14, borderRadius: 18, marginBottom: 22, cursor: 'pointer',
        background: 'linear-gradient(160deg, rgba(6,182,212,0.18), rgba(124,58,237,0.06))',
        border: `1px solid ${Z.cyan}`, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: 14, right: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background: Z.cyan, boxShadow: `0 0 8px ${Z.cyan}`, animation: 'blink 1.4s infinite' }}/>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: '#67E8F9', letterSpacing: 1.4 }}>LIVE</span>
        </div>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: '#67E8F9', textTransform: 'uppercase', marginBottom: 6 }}>Worker en route</div>
        <div style={{ fontSize: 15, fontWeight: 700, color: Z.text, marginBottom: 8 }}>Vinay K. · Plumbing</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
          <div style={{ ...mono, fontSize: 22, fontWeight: 600, color: Z.text, letterSpacing: -0.5 }}>7 min</div>
          <div style={{ fontSize: 11, color: Z.text3 }}>· 1.8 km away</div>
        </div>
        <div style={{ height: 4, borderRadius: 999, background: 'rgba(0,0,0,0.3)', overflow: 'hidden', marginBottom: 10 }}>
          <div style={{ width: '60%', height: '100%', background: Z.gradient, boxShadow: `0 0 8px ${Z.cyan}` }}/>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: Z.text3 }}>
          <span>Track live →</span>
          <span style={{ ...mono, color: Z.text2 }}>#J-48217</span>
        </div>
      </div>

      {/* Trust strip */}
      <Glass strong style={{ padding: 14, marginBottom: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(16,185,129,0.15)', border: `0.5px solid rgba(16,185,129,0.34)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: Z.success }}>
            <I.shield size={18}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: Z.text }}>You're protected on every job</div>
            <div style={{ fontSize: 10.5, color: Z.text3, marginTop: 2 }}>OTP, transparent pricing, escrow refund.</div>
          </div>
          <I.chevR size={16} color={Z.text3}/>
        </div>
      </Glass>

      {/* All categories */}
      <SectionH action="See all 15">Browse services</SectionH>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {recent.map(s => (
          <div key={s.id} onClick={() => nav.go('serviceDetail', { svc: s })} style={{
            padding: 14, borderRadius: 14, textAlign: 'center', cursor: 'pointer',
            background: d.panel, border: `0.5px solid ${d.border}`,
          }}>
            <div style={{ fontSize: 24, marginBottom: 6 }}>{s.icon}</div>
            <div style={{ fontSize: 11.5, fontWeight: 600, color: Z.text }}>{s.name}</div>
            <div style={{ ...mono, fontSize: 10, color: Z.text3, marginTop: 2 }}>₹{s.from}+</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── BROWSE (all 15 services) ────────────────────────────────
const CBrowse = ({ nav, dir }) => {
  const d = D(dir);
  const [q, setQ] = React.useState('');
  const filtered = SERVICES.filter(s => !q || s.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{ padding: '0 18px 120px' }}>
      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 11, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Marketplace</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>Browse services</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 14, background: d.panel, border: `0.5px solid ${d.border}`, marginBottom: 18 }}>
        <I.search size={16} color={Z.text3}/>
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search services, problems…" style={{
          flex: 1, background: 'transparent', border: 'none', outline: 'none',
          color: Z.text, fontSize: 13.5, fontFamily: Z.font,
        }}/>
        <I.filter size={16} color={Z.text3}/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {filtered.map(s => (
          <div key={s.id} onClick={() => nav.go('serviceDetail', { svc: s })} style={{
            padding: 14, borderRadius: 16, cursor: 'pointer', position: 'relative',
            background: d.panel, border: `0.5px solid ${d.border}`,
          }}>
            {s.hot && <div style={{ position: 'absolute', top: 10, right: 10, width: 6, height: 6, borderRadius: '50%', background: Z.success, boxShadow: `0 0 8px ${Z.success}` }}/>}
            <div style={{ fontSize: 28, marginBottom: 10 }}>{s.icon}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: Z.text }}>{s.name}</div>
            <div style={{ fontSize: 10.5, color: Z.text3, marginTop: 2, lineHeight: 1.4 }}>{s.desc}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
              <span style={{ ...mono, fontSize: 12, fontWeight: 600, color: Z.text }}>₹{s.from}+</span>
              <span style={{ fontSize: 10, color: s.hot ? Z.success : Z.text3 }}>~{s.eta}m</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── SERVICE DETAIL (pick variant of create) ─────────────────
const CServiceDetail = ({ nav, svc, dir }) => {
  const d = D(dir);
  const s = svc || SERVICES[0];
  return (
    <div style={{ padding: '0 0 120px' }}>
      <div style={{
        height: 200, position: 'relative', overflow: 'hidden',
        background: `linear-gradient(160deg, rgba(124,58,237,0.32), rgba(236,72,153,0.18)), ${Z.surface}`,
      }}>
        {d.showGrid && (
          <div style={{ position: 'absolute', inset: 0, opacity: 0.18,
            backgroundImage: `linear-gradient(${Z.brandLite} 1px, transparent 1px), linear-gradient(90deg, ${Z.brandLite} 1px, transparent 1px)`,
            backgroundSize: '32px 32px',
          }}/>
        )}
        <div onClick={() => nav.back()} style={{
          position: 'absolute', top: 16, left: 16, width: 38, height: 38, borderRadius: '50%',
          background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: Z.text, cursor: 'pointer',
          border: `0.5px solid ${Z.border}`, zIndex: 5,
        }}><I.chevL size={20}/></div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 80 }}>{s.icon}</div>
      </div>

      <div style={{ padding: '20px 18px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
          <div>
            <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.5 }}>{s.name}</div>
            <div style={{ fontSize: 12, color: Z.text3, marginTop: 4 }}>{s.desc}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: Z.gold, fontWeight: 600 }}>
            ★ 4.92 <span style={{ color: Z.text3, fontWeight: 500 }}>(847)</span>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginTop: 14, marginBottom: 20 }}>
          <Pill tone="success">⚡ {s.eta}m avg</Pill>
          <Pill tone="brand">From ₹{s.from}</Pill>
          <Pill tone="neutral">23 pros nearby</Pill>
        </div>

        {/* Trust strip */}
        <div style={{ padding: 14, borderRadius: 14, background: 'rgba(16,185,129,0.06)', border: `0.5px solid rgba(16,185,129,0.2)`, marginBottom: 24 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.success, textTransform: 'uppercase', marginBottom: 8 }}>Every {s.name.toLowerCase()} job</div>
          {['Aadhaar-verified pro', 'Server-billed (no overcharge)', 'OTP-protected entry', 'Refund if pro no-shows'].map(t => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, fontSize: 11.5, color: Z.text2 }}>
              <I.check size={12} color={Z.success} stroke={3}/> {t}
            </div>
          ))}
        </div>

        {/* Pick input variant */}
        <div style={{ fontSize: 13, fontWeight: 700, color: Z.text, marginBottom: 10 }}>How do you want to describe it?</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
          {[
            { id: 'ai', icon: '✨', l: 'Photo + voice + describe', s: 'AI parses your description into a ticket', tag: 'Fastest' },
            { id: 'guided', icon: '📋', l: 'Step-by-step form', s: 'Pick options, pick a time, done', tag: 'Most precise' },
            { id: 'chat', icon: '💬', l: 'Chat with AI', s: 'Conversation, gets clarifying details', tag: 'Most flexible' },
          ].map(v => (
            <div key={v.id} onClick={() => nav.go('createTicket', { variant: v.id, svc: s })} style={{
              padding: 14, borderRadius: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
              background: d.panel, border: `0.5px solid ${d.border}`,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>{v.icon}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: Z.text }}>{v.l}</div>
                  <Pill tone="brand" style={{ fontSize: 9, padding: '2px 7px' }}>{v.tag}</Pill>
                </div>
                <div style={{ fontSize: 11, color: Z.text3 }}>{v.s}</div>
              </div>
              <I.chevR size={18} color={Z.text3}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { D, SERVICES, CHome, CBrowse, CServiceDetail, CTopHeader, CTabBar, C_TABS });