/* global React, ReactDOM */
const { useState, useEffect, useRef, createContext, useContext } = React;

// ─────────────────────────────────────────────────────────────────────────
// Canify design tokens
// ─────────────────────────────────────────────────────────────────────────
const C = {
  bg: '#E9EAEF',
  navy: '#242B5A',
  navySoft: '#50557B',
  navyMuted: '#9A9DB3',
  navyLine: '#BBBDCC',
  coral: '#E66A5B',
  coralDeep: '#C45144',
  coralBlood: '#82170F',
  cream: '#FFFDBF',
  creamSoft: '#FFFFF7',
  sky: '#E4F0FB',
  skyDeep: '#BDDEF2',
  white: '#FFFFFF',
  ink: '#1B1B26',
  gray: '#57575C',
};
const SHADOW = '0 4px 16px rgba(187,189,204,0.45)';
const SHADOW_LG = '0 12px 28px rgba(36,43,90,0.18)';

// ─────────────────────────────────────────────────────────────────────────
// Routing
// ─────────────────────────────────────────────────────────────────────────
const Nav = createContext(null);
const useNav = () => useContext(Nav);

function NavProvider({ children }) {
  const [stack, setStack] = useState(['splash']);
  const route = stack[stack.length - 1];
  const push = (r) => setStack((s) => [...s, r]);
  const replace = (r) => setStack((s) => [...s.slice(0, -1), r]);
  const back = () => setStack((s) => s.length > 1 ? s.slice(0, -1) : s);
  const reset = (r) => setStack([r]);
  return <Nav.Provider value={{ route, push, replace, back, reset }}>{children}</Nav.Provider>;
}

// Responsive: Vollbild auf Mobile, Phone-Mockup auf Desktop
function useIsMobile() {
  const query = '(max-width: 600px)';
  const [isMobile, setIsMobile] = useState(() =>
    typeof window !== 'undefined' && window.matchMedia(query).matches
  );
  useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return isMobile;
}

// ─────────────────────────────────────────────────────────────────────────
// Icon set
// ─────────────────────────────────────────────────────────────────────────
function Icon({ name, size = 24, color = 'currentColor', fill = false }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: fill ? color : 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow_back': return <svg {...p}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>;
    case 'arrow_forward': return <svg {...p}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case 'arrow_outward': return <svg {...p}><path d="M7 17 17 7M8 7h9v9"/></svg>;
    case 'add': return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'add_circle': return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>;
    case 'check': return <svg {...p}><path d="M5 12.5 10 17 19 7"/></svg>;
    case 'check_circle': return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></svg>;
    case 'close': return <svg {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case 'cancel': return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>;
    case 'search': return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'filter': return <svg {...p}><path d="M4 5h16l-6 8v6l-4-2v-4L4 5z"/></svg>;
    case 'sparkle': return <svg {...p} fill={color} stroke="none"><path d="M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6L12 2zM19 14l.9 2.5L22 17l-2.1.6L19 20l-.9-2.4L16 17l2.1-.5L19 14zM6 16l.7 2.1L9 19l-2.3.6L6 22l-.7-2.4L3 19l2.3-.6L6 16z"/></svg>;
    case 'home': return <svg {...p}><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7H10v7H5a1 1 0 0 1-1-1v-9z"/></svg>;
    case 'folder': return <svg {...p}><path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z"/></svg>;
    case 'palette': return <svg {...p}><path d="M12 3a9 9 0 0 0 0 18c1.5 0 2-1 2-2s-.5-1.5-.5-2.5.7-1.5 1.5-1.5H18a3 3 0 0 0 3-3 9 9 0 0 0-9-9z"/><circle cx="7.5" cy="11" r="1" fill={color} stroke="none"/><circle cx="9.5" cy="7" r="1" fill={color} stroke="none"/><circle cx="14.5" cy="7" r="1" fill={color} stroke="none"/><circle cx="17" cy="11" r="1" fill={color} stroke="none"/></svg>;
    case 'newspaper': return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h6M7 13h6M7 17h6M16 9h2M16 13h2M16 17h2"/></svg>;
    case 'spray': return <svg {...p}><rect x="9" y="9" width="6" height="11" rx="1.2"/><path d="M11 9V6h2v3M9 6h6M12 3h.01M15 3h.01M9 3h.01M12 1h.01M15 1.5h.01M9 1.5h.01"/></svg>;
    case 'heart': return <svg {...p} fill={fill?color:'none'}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg>;
    case 'location': return <svg {...p}><path d="M12 22s7-6 7-12a7 7 0 0 0-14 0c0 6 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case 'calendar': return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>;
    case 'pageless': return <svg {...p}><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M4 11h16"/></svg>;
    case 'edit': return <svg {...p}><path d="M4 20h4L20 8l-4-4L4 16v4z"/></svg>;
    case 'camera': return <svg {...p}><rect x="3" y="7" width="18" height="13" rx="2"/><circle cx="12" cy="13.5" r="3.5"/><path d="M9 7l1.5-2h3L15 7"/></svg>;
    case 'photos': return <svg {...p}><rect x="6" y="6" width="14" height="14" rx="2"/><path d="M3 17V5a1 1 0 0 1 1-1h12"/></svg>;
    case 'menu_view': return <svg {...p}><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/></svg>;
    case 'list': return <svg {...p}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case 'visibility': return <svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'visibility_off': return <svg {...p}><path d="M3 3l18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.9 5.1A10 10 0 0 1 22 12s-1.4 2.7-4 4.5M6.5 6.5C3.6 8.4 2 12 2 12s3.5 7 10 7c1.6 0 3.1-.4 4.4-1"/></svg>;
    case 'chevron_right': return <svg {...p}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron_down': return <svg {...p}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chevron_up': return <svg {...p}><path d="M6 15l6-6 6 6"/></svg>;
    case 'share': return <svg {...p}><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 11l8-4M8 13l8 4"/></svg>;
    case 'notifications': return <svg {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>;
    case 'profile': return <svg {...p}><circle cx="12" cy="9" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>;
    case 'settings': return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case 'minus': return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'chart': return <svg {...p}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>;
    case 'comment': return <svg {...p}><path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8l-4 4V6a1 1 0 0 1 1-1z"/></svg>;
    case 'help': return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 .8-1 1.7M12 17h.01"/></svg>;
    case 'view_grid': return <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    default: return null;
  }
}

// ─────────────────────────────────────────────────────────────────────────
// Logo
// ─────────────────────────────────────────────────────────────────────────
function CanifyLogo({ size = 64, dark = false }) {
  const main = dark ? C.white : C.navy;
  return (
    <svg width={size} height={size * 1.07} viewBox="0 0 100 107" style={{ display: 'block' }}>
      <path d="M50 10 C 25 10, 10 28, 10 50 C 10 72, 25 90, 50 90 C 65 90, 75 84, 82 75 L 70 65 C 65 71, 58 75, 50 75 C 36 75, 26 65, 26 50 C 26 35, 36 25, 50 25 C 58 25, 65 29, 70 35 L 82 25 C 75 16, 65 10, 50 10 Z" fill={main}/>
      <path d="M58 60 C 58 72, 64 80, 64 92 C 64 100, 56 102, 56 92 C 56 84, 52 78, 52 68 Z" fill={C.coral}/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Phone shell — fixed status bar, scrollable content, fixed tab bar
// ─────────────────────────────────────────────────────────────────────────
function PhoneShell({ children, status = 'dark', showTabBar = true }) {
  const isMobile = useIsMobile();

  if (isMobile) {
    const tabH = 'calc(72px + env(safe-area-inset-bottom))';
    return (
      <div style={{
        width: '100%', height: '100dvh', background: C.bg,
        position: 'relative', overflow: 'hidden',
        fontFamily: 'Urbanist, system-ui, sans-serif', color: C.navy,
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0,
          bottom: showTabBar ? tabH : 0,
          paddingTop: 'env(safe-area-inset-top)',
          overflowY: 'auto', overflowX: 'hidden', scrollbarWidth: 'none',
          WebkitOverflowScrolling: 'touch',
        }} className="phone-scroll">
          {children}
        </div>
        {showTabBar && <TabBar/>}
      </div>
    );
  }

  return (
    <div style={{
      width: 390, height: 844, background: C.bg,
      position: 'relative', overflow: 'hidden',
      fontFamily: 'Urbanist, system-ui, sans-serif', color: C.navy,
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 53,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 32px 0', zIndex: 60, pointerEvents: 'none',
      }}>
        <span style={{ fontFamily: '-apple-system, "SF Pro", system-ui', fontSize: 17, fontWeight: 600, color: status === 'dark' ? C.navy : C.white }}>9:41</span>
        <div style={{ display: 'flex', gap: 7, alignItems: 'center' }}>
          <svg width="19" height="12" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx=".7" fill={status === 'dark' ? C.navy : C.white}/><rect x="4.8" y="5" width="3.2" height="7" rx=".7" fill={status === 'dark' ? C.navy : C.white}/><rect x="9.6" y="2.5" width="3.2" height="9.5" rx=".7" fill={status === 'dark' ? C.navy : C.white}/><rect x="14.4" y="0" width="3.2" height="12" rx=".7" fill={status === 'dark' ? C.navy : C.white}/></svg>
          <svg width="27" height="13" viewBox="0 0 27 13"><rect x=".5" y=".5" width="23" height="12" rx="3.5" stroke={status === 'dark' ? C.navy : C.white} strokeOpacity=".35" fill="none"/><rect x="2" y="2" width="20" height="9" rx="2" fill={status === 'dark' ? C.navy : C.white}/></svg>
        </div>
      </div>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        bottom: showTabBar ? 84 : 0,
        overflowY: 'auto', overflowX: 'hidden', scrollbarWidth: 'none',
      }} className="phone-scroll">
        {children}
      </div>
      {showTabBar && <TabBar/>}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 26,
        display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        paddingBottom: 8, zIndex: 70, pointerEvents: 'none',
      }}>
        <div style={{ width: 134, height: 5, borderRadius: 3, background: C.navy }}/>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Reusable bits
// ─────────────────────────────────────────────────────────────────────────
function CTAButton({ children, variant = 'filled', icon, onClick, disabled, dark }) {
  const base = {
    width: 320, height: 48, borderRadius: 24,
    fontFamily: 'Urbanist', fontWeight: 700, fontSize: 16, letterSpacing: '0.02em',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    cursor: disabled ? 'default' : 'pointer', border: 'none',
    transition: 'transform .15s ease, box-shadow .15s ease',
    boxShadow: SHADOW,
  };
  const styles = {
    filled: { ...base, background: disabled ? C.navyMuted : C.coral, color: C.white },
    outlined: { ...base, background: 'transparent', color: dark ? C.white : C.navy, border: `2px solid ${dark ? C.white : C.navy}`, boxShadow: 'none' },
    text: { ...base, background: 'transparent', color: C.coral, boxShadow: 'none' },
    navy: { ...base, background: C.navy, color: C.white },
  };
  return (
    <button disabled={disabled} onClick={onClick} style={styles[variant]}
      onMouseEnter={(e) => !disabled && (e.currentTarget.style.transform = 'translateY(-1px)')}
      onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}>
      <span>{children}</span>
      {icon && <Icon name={icon} size={18}/>}
    </button>
  );
}

function HeaderBanner({ title, subtitle, tone = 'sky' }) {
  const tones = {
    sky:    { bg: C.sky,   accent: C.skyDeep,  text: C.navy,  decor: C.white },
    coral:  { bg: '#F8B8AE', accent: C.coral, text: C.navy, decor: C.cream },
    cream:  { bg: C.cream, accent: '#E5E39C', text: C.navy, decor: C.coral },
  };
  const t = tones[tone];
  return (
    <div style={{
      position: 'relative', height: 180, width: '100%', background: t.bg,
      borderRadius: '0 0 32px 32px', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 32px',
    }}>
      <svg width="150" height="180" style={{ position: 'absolute', right: -30, top: -20, opacity: .55 }} viewBox="0 0 150 180">
        <path d="M40 20 Q 80 0 120 30 Q 150 70 110 110 Q 80 140 50 120 Q 10 90 40 20 Z" fill={t.accent}/>
        <circle cx="115" cy="35" r="6" fill={t.decor}/>
        <circle cx="135" cy="80" r="4" fill={t.decor}/>
      </svg>
      <h1 style={{ fontSize: 34, fontWeight: 800, margin: 0, color: t.text, letterSpacing: '-0.01em' }}>{title}</h1>
      <p style={{ fontSize: 16, fontWeight: 500, margin: '6px 0 0', color: t.text, maxWidth: 260, lineHeight: 1.35 }}>{subtitle}</p>
    </div>
  );
}

function TwoTabs({ left, right, active, onChange }) {
  return (
    <div style={{
      width: '100%', height: 56, display: 'flex',
      background: C.white, position: 'sticky', top: 0, zIndex: 20,
      borderBottom: `1px solid ${C.navyLine}`,
    }}>
      {[{ k: 'left', label: left }, { k: 'right', label: right }].map((t) => (
        <button key={t.k} onClick={() => onChange(t.k)}
          style={{
            flex: 1, border: 'none', background: 'transparent',
            fontFamily: 'Urbanist', fontWeight: 700, fontSize: 16,
            color: active === t.k ? C.coral : C.navySoft,
            position: 'relative', cursor: 'pointer',
          }}>
          {t.label}
          {active === t.k && <div style={{ position: 'absolute', bottom: 0, left: 24, right: 24, height: 3, background: C.coral, borderRadius: 2 }}/>}
        </button>
      ))}
    </div>
  );
}

function SparkleButton({ onClick, size = 48 }) {
  return (
    <button onClick={onClick} style={{
      width: size, height: size, borderRadius: size / 2, background: C.coral, border: 'none',
      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 6px 14px rgba(230,106,91,0.4)',
    }}>
      <Icon name="sparkle" size={size * 0.5} color={C.white} fill/>
    </button>
  );
}

function KIBigButton({ onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 108, height: 108, borderRadius: 54,
      background: `radial-gradient(circle at 30% 30%, #F09181, ${C.coral} 70%)`,
      border: `4px solid ${C.white}`, cursor: 'pointer',
      boxShadow: '0 12px 28px rgba(230,106,91,0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative',
    }}>
      <Icon name="sparkle" size={56} color={C.white} fill/>
      <span style={{
        position: 'absolute', bottom: -8, fontSize: 14, fontWeight: 700,
        background: C.navy, color: C.white, padding: '4px 12px', borderRadius: 12,
      }}>KI</span>
    </button>
  );
}

function MarkerTag({ children, tone = 'cream', rotate = -4 }) {
  const colors = { cream: C.cream, coral: '#F8B8AE', sky: C.sky };
  return (
    <div style={{
      display: 'inline-block', background: colors[tone],
      transform: `rotate(${rotate}deg)`,
      padding: '4px 12px', fontFamily: '"Grandstander", "Urbanist"',
      fontStyle: 'italic', fontWeight: 900, fontSize: 14, color: C.navy,
      borderRadius: 4, position: 'relative',
    }}>{children}</div>
  );
}

function Avatar({ size = 56, label, color = C.coral, image }) {
  if (image) return <div style={{ width: size, height: size, borderRadius: size/2, background: `${image} center/cover`, border: `3px solid ${C.white}` }}/>;
  if (label) return <div style={{
    width: size, height: size, borderRadius: size/2, background: color,
    color: C.white, display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 800, fontSize: size * 0.36, border: `3px solid ${C.white}`,
  }}>{label}</div>;
  return <div style={{ width: size, height: size, borderRadius: size/2, background: C.navyLine, border: `3px solid ${C.white}` }}/>;
}

function InputField({ label, value, onChange, placeholder, icon, rightIcon, type = 'text' }) {
  const [focused, setFocused] = useState(false);
  return (
    <div style={{ width: '100%' }}>
      {label && <label style={{ display: 'block', fontSize: 14, fontWeight: 700, color: C.navy, marginBottom: 6, marginLeft: 4 }}>{label}</label>}
      <div style={{
        height: 56, background: C.white, borderRadius: 16,
        border: `2px solid ${focused ? C.coral : 'transparent'}`,
        display: 'flex', alignItems: 'center', padding: '0 16px', gap: 10,
        boxShadow: focused ? '0 0 0 4px rgba(230,106,91,0.12)' : SHADOW,
        transition: 'all .15s',
      }}>
        {icon && <Icon name={icon} size={20} color={C.navySoft}/>}
        <input type={type} value={value} placeholder={placeholder}
          onChange={(e) => onChange?.(e.target.value)}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
          style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            fontFamily: 'Urbanist', fontSize: 16, fontWeight: 600, color: C.navy,
          }}/>
        {rightIcon && <Icon name={rightIcon} size={20} color={C.navySoft}/>}
      </div>
    </div>
  );
}

function ImageSlot({ aspect = '16/10', label = 'project photo', tone = 'navy', radius = 8 }) {
  const stripeColor = tone === 'coral' ? C.coralDeep : C.navySoft;
  return (
    <div style={{
      width: '100%', aspectRatio: aspect, height: aspect === 'auto' ? '100%' : undefined, borderRadius: radius,
      background: `repeating-linear-gradient(45deg, ${stripeColor} 0 6px, ${tone === 'coral' ? C.coral : C.navy} 6px 14px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        background: 'rgba(0,0,0,0.45)', color: C.white, padding: '4px 10px',
        fontFamily: 'ui-monospace, "SF Mono", monospace', fontSize: 11, borderRadius: 4,
      }}>{label}</div>
    </div>
  );
}

function TabBar() {
  const { route, push } = useNav();
  const isMobile = useIsMobile();
  const isHome = route === 'home';
  const isProj = route === 'projekte' || route === 'projekt_detail' || route === 'projekt_teilen';
  const isMat = route === 'material' || route === 'material_finden' || route === 'material_shop';
  const isProfile = route === 'profil' || route === 'profil_edit' || route === 'statistik' || route === 'settings';

  const TabBtn = ({ active, icon, label, onClick, big }) => (
    <button onClick={onClick} style={{
      flex: 1, border: 'none', background: 'transparent', cursor: 'pointer',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
      padding: '6px 0 0',
    }}>
      {big ? (
        <div style={{
          width: 56, height: 56, borderRadius: 28, marginTop: -22,
          background: C.coral, display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 16px rgba(230,106,91,0.5)', border: `3px solid ${C.white}`,
        }}>
          <Icon name={icon} size={26} color={C.white} fill/>
        </div>
      ) : (
        <Icon name={icon} size={22} color={active ? C.coral : C.navySoft} fill={active}/>
      )}
      {!big && <span style={{ fontSize: 11, fontWeight: 700, color: active ? C.coral : C.navySoft }}>{label}</span>}
    </button>
  );

  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: isMobile ? 'calc(72px + env(safe-area-inset-bottom))' : 84,
      paddingBottom: isMobile ? 'env(safe-area-inset-bottom)' : 26,
      background: C.white, borderTop: `1px solid ${C.navyLine}`,
      display: 'flex', alignItems: 'flex-start', zIndex: 50,
      boxShadow: '0 -8px 24px rgba(36,43,90,0.06)',
    }}>
      <TabBtn active={isHome} icon="home" label="Neues" onClick={() => push('home')}/>
      <TabBtn active={isProj} icon="folder" label="Projekte" onClick={() => push('projekte')}/>
      <TabBtn big icon="sparkle" onClick={() => push('ki_assistant')}/>
      <TabBtn active={isMat} icon="palette" label="Material" onClick={() => push('material')}/>
      <TabBtn active={isProfile} icon="profile" label="Profil" onClick={() => push('profil')}/>
    </div>
  );
}

function TopBar({ title, right }) {
  const { back } = useNav();
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30, height: 64, background: C.white,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 16px', borderBottom: `1px solid ${C.navyLine}`,
    }}>
      <button onClick={back} style={{
        display: 'flex', alignItems: 'center', gap: 6, border: 'none', background: 'transparent',
        color: C.navy, fontFamily: 'Urbanist', fontSize: 16, fontWeight: 600, cursor: 'pointer',
      }}>
        <Icon name="arrow_back" size={22}/> Zurück
      </button>
      {title && <span style={{ fontWeight: 700, fontSize: 16, color: C.coral }}>{title}</span>}
      {right || <div style={{ width: 80 }}/>}
    </div>
  );
}

function SectionTitle({ children, align = 'center', size = 24 }) {
  return <h2 style={{
    fontFamily: 'Urbanist', fontWeight: 800, fontSize: size, color: C.navy,
    margin: 0, textAlign: align, letterSpacing: '-0.01em',
  }}>{children}</h2>;
}

function Label({ children, color = C.coral }) {
  return <span style={{ fontSize: 14, fontWeight: 700, color, letterSpacing: '0.02em' }}>{children}</span>;
}

// ─────────────────────────────────────────────────────────────────────────
// Sample data
// ─────────────────────────────────────────────────────────────────────────
const MEMBERS = [
  { label: 'AB', color: C.coral },
  { label: 'JD', color: C.navy },
  { label: 'MK', color: '#7C8CC4' },
  { label: 'RE', color: '#E5C95C' },
];

const PROJECTS = [
  { title: 'Crew Treffen', date: '24.11.24', loc: 'München', size: '30m²',
    desc: 'Großes Crew-Meeting mit gemeinsamer Wand. Bringt eure Skizzen mit!',
    tone: 'cream', members: MEMBERS.slice(0, 3),
    tasks: [{t:'Streichen',d:false},{t:'Material besorgen',d:true},{t:'Grill aufstellen',d:false},{t:'Bier kaufen!!!',d:false},{t:'Fotos machen',d:false}] },
  { title: 'Hallenwand Süd', date: '02.12.24', loc: 'Berlin', size: '120m²',
    desc: 'Auftrag für Industriehalle. Fokus auf Schriftzug + Charakter.',
    tone: 'sky', members: MEMBERS,
    tasks: [{t:'Skizze finalisieren',d:true},{t:'Material bestellen',d:true},{t:'Lift organisieren',d:false}] },
  { title: 'Underpass Hbf', date: '15.01.25', loc: 'Hamburg', size: '85m²',
    desc: 'Legaler Spot, Kollab mit lokaler Crew. Nightpiece.',
    tone: 'coral', members: MEMBERS.slice(1, 3),
    tasks: [{t:'Genehmigung',d:true},{t:'Caps sortieren',d:false}] },
];

const FINISHED = [
  { title: 'Crew Meeting', date: '23.12.23', desc: 'Die Umsetzung vor Ort wird professionell und fachgerecht durchgeführt.', tone: 'sky' },
  { title: 'Auftrag — Bäckerei Neumann', date: '21.11.23', desc: 'Einkauf im Fachgeschäft. Canify hat uns geholfen, die Materialliste effizient zu planen und zu verwalten.', tone: 'cream' },
  { title: 'Gestaltung Halle 7', date: '21.11.20', desc: 'Selbstverständlich wird alles auf Foto und Video festgehalten — der Auftraggeber war sehr zufrieden.', tone: 'coral' },
];

const SPRAYS = [
  { name: 'Montana Black 400ml', code: 'BLK6000', color: '#1B1B26', stock: 12, brand: 'Montana' },
  { name: 'Montana Gold Shock White', code: 'S9100', color: '#F4F4EE', stock: 3, brand: 'Montana' },
  { name: 'Belton Molotow Burner', code: 'BR-401', color: '#E66A5B', stock: 7, brand: 'Belton' },
  { name: 'Loop Colors Lipstick', code: 'LP-021', color: '#C73C5C', stock: 2, brand: 'Loop' },
  { name: 'Montana Power Cyan', code: 'BLU2050', color: '#2E78C2', stock: 5, brand: 'Montana' },
];
const PAINTS = [
  { name: 'Caparol Fassadenweiß', code: 'CW-12', color: '#F2EFE6', stock: '5L', brand: 'Caparol' },
  { name: 'Brillux Silikon Tiefgrund', code: 'TG-3000', color: '#DCD5C4', stock: '2.5L', brand: 'Brillux' },
  { name: 'Caparol Sandgelb', code: 'CS-44', color: '#E5C95C', stock: '1L', brand: 'Caparol' },
];

// ─────────────────────────────────────────────────────────────────────────
// Splash / Welcome / Login
// ─────────────────────────────────────────────────────────────────────────
function SplashScreen() {
  const { reset } = useNav();
  useEffect(() => { const t = setTimeout(() => reset('welcome'), 1400); return () => clearTimeout(t); }, []);
  return (
    <PhoneShell status="light" showTabBar={false}>
      <div style={{
        position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 30%, #2F3873, ${C.navy} 70%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16,
      }}>
        <div style={{ animation: 'pop 1s ease' }}><CanifyLogo size={120} dark/></div>
        <div style={{ fontFamily: '"Grandstander", Urbanist', fontWeight: 900, fontStyle: 'italic',
          fontSize: 56, color: C.white, letterSpacing: '-0.04em' }}>Canify</div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', fontWeight: 500 }}>Plan. Paint. Repeat.</div>
      </div>
    </PhoneShell>
  );
}

function WelcomeScreen() {
  const { push, reset } = useNav();
  return (
    <PhoneShell showTabBar={false}>
      <div style={{ paddingTop: 80, paddingLeft: 16, paddingRight: 16, paddingBottom: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <CanifyLogo size={110}/>
          <h1 style={{ fontSize: 24, fontWeight: 800, color: C.navy, margin: 0, textAlign: 'center', lineHeight: 1.2 }}>Wilkommen bei Canify</h1>
          <p style={{ fontSize: 15, color: C.navy, textAlign: 'center', margin: 0, maxWidth: 320, lineHeight: 1.45 }}>
            Erstelle ein Konto und starte mit einer besseren Übersicht über deinen Kunstbedarf.
          </p>
        </div>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <Label>Ich bin neu hier</Label>
            <CTAButton onClick={() => reset('home')}>Profil erstellen</CTAButton>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.navy, whiteSpace: 'nowrap' }}>Ich habe bereits ein Konto</span>
            <CTAButton variant="outlined" onClick={() => push('login')}>Anmelden</CTAButton>
          </div>
        </div>
        <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', justifyContent: 'center' }}>
            <div style={{ flex: 1, height: 1, background: C.navy }}/>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.navy }}>Oder anmelden mit:</span>
            <div style={{ flex: 1, height: 1, background: C.navy }}/>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            {[
              { id: 'fb', svg: <svg width="22" height="22" viewBox="0 0 12 24"><path fill="#4092FF" d="M7.8 24V13h3.6l.5-4.3H7.8V6c0-1.2.3-2 2-2h2.2V.2C11 0 9.9 0 8.8 0 5.7 0 3.5 2 3.5 5.6v3.1H0V13h3.5v11h4.3z"/></svg> },
              { id: 'g', svg: <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#4285F4" d="M22 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.6c-.2 1.3-1 2.4-2 3.1v2.6h3.3c1.9-1.8 3.1-4.4 3.1-7.6z"/><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.7-2.4l-3.3-2.6c-.9.6-2.1 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3v2.6C4.7 19.9 8.1 22 12 22z"/><path fill="#FBBC05" d="M6.4 13.9c-.2-.6-.3-1.3-.3-1.9s.1-1.3.3-1.9V7.5H3C2.4 9 2 10.4 2 12s.4 3 1 4.5l3.4-2.6z"/><path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.9-2.9C16.9 2.7 14.7 2 12 2 8.1 2 4.7 4.1 3 7.5l3.4 2.6C7.2 7.6 9.4 5.9 12 5.9z"/></svg> },
              { id: 'a', svg: <svg width="22" height="22" viewBox="0 0 22 26"><path fill="#000" d="M17.4 13.7c0-3 2.5-4.4 2.6-4.5-1.4-2.1-3.6-2.4-4.4-2.4-1.9-.2-3.6 1.1-4.5 1.1-.9 0-2.4-1.1-3.9-1.1-2 0-3.9 1.2-4.9 3-2.1 3.6-.5 9 1.5 12 1 1.4 2.2 3 3.7 2.9 1.5-.1 2-1 3.8-1 1.7 0 2.2 1 3.8 1 1.6 0 2.6-1.4 3.5-2.9 1.1-1.7 1.6-3.3 1.6-3.4-.1 0-3-1.2-3-4.7zM14.5 4.7c.8-1 1.4-2.4 1.2-3.8-1.2.1-2.6.8-3.4 1.8-.8.9-1.5 2.3-1.3 3.7 1.3.1 2.7-.7 3.5-1.7z"/></svg> },
            ].map((p) => (
              <button key={p.id} style={{
                width: 100, height: 56, background: C.white, border: `1px solid #E8E8E8`, borderRadius: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>{p.svg}</button>
            ))}
          </div>
          <p style={{ fontSize: 13, color: C.gray, textAlign: 'center', margin: 0, lineHeight: 1.5, maxWidth: 320 }}>
            Mit deiner Anmeldung erklärst du dich mit unseren Nutzungsbedingungen und der Datenschutzerklärung von Canify einverstanden.
          </p>
        </div>
      </div>
    </PhoneShell>
  );
}

function LoginScreen() {
  const { reset, back } = useNav();
  const [email, setEmail] = useState('faderone@canify.app');
  const [pw, setPw] = useState('••••••••••');
  const [showPw, setShowPw] = useState(false);
  return (
    <PhoneShell showTabBar={false}>
      <div style={{ padding: '76px 16px 40px' }}>
        <button onClick={back} style={{
          width: 48, height: 48, borderRadius: 24, background: C.white, border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          boxShadow: SHADOW, marginBottom: 12,
        }}><Icon name="arrow_back" size={22} color={C.navy}/></button>
        <h1 style={{ fontSize: 28, fontWeight: 800, color: C.navy, margin: 0, textAlign: 'center' }}>Einloggen</h1>
        <p style={{ fontSize: 16, color: C.navy, margin: '12px 0 32px', textAlign: 'center' }}>
          Neu bei Canify?<br/><span style={{ color: C.coral, fontWeight: 700 }}>Kostenlos anmelden</span>
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <InputField label="E-Mail Adresse / Profilname" icon="profile" value={email} onChange={setEmail}/>
          <InputField label="Passwort" icon="settings" rightIcon={showPw ? 'visibility_off' : 'visibility'} value={pw} onChange={setPw} type={showPw ? 'text' : 'password'}/>
          <div style={{ textAlign: 'right' }}>
            <a style={{ fontSize: 14, color: C.coral, fontWeight: 600, cursor: 'pointer' }}>Passwort vergessen?</a>
          </div>
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center' }}>
          <CTAButton onClick={() => reset('home')}>Einloggen</CTAButton>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Home / Neues
// ─────────────────────────────────────────────────────────────────────────
function HomeScreen() {
  const { push } = useNav();
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{
          height: 80, paddingTop: 53, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '53px 16px 0', background: C.white,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <CanifyLogo size={32}/>
            <span style={{ fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic', fontWeight: 900, fontSize: 24, color: C.navy }}>Canify</span>
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            <button style={{ width: 44, height: 44, border: 'none', background: 'transparent', cursor: 'pointer' }}><Icon name="search" color={C.navy}/></button>
            <button onClick={() => push('notifications')} style={{ width: 44, height: 44, border: 'none', background: 'transparent', cursor: 'pointer', position: 'relative' }}>
              <Icon name="notifications" color={C.navy}/>
              <span style={{ position: 'absolute', top: 8, right: 10, width: 8, height: 8, borderRadius: 4, background: C.coral }}/>
            </button>
          </div>
        </div>
        <div style={{ padding: '20px 16px 0' }}>
          <p style={{ fontSize: 14, fontWeight: 700, color: C.coral, margin: 0 }}>Hi FaderOne 👋</p>
          <h1 style={{ fontSize: 28, fontWeight: 800, color: C.navy, margin: '4px 0 0', lineHeight: 1.15 }}>
            Bereit für<br/>dein nächstes<br/><span style={{ color: C.coral }}>Stück?</span>
          </h1>
        </div>
        <div style={{ margin: '16px', borderRadius: 20, overflow: 'hidden', background: C.navy,
          padding: '20px 20px 24px', position: 'relative', minHeight: 220,
          backgroundImage: `radial-gradient(circle at 90% 100%, ${C.coral}66, transparent 50%)`,
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          <Label color={C.cream}>NEU IN CANIFY</Label>
          <h2 style={{ fontSize: 22, fontWeight: 800, color: C.white, margin: 0, maxWidth: 220, lineHeight: 1.2 }}>
            KI plant dein Projekt in 60 Sekunden.
          </h2>
          <CTAButton variant="navy" onClick={() => push('ki_assistant')} icon="arrow_forward">
            <span style={{ background: C.coral, padding: '4px 8px', borderRadius: 6, marginRight: 6 }}>KI</span>
            Ausprobieren
          </CTAButton>
          <div style={{ position: 'absolute', right: -10, top: -6, transform: 'rotate(8deg)' }}>
            <KIBigButton onClick={() => push('ki_assistant')}/>
          </div>
        </div>
        <div style={{ padding: '8px 16px' }}>
          <SectionTitle align="left" size={20}>Was geht?</SectionTitle>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            {[
              { t: 'Projekte', sub: '3 aktiv', icon: 'folder', tone: C.sky, route: 'projekte' },
              { t: 'Material', sub: '8 niedrig', icon: 'spray', tone: C.cream, route: 'material' },
              { t: 'Shop', sub: '15% off', icon: 'newspaper', tone: '#F8B8AE', route: 'material_finden' },
              { t: 'Crew', sub: '4 online', icon: 'profile', tone: '#D5DCEB', route: 'projekte' },
            ].map((q, i) => (
              <button key={i} onClick={() => push(q.route)} style={{
                background: q.tone, border: 'none', borderRadius: 16, padding: 14, textAlign: 'left',
                display: 'flex', flexDirection: 'column', gap: 8, cursor: 'pointer', minHeight: 100,
                boxShadow: SHADOW,
              }}>
                <Icon name={q.icon} size={26} color={C.navy}/>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 18, color: C.navy }}>{q.t}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: C.navySoft }}>{q.sub}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
        <div style={{ padding: '24px 16px 0' }}>
          <SectionTitle align="left" size={20}>Featured Artist</SectionTitle>
          <div style={{ marginTop: 12, background: C.white, borderRadius: 20, padding: 12, boxShadow: SHADOW, position: 'relative' }}>
            <ImageSlot aspect="16/10" label="featured wall — RIOT crew" tone="navy" radius={14}/>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 4px 4px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar size={40} label="JD" color={C.coral}/>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 16, color: C.navy }}>@jadespray</div>
                  <div style={{ fontSize: 12, color: C.navySoft, fontWeight: 600 }}>Berlin · vor 2h</div>
                </div>
              </div>
              <button style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                <Icon name="heart" color={C.coral} fill/>
                <span style={{ fontWeight: 700, color: C.coral }}>248</span>
              </button>
            </div>
            <p style={{ margin: '8px 4px 4px', fontSize: 14, color: C.navy, lineHeight: 1.4 }}>
              "Mauerpark, Sonntagmorgen — 4h, 18 Dosen, 0 Kaffee. Vibes."
            </p>
          </div>
        </div>
        <div style={{ padding: '24px 0 0' }}>
          <div style={{ paddingLeft: 16 }}><SectionTitle align="left" size={20}>Themen</SectionTitle></div>
          <div style={{ display: 'flex', gap: 12, overflow: 'auto', padding: '12px 16px', scrollbarWidth: 'none' }}>
            {[
              { t: 'Caps & Tipps', tone: C.cream, ic: 'spray' },
              { t: 'Legal Walls', tone: C.sky, ic: 'location' },
              { t: 'Auftragskunst', tone: '#F8B8AE', ic: 'edit' },
              { t: 'Crew Battles', tone: '#D5DCEB', ic: 'sparkle' },
            ].map((t, i) => (
              <div key={i} style={{
                minWidth: 140, padding: 14, borderRadius: 16, background: t.tone,
                display: 'flex', flexDirection: 'column', gap: 18, boxShadow: SHADOW,
              }}>
                <Icon name={t.ic} size={22} color={C.navy}/>
                <div style={{ fontWeight: 800, fontSize: 16, color: C.navy }}>{t.t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Projekte
// ─────────────────────────────────────────────────────────────────────────
function ProjekteScreen() {
  const { push } = useNav();
  const [tab, setTab] = useState('left');
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <HeaderBanner title="Projekte" subtitle="Plane deine Projekte einfach und effizient mit Canify!" tone="sky"/>
        <TwoTabs left="Deine Projekte" right="Fertige Projekte" active={tab} onChange={setTab}/>
        {tab === 'left' ? <ActiveList push={push}/> : <FinishedList push={push}/>}
      </div>
    </PhoneShell>
  );
}

function ActiveList({ push }) {
  const [view, setView] = useState('cards');
  return (
    <div style={{ background: C.white, padding: '20px 16px 32px', minHeight: 600 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Label>Ansicht</Label>
          <button onClick={() => setView('cards')} style={{ border: 'none', background: view === 'cards' ? C.sky : 'transparent', borderRadius: 8, padding: 8, cursor: 'pointer' }}><Icon name="menu_view" color={view === 'cards' ? C.coral : C.navy}/></button>
          <button onClick={() => setView('toc')} style={{ border: 'none', background: view === 'toc' ? C.sky : 'transparent', borderRadius: 8, padding: 8, cursor: 'pointer' }}><Icon name="list" color={view === 'toc' ? C.coral : C.navy}/></button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Label>Projekte hinzufügen</Label>
          <SparkleButton onClick={() => push('projekt_detail')}/>
        </div>
      </div>
      <div style={{ height: 1, background: C.navyLine, marginBottom: 20 }}/>
      {view === 'cards' ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {PROJECTS.map((p, i) => <ProjectCard key={i} p={p} onClick={() => push('projekt_detail')}/>)}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {PROJECTS.map((p, i) => (
            <button key={i} onClick={() => push('projekt_detail')} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 4px',
              background: 'transparent', border: 'none', borderBottom: `1px solid ${C.navyLine}`, cursor: 'pointer',
              textAlign: 'left',
            }}>
              <div>
                <div style={{ fontWeight: 800, fontSize: 17, color: C.navy }}>{p.title}</div>
                <div style={{ fontSize: 13, color: C.navySoft, fontWeight: 600 }}>{p.loc} · {p.size} · {p.date}</div>
              </div>
              <Icon name="chevron_right" color={C.coral}/>
            </button>
          ))}
        </div>
      )}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
        <CTAButton icon="add" onClick={() => push('projekt_detail')}>Projekt hinzufügen</CTAButton>
      </div>
    </div>
  );
}

function FinishedList({ push }) {
  return (
    <div style={{ background: C.white, padding: '20px 16px 32px', minHeight: 600 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
        <SparkleButton/>
        <Label>Projekte fertigstellen</Label>
      </div>
      <div style={{ height: 1, background: C.navyLine, marginBottom: 20 }}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {FINISHED.map((p, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <ProjectCard p={p} muted onClick={() => push('projekt_teilen')}/>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <CTAButton variant="outlined" icon="arrow_outward" onClick={() => push('projekt_teilen')}>Projekt teilen</CTAButton>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProjectCard({ p, onClick, muted = false }) {
  const tones = { sky: C.sky, cream: C.cream, coral: '#F8B8AE' };
  return (
    <div onClick={onClick} style={{
      background: muted ? '#F4F5F8' : (tones[p.tone] || C.cream),
      borderRadius: 16, padding: 12, cursor: 'pointer',
      boxShadow: SHADOW, display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ position: 'relative' }}>
        <ImageSlot aspect="16/9" label={`${p.title.toLowerCase()}`} tone="navy" radius={12}/>
        <div style={{ position: 'absolute', top: 10, left: 10, background: 'rgba(36,43,90,0.85)', color: C.white, fontSize: 12, fontWeight: 700, padding: '4px 10px', borderRadius: 12 }}>{p.date}</div>
        {muted && <div style={{ position: 'absolute', top: 10, right: 10, background: C.coral, color: C.white, fontSize: 11, fontWeight: 800, padding: '4px 10px', borderRadius: 12, letterSpacing: '.05em' }}>FERTIG</div>}
      </div>
      <div style={{ padding: '0 4px 4px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 style={{ fontSize: 20, fontWeight: 800, color: C.navy, margin: 0 }}>{p.title}</h3>
          {p.members && (
            <div style={{ display: 'flex' }}>
              {p.members.slice(0, 3).map((m, j) => (
                <div key={j} style={{ marginLeft: j === 0 ? 0 : -10 }}>
                  <Avatar size={28} label={m.label} color={m.color}/>
                </div>
              ))}
            </div>
          )}
        </div>
        <p style={{ fontSize: 14, color: C.navySoft, fontWeight: 500, margin: '4px 0 0', lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.desc}</p>
        {p.loc && (
          <div style={{ display: 'flex', gap: 12, marginTop: 8, fontSize: 13, color: C.navy, fontWeight: 700 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="location" size={14}/>{p.loc}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="pageless" size={14}/>{p.size}</span>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Projekt Detail
// ─────────────────────────────────────────────────────────────────────────
function ProjektDetailScreen() {
  const { push } = useNav();
  const [project, setProject] = useState(PROJECTS[0]);
  const [tasks, setTasks] = useState(project.tasks);
  const [newTask, setNewTask] = useState('');
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <TopBar right={
          <button onClick={() => push('projekt_teilen')} style={{
            height: 40, padding: '0 14px', borderRadius: 20, background: C.coral, border: 'none',
            color: C.white, fontWeight: 700, fontSize: 14, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}><Icon name="share" size={16} color={C.white}/> Teilen</button>
        }/>
        <div style={{ padding: '24px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, position: 'relative' }}>
          <KIBigButton onClick={() => push('ki_assistant')}/>
          <p style={{ fontSize: 18, fontWeight: 700, color: C.navy, textAlign: 'center', maxWidth: 320, lineHeight: 1.4, margin: 0 }}>
            Projekte einfach mit KI Unterstützung anlegen und verwalten
          </p>
          <div style={{ position: 'absolute', top: 60, right: 24 }}>
            <MarkerTag rotate={-12}>NEU!</MarkerTag>
          </div>
        </div>
        <div style={{ height: 1, background: C.navyLine, margin: '0 16px' }}/>
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <InputField label="Projektname:" value={project.title} onChange={(v) => setProject({...project, title: v})}/>
          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{ flex: 1 }}><InputField label="Admin:" icon="profile" value="FaderOne" onChange={() => {}}/></div>
            <div style={{ flex: 1 }}><InputField label="Datum:" icon="calendar" value={project.date} onChange={(v) => setProject({...project, date: v})}/></div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{ flex: 1 }}><InputField label="Größe" rightIcon="pageless" value={project.size} onChange={(v) => setProject({...project, size: v})}/></div>
            <div style={{ flex: 1 }}><InputField label="Ort:" icon="location" value={project.loc} onChange={(v) => setProject({...project, loc: v})}/></div>
          </div>
        </div>
        <div style={{ padding: '0 16px', marginTop: 8 }}>
          <SectionTitle align="left" size={18}>Mitglieder:</SectionTitle>
          <div style={{ marginTop: 8, background: C.white, borderRadius: 12, padding: '12px 16px', boxShadow: SHADOW,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex' }}>
              {project.members.map((m, i) => (
                <div key={i} style={{ marginLeft: i === 0 ? 0 : -16 }}>
                  <Avatar size={48} label={m.label} color={m.color}/>
                </div>
              ))}
            </div>
            <button style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
              <Icon name="add_circle" size={36} color={C.navyMuted}/>
            </button>
          </div>
        </div>
        <div style={{ padding: '24px 16px 0' }}>
          <SectionTitle align="left" size={18}>Beschreibung:</SectionTitle>
          <div style={{ marginTop: 8, background: C.white, borderRadius: 12, padding: 14, boxShadow: SHADOW, minHeight: 140 }}>
            <p style={{ margin: 0, fontSize: 15, color: C.navy, lineHeight: 1.5 }}>{project.desc}</p>
          </div>
        </div>
        <div style={{ padding: '24px 16px 0' }}>
          <SectionTitle align="left" size={18}>Aufgaben:</SectionTitle>
          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ background: C.white, borderRadius: 12, padding: '12px 14px', boxShadow: SHADOW,
              display: 'flex', alignItems: 'center', gap: 10 }}>
              <input value={newTask} onChange={(e) => setNewTask(e.target.value)}
                placeholder="Aufgaben hinzufügen"
                style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent',
                  fontFamily: 'Urbanist', fontSize: 15, fontWeight: 600, color: C.navy }}/>
              <button onClick={() => { if (newTask.trim()) { setTasks([...tasks, {t: newTask, d: false}]); setNewTask(''); }}}
                style={{ border: 'none', background: C.coral, width: 32, height: 32, borderRadius: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="add" size={18} color={C.white}/>
              </button>
            </div>
            {tasks.map((t, i) => (
              <div key={i} style={{
                background: t.d ? '#F4F5F8' : C.white, borderRadius: 12, padding: '12px 14px', boxShadow: SHADOW,
                display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
              }} onClick={() => setTasks(tasks.map((x,j) => j===i?{...x,d:!x.d}:x))}>
                <div style={{
                  width: 24, height: 24, borderRadius: 6,
                  border: `2px solid ${t.d ? C.coral : C.navyLine}`,
                  background: t.d ? C.coral : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{t.d && <Icon name="check" size={16} color={C.white}/>}</div>
                <span style={{ flex: 1, fontSize: 15, fontWeight: 600,
                  color: t.d ? C.navyMuted : C.navy,
                  textDecoration: t.d ? 'line-through' : 'none' }}>{t.t}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '32px 16px 0' }}>
          <SectionTitle>Projekt Fotos</SectionTitle>
          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 8, gridTemplateRows: '160px 100px' }}>
            <div style={{ gridRow: 'span 2' }}><ImageSlot aspect="auto" label="hero shot" tone="navy" radius={12}/></div>
            <ImageSlot aspect="auto" label="closeup" tone="coral" radius={12}/>
            <ImageSlot aspect="auto" label="crew" tone="navy" radius={12}/>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <button style={{ flex: 1, height: 44, borderRadius: 22, background: C.white, border: `2px solid ${C.navyLine}`, fontWeight: 700, color: C.navy, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <Icon name="camera" size={18}/> Foto aufnehmen
            </button>
            <button style={{ flex: 1, height: 44, borderRadius: 22, background: C.white, border: `2px solid ${C.navyLine}`, fontWeight: 700, color: C.navy, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <Icon name="photos" size={18}/> Galerie
            </button>
          </div>
        </div>
        <div style={{ padding: '32px 16px 16px' }}>
          <SectionTitle>Materialliste</SectionTitle>
          <div style={{ marginTop: 12, background: C.creamSoft, borderRadius: 12, padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="spray" color={C.coral}/>
              <Label>Aus meinem Materialbestand</Label>
            </div>
            <button style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
              <Icon name="add_circle" size={32} color={C.coral}/>
            </button>
          </div>
          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {SPRAYS.slice(0, 4).map((s, i) => <MaterialRow key={i} s={s} compact/>)}
          </div>
          <div style={{ marginTop: 12, background: C.creamSoft, borderRadius: 12, padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="newspaper" color={C.coral}/>
              <Label>Neu nachbestellen</Label>
            </div>
            <button onClick={() => push('material_finden')} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
              <Icon name="arrow_outward" size={24} color={C.coral}/>
            </button>
          </div>
        </div>
        <div style={{ padding: '24px 16px' }}>
          <CTAButton onClick={() => push('projekt_teilen')} icon="arrow_forward">Projekt teilen</CTAButton>
        </div>
      </div>
    </PhoneShell>
  );
}

function MaterialRow({ s, compact = false, expanded = false, onToggle }) {
  return (
    <div style={{ background: C.white, borderRadius: 12, padding: compact ? '10px 12px' : '12px 14px', boxShadow: SHADOW,
      display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 36, height: 48, borderRadius: 4, background: s.color, border: `2px solid ${C.navy}`, position: 'relative', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: -4, left: 8, right: 8, height: 6, background: C.navy, borderRadius: 2 }}/>
        <div style={{ position: 'absolute', top: -8, left: 14, right: 14, height: 4, background: C.coralBlood, borderRadius: 1 }}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 14, color: C.navy, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
        <div style={{ fontSize: 12, color: C.navySoft, fontWeight: 600 }}>{s.brand} · {s.code}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: typeof s.stock === 'number' && s.stock < 4 ? C.coral : C.navy,
          background: typeof s.stock === 'number' && s.stock < 4 ? '#FBE5E1' : C.bg,
          padding: '4px 8px', borderRadius: 8 }}>{s.stock}{typeof s.stock === 'number' ? 'x' : ''}</span>
        {!compact && <button style={{ border: 'none', background: 'transparent', cursor: 'pointer' }} onClick={onToggle}><Icon name={expanded ? 'chevron_up' : 'chevron_down'} size={20} color={C.navySoft}/></button>}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Projekt teilen
// ─────────────────────────────────────────────────────────────────────────
function ProjektTeilenScreen() {
  const { push } = useNav();
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <TopBar title="Projekt teilen"/>
        <div style={{ padding: 16 }}>
          <SectionTitle>Teile dein Projekt!</SectionTitle>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, position: 'relative' }}>
            <KIBigButton onClick={() => push('ki_assistant')}/>
            <p style={{ fontSize: 16, fontWeight: 600, color: C.navy, textAlign: 'center', margin: 0 }}>Füge deinen Materialverbrauch automatisch hinzu</p>
            <div style={{ position: 'absolute', left: 24, top: 50 }}><MarkerTag rotate={-18} tone="cream">AUTO</MarkerTag></div>
          </div>
          <div style={{ height: 1, background: C.navyLine, margin: '24px 0' }}/>
          <SectionTitle>Projekt Fotos</SectionTitle>
          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, gridAutoRows: 110 }}>
            <div style={{ gridColumn: 'span 2', gridRow: 'span 2' }}><ImageSlot aspect="auto" label="hero" tone="navy" radius={12}/></div>
            <ImageSlot aspect="auto" label="detail 1" tone="coral" radius={12}/>
            <ImageSlot aspect="auto" label="detail 2" tone="navy" radius={12}/>
            <button style={{ background: C.white, border: `2px dashed ${C.navyLine}`, borderRadius: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="add" size={28} color={C.navySoft}/></button>
            <ImageSlot aspect="auto" label="crew" tone="coral" radius={12}/>
          </div>
          <div style={{ marginTop: 24 }}>
            <SectionTitle align="left" size={18}>Projekt Beschreibung:</SectionTitle>
            <div style={{ marginTop: 8, background: C.white, borderRadius: 12, padding: 14, boxShadow: SHADOW, minHeight: 120 }}>
              <p style={{ margin: 0, fontSize: 15, color: C.navy, lineHeight: 1.5 }}>
                Crew-Treffen am Mauerpark. 5 Stunden, 18 Dosen, 3 Caps. Vibes on point. Danke an die ganze Crew für die geile Zeit. Nächstes Mal bringen wir mehr Bier mit.
              </p>
            </div>
          </div>
          <div style={{ marginTop: 24 }}>
            <SectionTitle>Material Verbrauch</SectionTitle>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {SPRAYS.slice(0, 5).map((s, i) => <MaterialRow key={i} s={{...s, stock: `-${i+1}x`}}/>)}
            </div>
          </div>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
            <CTAButton icon="arrow_outward" onClick={() => push('home')}>Projekt teilen</CTAButton>
            <CTAButton variant="text" icon="cancel">abbrechen</CTAButton>
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Material
// ─────────────────────────────────────────────────────────────────────────
function MaterialScreen() {
  const { push } = useNav();
  const [tab, setTab] = useState('left');
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <HeaderBanner title="Material" subtitle={tab === 'left' ? 'Übersicht über deine aktuelle Materialliste' : 'Material nachbestellen oder Shops in deiner Nähe finden'} tone="coral"/>
        <TwoTabs left="Dein Material" right="Material finden" active={tab} onChange={setTab}/>
        {tab === 'left' ? <DeinMaterial push={push}/> : <MaterialFinden push={push}/>}
      </div>
    </PhoneShell>
  );
}

function DeinMaterial({ push }) {
  const [expanded, setExpanded] = useState(0);
  return (
    <div style={{ padding: '24px 16px 32px', background: C.bg, minHeight: 700 }}>
      <div style={{ background: C.white, borderRadius: 16, padding: 20, boxShadow: SHADOW, position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <SectionTitle>Dein aktueller<br/>Materialbestand</SectionTitle>
        <KIBigButton onClick={() => push('ki_assistant')}/>
        <p style={{ fontSize: 16, fontWeight: 600, color: C.navy, textAlign: 'center', margin: 0, lineHeight: 1.4 }}>
          Material hinzufügen, bearbeiten, oder nachbestellen.
        </p>
        <div style={{ position: 'absolute', top: 100, left: 16 }}><MarkerTag rotate={-15} tone="cream">SCAN</MarkerTag></div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24, marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Label>Ansicht</Label>
          <button style={{ border: 'none', background: C.white, borderRadius: 8, padding: 8, cursor: 'pointer' }}><Icon name="menu_view" color={C.coral}/></button>
          <button style={{ border: 'none', background: 'transparent', borderRadius: 8, padding: 8, cursor: 'pointer' }}><Icon name="list" color={C.navy}/></button>
        </div>
        <button style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4, color: C.coral, fontWeight: 700 }}>
          Filter <Icon name="filter" size={20} color={C.coral}/>
        </button>
      </div>
      <h3 style={{ fontSize: 18, fontWeight: 800, color: C.navy, margin: '12px 0 12px' }}>Sprühdosen:</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {SPRAYS.map((s, i) => (
          <div key={i}>
            <MaterialRow s={s} expanded={expanded === i} onToggle={() => setExpanded(expanded === i ? -1 : i)}/>
            {expanded === i && (
              <div style={{ marginTop: -4, background: C.creamSoft, padding: '12px 14px', borderRadius: '0 0 12px 12px',
                fontSize: 13, color: C.navy, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{s.code} · 400ml · Nitro-Kombi</div>
                  <div style={{ color: C.navySoft, marginTop: 2 }}>Letzter Kauf: 12.10.24 · €4,30</div>
                </div>
                <button style={{ height: 32, padding: '0 12px', borderRadius: 16, background: C.coral, color: C.white, border: 'none', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>+ Nachkaufen</button>
              </div>
            )}
          </div>
        ))}
      </div>
      <h3 style={{ fontSize: 18, fontWeight: 800, color: C.navy, margin: '24px 0 12px' }}>Fassadenfarbe:</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {PAINTS.map((s, i) => <MaterialRow key={i} s={s}/>)}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
        <CTAButton onClick={() => push('material_finden')} icon="arrow_forward">Farbe nachbestellen</CTAButton>
      </div>
    </div>
  );
}

function MaterialFinden({ push }) {
  const [search, setSearch] = useState('');
  return (
    <div style={{ padding: '24px 16px 32px', background: C.bg, minHeight: 700, display: 'flex', flexDirection: 'column', gap: 32 }}>
      <div style={{ background: C.white, borderRadius: 16, padding: 20, boxShadow: SHADOW, position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <SectionTitle>Hier findest du<br/>die besten Tools für<br/>deine Kunst</SectionTitle>
        <KIBigButton onClick={() => push('ki_assistant')}/>
        <p style={{ fontSize: 15, fontWeight: 600, color: C.navy, textAlign: 'center', margin: 0, lineHeight: 1.4 }}>
          Shops in deiner Nähe finden,<br/>oder einfach über Canify bestellen.
        </p>
        <div style={{ position: 'absolute', top: 100, right: 12 }}><MarkerTag rotate={12} tone="coral">SHOP</MarkerTag></div>
      </div>
      <div>
        <SectionTitle align="left" size={18}>Artikelsuche</SectionTitle>
        <div style={{ marginTop: 8 }}>
          <InputField icon="search" placeholder="Artikelsuche" value={search} onChange={setSearch}/>
        </div>
      </div>
      <div style={{ background: C.cream, borderRadius: 20, padding: '16px 12px 20px', boxShadow: SHADOW, position: 'relative' }}>
        <SectionTitle>Shops in deiner Nähe</SectionTitle>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '14px 4px', scrollbarWidth: 'none' }}>
          {[
            { t: 'Cans & Co', sub: 'München · 0.8km', img: 'navy' },
            { t: 'Spray Empire', sub: 'München · 2.4km', img: 'coral' },
            { t: 'Wallworks', sub: 'München · 3.1km', img: 'navy' },
          ].map((s, i) => (
            <div key={i} style={{ minWidth: 200, background: C.white, borderRadius: 14, padding: 10, boxShadow: SHADOW, cursor: 'pointer' }} onClick={() => push('material_shop')}>
              <ImageSlot aspect="4/3" label={s.t.toLowerCase()} tone={s.img} radius={10}/>
              <div style={{ padding: '8px 4px 0' }}>
                <div style={{ fontWeight: 800, fontSize: 16, color: C.navy }}>{s.t}</div>
                <div style={{ fontSize: 12, fontWeight: 600, color: C.navySoft }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12 }}>
          <CTAButton variant="filled" icon="arrow_outward" onClick={() => push('material_shop')}>Mehr Angebote</CTAButton>
        </div>
      </div>
      <div style={{ background: C.sky, borderRadius: 20, padding: '16px 12px 20px', boxShadow: SHADOW }}>
        <SectionTitle>Produkte</SectionTitle>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '14px 4px', scrollbarWidth: 'none' }}>
          {SPRAYS.slice(0, 4).map((s, i) => (
            <div key={i} style={{ minWidth: 160, background: C.white, borderRadius: 14, padding: 10, boxShadow: SHADOW, cursor: 'pointer' }} onClick={() => push('material_shop')}>
              <div style={{ width: '100%', aspectRatio: '1', borderRadius: 10, background: C.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <SprayCan color={s.color}/>
              </div>
              <div style={{ padding: '8px 4px 0' }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: C.navy, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
                  <span style={{ fontSize: 13, fontWeight: 800, color: C.coral }}>€4,30</span>
                  <button style={{ width: 28, height: 28, borderRadius: 14, background: C.coral, color: C.white, border: 'none', fontSize: 16, cursor: 'pointer', fontWeight: 700 }}>+</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SprayCan({ color = C.coral, size = 70 }) {
  return (
    <svg width={size} height={size * 1.4} viewBox="0 0 70 100">
      <rect x="20" y="0" width="30" height="6" rx="1" fill={C.navy}/>
      <rect x="22" y="6" width="26" height="10" rx="2" fill={C.navySoft}/>
      <rect x="14" y="16" width="42" height="76" rx="4" fill={color} stroke={C.navy} strokeWidth="2"/>
      <rect x="14" y="22" width="42" height="14" fill={C.coral}/>
      <text x="35" y="32" textAnchor="middle" fontSize="6" fontWeight="800" fill={C.white} fontFamily="Urbanist">CANIFY</text>
      <rect x="14" y="60" width="42" height="3" fill="rgba(0,0,0,0.15)"/>
    </svg>
  );
}

function MaterialShopScreen() {
  const { push, back } = useNav();
  return (
    <PhoneShell status="light">
      <div style={{ paddingBottom: 24, background: C.navy, minHeight: 844 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.white, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={back} style={{
            border: 'none', background: 'transparent', display: 'flex', alignItems: 'center', gap: 6,
            color: C.navy, fontFamily: 'Urbanist', fontSize: 15, fontWeight: 700, cursor: 'pointer',
          }}><Icon name="arrow_back" size={20}/> Zurück</button>
          <span style={{ fontSize: 15, fontWeight: 700, color: C.coral }}>Zum Cans & Co Shop</span>
          <Icon name="heart" size={22} color={C.coral}/>
        </div>
        <div style={{ padding: 16 }}>
          <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', background: '#F5F5F5', height: 333, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <SprayCan size={200}/>
            <div style={{ position: 'absolute', bottom: 16, right: 16, background: C.coral, color: C.white,
              padding: '8px 14px', borderRadius: 24, fontWeight: 800, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="heart" size={16} color={C.white} fill/> 15
            </div>
          </div>
          <div style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}>
            <CTAButton icon="arrow_forward" onClick={() => push('home')}>Jetzt bestellen</CTAButton>
          </div>
          <div style={{ marginTop: 24 }}>
            <h2 style={{ fontSize: 22, fontWeight: 800, color: C.white, margin: 0 }}>Montana — Black Line 400ml</h2>
            <p style={{ fontSize: 18, fontWeight: 800, color: C.coral, margin: '8px 0 12px' }}>€4,30 EUR</p>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', color: C.white, fontSize: 15, display: 'flex', flexDirection: 'column', gap: 4 }}>
              <li>· 400ml Inhalt</li>
              <li>· ca. 100 Farbtöne</li>
              <li>· Nitro-Kombi Lack</li>
              <li>· High Pressure</li>
            </ul>
          </div>
          <div style={{ marginTop: 24, borderRadius: 16, overflow: 'hidden', background: C.navy, border: `1px solid ${C.navySoft}`, padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
            <SprayCan size={60} color={C.coral}/>
            <div style={{ color: C.white }}>
              <div style={{ fontWeight: 800, fontSize: 16 }}>Im Bundle sparen</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.7)', marginTop: 2 }}>6 Dosen mixen für €23,90</div>
            </div>
            <div style={{ marginLeft: 'auto' }}>
              <Icon name="chevron_right" color={C.coral}/>
            </div>
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Profile
// ─────────────────────────────────────────────────────────────────────────
function ProfilScreen() {
  const { push, reset } = useNav();
  const stats = [
    { num: '12', lbl: 'Projekte' },
    { num: '47', lbl: 'Werke' },
    { num: '1.2k', lbl: 'Likes' },
    { num: '86', lbl: 'Follower' },
  ];
  const achievements = [
    { icon: 'sparkle', t: 'First Drop', d: 'Erstes Werk', got: true, color: C.coral },
    { icon: 'palette', t: 'Color Master', d: '10 Farben', got: true, color: '#9B7BD8' },
    { icon: 'spray', t: 'Can Crusher', d: '50 Dosen', got: true, color: C.navy },
    { icon: 'heart', t: 'Beloved', d: '100 Likes', got: true, color: '#E8B04F' },
    { icon: 'folder', t: 'Curator', d: '20 Projekte', got: false, color: C.navySoft },
    { icon: 'location', t: 'City Hopper', d: '5 Städte', got: false, color: C.navySoft },
  ];
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.coral, padding: '20px 16px 60px', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic', fontWeight: 900, fontSize: 28, color: C.white }}>Profil</span>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => push('notifications')} style={{ width: 40, height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.2)', border: 'none', cursor: 'pointer', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="notifications" size={20} color={C.white}/>
                <span style={{ position: 'absolute', top: 6, right: 6, width: 10, height: 10, borderRadius: 5, background: C.cream, border: `2px solid ${C.coral}` }}/>
              </button>
              <button onClick={() => push('settings')} style={{ width: 40, height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.2)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="settings" size={20} color={C.white}/>
              </button>
            </div>
          </div>
        </div>
        <div style={{ margin: '-50px 16px 0', background: C.white, borderRadius: 20, padding: '20px 16px 16px', boxShadow: SHADOW, position: 'relative' }}>
          <div style={{ position: 'absolute', top: -50, left: '50%', transform: 'translateX(-50%)' }}>
            <div style={{ width: 100, height: 100, borderRadius: 50, background: `linear-gradient(135deg, ${C.coral}, #E8B04F)`, border: `4px solid ${C.white}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.white, fontWeight: 900, fontSize: 38, fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic', position: 'relative' }}>
              JK
              <button onClick={() => push('profil_edit')} style={{ position: 'absolute', bottom: 0, right: 0, width: 32, height: 32, borderRadius: 16, background: C.navy, border: `3px solid ${C.white}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="edit" size={14} color={C.white}/>
              </button>
            </div>
          </div>
          <div style={{ marginTop: 56, textAlign: 'center' }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: C.navy }}>Jonas Krieger</div>
            <div style={{ fontSize: 14, color: C.coral, fontWeight: 700, marginTop: 2 }}>@jonas_paint · Street Artist</div>
            <div style={{ fontSize: 13, color: C.navySoft, marginTop: 8, lineHeight: 1.4 }}>Sprayer aus München. Liebt grosse Wände, Crew Sessions & Kaffee.</div>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
              <span style={{ background: C.cream, color: C.navy, padding: '4px 10px', borderRadius: 12, fontSize: 12, fontWeight: 700 }}>München</span>
              <span style={{ background: C.sky, color: C.navy, padding: '4px 10px', borderRadius: 12, fontSize: 12, fontWeight: 700 }}>Graffiti</span>
              <span style={{ background: '#FFE7E1', color: C.navy, padding: '4px 10px', borderRadius: 12, fontSize: 12, fontWeight: 700 }}>3y</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 16, padding: '14px 0 0', borderTop: `1px solid ${C.navyLine}` }}>
            {stats.map((s, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 20, fontWeight: 800, color: C.navy }}>{s.num}</div>
                <div style={{ fontSize: 11, color: C.navySoft, fontWeight: 600 }}>{s.lbl}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '16px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <button onClick={() => push('profil_edit')} style={{ background: C.white, borderRadius: 14, padding: 14, border: 'none', boxShadow: SHADOW, cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6 }}>
            <Icon name="edit" size={22} color={C.coral}/>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.navy }}>Profil bearbeiten</span>
          </button>
          <button onClick={() => push('statistik')} style={{ background: C.navy, borderRadius: 14, padding: 14, border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6 }}>
            <Icon name="chart" size={22} color={C.coral}/>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.white }}>Statistiken</span>
          </button>
        </div>
        <div style={{ padding: '20px 16px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <Label>Achievements</Label>
            <span style={{ fontSize: 13, color: C.coral, fontWeight: 700 }}>4 / 6</span>
          </div>
          <div style={{ background: C.white, borderRadius: 14, padding: 14, boxShadow: SHADOW, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {achievements.map((a, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, opacity: a.got ? 1 : 0.4 }}>
                <div style={{ width: 56, height: 56, borderRadius: 28, background: a.got ? a.color : C.navyLine, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  <Icon name={a.icon} size={26} color={C.white} fill/>
                  {a.got && <div style={{ position: 'absolute', bottom: -2, right: -2, width: 22, height: 22, borderRadius: 11, background: C.cream, border: `2px solid ${C.white}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={12} color={C.navy}/></div>}
                </div>
                <span style={{ fontSize: 11, fontWeight: 700, color: C.navy, textAlign: 'center' }}>{a.t}</span>
                <span style={{ fontSize: 10, color: C.navySoft, textAlign: 'center' }}>{a.d}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '20px 16px 0' }}>
          <div style={{ background: C.white, borderRadius: 14, boxShadow: SHADOW, overflow: 'hidden' }}>
            {[
              { i: 'heart', t: 'Favoriten', sub: '23 Werke gespeichert', color: C.coral },
              { i: 'share', t: 'Mein Portfolio teilen', sub: 'canify.app/jonas_paint', color: C.navy },
              { i: 'palette', t: 'Meine Farb-Palette', sub: '12 Lieblingsfarben', color: '#9B7BD8' },
              { i: 'help', t: 'Hilfe & Support', sub: 'FAQ, Kontakt', color: C.navySoft },
            ].map((row, i, arr) => (
              <button key={i} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: 14, border: 'none', background: 'transparent', cursor: 'pointer', borderBottom: i < arr.length - 1 ? `1px solid ${C.navyLine}` : 'none', textAlign: 'left' }}>
                <div style={{ width: 38, height: 38, borderRadius: 19, background: row.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={row.i} size={18} color={C.white} fill/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: C.navy }}>{row.t}</div>
                  <div style={{ fontSize: 12, color: C.navySoft }}>{row.sub}</div>
                </div>
                <Icon name="chevron_right" size={18} color={C.navySoft}/>
              </button>
            ))}
          </div>
          <button onClick={() => reset('welcome')} style={{ marginTop: 16, width: '100%', padding: 14, background: 'transparent', border: `2px solid ${C.coral}`, borderRadius: 24, color: C.coral, fontFamily: 'Urbanist', fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>Abmelden</button>
        </div>
      </div>
    </PhoneShell>
  );
}

function ProfilEditScreen() {
  const { push, back } = useNav();
  const [name, setName] = useState('Jonas Krieger');
  const [user, setUser] = useState('jonas_paint');
  const [bio, setBio] = useState('Sprayer aus München. Liebt grosse Wände, Crew Sessions & Kaffee.');
  const [city, setCity] = useState('München');
  const [email, setEmail] = useState('jonas@canify.app');
  const [style, setStyle] = useState('Graffiti');
  const [pub, setPub] = useState(true);
  const styles = ['Graffiti', 'Stencil', 'Mural', 'Sticker', 'Wheat Paste', 'Throw-up'];
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.white, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${C.navyLine}` }}>
          <button onClick={back} style={{ border: 'none', background: 'transparent', display: 'flex', alignItems: 'center', gap: 6, color: C.navy, fontFamily: 'Urbanist', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>
            <Icon name="arrow_back" size={20} color={C.navy}/> Zurück
          </button>
          <span style={{ fontSize: 16, fontWeight: 800, color: C.navy }}>Bearbeiten</span>
          <button onClick={() => push('profil')} style={{ border: 'none', background: C.coral, color: C.white, padding: '8px 14px', borderRadius: 16, fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>Speichern</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '24px 16px 12px' }}>
          <div style={{ position: 'relative' }}>
            <div style={{ width: 120, height: 120, borderRadius: 60, background: `linear-gradient(135deg, ${C.coral}, #E8B04F)`, border: `4px solid ${C.white}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.white, fontWeight: 900, fontSize: 44, fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic', boxShadow: SHADOW }}>JK</div>
            <button style={{ position: 'absolute', bottom: 4, right: 4, width: 36, height: 36, borderRadius: 18, background: C.coral, border: `3px solid ${C.white}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="camera" size={16} color={C.white}/>
            </button>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ background: C.white, border: `2px solid ${C.navyLine}`, borderRadius: 16, padding: '6px 12px', fontSize: 12, fontWeight: 700, color: C.navy, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Icon name="photos" size={14} color={C.navy}/> Galerie
            </button>
            <button style={{ background: C.white, border: `2px solid ${C.navyLine}`, borderRadius: 16, padding: '6px 12px', fontSize: 12, fontWeight: 700, color: C.navy, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Icon name="camera" size={14} color={C.navy}/> Foto
            </button>
          </div>
        </div>
        <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <InputField label="Name" value={name} onChange={setName}/>
          <InputField label="Username" value={user} onChange={setUser} icon="profile"/>
          <InputField label="Email" value={email} onChange={setEmail} type="email"/>
          <InputField label="Stadt" value={city} onChange={setCity} icon="location"/>
          <div>
            <label style={{ display: 'block', fontSize: 14, fontWeight: 700, color: C.navy, marginBottom: 6, marginLeft: 4 }}>Bio</label>
            <textarea value={bio} onChange={(e) => setBio(e.target.value)} maxLength={140} style={{ width: '100%', minHeight: 80, background: C.white, borderRadius: 16, border: `2px solid transparent`, padding: 14, fontFamily: 'Urbanist', fontSize: 15, color: C.navy, boxShadow: SHADOW, resize: 'vertical', outline: 'none', boxSizing: 'border-box' }}/>
            <div style={{ textAlign: 'right', fontSize: 11, color: C.navySoft, marginTop: 4 }}>{bio.length}/140</div>
          </div>
          <div>
            <label style={{ display: 'block', fontSize: 14, fontWeight: 700, color: C.navy, marginBottom: 8, marginLeft: 4 }}>Stil</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {styles.map((s) => (
                <button key={s} onClick={() => setStyle(s)} style={{ padding: '8px 14px', borderRadius: 18, border: `2px solid ${style === s ? C.coral : C.navyLine}`, background: style === s ? C.coral : C.white, color: style === s ? C.white : C.navy, fontFamily: 'Urbanist', fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>{s}</button>
              ))}
            </div>
          </div>
          <div style={{ background: C.white, borderRadius: 14, padding: 14, boxShadow: SHADOW, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: C.navy }}>Öffentliches Profil</div>
              <div style={{ fontSize: 12, color: C.navySoft }}>Andere können dein Portfolio sehen</div>
            </div>
            <button onClick={() => setPub(!pub)} style={{ width: 52, height: 30, borderRadius: 15, background: pub ? C.coral : C.navyLine, border: 'none', position: 'relative', cursor: 'pointer' }}>
              <div style={{ position: 'absolute', top: 3, left: pub ? 25 : 3, width: 24, height: 24, borderRadius: 12, background: C.white, transition: 'left .15s' }}/>
            </button>
          </div>
          <div>
            <label style={{ display: 'block', fontSize: 14, fontWeight: 700, color: C.navy, marginBottom: 8, marginLeft: 4 }}>Social Links</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: 'Instagram', val: '@jonas.paint', color: '#E1306C' },
                { name: 'TikTok', val: '@jonaspaint', color: '#000' },
                { name: 'Website', val: 'jonas-paint.de', color: C.navy },
              ].map((s) => (
                <div key={s.name} style={{ background: C.white, borderRadius: 14, padding: '10px 14px', boxShadow: SHADOW, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 16, background: s.color }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: C.navy }}>{s.name}</div>
                    <div style={{ fontSize: 12, color: C.navySoft }}>{s.val}</div>
                  </div>
                  <Icon name="edit" size={16} color={C.navySoft}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// KI Assistant — canned replies (no live API in static prototype)
// ─────────────────────────────────────────────────────────────────────────
const KI_REPLIES = {
  default: 'Klar, dabei helfe ich dir gerne. Soll ich das gleich als Projekt anlegen?',
  crew: 'Top Idee. Plane: 30m² Wand, 5 Crew-Slots, Treffen Samstag 14 Uhr. Materialliste schlage ich aus deinem Bestand vor.',
  '30': 'Für 30m² rechne grob: 14 Dosen Hauptfarbe, 4 Outline, 3 Highlights und 1L Tiefgrund. Möchtest du eine Bestellliste?',
  farben: 'Aktuell trendy: Coral + Cream + Black mit Sky-Akzent. Passt zu deinem letzten Stil. Soll ich Farben in den Warenkorb legen?',
  ähnlich: 'Ich finde 3 Werke mit ähnlicher Palette in deiner Stadt. Tippe „Spots“ an, um sie auf der Karte zu sehen.',
};
function pickReply(text) {
  const q = text.toLowerCase();
  if (q.includes('crew') || q.includes('treffen')) return KI_REPLIES.crew;
  if (q.includes('30') || q.includes('m²') || q.includes('m2')) return KI_REPLIES['30'];
  if (q.includes('farb')) return KI_REPLIES.farben;
  if (q.includes('ähnlich') || q.includes('werke')) return KI_REPLIES.ähnlich;
  return KI_REPLIES.default;
}

function KIAssistantScreen() {
  const { back } = useNav();
  const [input, setInput] = useState('');
  const [msgs, setMsgs] = useState([
    { from: 'ki', t: 'Hi Jonas! Ich bin dein Canify-Assistent. Was möchtest du heute anlegen?' },
  ]);
  const [busy, setBusy] = useState(false);
  const suggestions = ['Plane mein Crew-Treffen', 'Was brauche ich für 30m²?', 'Empfehle mir Farben', 'Ähnliche Werke finden'];
  const send = (text) => {
    if (!text.trim() || busy) return;
    setMsgs((m) => [...m, { from: 'me', t: text }]);
    setInput('');
    setBusy(true);
    setTimeout(() => {
      setMsgs((m) => [...m, { from: 'ki', t: pickReply(text) }]);
      setBusy(false);
    }, 850);
  };
  return (
    <PhoneShell showTabBar={false}>
      <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: `linear-gradient(135deg, #2F3873, ${C.navy})`, padding: '14px 16px 18px', color: C.white, position: 'relative' }}>
          <button onClick={back} style={{ position: 'absolute', top: 14, right: 14, width: 32, height: 32, borderRadius: 16, background: 'rgba(255,255,255,0.15)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="close" size={18} color={C.white}/>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 48, height: 48, borderRadius: 24, background: `radial-gradient(circle at 30% 30%, #F09181, ${C.coral} 70%)`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 14px rgba(230,106,91,0.5)' }}>
              <Icon name="sparkle" size={24} color={C.white} fill/>
            </div>
            <div>
              <div style={{ fontSize: 18, fontWeight: 800 }}>Canify KI</div>
              <div style={{ fontSize: 12, opacity: 0.7 }}>{busy ? 'denkt nach…' : 'online · antwortet sofort'}</div>
            </div>
          </div>
        </div>
        <div style={{ flex: 1, padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {msgs.map((m, i) => (
            <div key={i} style={{ alignSelf: m.from === 'me' ? 'flex-end' : 'flex-start', maxWidth: '82%', background: m.from === 'me' ? C.coral : C.white, color: m.from === 'me' ? C.white : C.navy, padding: '10px 14px', borderRadius: 18, borderBottomRightRadius: m.from === 'me' ? 4 : 18, borderBottomLeftRadius: m.from === 'ki' ? 4 : 18, boxShadow: SHADOW, fontSize: 14, lineHeight: 1.4 }}>{m.t}</div>
          ))}
          {busy && (
            <div style={{ alignSelf: 'flex-start', background: C.white, padding: '12px 14px', borderRadius: 18, boxShadow: SHADOW, display: 'flex', gap: 4 }}>
              {[0,1,2].map(i => <div key={i} style={{ width: 6, height: 6, borderRadius: 3, background: C.navySoft, animation: `pulse 1.2s ${i * 0.2}s infinite` }}/>)}
            </div>
          )}
        </div>
        {msgs.length < 3 && (
          <div style={{ padding: '0 16px 12px', display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none', flexShrink: 0 }}>
            {suggestions.map((s) => (
              <button key={s} onClick={() => send(s)} style={{ flexShrink: 0, padding: '8px 14px', borderRadius: 18, border: `1.5px solid ${C.coral}`, background: C.white, color: C.coral, fontFamily: 'Urbanist', fontWeight: 700, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap' }}>{s}</button>
            ))}
          </div>
        )}
        <div style={{ padding: '8px 16px 32px', background: C.white, borderTop: `1px solid ${C.navyLine}`, display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}>
          <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && send(input)} placeholder="Frag mich etwas…" style={{ flex: 1, height: 44, padding: '0 14px', borderRadius: 22, border: `1.5px solid ${C.navyLine}`, fontFamily: 'Urbanist', fontSize: 14, outline: 'none' }}/>
          <button onClick={() => send(input)} disabled={!input.trim() || busy} style={{ width: 44, height: 44, borderRadius: 22, background: input.trim() ? C.coral : C.navyLine, border: 'none', cursor: input.trim() ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="arrow_forward" size={20} color={C.white}/>
          </button>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Notifications
// ─────────────────────────────────────────────────────────────────────────
function NotificationsScreen() {
  const { back } = useNav();
  const items = [
    { type: 'like', who: 'lina_art', t: 'liked dein Werk "Crew Treffen"', when: 'jetzt', unread: true, color: C.coral },
    { type: 'comment', who: 'spray_kid', t: 'kommentierte: "Sick colors!"', when: '5m', unread: true, color: '#9B7BD8' },
    { type: 'follow', who: 'wallworks_official', t: 'folgt dir jetzt', when: '1h', unread: true, color: C.navy },
    { type: 'low', who: 'Material', t: 'Black Line 400ml ist fast leer', when: '3h', unread: false, color: '#E8B04F' },
    { type: 'event', who: 'Crew', t: 'Erinnerung: Crew Treffen morgen 14:00', when: '6h', unread: false, color: C.coral },
    { type: 'system', who: 'Canify', t: 'Achievement freigeschaltet: Color Master', when: '1d', unread: false, color: '#E8B04F' },
  ];
  const iconFor = (t) => ({ like: 'heart', comment: 'comment', follow: 'profile', low: 'spray', event: 'calendar', system: 'sparkle' }[t] || 'notifications');
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.white, padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${C.navyLine}` }}>
          <button onClick={back} style={{ border: 'none', background: 'transparent', display: 'flex', alignItems: 'center', gap: 6, color: C.navy, fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>
            <Icon name="arrow_back" size={20} color={C.navy}/>
          </button>
          <span style={{ flex: 1, fontSize: 18, fontWeight: 800, color: C.navy }}>Aktivitäten</span>
          <button style={{ border: 'none', background: 'transparent', color: C.coral, fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>Alle gelesen</button>
        </div>
        <div style={{ padding: 16 }}>
          <Label>Heute</Label>
          <div style={{ background: C.white, borderRadius: 14, marginTop: 8, boxShadow: SHADOW, overflow: 'hidden' }}>
            {items.map((n, i, arr) => (
              <div key={i} style={{ padding: 14, display: 'flex', gap: 12, borderBottom: i < arr.length - 1 ? `1px solid ${C.navyLine}` : 'none', background: n.unread ? '#FFF8F6' : 'transparent', alignItems: 'flex-start' }}>
                <div style={{ width: 40, height: 40, borderRadius: 20, background: n.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={iconFor(n.type)} size={18} color={C.white} fill/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, color: C.navy, lineHeight: 1.4 }}>
                    <span style={{ fontWeight: 800 }}>{n.who}</span> {n.t}
                  </div>
                  <div style={{ fontSize: 11, color: C.navySoft, marginTop: 2 }}>{n.when}</div>
                </div>
                {n.unread && <div style={{ width: 8, height: 8, borderRadius: 4, background: C.coral, marginTop: 6 }}/>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Statistik
// ─────────────────────────────────────────────────────────────────────────
function StatistikScreen() {
  const { back } = useNav();
  const weeks = [3, 5, 2, 4, 6, 8, 5, 7, 4, 9, 6, 8];
  const max = Math.max(...weeks);
  const colors = [
    { name: 'Coral', val: 32, color: C.coral },
    { name: 'Navy', val: 24, color: C.navy },
    { name: 'Gold', val: 18, color: '#E8B04F' },
    { name: 'Sky', val: 14, color: C.sky },
    { name: 'Black', val: 12, color: '#1A1A1A' },
  ];
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.white, padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${C.navyLine}` }}>
          <button onClick={back} style={{ border: 'none', background: 'transparent', display: 'flex', alignItems: 'center', gap: 6, color: C.navy, fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>
            <Icon name="arrow_back" size={20} color={C.navy}/>
          </button>
          <span style={{ flex: 1, fontSize: 18, fontWeight: 800, color: C.navy }}>Deine Stats</span>
        </div>
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: `linear-gradient(135deg, ${C.coral}, #E8B04F)`, borderRadius: 20, padding: 18, color: C.white, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -20, top: -20, width: 140, height: 140, borderRadius: 70, background: 'rgba(255,255,255,0.12)' }}/>
            <div style={{ fontSize: 13, fontWeight: 700, opacity: 0.9 }}>AKTUELLE STREAK</div>
            <div style={{ fontSize: 48, fontWeight: 900, lineHeight: 1, marginTop: 4, fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic' }}>14 Tage</div>
            <div style={{ fontSize: 13, marginTop: 6, opacity: 0.9 }}>Bestleistung: 28 Tage · Mach weiter!</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {[
              { t: '47', l: 'Werke', i: 'palette', c: C.coral },
              { t: '128h', l: 'Geprayt', i: 'spray', c: C.navy },
              { t: '2.3kg', l: 'Material', i: 'photos', c: '#9B7BD8' },
            ].map((s, i) => (
              <div key={i} style={{ background: C.white, borderRadius: 14, padding: 12, boxShadow: SHADOW, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <Icon name={s.i} size={18} color={s.c} fill/>
                <div style={{ fontSize: 22, fontWeight: 800, color: C.navy, lineHeight: 1 }}>{s.t}</div>
                <div style={{ fontSize: 11, color: C.navySoft, fontWeight: 600 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div style={{ background: C.white, borderRadius: 16, padding: 16, boxShadow: SHADOW }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <span style={{ fontSize: 15, fontWeight: 800, color: C.navy }}>Aktivität (12 Wochen)</span>
              <span style={{ fontSize: 12, color: C.coral, fontWeight: 700 }}>+23%</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 120 }}>
              {weeks.map((v, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{ width: '100%', height: `${(v / max) * 100}%`, background: i === weeks.length - 1 ? C.coral : C.navyLine, borderRadius: 4, minHeight: 4 }}/>
                  <span style={{ fontSize: 9, color: C.navySoft }}>{i + 1}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: C.white, borderRadius: 16, padding: 16, boxShadow: SHADOW }}>
            <div style={{ fontSize: 15, fontWeight: 800, color: C.navy, marginBottom: 14 }}>Lieblings-Farben</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {colors.map((c) => (
                <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 14, height: 14, borderRadius: 4, background: c.color }}/>
                  <span style={{ width: 60, fontSize: 13, fontWeight: 700, color: C.navy }}>{c.name}</span>
                  <div style={{ flex: 1, height: 8, borderRadius: 4, background: C.navyLine, overflow: 'hidden' }}>
                    <div style={{ width: `${c.val * 2.5}%`, height: '100%', background: c.color }}/>
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 700, color: C.navySoft, width: 32, textAlign: 'right' }}>{c.val}%</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: C.navy, borderRadius: 16, padding: 16, color: C.white, position: 'relative', overflow: 'hidden' }}>
            <div style={{ fontSize: 15, fontWeight: 800 }}>Spots-Heatmap</div>
            <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 12 }}>München · 18 Standorte</div>
            <div style={{ height: 100, position: 'relative', background: 'rgba(255,255,255,0.05)', borderRadius: 10, overflow: 'hidden' }}>
              {[[25, 30, 1], [40, 50, 0.7], [70, 35, 1], [55, 70, 0.5], [80, 60, 0.8], [30, 70, 0.6]].map((p, i) => (
                <div key={i} style={{ position: 'absolute', left: `${p[0]}%`, top: `${p[1]}%`, width: 24, height: 24, borderRadius: 12, background: C.coral, opacity: p[2], filter: 'blur(6px)' }}/>
              ))}
              {[[25, 30], [40, 50], [70, 35], [55, 70], [80, 60], [30, 70]].map((p, i) => (
                <div key={`d${i}`} style={{ position: 'absolute', left: `${p[0]}%`, top: `${p[1]}%`, width: 6, height: 6, borderRadius: 3, background: C.cream, transform: 'translate(-50%,-50%)' }}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Settings
// ─────────────────────────────────────────────────────────────────────────
function SettingsScreen() {
  const { back } = useNav();
  const [dark, setDark] = useState(false);
  const [notif, setNotif] = useState(true);
  const [loc, setLoc] = useState(true);
  return (
    <PhoneShell>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ height: 53 }}/>
        <div style={{ background: C.white, padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${C.navyLine}` }}>
          <button onClick={back} style={{ border: 'none', background: 'transparent', display: 'flex', alignItems: 'center', gap: 6, color: C.navy, fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>
            <Icon name="arrow_back" size={20} color={C.navy}/>
          </button>
          <span style={{ flex: 1, fontSize: 18, fontWeight: 800, color: C.navy }}>Einstellungen</span>
        </div>
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
          {[
            { t: 'Dark Mode', sub: 'Pure Sprayer-Vibe bei Nacht', v: dark, set: setDark, i: 'palette' },
            { t: 'Push Benachrichtigungen', sub: 'Likes, Comments, Follows', v: notif, set: setNotif, i: 'notifications' },
            { t: 'Standort', sub: 'Spots in deiner Nähe finden', v: loc, set: setLoc, i: 'location' },
          ].map((row, i) => (
            <div key={i} style={{ background: C.white, borderRadius: 14, padding: 14, boxShadow: SHADOW, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 18, background: C.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={row.i} size={18} color={C.coral}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: C.navy }}>{row.t}</div>
                <div style={{ fontSize: 12, color: C.navySoft }}>{row.sub}</div>
              </div>
              <button onClick={() => row.set(!row.v)} style={{ width: 48, height: 28, borderRadius: 14, background: row.v ? C.coral : C.navyLine, border: 'none', position: 'relative', cursor: 'pointer' }}>
                <div style={{ position: 'absolute', top: 3, left: row.v ? 23 : 3, width: 22, height: 22, borderRadius: 11, background: C.white, transition: 'left .15s' }}/>
              </button>
            </div>
          ))}
          <div style={{ background: C.white, borderRadius: 14, boxShadow: SHADOW, overflow: 'hidden' }}>
            {['Sprache: Deutsch', 'Sicherheit', 'Datenschutz', 'Über Canify', 'Version 1.0.0'].map((t, i, arr) => (
              <div key={i} style={{ padding: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: i < arr.length - 1 ? `1px solid ${C.navyLine}` : 'none' }}>
                <span style={{ fontSize: 14, color: C.navy, fontWeight: 600 }}>{t}</span>
                {i < arr.length - 1 && <Icon name="chevron_right" size={16} color={C.navySoft}/>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </PhoneShell>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Router
// ─────────────────────────────────────────────────────────────────────────
function CanifyApp() {
  const { route } = useNav();
  const screens = {
    splash: <SplashScreen/>,
    welcome: <WelcomeScreen/>,
    login: <LoginScreen/>,
    home: <HomeScreen/>,
    projekte: <ProjekteScreen/>,
    projekt_detail: <ProjektDetailScreen/>,
    projekt_teilen: <ProjektTeilenScreen/>,
    material: <MaterialScreen/>,
    material_finden: <MaterialScreen/>,
    material_shop: <MaterialShopScreen/>,
    profil: <ProfilScreen/>,
    profil_edit: <ProfilEditScreen/>,
    ki_assistant: <KIAssistantScreen/>,
    notifications: <NotificationsScreen/>,
    statistik: <StatistikScreen/>,
    settings: <SettingsScreen/>,
  };
  return screens[route] || <HomeScreen/>;
}

function CanifyShowcase() {
  const screens = [
    { id: 'welcome', label: 'Welcome', el: <WelcomeScreen/> },
    { id: 'login', label: 'Login', el: <LoginScreen/> },
    { id: 'home', label: 'Home / Neues', el: <HomeScreen/> },
    { id: 'projekte', label: 'Projekte', el: <ProjekteScreen/> },
    { id: 'detail', label: 'Projekt Details', el: <ProjektDetailScreen/> },
    { id: 'teilen', label: 'Projekt teilen', el: <ProjektTeilenScreen/> },
    { id: 'material', label: 'Dein Material', el: <MaterialScreen/> },
    { id: 'shop', label: 'Material Shop', el: <MaterialShopScreen/> },
    { id: 'profil', label: 'Profil', el: <ProfilScreen/> },
    { id: 'profil_edit', label: 'Profil bearbeiten', el: <ProfilEditScreen/> },
    { id: 'ki', label: 'KI Assistent', el: <KIAssistantScreen/> },
    { id: 'notifs', label: 'Aktivitäten', el: <NotificationsScreen/> },
    { id: 'stats', label: 'Statistik', el: <StatistikScreen/> },
    { id: 'settings', label: 'Einstellungen', el: <SettingsScreen/> },
  ];
  return (
    <div style={{
      minHeight: '100vh', background: '#1B1B26',
      backgroundImage: `radial-gradient(circle at 20% 20%, rgba(230,106,91,0.12), transparent 40%), radial-gradient(circle at 80% 80%, rgba(36,43,90,0.4), transparent 50%)`,
      padding: '40px 24px 80px', fontFamily: 'Urbanist',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 8 }}>
          <CanifyLogo size={40} dark/>
          <h1 style={{ fontFamily: '"Grandstander", Urbanist', fontStyle: 'italic', fontWeight: 900,
            fontSize: 48, color: C.white, margin: 0, letterSpacing: '-0.02em' }}>Canify</h1>
          <span style={{ fontSize: 14, color: 'rgba(255,255,255,.6)', fontWeight: 600, marginLeft: 8 }}>complete UI · {screens.length} screens</span>
        </div>
        <p style={{ color: 'rgba(255,255,255,.6)', maxWidth: 720, margin: '0 0 32px', lineHeight: 1.5 }}>
          Vollständig ausgearbeitete Oberfläche. Tippe auf jedes Frame oder benutze die Tab-Bar / Buttons, um durch die App zu navigieren.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, 410px)', gap: 32, justifyContent: 'center' }}>
          {screens.map((s) => (
            <div key={s.id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ color: C.white, fontWeight: 700, fontSize: 16, paddingLeft: 4 }}>{s.label}</div>
              <div style={{ borderRadius: 40, overflow: 'hidden',
                boxShadow: '0 30px 60px rgba(0,0,0,0.4), 0 0 0 8px #2A2A36, 0 0 0 9px #444',
                width: 390, height: 844, background: C.bg, position: 'relative' }}>
                {s.el}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function App() {
  const [mode, setMode] = useState('app');
  const { reset } = useNav();
  const isMobile = useIsMobile();

  // Auf Mobile: kein Toggle, immer Vollbild-Prototyp
  if (isMobile) {
    return (
      <div style={{ position: 'relative', width: '100%', height: '100dvh', background: C.bg }}>
        <CanifyApp/>
      </div>
    );
  }

  const Toggle = (
    <div style={{
      position: 'fixed', top: 16, right: 16,
      zIndex: 100, display: 'flex', gap: 8,
      background: 'rgba(36,43,90,0.85)',
      padding: 6, borderRadius: 24, backdropFilter: 'blur(8px)',
    }}>
      <button onClick={() => { setMode('app'); reset('home'); }} style={{
        padding: '8px 14px', borderRadius: 18, border: 'none',
        background: mode === 'app' ? C.coral : 'transparent', color: C.white,
        fontFamily: 'Urbanist', fontWeight: 700, fontSize: 13, cursor: 'pointer',
      }}>Prototyp</button>
      <button onClick={() => setMode('showcase')} style={{
        padding: '8px 14px', borderRadius: 18, border: 'none',
        background: mode === 'showcase' ? C.coral : 'transparent', color: C.white,
        fontFamily: 'Urbanist', fontWeight: 700, fontSize: 13, cursor: 'pointer',
      }}>Alle Screens</button>
    </div>
  );

  if (mode === 'showcase') {
    return (
      <div style={{ position: 'relative' }}>
        {Toggle}
        <CanifyShowcase/>
      </div>
    );
  }

  return (
    <div style={{ position: 'relative' }}>
      {Toggle}
      <div style={{
        minHeight: '100vh', background: '#1B1B26',
        backgroundImage: `radial-gradient(circle at 20% 20%, rgba(230,106,91,0.12), transparent 40%), radial-gradient(circle at 80% 80%, rgba(36,43,90,0.4), transparent 50%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40,
      }}>
        <div style={{ borderRadius: 50, overflow: 'hidden',
          boxShadow: '0 30px 60px rgba(0,0,0,0.5), 0 0 0 10px #2A2A36, 0 0 0 11px #444',
          width: 390, height: 844, background: C.bg, position: 'relative' }}>
          <CanifyApp/>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavProvider><App/></NavProvider>);