// DemosC.jsx — Rows 4-6 components
// FlipCard, WorkTimeline, SkillBars, CommandPalette, NotificationStack, FooterPreview, AnimatedNav

const { useState, useEffect, useRef } = React;

/* ── Flip Profile Card ── */
function FlipCard({ accent }) {
  const [flipped, setFlipped] = useState(false);
  return (
    <div onMouseEnter={() => setFlipped(true)} onMouseLeave={() => setFlipped(false)}
      style={{ width: 200, height: 130, perspective: 800, cursor: 'pointer' }}>
      <div style={{
        width: '100%', height: '100%', position: 'relative',
        transformStyle: 'preserve-3d',
        transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
        transition: 'transform 0.6s cubic-bezier(0.23,1,0.32,1)',
      }}>
        {/* Front */}
        <div style={{
          position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
          background: '#1c1814', borderRadius: 16,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            border: `2px solid ${accent}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <span style={{ fontFamily: '"DM Serif Display",serif', color: '#f7f3ee', fontSize: 16, fontStyle: 'italic' }}>KK</span>
          </div>
          <div style={{ fontFamily: '"DM Serif Display",serif', color: '#f7f3ee', fontSize: 14 }}>Katie Kim</div>
          <div style={{ fontFamily: 'DM Sans,sans-serif', color: '#b5a89a', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Hover to flip</div>
        </div>
        {/* Back */}
        <div style={{
          position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)',
          background: `linear-gradient(145deg, ${accent} 0%, #5a3620 100%)`,
          borderRadius: 16, padding: '16px 18px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6,
        }}>
          <div style={{ fontFamily: '"DM Serif Display",serif', color: '#fff', fontSize: 13, lineHeight: 1.3 }}>
            Creative Technologist
          </div>
          <div style={{ fontFamily: 'DM Sans,sans-serif', color: '#f7f3ee99', fontSize: 11, lineHeight: 1.5 }}>
            Design · Frontend · Motion
          </div>
          <div style={{
            marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 6,
            background: '#ffffff18', borderRadius: 8, padding: '5px 10px',
            width: 'fit-content',
          }}>
            <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#6ef06e' }} />
            <span style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 10, color: '#fff', letterSpacing: '0.05em' }}>Available for work</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Work Timeline ── */
function WorkTimeline({ accent }) {
  const items = [
    { year: '2024', role: 'Lead Creative Tech', co: 'Studio Collective' },
    { year: '2023', role: 'UX + Frontend', co: 'Contra / Freelance' },
    { year: '2022', role: 'Design Systems', co: 'Agency Partner' },
  ];
  const [shown, setShown] = useState([]);
  useEffect(() => {
    items.forEach((_, i) => setTimeout(() => setShown(s => [...s, i]), i * 180 + 100));
  }, []);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, width: 220 }}>
      {items.map((item, i) => (
        <div key={i} style={{
          display: 'flex', gap: 14, paddingBottom: i < items.length - 1 ? 16 : 0,
          opacity: shown.includes(i) ? 1 : 0,
          transform: shown.includes(i) ? 'translateX(0)' : 'translateX(-10px)',
          transition: 'all 0.4s cubic-bezier(0.23,1,0.32,1)',
        }}>
          {/* spine */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: i === 0 ? accent : '#d5c9be', marginTop: 4 }} />
            {i < items.length - 1 && <div style={{ width: 1, flex: 1, background: '#e5dcd3', marginTop: 4 }} />}
          </div>
          <div style={{ paddingBottom: i < items.length - 1 ? 4 : 0 }}>
            <div style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 10, color: accent, fontWeight: 700, letterSpacing: '0.07em', marginBottom: 2 }}>{item.year}</div>
            <div style={{ fontFamily: '"DM Serif Display",serif', fontSize: 14, color: '#1c1814', lineHeight: 1.2 }}>{item.role}</div>
            <div style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 11, color: '#9a8c82', marginTop: 2 }}>{item.co}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ── Skill Bars ── */
function SkillBars({ accent }) {
  const skills = [
    { label: 'React / Frontend', pct: 92 },
    { label: 'Motion Design', pct: 85 },
    { label: 'UX Strategy', pct: 88 },
    { label: 'Design Systems', pct: 80 },
  ];
  const [animate, setAnimate] = useState(false);
  useEffect(() => { setTimeout(() => setAnimate(true), 200); }, []);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 220 }}>
      {skills.map((s, i) => (
        <div key={s.label}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
            <span style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 12, color: '#1c1814' }}>{s.label}</span>
            <span style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 11, color: accent, fontWeight: 600 }}>{s.pct}%</span>
          </div>
          <div style={{ height: 4, background: '#efe8df', borderRadius: 99, overflow: 'hidden' }}>
            <div style={{
              height: '100%', borderRadius: 99,
              background: `linear-gradient(90deg, ${accent} 0%, #c49070 100%)`,
              width: animate ? `${s.pct}%` : '0%',
              transition: `width 0.9s ${i * 0.12}s cubic-bezier(0.23,1,0.32,1)`,
            }} />
          </div>
        </div>
      ))}
    </div>
  );
}

/* ── Command Palette ── */
function CommandPalette({ accent }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const inputRef = useRef(null);
  const all = ['View portfolio', 'Book a call', 'Download resume', 'About Katie', 'Case studies', 'Contact'];
  const results = q ? all.filter(a => a.toLowerCase().includes(q.toLowerCase())) : all;

  function toggle() {
    setOpen(o => !o);
    setQ('');
    if (!open) setTimeout(() => inputRef.current?.focus(), 50);
  }

  return (
    <div style={{ width: 260, fontFamily: 'DM Sans,sans-serif' }}>
      <button onClick={toggle} style={{
        width: '100%', padding: '10px 14px',
        borderRadius: 10, border: '1px solid #e5dcd3',
        background: '#fff', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: '#9a8c82', fontSize: 13, fontFamily: 'DM Sans,sans-serif',
        boxShadow: '0 2px 8px #1c181408',
        transition: 'border-color 0.2s, box-shadow 0.2s',
      }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = accent; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5dcd3'; }}
      >
        <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span style={{ fontSize: 14 }}>⌘</span> Search…
        </span>
        <kbd style={{
          background: '#efe8df', borderRadius: 5, padding: '2px 7px',
          fontSize: 10, color: '#9a8c82', fontFamily: 'DM Sans,sans-serif',
        }}>K</kbd>
      </button>

      {open && (
        <div style={{
          marginTop: 6, background: '#fff', borderRadius: 12,
          border: '1px solid #e5dcd3', boxShadow: '0 8px 32px #1c181418',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid #f0ece8', display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ color: '#b5a89a', fontSize: 14 }}>⌘</span>
            <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)}
              placeholder="Type a command…"
              style={{
                flex: 1, border: 'none', outline: 'none', fontSize: 13,
                color: '#1c1814', background: 'transparent', fontFamily: 'DM Sans,sans-serif',
              }} />
            <button onClick={toggle} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#b5a89a', fontSize: 16 }}>×</button>
          </div>
          <div style={{ maxHeight: 160, overflowY: 'auto' }}>
            {results.map((r, i) => (
              <div key={r} style={{
                padding: '9px 14px', fontSize: 13, color: '#1c1814',
                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10,
                transition: 'background 0.15s',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = accent + '12'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
              >
                <span style={{ color: '#b5a89a', fontSize: 12 }}>→</span> {r}
              </div>
            ))}
            {results.length === 0 && (
              <div style={{ padding: '14px', fontSize: 12, color: '#b5a89a', textAlign: 'center' }}>No results</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

/* ── Notification Stack ── */
function NotificationStack({ accent }) {
  const base = [
    { id: 1, title: 'New inquiry', body: 'Someone viewed your Contra profile.', icon: '👁' },
    { id: 2, title: 'Project booked', body: 'Katie Kim Studio — contract signed.', icon: '✅' },
    { id: 3, title: 'Message', body: '"Love the motion work on slide 3…"', icon: '💬' },
  ];
  const [toasts, setToasts] = useState(base);
  const [expanded, setExpanded] = useState(false);

  function dismiss(id) { setToasts(t => t.filter(x => x.id !== id)); }
  function reset() { setToasts(base); setExpanded(false); }

  return (
    <div style={{ width: 260 }}>
      <div style={{ position: 'relative', height: expanded ? 'auto' : 80 }}>
        {toasts.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <button onClick={reset} style={{
              background: 'none', border: `1px solid ${accent}`, color: accent,
              borderRadius: 8, padding: '6px 14px', fontSize: 12,
              fontFamily: 'DM Sans,sans-serif', fontWeight: 600, cursor: 'pointer',
            }}>Reset ↺</button>
          </div>
        ) : (
          <div onClick={() => setExpanded(e => !e)} style={{ cursor: 'pointer' }}>
            {toasts.map((t, i) => {
              const offset = expanded ? 0 : i * 6;
              const scale = expanded ? 1 : 1 - i * 0.035;
              return (
                <div key={t.id} style={{
                  background: '#fff', border: '1px solid #e5dcd3',
                  borderRadius: 12, padding: '10px 12px',
                  display: 'flex', alignItems: 'flex-start', gap: 10,
                  boxShadow: '0 2px 12px #1c181410',
                  position: expanded ? 'relative' : 'absolute',
                  top: expanded ? 'auto' : offset,
                  left: 0, right: 0,
                  transform: `scale(${scale})`,
                  transformOrigin: 'top center',
                  zIndex: toasts.length - i,
                  marginBottom: expanded ? 6 : 0,
                  transition: 'all 0.4s cubic-bezier(0.23,1,0.32,1)',
                }}>
                  <span style={{ fontSize: 18, lineHeight: 1 }}>{t.icon}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 12, fontWeight: 600, color: '#1c1814' }}>{t.title}</div>
                    <div style={{ fontFamily: 'DM Sans,sans-serif', fontSize: 11, color: '#9a8c82', marginTop: 2 }}>{t.body}</div>
                  </div>
                  {expanded && (
                    <button onClick={e => { e.stopPropagation(); dismiss(t.id); }}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#b5a89a', fontSize: 14, padding: 0 }}>×</button>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
      {toasts.length > 0 && (
        <div style={{
          textAlign: 'center', marginTop: expanded ? 10 : 72,
          fontFamily: 'DM Sans,sans-serif', fontSize: 11, color: '#b5a89a',
        }}>
          {expanded ? 'Click to collapse' : `${toasts.length} notifications — click to expand`}
        </div>
      )}
    </div>
  );
}

/* ── Footer Preview ── */
function FooterPreview({ accent }) {
  const links = ['Work', 'About', 'Process', 'Contact'];
  const [hov, setHov] = useState(null);

  return (
    <div style={{
      width: 280, background: '#1c1814', borderRadius: 14,
      padding: '20px 22px', fontFamily: 'DM Sans,sans-serif',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <div>
          <div style={{ fontFamily: '"DM Serif Display",serif', color: '#f7f3ee', fontSize: 17 }}>Katie Kim</div>
          <div style={{ fontSize: 10, color: '#5a4a3e', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 3 }}>Creative Technologist</div>
        </div>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          border: `1.5px solid ${accent}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ color: accent, fontSize: 14 }}>↗</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 16 }}>
        {links.map(l => (
          <span key={l} onMouseEnter={() => setHov(l)} onMouseLeave={() => setHov(null)}
            style={{
              fontSize: 12, cursor: 'pointer',
              color: hov === l ? accent : '#7a6a60',
              borderBottom: `1px solid ${hov === l ? accent : 'transparent'}`,
              paddingBottom: 1,
              transition: 'color 0.2s, border-color 0.2s',
            }}>{l}</span>
        ))}
      </div>
      <div style={{
        borderTop: '1px solid #2c2018', paddingTop: 12,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{ fontSize: 10, color: '#5a4a3e' }}>© 2026 Katie Kim</span>
        <span style={{ fontSize: 10, color: accent, letterSpacing: '0.05em' }}>Available ✦</span>
      </div>
    </div>
  );
}

/* ── Animated Nav ── */
function AnimatedNav({ accent }) {
  const items = ['Work', 'Studio', 'Journal', 'Contact'];
  const [hov, setHov] = useState(null);
  const [active, setActive] = useState('Work');

  return (
    <div style={{
      width: 280, background: '#f7f3ee', borderRadius: 14,
      border: '1px solid #e5dcd3', overflow: 'hidden',
    }}>
      {/* top bar */}
      <div style={{
        padding: '10px 16px', borderBottom: '1px solid #e5dcd3',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ fontFamily: '"DM Serif Display",serif', fontSize: 14, color: '#1c1814' }}>Katie Kim</span>
        <div style={{ display: 'flex', gap: 4 }}>
          {[0, 1, 2].map(i => <div key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: '#e5dcd3' }} />)}
        </div>
      </div>
      {/* nav items */}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {items.map(item => (
          <div key={item}
            onMouseEnter={() => setHov(item)}
            onMouseLeave={() => setHov(null)}
            onClick={() => setActive(item)}
            style={{
              padding: '11px 18px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              cursor: 'pointer',
              background: active === item ? accent + '12' : hov === item ? '#f0ece8' : 'transparent',
              borderLeft: `2px solid ${active === item ? accent : 'transparent'}`,
              transition: 'all 0.2s',
            }}>
            <span style={{
              fontFamily: 'DM Sans,sans-serif', fontSize: 13,
              fontWeight: active === item ? 600 : 400,
              color: active === item ? accent : '#1c1814',
              transition: 'color 0.2s',
            }}>{item}</span>
            <span style={{
              fontSize: 12, color: active === item ? accent : '#b5a89a',
              opacity: hov === item || active === item ? 1 : 0,
              transform: hov === item || active === item ? 'translateX(0)' : 'translateX(-6px)',
              transition: 'all 0.2s',
            }}>→</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FlipCard, WorkTimeline, SkillBars, CommandPalette, NotificationStack, FooterPreview, AnimatedNav });