// HomeHelp · mid-fi design system
// Tokens + primitives shared across all screens.

// ─────────────────── tokens ───────────────────
const HH = {
  // brand
  accent:      '#D97757',
  accentDark:  '#B85F44',
  accentSoft:  '#FBE7DC',
  trust:       '#1F6F4A',
  trustSoft:   '#E5F1EB',

  // neutrals (warm)
  bg:          '#F8F5EF',
  surface:     '#FFFFFF',
  surfaceAlt:  '#F2EEE5',
  hairline:    '#E5DFD2',
  hairline2:   '#EFEBE0',

  // ink
  ink:         '#1A1612',
  ink2:        '#3D3631',
  muted:       '#857F73',
  faint:       '#B5AFA1',

  // semantic
  danger:      '#B23A2D',
  warning:     '#C7822A',

  // type
  fontSans:    '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
  fontMono:    '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace',

  // radii
  r:  { sm: 6, md: 10, lg: 14, xl: 20, pill: 999 },

  // shadow
  shadow1: '0 1px 2px rgba(20,15,8,0.05)',
  shadow2: '0 4px 16px rgba(20,15,8,0.07), 0 1px 2px rgba(20,15,8,0.04)',
  shadow3: '0 10px 30px rgba(20,15,8,0.10), 0 2px 6px rgba(20,15,8,0.05)',
};

// ─────────────── deterministic gradient avatars ───────────────
const AVATAR_PALETTES = [
  ['#F4C28C', '#C47A4E'], // warm sand → terracotta
  ['#A8C5A4', '#5C8A70'], // sage → forest
  ['#B7B7E0', '#6B6BB0'], // periwinkle → indigo
  ['#F2A0A0', '#B85565'], // rose → mauve
  ['#E8D78A', '#A88A35'], // sand → ochre
  ['#9EC8D8', '#3F7390'], // sky → deep
  ['#D4B8E8', '#7C5AA0'], // lilac → violet
  ['#EBA98C', '#9C543A'], // peach → rust
];

function hashIdx(seed, mod) {
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  return h % mod;
}

function HHAvatar({ name = '?', size = 40, verified = false, ring = false, style = {} }) {
  const [c1, c2] = AVATAR_PALETTES[hashIdx(name, AVATAR_PALETTES.length)];
  const initials = name.split(/\s+/).map(s => s[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0, ...style }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'rgba(255,255,255,0.95)', fontWeight: 600, fontSize: size * 0.4,
        fontFamily: HH.fontSans, letterSpacing: -0.3,
        boxShadow: ring ? '0 0 0 2.5px #fff, 0 0 0 4px ' + HH.accent : 'none',
      }}>{initials}</div>
      {verified && (
        <div title="ID verified" style={{
          position: 'absolute', right: -1, bottom: -1,
          width: Math.max(14, size * 0.34), height: Math.max(14, size * 0.34),
          borderRadius: '50%',
          background: HH.trust, color: '#fff',
          fontSize: Math.max(8, size * 0.18), fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: '2px solid #fff',
        }}>✓</div>
      )}
    </div>
  );
}

// ─────────────── photo-like placeholder (used for hero/job shots) ───────────────
function HHPhoto({ seed = 'job', w = '100%', h = 160, r = 12, label, style = {} }) {
  // Deterministic gradient pair from seed
  const palettes = [
    ['#3A4A3F', '#7C8D6A'], // mossy
    ['#8B6849', '#D4A574'], // wood / brown
    ['#3F5168', '#8FA7BE'], // slate / sky
    ['#5C4A3E', '#B89678'], // earth
    ['#6E5839', '#C2A36B'], // tobacco
    ['#3F4A52', '#A8B8C2'], // steel
  ];
  const [c1, c2] = palettes[hashIdx(seed, palettes.length)];
  return (
    <div style={{
      width: w, height: h, borderRadius: r,
      background: `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`,
      position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      {/* subtle vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 60%)',
      }} />
      {/* film grain illusion */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.18,
        backgroundImage: `repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px)`,
      }} />
      {label && (
        <div style={{
          position: 'absolute', left: 10, bottom: 10,
          fontFamily: HH.fontMono, fontSize: 10, color: 'rgba(255,255,255,0.75)',
          letterSpacing: 0.6, textTransform: 'uppercase',
          padding: '3px 7px', background: 'rgba(0,0,0,0.25)', borderRadius: 4,
          backdropFilter: 'blur(4px)',
        }}>{label}</div>
      )}
    </div>
  );
}

// ─────────────── phone frame ───────────────
function HHPhone({ children, w = 360, h = 740, label, dark = false }) {
  return (
    <div style={{
      width: w, height: h,
      background: dark ? '#0F0D0A' : HH.surface,
      borderRadius: 44,
      border: `1.5px solid ${HH.ink}`,
      boxShadow: HH.shadow3,
      position: 'relative',
      overflow: 'hidden',
      fontFamily: HH.fontSans,
      color: HH.ink,
    }}>
      {/* status bar */}
      <div style={{
        height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 28px', fontSize: 13, fontWeight: 600, color: dark ? '#fff' : HH.ink,
        position: 'relative', flexShrink: 0,
      }}>
        <span>9:41</span>
        <div style={{
          position: 'absolute', left: '50%', top: 9, transform: 'translateX(-50%)',
          width: 110, height: 22, background: HH.ink, borderRadius: 14,
        }} />
        <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
          {/* signal */}
          <span style={{ display: 'flex', gap: 1.5, alignItems: 'flex-end' }}>
            <span style={{ width: 3, height: 4, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 6, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 8, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
            <span style={{ width: 3, height: 10, background: dark ? '#fff' : HH.ink, borderRadius: 0.5 }} />
          </span>
          {/* battery */}
          <span style={{ width: 22, height: 11, border: `1px solid ${dark ? '#fff' : HH.ink}`, borderRadius: 3, padding: 1, display: 'flex' }}>
            <span style={{ flex: 1, background: dark ? '#fff' : HH.ink, borderRadius: 1.5 }} />
          </span>
        </span>
      </div>
      {/* content area */}
      <div style={{ position: 'absolute', inset: '36px 0 22px 0', overflow: 'hidden', background: dark ? '#0F0D0A' : HH.bg }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 8, transform: 'translateX(-50%)',
        width: 134, height: 5, background: dark ? '#fff' : HH.ink, borderRadius: 3,
        opacity: 0.9,
      }} />
    </div>
  );
}

// ─────────────── atoms ───────────────
function HHBtn({ children, variant = 'primary', size = 'md', full = true, leftIcon, style = {}, onClick }) {
  const sizes = {
    sm: { h: 36, fs: 13, px: 14, r: 18 },
    md: { h: 48, fs: 15, px: 18, r: 24 },
    lg: { h: 56, fs: 16, px: 22, r: 28 },
  };
  const s = sizes[size];
  const variants = {
    primary: { bg: HH.accent, fg: '#fff', bd: 'transparent' },
    ink:     { bg: HH.ink, fg: '#fff', bd: 'transparent' },
    ghost:   { bg: 'transparent', fg: HH.ink, bd: HH.hairline },
    subtle:  { bg: HH.surfaceAlt, fg: HH.ink, bd: 'transparent' },
  };
  const v = variants[variant];
  return (
    <button onClick={onClick} style={{
      height: s.h, minHeight: s.h, fontSize: s.fs, fontWeight: 600,
      padding: full ? 0 : `0 ${s.px}px`, width: full ? '100%' : 'auto',
      borderRadius: s.r, border: `1px solid ${v.bd}`,
      background: v.bg, color: v.fg, cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: HH.fontSans, letterSpacing: -0.1,
      ...style,
    }}>
      {leftIcon}
      {children}
    </button>
  );
}

function HHPill({ children, variant = 'default', size = 'md', icon, style = {} }) {
  const sizes = {
    sm: { h: 22, fs: 11, px: 8 },
    md: { h: 28, fs: 12, px: 11 },
  };
  const s = sizes[size];
  const variants = {
    default:  { bg: HH.surfaceAlt, fg: HH.ink2, bd: 'transparent' },
    active:   { bg: HH.ink, fg: '#fff', bd: 'transparent' },
    accent:   { bg: HH.accentSoft, fg: HH.accentDark, bd: 'transparent' },
    trust:    { bg: HH.trustSoft, fg: HH.trust, bd: 'transparent' },
    outline:  { bg: 'transparent', fg: HH.ink, bd: HH.hairline },
  };
  const v = variants[variant];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      height: s.h, padding: `0 ${s.px}px`, borderRadius: HH.r.pill,
      fontSize: s.fs, fontWeight: 500, letterSpacing: -0.05,
      background: v.bg, color: v.fg, border: `1px solid ${v.bd}`,
      fontFamily: HH.fontSans, whiteSpace: 'nowrap',
      ...style,
    }}>
      {icon}
      {children}
    </span>
  );
}

function HHCard({ children, style = {} }) {
  return (
    <div style={{
      background: HH.surface, borderRadius: HH.r.lg,
      border: `1px solid ${HH.hairline2}`, boxShadow: HH.shadow1,
      ...style,
    }}>{children}</div>
  );
}

// ─────────────── top bar ───────────────
function HHTopBar({ title, left = 'back', right, transparent = false }) {
  return (
    <div style={{
      padding: '14px 20px', position: 'relative',
      background: transparent ? 'transparent' : HH.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      minHeight: 48,
    }}>
      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center' }}>
        {left === 'back' && <BackIcon />}
        {left === 'close' && <CloseIcon />}
        {left === 'menu' && <MenuIcon />}
        {typeof left === 'object' && left}
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{title}</div>
      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', fontSize: 13, color: HH.muted }}>
        {right}
      </div>
    </div>
  );
}

// ─────────────── tiny inline icons ───────────────
const Ico = ({ d, size = 20, stroke = 'currentColor', sw = 1.6, fill = 'none', style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
    <path d={d} />
  </svg>
);
const BackIcon  = () => <Ico d="M15 6l-6 6 6 6" />;
const CloseIcon = () => <Ico d="M6 6l12 12M18 6L6 18" />;
const MenuIcon  = () => <Ico d="M4 7h16M4 12h16M4 17h16" />;
const SearchIcon= () => <Ico d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM20 20l-4.3-4.3" />;
const PlusIcon  = () => <Ico d="M12 5v14M5 12h14" />;
const ChevIcon  = () => <Ico d="M9 6l6 6-6 6" />;
const MsgIcon   = () => <Ico d="M21 12a8 8 0 0 1-11.8 7L4 21l1.9-5.1A8 8 0 1 1 21 12z" />;
const PhoneIcon = () => <Ico d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 13 13 0 0 0 .7 2.8 2 2 0 0 1-.4 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.4a2 2 0 0 1 2.1-.5 13 13 0 0 0 2.8.7 2 2 0 0 1 1.7 2z" />;
const CamIcon   = () => <Ico d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />;
const MicIcon   = () => <Ico d="M12 1a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z M19 10v1a7 7 0 0 1-14 0v-1 M12 18v4 M8 22h8" />;
const PinIcon   = () => <Ico d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />;
const ClockIcon = () => <Ico d="M12 6v6l4 2 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" />;
const CheckIcon = () => <Ico d="M20 6L9 17l-5-5" />;
const StarIcon  = ({ fill }) => <Ico d="M12 2l3.1 6.3 7 1-5 4.9 1.2 6.8L12 17.8 5.7 21l1.2-6.8-5-4.9 7-1z" fill={fill || 'none'} />;
const BoltIcon  = () => <Ico d="M13 2L3 14h7l-1 8 10-12h-7z" />;
const SettIcon  = () => <Ico d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .67.39 1.27 1 1.51H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />;
const HomeIcon  = () => <Ico d="M3 12L12 3l9 9 M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10" />;
const InboxIcon = () => <Ico d="M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />;
const UserIcon  = () => <Ico d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />;
const BellIcon  = () => <Ico d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.7 21a2 2 0 0 1-3.4 0" />;
const ShareIcon = () => <Ico d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8 M16 6l-4-4-4 4 M12 2v13" />;
const CardIcon  = () => <Ico d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z M1 10h22" />;
const HeartIcon = () => <Ico d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />;

// ─────────────── bottom tab bar ───────────────
function HHTabBar({ active = 0, helper = false }) {
  const tabs = helper
    ? [
        { i: <BoltIcon/>, l: 'Jobs' },
        { i: <ClockIcon/>, l: 'Schedule' },
        { i: <CardIcon/>, l: 'Earnings' },
        { i: <UserIcon/>, l: 'Profile' },
      ]
    : [
        { i: <HomeIcon/>, l: 'Home' },
        { i: <PlusIcon/>, l: 'New' },
        { i: <BoltIcon/>, l: 'Requests' },
        { i: <InboxIcon/>, l: 'Inbox' },
        { i: <UserIcon/>, l: 'Me' },
      ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      height: 64, borderTop: `1px solid ${HH.hairline}`,
      background: HH.surface,
      display: 'grid', gridTemplateColumns: `repeat(${tabs.length}, 1fr)`,
      paddingBottom: 4,
    }}>
      {tabs.map((t, i) => (
        <div key={i} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          gap: 3, color: i === active ? HH.ink : HH.faint, fontSize: 10, fontWeight: i === active ? 600 : 500,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {React.cloneElement(t.i, { size: 22, sw: i === active ? 2 : 1.6 })}
          </div>
          {t.l}
        </div>
      ))}
    </div>
  );
}

// ─────────────── stylized map ───────────────
// `style`: minimal | streets | satellite
function HHMap({ h = 220, pins = 1, you = true, label, style = 'streets', children }) {
  const styles = {
    minimal: {
      bg: '#EFEAE0',
      roads: '#F8F5EF',
      lines: 'rgba(20,15,8,0.05)',
      blocks: 'rgba(20,15,8,0.03)',
    },
    streets: {
      bg: '#E8E1D2',
      roads: '#FFFCF5',
      lines: 'rgba(20,15,8,0.08)',
      blocks: 'rgba(20,15,8,0.06)',
      parks: '#D4DEC8',
      water: '#C7D8E0',
    },
    satellite: {
      bg: '#2A2A22',
      roads: 'rgba(255,240,200,0.35)',
      lines: 'rgba(255,255,255,0.05)',
      blocks: 'rgba(255,255,255,0.04)',
      parks: '#3A4A35',
      water: '#2B3F50',
    },
  };
  const s = styles[style] || styles.streets;
  const isDark = style === 'satellite';

  return (
    <div style={{
      position: 'relative', height: h, overflow: 'hidden',
      background: s.bg,
    }}>
      {/* park */}
      {s.parks && (
        <div style={{ position: 'absolute', left: '-10%', top: '5%', width: '40%', height: '30%', background: s.parks, borderRadius: '50% 30% 40% 50%', opacity: 0.85 }} />
      )}
      {/* water */}
      {s.water && (
        <div style={{ position: 'absolute', right: '-15%', bottom: '-10%', width: '50%', height: '50%', background: s.water, borderRadius: '40% 50% 60% 30%', opacity: 0.9 }} />
      )}
      {/* satellite noise */}
      {isDark && (
        <div style={{ position: 'absolute', inset: 0, opacity: 0.35,
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: '6px 6px' }} />
      )}
      {/* horiz road */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '48%', height: 16, background: s.roads, boxShadow: `0 1px ${s.lines}, 0 -1px ${s.lines}` }} />
      {/* vert road */}
      <div style={{ position: 'absolute', left: '42%', top: 0, bottom: 0, width: 14, background: s.roads, boxShadow: `1px 0 ${s.lines}, -1px 0 ${s.lines}` }} />
      {/* secondary roads */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '22%', height: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: 0, right: 0, top: '74%', height: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: '18%', top: 0, bottom: 0, width: 4, background: s.roads, opacity: 0.6 }} />
      <div style={{ position: 'absolute', left: '72%', top: 0, bottom: 0, width: 4, background: s.roads, opacity: 0.6 }} />

      {/* you */}
      {you && (
        <div style={{ position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%,-50%)' }}>
          <div style={{
            width: 16, height: 16, borderRadius: 8,
            background: HH.accent, border: '3px solid #fff',
            boxShadow: `0 0 0 10px ${HH.accent}26`,
          }} />
        </div>
      )}

      {/* pins */}
      {Array.from({ length: pins }).map((_, i) => {
        const positions = [
          { left: '22%', top: '28%' }, { left: '68%', top: '24%' },
          { left: '76%', top: '60%' }, { left: '24%', top: '70%' },
          { left: '58%', top: '78%' }, { left: '40%', top: '14%' },
        ];
        const p = positions[i % positions.length];
        return (
          <div key={i} style={{ position: 'absolute', ...p, transform: 'translate(-50%, -100%)' }}>
            <div style={{
              width: 28, height: 36, position: 'relative',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 14,
                background: HH.ink, color: '#fff',
                fontSize: 11, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '2.5px solid #fff', boxShadow: '0 3px 8px rgba(0,0,0,0.25)',
              }}>{i + 1}</div>
              <div style={{
                position: 'absolute', left: '50%', bottom: 1, transform: 'translateX(-50%) rotate(45deg)',
                width: 8, height: 8, background: HH.ink,
                borderRight: '2.5px solid #fff', borderBottom: '2.5px solid #fff',
              }} />
            </div>
          </div>
        );
      })}

      {label && (
        <div style={{
          position: 'absolute', left: 12, top: 12,
          background: isDark ? 'rgba(20,15,8,0.85)' : HH.surface,
          color: isDark ? '#fff' : HH.ink2,
          border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : HH.hairline}`,
          borderRadius: 8, padding: '6px 10px', fontSize: 11,
          fontFamily: HH.fontMono, letterSpacing: 0.2,
          boxShadow: HH.shadow1,
        }}>{label}</div>
      )}

      {children}
    </div>
  );
}

// ─────────────── bottom sheet ───────────────
function HHSheet({ children, bottom = 64, style = {} }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom,
      background: HH.surface,
      borderTopLeftRadius: 24, borderTopRightRadius: 24,
      boxShadow: '0 -10px 30px rgba(20,15,8,0.10)',
      paddingTop: 10, paddingBottom: 16,
      ...style,
    }}>
      <div style={{ width: 40, height: 4, borderRadius: 2, background: HH.hairline, margin: '0 auto 12px' }} />
      {children}
    </div>
  );
}

// ─────────────── section label ───────────────
function HHLabel({ children, action, style = {} }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 20px 10px', ...style,
    }}>
      <div style={{
        fontSize: 11, fontFamily: HH.fontMono, fontWeight: 500,
        color: HH.muted, letterSpacing: 0.8, textTransform: 'uppercase',
      }}>{children}</div>
      {action && <div style={{ fontSize: 12, color: HH.accentDark, fontWeight: 500 }}>{action}</div>}
    </div>
  );
}

// ─────────────── list row ───────────────
function HHRow({ left, title, sub, right, onClick, divider = true, style = {} }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 20px', background: HH.surface,
      borderBottom: divider ? `1px solid ${HH.hairline2}` : 'none',
      cursor: onClick ? 'pointer' : 'default', ...style,
    }}>
      {left}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2, lineHeight: 1.3 }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: HH.muted, marginTop: 2, lineHeight: 1.4 }}>{sub}</div>}
      </div>
      {right && <div style={{ fontSize: 13, color: HH.ink2 }}>{right}</div>}
    </div>
  );
}

// ─────────────── toggle (segmented) ───────────────
function HHSeg({ options, active, onChange }) {
  return (
    <div style={{
      display: 'inline-flex', background: HH.surfaceAlt, borderRadius: HH.r.pill, padding: 3,
    }}>
      {options.map((opt, i) => (
        <div key={i} onClick={() => onChange && onChange(opt)} style={{
          padding: '6px 14px', borderRadius: HH.r.pill, fontSize: 12, fontWeight: 600,
          background: opt === active ? HH.surface : 'transparent',
          color: opt === active ? HH.ink : HH.muted,
          boxShadow: opt === active ? HH.shadow1 : 'none',
          cursor: 'pointer', transition: 'all 0.15s',
        }}>{opt}</div>
      ))}
    </div>
  );
}

// ─────────────── stars row ───────────────
function HHStars({ rating = 5, size = 13, color = HH.warning }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 1, color }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <StarIcon key={i} fill={i < Math.floor(rating) ? color : 'none'} />
      ))}
    </span>
  );
}

// ─────────────── copy tone dictionary ───────────────
// All user-facing copy that varies by tone goes here. Pass tone to copy().
const COPY = {
  // primary CTA on home / new request
  cta_new_request:     { neutral: 'New request',       friendly: 'Get help',           playful: "What's up?" },
  cta_find_helper:     { neutral: 'Find a helper',     friendly: 'Match me with a helper', playful: 'Send me a hero' },
  cta_book_now:        { neutral: 'Book now',          friendly: "Let's go",            playful: 'Make it happen' },
  cta_open_bids:       { neutral: 'Open to all helpers', friendly: 'Cast a wider net',  playful: 'Let everyone try' },
  // section heads
  smart_picks_title:   { neutral: 'Your top matches',  friendly: 'Three great helpers for this',   playful: 'Three good eggs we picked' },
  smart_picks_sub:     { neutral: 'Ranked by fit, distance and availability.',
                          friendly: "Closest fit first — these folks have done this kind of job before.",
                          playful: "Vetted, nearby, and probably already grabbing their toolbelt." },
  home_greet:          { neutral: 'Welcome back',      friendly: 'Hey there',           playful: 'Yo!' },
  home_prompt:         { neutral: 'What do you need set up?', friendly: 'What can we help with today?', playful: "What's on the to-do?" },
  complete_title:      { neutral: 'Job complete',      friendly: 'All done!',           playful: 'Nailed it.' },
  complete_thanks:     { neutral: 'Thanks for using Task Near.', friendly: 'Hope that went well — thanks!', playful: 'High five from us 🙌' },
  // empty
  empty_requests:      { neutral: 'No requests yet',   friendly: 'Nothing here yet',    playful: 'Crickets…' },
  empty_requests_sub:  { neutral: 'Your jobs will appear here once you post one.',
                          friendly: 'Post your first request and we’ll match you with someone great.',
                          playful: 'Post something. Anything. Try us.' },
};
function copy(key, tone = 'neutral') {
  const e = COPY[key];
  return (e && (e[tone] || e.neutral)) || key;
}

// ─────────────── export ───────────────
Object.assign(window, {
  HH, HHPhone, HHAvatar, HHPhoto, HHBtn, HHPill, HHCard,
  HHTopBar, HHTabBar, HHMap, HHSheet, HHLabel, HHRow, HHSeg, HHStars,
  BackIcon, CloseIcon, MenuIcon, SearchIcon, PlusIcon, ChevIcon,
  MsgIcon, PhoneIcon, CamIcon, MicIcon, PinIcon, ClockIcon, CheckIcon,
  StarIcon, BoltIcon, SettIcon, HomeIcon, InboxIcon, UserIcon, BellIcon,
  ShareIcon, CardIcon, HeartIcon, Ico,
  COPY, copy,
});