/* global React */

// =====================================================================
// SHARED MOCK COMPONENTS
// Bookink app screens rendered as React for use across landing sections.
// =====================================================================

const { useState, useEffect } = React;

// ---------- Tiny inline SVG icon system (SF Symbols / Lucide style) ----------
const Icon = ({ name, size = 18, stroke = 1.5, color = "currentColor", style }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color, strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
    style,
  };
  const paths = {
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></>,
    message: <path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.6-.8L3 21l1.9-5.7A8.38 8.38 0 0 1 4 11.5a8.5 8.5 0 0 1 17 0z" />,
    sparkles: <><path d="M12 3.5 13.4 8.6 18.5 10 13.4 11.4 12 16.5 10.6 11.4 5.5 10 10.6 8.6 Z"/><path d="M18.5 3.5 19.1 5.4 21 6 19.1 6.6 18.5 8.5 17.9 6.6 16 6 17.9 5.4 Z"/><path d="M19 15.5 19.4 17.1 21 17.5 19.4 17.9 19 19.5 18.6 17.9 17 17.5 18.6 17.1 Z"/></>,
    zap: <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />,
    chart: <><path d="M3 3v18h18"/><rect x="7" y="13" width="3" height="6" rx="1"/><rect x="12" y="9" width="3" height="10" rx="1"/><rect x="17" y="5" width="3" height="14" rx="1"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    filter: <><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="14" y2="12"/><line x1="4" y1="18" x2="10" y2="18"/><circle cx="17" cy="12" r="2" fill={color}/><circle cx="13" cy="18" r="2" fill={color}/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    chevronLeft: <path d="m15 18-6-6 6-6"/>,
    chevronRight: <path d="m9 18 6-6-6-6"/>,
    chevronDown: <path d="m6 9 6 6 6-6"/>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
    check: <path d="M20 6 9 17l-5-5"/>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    edit: <><path d="M3 21l1-5L17 3l4 4L8 20l-5 1z"/><path d="M14 6l4 4"/></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    play: <polygon points="5 3 19 12 5 21 5 3"/>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    whatsapp: <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.3 0-.5 0-.1-.6-1.5-.9-2.1-.2-.6-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1.1 2.8 1.2 3 .1.2 2.1 3.2 5.1 4.5 1.8.8 2.5.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3.1 1.3 4.7 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    moreH: <><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>,
    send: <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    maximize: <><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></>,
    trendUp: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,
    creditCard: <><rect x="2" y="5" width="20" height="15" rx="2.5"/><line x1="2" y1="10" x2="22" y2="10"/><rect x="5" y="14" width="5" height="2.5" rx="0.6"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    link: <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
};

// ---------- Logo ----------
const BookinkLogo = ({ color = "#0a0a0a", height = 22 }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height }}>
    <svg width={height * 0.78} height={height} viewBox="0 0 26 30" fill="none">
      <path d="M13 1 C 18 8, 23 14, 23 20 C 23 25, 18 29, 13 29 C 8 29, 3 25, 3 20 C 3 14, 8 8, 13 1 Z" fill={color}/>
      <circle cx="9.5" cy="19" r="1.4" fill="white"/>
      <circle cx="16.5" cy="19" r="1.4" fill="white"/>
      <path d="M10 22.5 Q 13 24, 16 22.5" stroke="white" strokeWidth="1.3" fill="none" strokeLinecap="round"/>
    </svg>
    <span style={{
      fontSize: height * 0.75,
      fontWeight: 700,
      letterSpacing: '-0.04em',
      color,
      lineHeight: 1,
    }}>bookink</span>
  </div>
);

// =====================================================================
// PHONE FRAME
// =====================================================================
const PhoneFrame = ({ children, width = 320, height = 660, glow = false, scale = 1, accent = "#FF3B30" }) => (
  <div
    style={{
      width: width * scale,
      height: height * scale,
      position: 'relative',
      flexShrink: 0,
    }}
  >
    {glow && (
      <div
        style={{
          position: 'absolute',
          inset: -40,
          background: `radial-gradient(ellipse at center, ${accent}40 0%, transparent 60%)`,
          filter: 'blur(40px)',
          pointerEvents: 'none',
          zIndex: 0,
        }}
      />
    )}
    <div
      style={{
        width,
        height,
        background: '#0a0a0a',
        borderRadius: 44,
        padding: 8,
        boxShadow:
          '0 0 0 1.5px rgba(255,255,255,0.15), 0 60px 120px -20px rgba(0,0,0,0.6), 0 30px 60px -20px rgba(0,0,0,0.4)',
        position: 'relative',
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        zIndex: 1,
      }}
    >
      <div
        style={{
          width: '100%', height: '100%',
          background: '#ffffff',
          borderRadius: 36,
          overflow: 'hidden',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {/* Notch */}
        <div style={{
          position: 'absolute',
          top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 30,
          background: '#0a0a0a',
          borderRadius: 100,
          zIndex: 20,
        }}/>
        {/* Status Bar */}
        <div style={{
          height: 50,
          padding: '18px 28px 8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          fontSize: 14,
          fontWeight: 600,
          color: '#0a0a0a',
          flexShrink: 0,
        }}>
          <span>9:41</span>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <svg width="18" height="11" viewBox="0 0 18 11" fill="none"><rect x="0" y="6" width="3" height="5" rx="0.5" fill="#0a0a0a"/><rect x="5" y="4" width="3" height="7" rx="0.5" fill="#0a0a0a"/><rect x="10" y="2" width="3" height="9" rx="0.5" fill="#0a0a0a"/><rect x="15" y="0" width="3" height="11" rx="0.5" fill="#0a0a0a"/></svg>
            <svg width="16" height="11" viewBox="0 0 16 11" fill="none"><path d="M8 2 C 5 2, 3 4, 1 6 L 8 11 L 15 6 C 13 4, 11 2, 8 2 Z" fill="#0a0a0a"/></svg>
            <div style={{ width: 26, height: 12, border: '1.2px solid #0a0a0a', borderRadius: 3, position: 'relative', padding: 1 }}>
              <div style={{ width: '80%', height: '100%', background: '#0a0a0a', borderRadius: 1 }}/>
              <div style={{ position: 'absolute', right: -3, top: 3, width: 2, height: 6, background: '#0a0a0a', borderRadius: 1 }}/>
            </div>
          </div>
        </div>
        {/* Content */}
        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
          {children}
        </div>
      </div>
    </div>
  </div>
);

// =====================================================================
// LEAD CARDS (used in Opportunities mock)
// =====================================================================

// Stylized "tattoo" placeholder — moody dark gradients with motif suggestion
const TattooPlaceholder = ({ motif = 0, label }) => {
  const motifs = [
    // Wave / dragon-ish flowing curves
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="0" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><linearGradient id="g0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#1a1a1a"/><stop offset="50%" stopColor="#3a3a3a"/><stop offset="100%" stopColor="#0a0a0a"/></linearGradient></defs>
      <rect width="100" height="140" fill="url(#g0)"/>
      <path d="M-10 80 Q 20 50, 50 70 T 110 60" stroke="rgba(255,255,255,0.15)" strokeWidth="1" fill="none"/>
      <path d="M-10 95 Q 25 65, 55 85 T 115 75" stroke="rgba(255,255,255,0.10)" strokeWidth="0.8" fill="none"/>
      <path d="M-10 110 Q 30 80, 60 100 T 120 90" stroke="rgba(255,255,255,0.08)" strokeWidth="0.6" fill="none"/>
    </svg>,
    // Geometric circle/triangle
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="1" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><linearGradient id="g1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#222"/><stop offset="100%" stopColor="#0a0a0a"/></linearGradient></defs>
      <rect width="100" height="140" fill="url(#g1)"/>
      <circle cx="50" cy="70" r="32" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="0.8"/>
      <circle cx="50" cy="70" r="22" fill="none" stroke="rgba(255,255,255,0.14)" strokeWidth="0.6"/>
      <polygon points="50,45 68,82 32,82" fill="none" stroke="rgba(255,255,255,0.20)" strokeWidth="0.8"/>
    </svg>,
    // Floral/realism dotwork
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="2" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><radialGradient id="g2"><stop offset="0%" stopColor="#444"/><stop offset="100%" stopColor="#0a0a0a"/></radialGradient></defs>
      <rect width="100" height="140" fill="url(#g2)"/>
      {Array.from({ length: 60 }).map((_, i) => {
        const a = i * 0.6; const r = 5 + i * 0.8;
        return <circle key={i} cx={50 + Math.cos(a) * r} cy={70 + Math.sin(a) * r} r={0.4 + (i % 3) * 0.3} fill="rgba(255,255,255,0.4)"/>
      })}
    </svg>,
    // Linework
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="3" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><linearGradient id="g3" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#2a2a2a"/><stop offset="100%" stopColor="#0a0a0a"/></linearGradient></defs>
      <rect width="100" height="140" fill="url(#g3)"/>
      <path d="M30 30 Q 50 50, 30 80 Q 50 110, 70 90 Q 90 70, 70 50 Q 50 30, 50 70" stroke="rgba(255,255,255,0.25)" strokeWidth="0.7" fill="none"/>
      <path d="M40 45 Q 55 60, 45 80" stroke="rgba(255,255,255,0.15)" strokeWidth="0.5" fill="none"/>
    </svg>,
    // Tiger/beast-ish
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="4" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><linearGradient id="g4" x1="0" x2="1" y1="0" y2="0"><stop offset="0%" stopColor="#1a1a1a"/><stop offset="50%" stopColor="#3a3a3a"/><stop offset="100%" stopColor="#1a1a1a"/></linearGradient></defs>
      <rect width="100" height="140" fill="url(#g4)"/>
      {Array.from({ length: 14 }).map((_, i) => (
        <path key={i} d={`M${i * 8} ${20 + (i % 3) * 15} Q ${i * 8 + 4} ${40 + (i % 3) * 10}, ${i * 8} ${60 + (i % 3) * 8}`} stroke="rgba(255,255,255,0.20)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      ))}
    </svg>,
    // Snake/curl
    <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid slice" key="5" style={{ width:'100%', height:'100%', position:'absolute', inset:0 }}>
      <defs><linearGradient id="g5" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#0a0a0a"/><stop offset="50%" stopColor="#2a2a2a"/><stop offset="100%" stopColor="#0a0a0a"/></linearGradient></defs>
      <rect width="100" height="140" fill="url(#g5)"/>
      <path d="M20 20 Q 80 40, 40 60 Q 0 80, 60 100 Q 100 120, 50 130" stroke="rgba(255,255,255,0.22)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
      <path d="M20 25 Q 75 45, 45 65" stroke="rgba(255,255,255,0.12)" strokeWidth="0.6" fill="none"/>
    </svg>,
  ];
  return (
    <div style={{ position:'relative', width:'100%', height:'100%', background:'#0a0a0a', overflow:'hidden' }}>
      {motifs[motif % motifs.length]}
      {label && (
        <div style={{ position:'absolute', bottom: 6, left: 8, fontSize: 7, color:'rgba(255,255,255,0.45)', letterSpacing: 1, textTransform:'uppercase', fontWeight: 500 }}>
          {label}
        </div>
      )}
    </div>
  );
};

// Small lead card used in Opportunities grid
const LeadCard = ({ name, meta, badge, badgeColor, statusColor, motif, ig }) => (
  <div style={{
    background: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    boxShadow: '0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04)',
  }}>
    <div style={{ position:'relative', width:'100%', height: 110 }}>
      <TattooPlaceholder motif={motif}/>
      <div style={{
        position:'absolute', top: 6, right: 6,
        width: 8, height: 8, borderRadius: '50%',
        background: statusColor,
        border: '1.5px solid white',
      }}/>
    </div>
    <div style={{ padding: 10 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 3 }}>
        <div style={{
          width: 18, height: 18, borderRadius: '50%',
          background: ig || 'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)',
          padding: 1.2,
        }}>
          <div style={{ width:'100%', height:'100%', borderRadius:'50%', border:'1.2px solid white', background:'#444' }}/>
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color:'#111', lineHeight: 1.1 }}>{name}</div>
      </div>
      <div style={{ fontSize: 9, color:'#999', marginBottom: 4 }}>{meta}</div>
      {badge && (
        <div style={{
          display:'inline-block',
          padding:'2px 6px',
          borderRadius: 100,
          fontSize: 8,
          fontWeight: 600,
          background: badgeColor.bg,
          color: badgeColor.fg,
        }}>{badge}</div>
      )}
    </div>
  </div>
);

// =====================================================================
// SCREEN: Opportunities
// =====================================================================
const OpportunitiesScreen = ({ accent = "#FF3B30" }) => {
  const leads = [
    { name:'John S.', meta:'Realism · Forearm', motif: 0, badge:'New', badgeColor:{bg:'#111',fg:'#fff'}, statusColor: accent, ig:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)' },
    { name:'Emma B.', meta:'Floral · Thigh', motif: 2, badge:'Qualified', badgeColor:{bg:'#E8F8ED',fg:'#1A7A37'}, statusColor:'#34C759' },
    { name:'Lucas W.', meta:'Geometric · Arm', motif: 1, badge:'Booked', badgeColor:{bg:'#FFFBE6',fg:'#B38600'}, statusColor:'#FFCC00' },
    { name:'Olivia J.', meta:'Snake · Spine', motif: 5, badge:'Proposal', badgeColor:{bg:'#FFF4E6',fg:'#B36500'}, statusColor:'#FF9500' },
    { name:'Marcus T.', meta:'Tiger · Chest', motif: 4, badge:'New', badgeColor:{bg:'#111',fg:'#fff'}, statusColor: accent },
    { name:'Sofia K.', meta:'Linework · Ribs', motif: 3, badge:'Qualified', badgeColor:{bg:'#E8F8ED',fg:'#1A7A37'}, statusColor:'#34C759' },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fafafa' }}>
      {/* Header */}
      <div style={{ padding: '8px 20px 14px', background:'#fff', borderBottom:'1px solid #f0f0f0' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 12 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color:'#0a0a0a', letterSpacing:'-0.02em' }}>Opportunities</div>
          <div style={{ display:'flex', gap: 8 }}>
            <div style={{ width: 32, height: 32, borderRadius: 10, background:'#f2f2f2', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="search" size={16} color="#0a0a0a"/>
            </div>
            <div style={{ width: 32, height: 32, borderRadius: 10, background:'#f2f2f2', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="filter" size={16} color="#0a0a0a"/>
            </div>
          </div>
        </div>
        {/* Pipeline tabs */}
        <div style={{ display:'flex', gap: 6, overflowX:'auto' }}>
          {[
            { label:'All', count: 26, active: true },
            { label:'New', count: 12 },
            { label:'Qualified', count: 8 },
            { label:'Booked', count: 5 },
          ].map((t, i) => (
            <div key={i} style={{
              padding:'6px 12px',
              borderRadius: 100,
              fontSize: 11,
              fontWeight: 600,
              background: t.active ? '#0a0a0a' : '#f2f2f2',
              color: t.active ? '#fff' : '#666',
              display:'flex',
              gap: 6,
              alignItems:'center',
              flexShrink: 0,
            }}>
              <span>{t.label}</span>
              <span style={{ fontSize: 10, opacity: 0.7 }}>{t.count}</span>
            </div>
          ))}
        </div>
      </div>
      {/* Grid */}
      <div style={{ flex: 1, overflow: 'hidden', padding: 12 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
          {leads.map((l, i) => <LeadCard key={i} {...l} />)}
        </div>
      </div>
      {/* Bottom Nav */}
      <BottomNav active={2} />
    </div>
  );
};

// =====================================================================
// BOTTOM NAV (mock)
// =====================================================================
const BottomNav = ({ active = 2 }) => {
  const items = [
    { name:'calendar', label:'Calendar' },
    { name:'message', label:'Messages' },
    { name:'sparkles', label:'Opportunities', center: true },
    { name:'chart', label:'Reports' },
    { name:'settings', label:'Settings' },
  ];
  return (
    <div style={{
      height: 76,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px)',
      borderTop: '1px solid rgba(0,0,0,0.06)',
      display:'flex',
      alignItems:'flex-start',
      justifyContent:'space-around',
      padding: '10px 10px 22px',
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display:'flex', flexDirection:'column', alignItems:'center', gap: 4,
        }}>
          <Icon
            name={it.name}
            size={22}
            color={active === i ? '#0a0a0a' : '#bbb'}
            stroke={active === i ? 2 : 1.5}
          />
          <div style={{ fontSize: 9, fontWeight: active === i ? 600 : 500, color: active === i ? '#0a0a0a' : '#bbb' }}>
            {it.label}
          </div>
        </div>
      ))}
    </div>
  );
};

// =====================================================================
// SCREEN: Opportunity Detail (the AI-collected brief)
// =====================================================================
const OpportunityDetail = ({ accent = "#FF3B30" }) => (
  <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
    {/* Header */}
    <div style={{ padding:'8px 20px 12px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
      <Icon name="chevronLeft" size={22} color="#0a0a0a"/>
      <Icon name="moreH" size={22} color="#0a0a0a"/>
    </div>
    {/* Client */}
    <div style={{ padding: '0 20px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 12, marginBottom: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)', padding: 2 }}>
          <div style={{ width:'100%', height:'100%', borderRadius:'50%', border:'2px solid white', background:'#444' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 17, fontWeight: 700, color:'#0a0a0a', letterSpacing:'-0.02em' }}>John Smith</div>
          <div style={{ fontSize: 12, color:'#888' }}>@johnsmith · Instagram</div>
        </div>
        <div style={{
          padding:'4px 10px',
          borderRadius: 100,
          background:'#0a0a0a',
          color:'#fff',
          fontSize: 10,
          fontWeight: 600,
        }}>Qualified</div>
      </div>
      {/* Tattoo references */}
      <div style={{ display:'flex', gap: 6, marginBottom: 16 }}>
        {[0, 4, 3].map((m, i) => (
          <div key={i} style={{ flex: 1, height: 80, borderRadius: 8, overflow:'hidden' }}>
            <TattooPlaceholder motif={m}/>
          </div>
        ))}
        <div style={{
          flex:'0 0 50px', height: 80, borderRadius: 8,
          background:'#f2f2f2', display:'flex', alignItems:'center', justifyContent:'center',
          fontSize: 14, fontWeight: 700, color:'#666',
        }}>+2</div>
      </div>
      {/* Brief */}
      <div style={{ fontSize: 11, fontWeight: 600, color:'#999', textTransform:'uppercase', letterSpacing: 1, marginBottom: 8 }}>
        Collected brief
      </div>
      <div style={{ background:'#fafafa', borderRadius: 12, padding: 14, marginBottom: 16 }}>
        {[
          ['Style', 'Japanese · Realism'],
          ['Placement', 'Inner forearm'],
          ['Size', '10 cm × 18 cm'],
          ['Preferred date', 'Jun 14 – Jun 16'],
          ['Budget mentioned', 'Open'],
        ].map(([k, v], i) => (
          <div key={i} style={{
            display:'flex', justifyContent:'space-between',
            padding: '7px 0',
            borderBottom: i < 4 ? '1px solid #f0f0f0' : 'none',
          }}>
            <span style={{ fontSize: 12, color:'#888' }}>{k}</span>
            <span style={{ fontSize: 12, fontWeight: 600, color:'#0a0a0a' }}>{v}</span>
          </div>
        ))}
      </div>
      {/* AI summary */}
      <div style={{
        padding: 12,
        borderRadius: 12,
        background: `linear-gradient(135deg, ${accent}15 0%, transparent 100%)`,
        border: `1px solid ${accent}25`,
        marginBottom: 16,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 6 }}>
          <Icon name="sparkles" size={12} color={accent}/>
          <span style={{ fontSize: 10, fontWeight: 700, color: accent, textTransform:'uppercase', letterSpacing: 1 }}>AI Summary</span>
        </div>
        <div style={{ fontSize: 12, color:'#444', lineHeight: 1.5 }}>
          Returning client. Wants a medium Japanese-style piece. Open on price, flexible on dates within the window. References attached.
        </div>
      </div>
    </div>
    {/* Action buttons */}
    <div style={{ marginTop:'auto', padding:'12px 20px 20px', background:'#fff', borderTop:'1px solid #f0f0f0' }}>
      <button style={{ width: '100%', padding:'14px', borderRadius: 10, background:'#0a0a0a', color:'#fff', fontSize: 13, fontWeight: 600, display:'flex', alignItems:'center', justifyContent:'center', gap: 8 }}>
        <Icon name="whatsapp" size={14} color="#fff"/>
        Answer through WhatsApp
      </button>
    </div>
  </div>
);

// =====================================================================
// SCREEN: Inbox (AI chat with client)
// =====================================================================
const InboxScreen = ({ accent = "#FF3B30" }) => {
  const messages = [
    { from:'them', text:"Hey! Saw your work on IG, I'd love a tattoo 🙏", time:'14:02' },
    { from:'ai', text:"Hi! Just a few quick details so we can quote you properly. What style are you after?", time:'14:02', ai: true },
    { from:'them', text:"Something Japanese, maybe a koi or a wave", time:'14:03' },
    { from:'ai', text:"Lovely. Roughly what size are you imagining, and where on the body?", time:'14:03', ai: true },
    { from:'them', text:"Inner forearm, around 10cm tall", time:'14:05' },
    { from:'ai', text:"Got it. Any reference images you can share?", time:'14:05', ai: true },
    { from:'them', text:"[3 images]", time:'14:08', images: true },
  ];
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
      {/* Header */}
      <div style={{ padding:'8px 16px 12px', borderBottom:'1px solid #f0f0f0', display:'flex', alignItems:'center', gap: 10 }}>
        <Icon name="chevronLeft" size={22} color="#0a0a0a"/>
        <div style={{ width: 34, height: 34, borderRadius:'50%', background:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)', padding: 1.5 }}>
          <div style={{ width:'100%', height:'100%', borderRadius:'50%', border:'1.5px solid white', background:'#444' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color:'#0a0a0a' }}>John Smith</div>
          <div style={{ display:'flex', alignItems:'center', gap: 4 }}>
            <Icon name="sparkles" size={9} color={accent}/>
            <span style={{ fontSize: 10, color: accent, fontWeight: 600 }}>AI is replying</span>
          </div>
        </div>
        <Icon name="moreH" size={20} color="#0a0a0a"/>
      </div>
      {/* Messages */}
      <div style={{ flex: 1, overflow:'hidden', padding: 14, display:'flex', flexDirection:'column', gap: 8 }}>
        {messages.map((m, i) => (
          <div key={i} style={{
            display:'flex',
            justifyContent: m.from === 'them' ? 'flex-start' : 'flex-end',
          }}>
            <div style={{
              maxWidth:'78%',
              padding:'8px 12px',
              borderRadius: 16,
              background: m.from === 'them' ? '#f2f2f2' : (m.ai ? '#0a0a0a' : '#0a0a0a'),
              color: m.from === 'them' ? '#0a0a0a' : '#fff',
              fontSize: 12,
              lineHeight: 1.4,
              position:'relative',
            }}>
              {m.ai && (
                <div style={{ display:'flex', alignItems:'center', gap: 4, marginBottom: 3, opacity: 0.6 }}>
                  <Icon name="sparkles" size={9} color="#fff"/>
                  <span style={{ fontSize: 8, fontWeight: 600, letterSpacing: 0.5, textTransform:'uppercase' }}>Bookink AI</span>
                </div>
              )}
              {m.images ? (
                <div style={{ display:'flex', gap: 4 }}>
                  {[0, 4, 3].map((mt, j) => (
                    <div key={j} style={{ width: 40, height: 54, borderRadius: 6, overflow:'hidden' }}>
                      <TattooPlaceholder motif={mt}/>
                    </div>
                  ))}
                </div>
              ) : m.text}
            </div>
          </div>
        ))}
        {/* Typing */}
        <div style={{ display:'flex', justifyContent:'flex-end' }}>
          <div style={{
            padding:'10px 14px', borderRadius: 16, background:'#0a0a0a',
            display:'flex', gap: 3,
          }}>
            {[0,1,2].map(i => (
              <div key={i} style={{
                width: 5, height: 5, borderRadius:'50%', background:'rgba(255,255,255,0.6)',
                animation: `typing 1.4s ease-in-out ${i * 0.2}s infinite`,
              }}/>
            ))}
          </div>
        </div>
      </div>
      <style>{`@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }`}</style>
    </div>
  );
};

// =====================================================================
// SCREEN: Reports / Dashboard
// =====================================================================
const ReportsScreen = ({ accent = "#FF3B30" }) => {
  // Sample line chart points
  const pts = [40, 45, 38, 52, 60, 55, 68, 72, 70, 82, 78, 95];
  const max = 100;
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i * (260 / 11)} ${100 - (p / max) * 80}`).join(' ');
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fafafa' }}>
      {/* Header */}
      <div style={{ padding:'8px 20px 14px', background:'#fff' }}>
        <div style={{ fontSize: 22, fontWeight: 700, color:'#0a0a0a', letterSpacing:'-0.02em' }}>Reports</div>
        <div style={{ display:'flex', alignItems:'center', gap: 6, marginTop: 6 }}>
          <span style={{ fontSize: 11, color:'#888' }}>May 3 – Jun 2 (30 days)</span>
          <Icon name="chevronDown" size={12} color="#888"/>
        </div>
      </div>
      <div style={{ flex: 1, overflow:'hidden', padding: '14px 16px' }}>
        {/* Revenue card */}
        <div style={{ background:'#0a0a0a', color:'#fff', borderRadius: 14, padding: 16, marginBottom: 12 }}>
          <div style={{ fontSize: 10, color:'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 1, textTransform:'uppercase', marginBottom: 4 }}>Revenue (collected)</div>
          <div style={{ fontSize: 26, fontWeight: 700, letterSpacing:'-0.03em', marginBottom: 8 }}>
            12,450,000 <span style={{ fontSize: 14, color:'rgba(255,255,255,0.5)' }}>IDR</span>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 12 }}>
            <Icon name="trendUp" size={12} color="#34C759"/>
            <span style={{ fontSize: 10, color:'#34C759', fontWeight: 600 }}>+24%</span>
            <span style={{ fontSize: 10, color:'rgba(255,255,255,0.4)' }}>vs Apr 3 – May 2</span>
          </div>
          {/* Chart */}
          <svg viewBox="0 0 260 100" style={{ width:'100%', height: 80 }}>
            <defs>
              <linearGradient id="chartFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={accent} stopOpacity="0.3"/>
                <stop offset="100%" stopColor={accent} stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={`${path} L 260 100 L 0 100 Z`} fill="url(#chartFill)"/>
            <path d={path} stroke={accent} strokeWidth="2" fill="none"/>
            {pts.map((p, i) => (
              <circle key={i} cx={i * (260 / 11)} cy={100 - (p / max) * 80} r={i === pts.length - 1 ? 3 : 0} fill={accent}/>
            ))}
          </svg>
        </div>
        {/* Projected revenue */}
        <div style={{ background:'#fff', borderRadius: 14, padding: 14, marginBottom: 10, boxShadow:'0 1px 3px rgba(0,0,0,0.05)' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div>
              <div style={{ fontSize: 10, color:'#999', fontWeight: 500, letterSpacing: 0.5, textTransform:'uppercase' }}>Projected this month</div>
              <div style={{ fontSize: 17, fontWeight: 700, color:'#0a0a0a', letterSpacing:'-0.02em', marginTop: 4 }}>18,200,000 IDR</div>
            </div>
            <div style={{ fontSize: 11, color:'#888' }}>Goal 25M</div>
          </div>
          <div style={{ height: 6, background:'#f2f2f2', borderRadius: 100, marginTop: 10, overflow:'hidden' }}>
            <div style={{ height:'100%', width:'72%', background:'#0a0a0a', borderRadius: 100 }}/>
          </div>
          <div style={{ fontSize: 10, color:'#999', marginTop: 6 }}>72% of goal</div>
        </div>
        {/* Key metrics */}
        <div style={{ fontSize: 10, fontWeight: 600, color:'#999', letterSpacing: 1, textTransform:'uppercase', marginBottom: 8 }}>Key metrics</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
          {[
            { label:'Leads', value:'42', delta:'+12%' },
            { label:'Conversion', value:'62%', delta:'+8%' },
            { label:'Bookings', value:'18', delta:'+20%' },
            { label:'Avg order', value:'2.45M', delta:'+10%' },
          ].map((m, i) => (
            <div key={i} style={{ background:'#fff', borderRadius: 10, padding: 10, boxShadow:'0 1px 3px rgba(0,0,0,0.04)' }}>
              <div style={{ fontSize: 9, color:'#999', fontWeight: 500, marginBottom: 3 }}>{m.label}</div>
              <div style={{ fontSize: 15, fontWeight: 700, color:'#0a0a0a', letterSpacing:'-0.01em' }}>{m.value}</div>
              <div style={{ fontSize: 9, color:'#34C759', fontWeight: 600, marginTop: 2 }}>{m.delta}</div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active={3}/>
    </div>
  );
};

// =====================================================================
// MACBOOK FRAME
// =====================================================================
const MacbookFrame = ({ children, width = 720, height = 460, scale = 1 }) => (
  <div style={{
    width: width * scale,
    position: 'relative',
    flexShrink: 0,
  }}>
    {/* Screen */}
    <div style={{
      width,
      height,
      background: '#0a0a0a',
      borderRadius: '12px 12px 4px 4px',
      padding: 12,
      boxShadow: '0 30px 80px -20px rgba(0,0,0,0.55), 0 12px 30px -10px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06)',
      transform: `scale(${scale})`,
      transformOrigin: 'top left',
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: '#ffffff',
        borderRadius: 6,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
      }}>
        {/* Camera */}
        <div style={{
          position: 'absolute',
          top: -10, left: '50%', transform: 'translateX(-50%)',
          width: 6, height: 6, borderRadius: '50%',
          background: '#2a2a2a',
          border: '1px solid rgba(255,255,255,0.1)',
          zIndex: 10,
        }}/>
        {/* macOS chrome */}
        <div style={{
          height: 28,
          background: '#fafafa',
          borderBottom: '1px solid #eee',
          display: 'flex',
          alignItems: 'center',
          padding: '0 12px',
          gap: 8,
          flexShrink: 0,
        }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }}/>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }}/>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }}/>
          </div>
          <div style={{
            marginLeft: 'auto',
            marginRight: 'auto',
            fontSize: 11,
            color: '#888',
            background: '#fff',
            border: '1px solid #e5e5e5',
            borderRadius: 6,
            padding: '3px 16px',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34C759' }}/>
            app.bookink.ai
          </div>
        </div>
        {/* Content */}
        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
          {children}
        </div>
      </div>
    </div>
    {/* Laptop base */}
    <div style={{
      width: width + 60,
      height: 14,
      background: 'linear-gradient(180deg, #1a1a1a 0%, #050505 100%)',
      borderRadius: '0 0 12px 12px',
      marginLeft: -30,
      marginTop: -2,
      boxShadow: '0 16px 30px -10px rgba(0,0,0,0.5)',
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute',
        top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 100, height: 5,
        background: '#000',
        borderRadius: '0 0 8px 8px',
      }}/>
    </div>
  </div>
);

// =====================================================================
// SCREEN: Calendar CRM (Fresha-style multi-artist calendar)
// =====================================================================
const CalendarCRMScreen = ({ accent = "#FF3B30" }) => {
  const locations = [
    { name: 'Downtown', active: true },
    { name: 'Westside' },
    { name: 'Uptown' },
  ];
  const artists = [
    { name: 'Marina',  initial: 'M', color: '#FFA07A' },
    { name: 'Diego',   initial: 'D', color: '#9370DB' },
    { name: 'Aiko',    initial: 'A', color: '#4682B4' },
    { name: 'Lukas',   initial: 'L', color: '#34C759' },
  ];
  const hours = ['10', '11', '12', '13', '14', '15', '16', '17'];

  // Bookings keyed by artist index
  // Each: { hour: 0-7 (offset from 10), span: hours, label, sub, status }
  const bookings = [
    { col: 0, hour: 0, span: 2, label: 'John Smith', sub: 'Forearm · 10×18', status: 'confirmed' },
    { col: 0, hour: 3, span: 1.5, label: 'Sofia K.', sub: 'Ribs · linework', status: 'deposit' },
    { col: 1, hour: 1, span: 2.5, label: 'Emma Brown', sub: 'Thigh · floral', status: 'confirmed' },
    { col: 1, hour: 5, span: 1, label: 'Marcus T.', sub: 'Consult', status: 'pending' },
    { col: 2, hour: 0, span: 1.5, label: 'Lucas W.', sub: 'Chest · geometric', status: 'confirmed' },
    { col: 2, hour: 2, span: 3, label: 'Olivia J.', sub: 'Spine · snake', status: 'confirmed' },
    { col: 3, hour: 1, span: 2, label: 'Aaron H.', sub: 'Arm · realism', status: 'deposit' },
    { col: 3, hour: 4, span: 2, label: 'Nina P.', sub: 'Back · Japanese', status: 'confirmed' },
  ];

  const statusColors = {
    confirmed: { bg: '#E8F8ED', fg: '#1A7A37', accent: '#34C759' },
    deposit:   { bg: '#FFF4E6', fg: '#B36500', accent: '#FF9500' },
    pending:   { bg: '#FFFBE6', fg: '#806100', accent: '#FFCC00' },
  };

  const ROW_HEIGHT = 36; // px per hour

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fafafa', fontSize: 12 }}>
      {/* App top bar (sidebar style would be more, but we'll do top-only) */}
      <div style={{
        height: 48,
        background: '#fff',
        borderBottom: '1px solid #eee',
        display: 'flex',
        alignItems: 'center',
        padding: '0 16px',
        gap: 16,
        flexShrink: 0,
      }}>
        <BookinkLogo color="#0a0a0a" height={16}/>
        <div style={{ width: 1, height: 20, background: '#eee', margin: '0 4px' }}/>
        {/* Location tabs */}
        <div style={{ display: 'flex', gap: 4, height: '100%' }}>
          {locations.map((l, i) => (
            <div key={i} style={{
              display: 'flex',
              alignItems: 'center',
              padding: '0 12px',
              fontSize: 12,
              fontWeight: l.active ? 600 : 500,
              color: l.active ? '#0a0a0a' : '#888',
              borderBottom: l.active ? '2px solid #0a0a0a' : '2px solid transparent',
              cursor: 'pointer',
            }}>
              {l.name}
            </div>
          ))}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            padding: '0 8px',
            color: '#bbb',
          }}>
            <Icon name="plus" size={14} color="#bbb"/>
          </div>
        </div>
        {/* Right side */}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icon name="search" size={15} color="#888"/>
          <Icon name="bell" size={15} color="#888"/>
          <div style={{
            width: 26, height: 26, borderRadius: '50%',
            background: 'linear-gradient(135deg, #FFA07A, #FF6347)',
          }}/>
        </div>
      </div>

      {/* Toolbar */}
      <div style={{
        height: 44,
        background: '#fff',
        borderBottom: '1px solid #eee',
        display: 'flex',
        alignItems: 'center',
        padding: '0 16px',
        gap: 12,
        flexShrink: 0,
      }}>
        <div style={{
          display: 'inline-flex',
          background: '#f4f4f6',
          borderRadius: 8,
          padding: 2,
          gap: 2,
        }}>
          {['Day', 'Week', 'Month'].map((v, i) => (
            <div key={i} style={{
              padding: '4px 10px',
              fontSize: 11,
              fontWeight: 600,
              borderRadius: 6,
              background: i === 0 ? '#fff' : 'transparent',
              color: i === 0 ? '#0a0a0a' : '#888',
              boxShadow: i === 0 ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
            }}>
              {v}
            </div>
          ))}
        </div>
        <div style={{ width: 1, height: 20, background: '#eee' }}/>
        <Icon name="chevronLeft" size={14} color="#888"/>
        <div style={{ fontSize: 13, fontWeight: 600, color: '#0a0a0a' }}>Friday, June 14</div>
        <Icon name="chevronRight" size={14} color="#888"/>
        <div style={{
          padding: '3px 8px',
          background: '#f4f4f6',
          borderRadius: 6,
          fontSize: 10,
          fontWeight: 600,
          color: '#666',
        }}>Today</div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '4px 8px',
            borderRadius: 6,
            border: '1px solid #e5e5e5',
            fontSize: 11,
            color: '#666',
          }}>
            <Icon name="filter" size={11} color="#666"/>
            All artists
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '5px 10px',
            borderRadius: 6,
            background: '#0a0a0a',
            color: '#fff',
            fontSize: 11,
            fontWeight: 600,
          }}>
            <Icon name="plus" size={11} color="#fff"/>
            New booking
          </div>
        </div>
      </div>

      {/* Calendar header (artist columns) */}
      <div style={{ display: 'flex', borderBottom: '1px solid #eee', background: '#fff', flexShrink: 0 }}>
        <div style={{ width: 44, flexShrink: 0 }}/>
        {artists.map((a, i) => (
          <div key={i} style={{
            flex: 1,
            padding: '10px 12px',
            borderLeft: '1px solid #f0f0f0',
            display: 'flex',
            alignItems: 'center',
            gap: 8,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: '50%',
              background: a.color,
              color: '#fff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 10,
              fontWeight: 700,
            }}>{a.initial}</div>
            <div style={{ fontSize: 11.5, fontWeight: 600, color: '#0a0a0a' }}>{a.name}</div>
          </div>
        ))}
      </div>

      {/* Calendar grid */}
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', background: '#fff', position: 'relative' }}>
        {/* Time column */}
        <div style={{ width: 44, flexShrink: 0, borderRight: '1px solid #eee' }}>
          {hours.map((h, i) => (
            <div key={i} style={{
              height: ROW_HEIGHT,
              fontSize: 10,
              color: '#999',
              padding: '4px 6px 0 0',
              textAlign: 'right',
              fontFamily: 'var(--font-mono)',
            }}>
              {h}:00
            </div>
          ))}
        </div>
        {/* Artist columns */}
        {artists.map((a, ci) => (
          <div key={ci} style={{
            flex: 1,
            position: 'relative',
            borderLeft: ci === 0 ? 'none' : '1px solid #f0f0f0',
          }}>
            {/* Hour grid lines */}
            {hours.map((_, i) => (
              <div key={i} style={{
                height: ROW_HEIGHT,
                borderTop: i === 0 ? 'none' : '1px solid #f4f4f6',
                background: i % 2 ? '#fafafa' : 'transparent',
                opacity: i % 2 ? 0.5 : 1,
              }}/>
            ))}
            {/* Bookings */}
            {bookings.filter(b => b.col === ci).map((b, i) => {
              const s = statusColors[b.status];
              return (
                <div key={i} style={{
                  position: 'absolute',
                  top: b.hour * ROW_HEIGHT + 2,
                  left: 4,
                  right: 4,
                  height: b.span * ROW_HEIGHT - 4,
                  background: s.bg,
                  borderRadius: 6,
                  padding: 7,
                  borderLeft: `3px solid ${s.accent}`,
                  overflow: 'hidden',
                }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: s.fg, lineHeight: 1.1, marginBottom: 2 }}>
                    {b.label}
                  </div>
                  <div style={{ fontSize: 9.5, color: s.fg, opacity: 0.75, lineHeight: 1.2 }}>
                    {b.sub}
                  </div>
                </div>
              );
            })}
            {/* Current time line on first column only */}
            {ci === 1 && (
              <div style={{
                position: 'absolute',
                top: 1.5 * ROW_HEIGHT + 18,
                left: 0, right: 0,
                height: 2,
                background: accent,
                zIndex: 5,
              }}>
                <div style={{
                  position: 'absolute',
                  left: -4, top: -3,
                  width: 8, height: 8,
                  borderRadius: '50%',
                  background: accent,
                }}/>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Bottom bar */}
      <div style={{
        height: 30,
        background: '#fff',
        borderTop: '1px solid #eee',
        display: 'flex',
        alignItems: 'center',
        padding: '0 16px',
        fontSize: 10,
        color: '#999',
        gap: 16,
        flexShrink: 0,
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34C759' }}/>
          Confirmed
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF9500' }}/>
          Awaiting deposit
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FFCC00' }}/>
          Pending
        </span>
        <span style={{ marginLeft: 'auto' }}>8 bookings today · $4,250 expected</span>
      </div>
    </div>
  );
};

// =====================================================================
// SCREEN: Instagram Profile (showing the bookink link in bio)
// =====================================================================
const InstagramProfileScreen = ({ accent = "#FF3B30", handle = "marinasole" }) => (
  <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
    {/* IG top bar */}
    <div style={{ padding:'10px 16px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid #efefef', flexShrink: 0 }}>
      <Icon name="chevronLeft" size={20} color="#0a0a0a"/>
      <div style={{ display:'flex', alignItems:'center', gap: 4, fontSize: 14, fontWeight: 600 }}>
        {handle}
        <Icon name="chevronDown" size={12} color="#0a0a0a"/>
      </div>
      <Icon name="moreH" size={20} color="#0a0a0a"/>
    </div>
    {/* Profile */}
    <div style={{ padding:'14px 16px 0' }}>
      <div style={{ display:'flex', alignItems:'center', gap:20, marginBottom:12 }}>
        <div style={{ width:78, height:78, borderRadius:'50%', background:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)', padding:3, flexShrink: 0 }}>
          <div style={{ width:'100%', height:'100%', borderRadius:'50%', border:'3px solid white', background:'linear-gradient(135deg,#3a3a3a,#1a1a1a)' }}/>
        </div>
        <div style={{ display:'flex', gap:14, flex:1 }}>
          {[['12.4K','posts'],['38.2K','followers'],['421','following']].map(([n,l],i)=>(
            <div key={i} style={{ textAlign:'center' }}>
              <div style={{ fontSize:14, fontWeight:700, color:'#0a0a0a' }}>{n}</div>
              <div style={{ fontSize:11, color:'#555' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ fontSize:13, fontWeight:700, color:'#0a0a0a', marginBottom:2 }}>Marina Solé</div>
      <div style={{ fontSize:12, color:'#555', lineHeight: 1.4 }}>Tattoo artist · Owner @sacredhand</div>
      <div style={{ fontSize:12, color:'#555', marginBottom:10, lineHeight: 1.4 }}>Realism · Japanese · Floral · Barcelona</div>
      {/* Bookink link — highlighted */}
      <div style={{ position: 'relative', marginBottom: 14, display: 'inline-block' }}>
        <a style={{
          display:'inline-flex', alignItems:'center', gap:8,
          padding:'10px 14px',
          borderRadius: 10,
          background: '#0a0a0a',
          boxShadow: `0 6px 20px -4px ${accent}66, 0 0 0 2px ${accent}30`,
          color: '#fff',
          fontSize:13,
          fontWeight: 600,
          letterSpacing: '-0.01em',
        }}>
          <Icon name="link" size={13} color="#fff"/>
          bookink.ai/{handle}
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: 18, height: 18,
            borderRadius: 100,
            background: accent,
            marginLeft: 4,
          }}>
            <Icon name="arrowRight" size={10} color="#fff" stroke={2.5}/>
          </span>
        </a>
        {/* Tap ripples */}
        <div style={{
          position: 'absolute',
          right: -8, top: -8,
          width: 36, height: 36,
          borderRadius: '50%',
          border: `2px solid ${accent}`,
          animation: 'tapRing 1.8s ease-out infinite',
          pointerEvents: 'none',
        }}/>
        <div style={{
          position: 'absolute',
          right: -8, top: -8,
          width: 36, height: 36,
          borderRadius: '50%',
          border: `2px solid ${accent}`,
          opacity: 0.35,
          animation: 'tapRing 1.8s ease-out 0.6s infinite',
          pointerEvents: 'none',
        }}/>
      </div>
      {/* Follow/Message buttons */}
      <div style={{ display:'flex', gap:6, marginBottom: 14 }}>
        <button style={{ flex:1, padding:'7px 12px', background:'#0095F6', color:'#fff', borderRadius:8, fontSize:12, fontWeight:600 }}>Follow</button>
        <button style={{ flex:1, padding:'7px 12px', background:'#f2f2f2', color:'#0a0a0a', borderRadius:8, fontSize:12, fontWeight:600 }}>Message</button>
        <button style={{ width: 32, height: 32, background:'#f2f2f2', color:'#0a0a0a', borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="user" size={14} color="#0a0a0a"/>
        </button>
      </div>
    </div>
    {/* Story highlights */}
    <div style={{ padding:'4px 16px 8px', display:'flex', gap:14 }}>
      {['Recent','Japanese','Floral','Realism'].map((s,i)=>(
        <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
          <div style={{ width:54, height:54, borderRadius:'50%', background:'#0a0a0a', border:'2px solid #fff', boxShadow:'0 0 0 1.5px #ddd', overflow:'hidden' }}>
            <div style={{ width:'100%', height:'100%' }}><TattooPlaceholder motif={i}/></div>
          </div>
          <span style={{ fontSize:10, color:'#333' }}>{s}</span>
        </div>
      ))}
    </div>
    {/* Tab bar */}
    <div style={{ borderTop:'1px solid #efefef', display:'flex', justifyContent:'space-around', padding:'8px 0', flexShrink: 0 }}>
      <div style={{ padding: '0 8px 6px', borderBottom: '1.5px solid #0a0a0a' }}>
        <Icon name="grid" size={16} color="#0a0a0a"/>
      </div>
      <div style={{ padding: '0 8px' }}><Icon name="play" size={16} color="#bbb"/></div>
      <div style={{ padding: '0 8px' }}><Icon name="user" size={16} color="#bbb"/></div>
    </div>
    {/* 3-col grid of tattoo posts */}
    <div style={{ flex:1, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:2, overflow:'hidden' }}>
      {[0,1,2,3,4,5,0,1,2].map((m, i)=>(
        <div key={i} style={{ aspectRatio: '1 / 1', overflow: 'hidden' }}><TattooPlaceholder motif={m}/></div>
      ))}
    </div>
    <style>{`@keyframes tapRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }`}</style>
  </div>
);

// =====================================================================
// SCREEN: Bookink branded booking page (the link destination)
// =====================================================================
const BookinkLinkPageScreen = ({ accent = "#FF3B30", handle = "marinasole" }) => (
  <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
    {/* Browser-style URL bar */}
    <div style={{
      padding: '8px 12px',
      background: '#f2f2f2',
      borderBottom: '1px solid #e5e5e5',
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      flexShrink: 0,
    }}>
      <div style={{ width: 14, height: 14, background:'#fff', borderRadius: 100, display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0 }}>
        <Icon name="check" size={8} color="#34C759" stroke={3}/>
      </div>
      <div style={{ fontSize: 11, color: '#555', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        bookink.ai/{handle}
      </div>
      <Icon name="moreH" size={14} color="#888"/>
    </div>

    {/* Header: artist branding */}
    <div style={{ padding: '20px 20px 14px', borderBottom: '1px solid #f0f0f0', display:'flex', alignItems:'center', gap: 12, flexShrink: 0 }}>
      <div style={{ width:44, height:44, borderRadius:'50%', background:'linear-gradient(135deg,#3a3a3a,#1a1a1a)', flexShrink: 0, border: '2px solid white', boxShadow: '0 0 0 1px #e5e5e5' }}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: '#0a0a0a', letterSpacing: '-0.01em' }}>Marina Solé</div>
        <div style={{ fontSize: 11, color: '#888' }}>Realism · Japanese · Barcelona</div>
      </div>
      <BookinkLogo color="#0a0a0a" height={14}/>
    </div>

    {/* Welcome message + AI chat */}
    <div style={{ flex: 1, overflow: 'hidden', padding: '14px 14px 10px', display: 'flex', flexDirection: 'column', gap: 8, background: '#fafafa' }}>
      {/* AI greeting */}
      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
        <div style={{ maxWidth: '85%', padding: '10px 12px', borderRadius: 14, background: '#fff', color: '#0a0a0a', fontSize: 12, lineHeight: 1.45, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>
          <div style={{ display:'flex', alignItems:'center', gap: 4, marginBottom: 4 }}>
            <Icon name="sparkles" size={10} color={accent}/>
            <span style={{ fontSize: 9, fontWeight: 700, color: accent, letterSpacing: 0.6, textTransform:'uppercase' }}>Marina's booking assistant</span>
          </div>
          Hi! I help Marina book new tattoos. Excited to hear about your idea — can we start with what style you're after?
        </div>
      </div>
      {/* Quick reply chips */}
      <div style={{ display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', gap: 6, marginLeft: 4 }}>
        {['Japanese', 'Realism', 'Floral', 'Not sure yet'].map((s, i) => (
          <div key={i} style={{
            padding: '6px 10px',
            borderRadius: 100,
            background: '#fff',
            border: '1px solid #e5e5e5',
            fontSize: 11,
            color: '#0a0a0a',
            fontWeight: 500,
          }}>{s}</div>
        ))}
      </div>
      {/* Client message */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
        <div style={{ maxWidth: '78%', padding: '10px 12px', borderRadius: 14, background: '#0a0a0a', color: '#fff', fontSize: 12, lineHeight: 1.4 }}>
          Japanese, koi or wave on the forearm
        </div>
      </div>
      {/* AI follow-up */}
      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
        <div style={{ maxWidth: '85%', padding: '10px 12px', borderRadius: 14, background: '#fff', color: '#0a0a0a', fontSize: 12, lineHeight: 1.45, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}>
          Beautiful choice. Roughly what size are you thinking — and do you have any reference images?
        </div>
      </div>
      {/* Progress indicator */}
      <div style={{ marginTop: 'auto', padding: '8px 4px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize: 9, color:'#888', marginBottom: 4, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>
          <span>Step 2 of 5</span>
          <span>Style & size</span>
        </div>
        <div style={{ height: 4, background:'#e5e5e5', borderRadius: 100, overflow:'hidden' }}>
          <div style={{ height: '100%', width: '40%', background: accent, borderRadius: 100 }}/>
        </div>
      </div>
    </div>

    {/* Input bar */}
    <div style={{
      padding: '10px 14px 14px',
      borderTop: '1px solid #f0f0f0',
      background: '#fff',
      display: 'flex',
      gap: 8,
      alignItems: 'center',
      flexShrink: 0,
    }}>
      <div style={{ flex: 1, padding: '9px 14px', borderRadius: 100, background: '#f2f2f2', fontSize: 12, color: '#999' }}>
        Type your reply…
      </div>
      <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#0a0a0a', display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0 }}>
        <Icon name="send" size={13} color="#fff"/>
      </div>
    </div>
  </div>
);

// =====================================================================
// Export to window for cross-file Babel scope
// =====================================================================
Object.assign(window, {
  Icon, BookinkLogo, PhoneFrame, MacbookFrame, TattooPlaceholder, LeadCard, BottomNav,
  OpportunitiesScreen, OpportunityDetail, InboxScreen, ReportsScreen, CalendarCRMScreen,
  InstagramProfileScreen, BookinkLinkPageScreen,
});