// Recreated product mockups in pure HTML/CSS — these stand in for the real product screenshots

// Scale-to-fit wrapper: locks children to a design width and CSS-scales them
// proportionally to the container. Avoids reflow + preserves visual fidelity.
const MockupFit = ({ designWidth = 880, mobileMaxWidth = 720, children }) => {
  const wrapRef = React.useRef(null);
  const innerRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);
  const [innerH, setInnerH] = React.useState(null);

  React.useEffect(() => {
    const update = () => {
      const w = wrapRef.current?.clientWidth ?? designWidth;
      // only scale below threshold; above, render at natural width
      if (w >= mobileMaxWidth) { setScale(1); setInnerH(null); return; }
      const s = w / designWidth;
      setScale(s);
      const ih = innerRef.current?.scrollHeight ?? 0;
      setInnerH(ih * s);
    };
    update();
    const ro = new ResizeObserver(update);
    if (wrapRef.current) ro.observe(wrapRef.current);
    if (innerRef.current) ro.observe(innerRef.current);
    window.addEventListener('resize', update);
    return () => { ro.disconnect(); window.removeEventListener('resize', update); };
  }, [designWidth, mobileMaxWidth]);

  return (
    <div ref={wrapRef} style={{width:'100%', height: innerH ?? 'auto', overflow:'visible'}}>
      <div
        ref={innerRef}
        style={{
          width: scale === 1 ? '100%' : designWidth,
          transformOrigin: 'top left',
          transform: scale === 1 ? 'none' : `scale(${scale})`,
        }}>
        {children}
      </div>
    </div>
  );
};

const mockupStyles = {
  app: {
    background: 'white',
    borderRadius: 14,
    boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 30px 60px -20px rgba(20,17,15,0.18), 0 12px 24px -12px rgba(20,17,15,0.08)',
    border: '1px solid rgba(20,17,15,0.06)',
    overflow: 'hidden',
    fontFamily: 'var(--sans)',
    color: 'var(--ink)',
    fontSize: 12,
    width: '100%',
  },
  bar: {
    height: 36,
    background: '#FBF9F5',
    borderBottom: '1px solid var(--line)',
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    padding: '0 14px',
    fontSize: 11,
    color: 'var(--ink-3)',
  },
  dot: (c) => ({ width: 10, height: 10, borderRadius: '50%', background: c }),
};

// Citrus wheel mark — matches the brand
const FrutionMark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={{flexShrink: 0}}>
    <defs>
      <clipPath id="circle-clip"><circle cx="50" cy="50" r="46"/></clipPath>
    </defs>
    <g clipPath="url(#circle-clip)">
      {[0, 1, 2, 3, 4, 5, 6, 7].map(i => {
        const angle = (i * 45 - 90) * Math.PI / 180;
        const next = ((i + 1) * 45 - 90) * Math.PI / 180;
        const x1 = 50 + Math.cos(angle) * 50;
        const y1 = 50 + Math.sin(angle) * 50;
        const x2 = 50 + Math.cos(next) * 50;
        const y2 = 50 + Math.sin(next) * 50;
        const colors = ['#F08A2C','#FFB066','#F08A2C','#FFB066','#F08A2C','#FFB066','#F08A2C','#FFB066'];
        return <path key={i} d={`M50,50 L${x1},${y1} A50,50 0 0,1 ${x2},${y2} Z`} fill={colors[i]} stroke="white" strokeWidth="2.5"/>;
      })}
    </g>
    <circle cx="50" cy="50" r="4" fill="white"/>
  </svg>
);

// ============ CRM dashboard ============
const CRMMockup = () => {
  const dealsByStage = [
    { stage: 'Qualificação', count: 24, value: 'R$ 312k', color: '#94A3B8' },
    { stage: 'Proposta', count: 18, value: 'R$ 580k', color: '#F08A2C' },
    { stage: 'Negociação', count: 12, value: 'R$ 410k', color: '#D9711A' },
    { stage: 'Fechamento', count: 7, value: 'R$ 290k', color: '#16A34A' },
  ];
  const deals = [
    { co: 'Bruke Indústria', val: 'R$ 84.500', stage: 'Negociação', owner: 'AC', days: '3d' },
    { co: 'Diprotec Ltda', val: 'R$ 42.800', stage: 'Proposta', owner: 'MR', days: '1d' },
    { co: 'Flexoseal Comercial', val: 'R$ 128.000', stage: 'Negociação', owner: 'AC', days: '7d' },
    { co: 'Qualita Serviços', val: 'R$ 19.300', stage: 'Qualificação', owner: 'JS', days: '12d' },
    { co: 'Wtec Soluções', val: 'R$ 67.900', stage: 'Proposta', owner: 'MR', days: '2d' },
  ];
  return (
    <div style={mockupStyles.app}>
      {/* top chrome */}
      <div style={mockupStyles.bar}>
        <div style={mockupStyles.dot('#FF5F57')}/><div style={mockupStyles.dot('#FEBC2E')}/><div style={mockupStyles.dot('#28C840')}/>
        <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)'}}>frution.app/crm/pipeline</div>
      </div>
      {/* layout */}
      <div style={{display:'grid', gridTemplateColumns:'200px 1fr', minHeight: 480}}>
        {/* sidebar */}
        <div style={{background:'#FBF9F5', borderRight:'1px solid var(--line)', padding:'18px 14px'}}>
          <div style={{display:'flex', alignItems:'center', gap:8, marginBottom: 22}}>
            <FrutionMark size={20}/>
            <div style={{fontWeight: 600, fontSize: 13}}>frution</div>
          </div>
          <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom: 8}}>Módulos</div>
          {[
            ['CRM', true], ['BPM', false], ['ERP', false], ['OmniChannel', false], ['Tracking', false]
          ].map(([n,a]) => (
            <div key={n} style={{
              padding:'7px 10px', borderRadius: 6, fontSize: 12, marginBottom:2,
              background: a ? 'var(--primary-tint)' : 'transparent',
              color: a ? 'var(--primary-deep)' : 'var(--ink-2)',
              fontWeight: a ? 600 : 400,
              display:'flex', alignItems:'center', gap: 8,
            }}>
              <div style={{width:6, height:6, borderRadius:'50%', background: a ? 'var(--primary)' : 'var(--ink-4)'}}/>
              {n}
            </div>
          ))}
          <div style={{height:1, background:'var(--line)', margin:'14px -4px'}}/>
          <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom: 8}}>CRM</div>
          {['Pipeline','Contatos','Empresas','Atividades','Relatórios'].map((n,i) => (
            <div key={n} style={{padding:'6px 10px', fontSize:11.5, color: i===0?'var(--ink)':'var(--ink-3)', fontWeight: i===0?600:400}}>{n}</div>
          ))}
        </div>
        {/* main */}
        <div style={{padding:'20px 24px'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 18}}>
            <div>
              <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em'}}>CRM · Pipeline</div>
              <div style={{fontSize:18, fontWeight: 600, marginTop: 3, fontFamily:'var(--serif)'}}>Negócios em andamento</div>
            </div>
            <div style={{display:'flex', gap:6}}>
              <div style={{padding:'6px 10px', fontSize:11, border:'1px solid var(--line)', borderRadius:6, background:'white'}}>Filtrar</div>
              <div style={{padding:'6px 12px', fontSize:11, background:'var(--ink)', color:'white', borderRadius:6, fontWeight:500}}>+ Novo negócio</div>
            </div>
          </div>
          {/* stats */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginBottom:18}}>
            {dealsByStage.map(s => (
              <div key={s.stage} style={{background:'#FBF9F5', border:'1px solid var(--line)', borderRadius:8, padding:'10px 12px'}}>
                <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:6}}>
                  <div style={{width:6, height:6, borderRadius:'50%', background:s.color}}/>
                  <div style={{fontSize:10, color:'var(--ink-3)', fontFamily:'var(--mono)', textTransform:'uppercase', letterSpacing:'0.08em'}}>{s.stage}</div>
                </div>
                <div style={{fontSize:18, fontWeight:600, fontFamily:'var(--serif)'}}>{s.value}</div>
                <div style={{fontSize:10, color:'var(--ink-4)', marginTop:2}}>{s.count} negócios</div>
              </div>
            ))}
          </div>
          {/* chart */}
          <div style={{background:'white', border:'1px solid var(--line)', borderRadius:8, padding:'12px 14px', marginBottom: 14}}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:8}}>
              <div style={{fontSize:11, fontWeight:600}}>Receita prevista · últimos 12 meses</div>
              <div style={{fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)'}}>R$ 1,59M total</div>
            </div>
            <svg viewBox="0 0 400 80" style={{width:'100%', height:80}}>
              <defs>
                <linearGradient id="crm-grad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#F08A2C" stopOpacity="0.4"/>
                  <stop offset="1" stopColor="#F08A2C" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,60 L33,55 L66,48 L99,52 L132,40 L165,42 L198,30 L231,32 L264,22 L297,24 L330,14 L363,18 L400,8 L400,80 L0,80 Z" fill="url(#crm-grad)"/>
              <path d="M0,60 L33,55 L66,48 L99,52 L132,40 L165,42 L198,30 L231,32 L264,22 L297,24 L330,14 L363,18 L400,8" fill="none" stroke="#F08A2C" strokeWidth="1.5"/>
            </svg>
          </div>
          {/* deals list */}
          <div style={{background:'white', border:'1px solid var(--line)', borderRadius:8, overflow:'hidden'}}>
            <div style={{display:'grid', gridTemplateColumns:'2.5fr 1fr 1.2fr 0.6fr 0.5fr', padding:'8px 14px', borderBottom:'1px solid var(--line)', fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)', textTransform:'uppercase', letterSpacing:'0.08em', background:'#FBF9F5'}}>
              <div>Empresa</div><div>Valor</div><div>Etapa</div><div>Resp.</div><div>Idade</div>
            </div>
            {deals.map((d,i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'2.5fr 1fr 1.2fr 0.6fr 0.5fr', padding:'9px 14px', borderBottom: i<deals.length-1?'1px solid var(--line)':'none', fontSize:11.5, alignItems:'center'}}>
                <div style={{fontWeight:500}}>{d.co}</div>
                <div style={{fontFamily:'var(--mono)'}}>{d.val}</div>
                <div><span style={{fontSize:10, padding:'2px 8px', borderRadius: 99, background:'var(--paper-2)', color:'var(--ink-2)'}}>{d.stage}</span></div>
                <div><span style={{display:'inline-flex', width:20, height:20, borderRadius:'50%', background:'var(--primary-soft)', color:'var(--primary-deep)', fontSize:9, fontWeight:600, alignItems:'center', justifyContent:'center'}}>{d.owner}</span></div>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-4)'}}>{d.days}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============ BPM workflow ============
const BPMMockup = () => {
  return (
    <div style={mockupStyles.app}>
      <div style={mockupStyles.bar}>
        <div style={mockupStyles.dot('#FF5F57')}/><div style={mockupStyles.dot('#FEBC2E')}/><div style={mockupStyles.dot('#28C840')}/>
        <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)'}}>frution.app/bpm/aprovacao-compras</div>
      </div>
      <div style={{padding: '18px 22px', minHeight: 480}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16}}>
          <div>
            <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em'}}>BPM · Fluxo</div>
            <div style={{fontSize:17, fontWeight: 600, fontFamily:'var(--serif)'}}>Aprovação de compras · v3.2</div>
          </div>
          <div style={{display:'flex', gap:6, alignItems:'center'}}>
            <div style={{fontSize:10, color:'#16A34A', display:'flex', alignItems:'center', gap:5}}>
              <div style={{width:6, height:6, borderRadius:'50%', background:'#16A34A'}}/>Ativo · 47 instâncias
            </div>
          </div>
        </div>
        {/* canvas */}
        <div style={{background:'#FBF9F5', border:'1px solid var(--line)', borderRadius: 8, padding: '32px 18px', position:'relative', height: 360, backgroundImage:'radial-gradient(circle, rgba(20,17,15,0.06) 1px, transparent 1px)', backgroundSize: '14px 14px'}}>
          <svg viewBox="0 0 700 320" style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}}>
            <defs>
              <marker id="bpmarr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,0 L10,5 L0,10 Z" fill="#5C544E"/>
              </marker>
            </defs>
            {/* connections */}
            <path d="M 110 80 L 180 80" stroke="#5C544E" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <path d="M 290 80 L 360 80" stroke="#5C544E" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <path d="M 410 105 Q 410 160 250 200" stroke="#5C544E" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <path d="M 410 105 L 480 200" stroke="#5C544E" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <path d="M 350 220 L 420 220" stroke="#16A34A" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <path d="M 580 200 L 620 130" stroke="#5C544E" strokeWidth="1.4" fill="none" markerEnd="url(#bpmarr)"/>
            <text x="200" y="65" fontSize="9" fill="#8B827B" fontFamily="var(--mono)">PR criada</text>
            <text x="370" y="65" fontSize="9" fill="#8B827B" fontFamily="var(--mono)">≤ 5k</text>
            <text x="370" y="155" fontSize="9" fill="#8B827B" fontFamily="var(--mono)">{'> 5k'}</text>
            <text x="370" y="210" fontSize="9" fill="#16A34A" fontFamily="var(--mono)">aprovado</text>
          </svg>
          {/* nodes */}
          {[
            {l:35,t:60, label:'Início', sub:'Solicitante', color:'#16A34A', shape:'circle'},
            {l:180,t:55, label:'Validar dados', sub:'Auto · 30s', color:'#5C544E'},
            {l:360,t:55, label:'Aprovar até R$ 5k?', sub:'Decisão', color:'#F08A2C', shape:'diamond'},
            {l:180,t:185, label:'Aprovação Diretor', sub:'Manuel R. · 2/3', color:'#F08A2C', highlight: true},
            {l:420,t:185, label:'PO no ERP', sub:'Auto · integrado', color:'#5C544E'},
            {l:580,t:60, label:'Concluído', sub:'47 hoje', color:'#16A34A', shape:'circle'},
          ].map((n,i) => {
            if (n.shape === 'circle') {
              return (
                <div key={i} style={{position:'absolute', left:n.l, top:n.t, width:60, height:60, borderRadius:'50%', background:'white', border:`2px solid ${n.color}`, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', fontSize:9.5, fontWeight:600}}>
                  {n.label}
                  <div style={{fontSize:8, color:'var(--ink-4)', fontWeight:400, marginTop:2}}>{n.sub}</div>
                </div>
              );
            }
            return (
              <div key={i} style={{
                position:'absolute', left:n.l, top:n.t, width: n.shape==='diamond'?100:120, padding:'10px 12px',
                background:'white', borderRadius: n.shape==='diamond' ? 4 : 8,
                border: `1.5px solid ${n.highlight ? n.color : 'var(--line-strong)'}`,
                boxShadow: n.highlight ? `0 0 0 4px ${n.color}22` : '0 1px 2px rgba(0,0,0,0.04)',
                transform: n.shape==='diamond' ? 'rotate(45deg)' : 'none',
              }}>
                <div style={{transform: n.shape==='diamond' ? 'rotate(-45deg)' : 'none', fontSize:11, fontWeight:600, lineHeight:1.2}}>{n.label}</div>
                {n.shape !== 'diamond' && <div style={{fontSize:9.5, color:'var(--ink-4)', marginTop:3, fontFamily:'var(--mono)'}}>{n.sub}</div>}
              </div>
            );
          })}
          {/* current instance pill */}
          <div style={{position:'absolute', bottom:14, left:14, background:'white', border:'1px solid var(--line)', borderRadius:6, padding:'7px 11px', fontSize:10.5, display:'flex', gap:10, alignItems:'center'}}>
            <div style={{width:6, height:6, borderRadius:'50%', background:'var(--primary)', boxShadow:'0 0 0 4px rgba(240,138,44,0.2)'}}/>
            <span style={{fontFamily:'var(--mono)', color:'var(--ink-3)'}}>#PR-2026-0418</span>
            <span style={{color:'var(--ink-2)'}}>aguardando aprovação · 1h32</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============ ERP — financial ============
const ERPMockup = () => {
  const months = ['J','F','M','A','M','J','J','A','S','O','N','D'];
  const revenue = [42,48,51,55,62,58,68,72,75,82,88,94];
  const cost = [28,32,33,36,38,40,42,45,48,50,53,56];
  const max = 100;
  return (
    <div style={mockupStyles.app}>
      <div style={mockupStyles.bar}>
        <div style={mockupStyles.dot('#FF5F57')}/><div style={mockupStyles.dot('#FEBC2E')}/><div style={mockupStyles.dot('#28C840')}/>
        <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)'}}>frution.app/erp/financeiro</div>
      </div>
      <div style={{padding:'18px 22px', minHeight:480}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:18}}>
          <div>
            <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em'}}>ERP · Financeiro</div>
            <div style={{fontSize:17, fontWeight:600, fontFamily:'var(--serif)'}}>Resumo executivo · 2026</div>
          </div>
          <div style={{display:'flex', gap:5, fontSize:10}}>
            {['Mensal','Trimestre','Ano'].map((p,i) => (
              <div key={p} style={{padding:'5px 10px', borderRadius:5, background: i===2?'var(--ink)':'transparent', color: i===2?'white':'var(--ink-3)', border:'1px solid var(--line)', fontWeight: i===2?600:400}}>{p}</div>
            ))}
          </div>
        </div>
        {/* big KPIs */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)', borderRadius:8, overflow:'hidden', marginBottom:14}}>
          {[
            ['Receita YTD', 'R$ 8.74M', '+18.2%', true],
            ['Custos', 'R$ 4.92M', '+11.4%', false],
            ['Margem', '43.7%', '+2.1pp', true],
            ['Estoque', 'R$ 1.23M', '−4.8%', true],
          ].map(([l,v,d,pos],i) => (
            <div key={i} style={{background:'white', padding:'12px 14px'}}>
              <div style={{fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6}}>{l}</div>
              <div style={{fontSize:20, fontWeight:600, fontFamily:'var(--serif)'}}>{v}</div>
              <div style={{fontSize:10.5, color: pos?'#16A34A':'#DC2626', marginTop:3, fontFamily:'var(--mono)'}}>{d}</div>
            </div>
          ))}
        </div>
        {/* chart */}
        <div style={{background:'white', border:'1px solid var(--line)', borderRadius:8, padding:'14px 16px', marginBottom:12}}>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:10}}>
            <div style={{fontSize:11.5, fontWeight:600}}>Receita vs. custos · evolução</div>
            <div style={{display:'flex', gap:14, fontSize:10, color:'var(--ink-3)', fontFamily:'var(--mono)'}}>
              <div style={{display:'flex', alignItems:'center', gap:5}}><div style={{width:10, height:2, background:'var(--primary)'}}/>Receita</div>
              <div style={{display:'flex', alignItems:'center', gap:5}}><div style={{width:10, height:2, background:'var(--ink-3)'}}/>Custos</div>
            </div>
          </div>
          <svg viewBox="0 0 600 140" style={{width:'100%', height:140}}>
            {[0,1,2,3].map(i => <line key={i} x1="0" y1={i*35+10} x2="600" y2={i*35+10} stroke="#E5DED1" strokeWidth="0.5" strokeDasharray="2 3"/>)}
            {/* revenue bars */}
            {revenue.map((v,i) => (
              <g key={i}>
                <rect x={i*48 + 12} y={140 - (v/max)*120} width="14" height={(v/max)*120} fill="#F08A2C" rx="2"/>
                <rect x={i*48 + 28} y={140 - (cost[i]/max)*120} width="14" height={(cost[i]/max)*120} fill="#5C544E" rx="2" opacity="0.7"/>
                <text x={i*48 + 24} y="135" fontSize="8" fill="#8B827B" fontFamily="var(--mono)" textAnchor="middle">{months[i]}</text>
              </g>
            ))}
          </svg>
        </div>
        {/* table */}
        <div style={{background:'white', border:'1px solid var(--line)', borderRadius:8, overflow:'hidden'}}>
          <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', padding:'8px 14px', borderBottom:'1px solid var(--line)', fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)', textTransform:'uppercase', letterSpacing:'0.08em', background:'#FBF9F5'}}>
            <div>Conta</div><div>Saldo</div><div>Vencendo</div><div>Status</div>
          </div>
          {[
            ['Contas a receber', 'R$ 1.847.300', 'R$ 234k em 7d', 'no prazo'],
            ['Contas a pagar', 'R$ 982.450', 'R$ 118k em 3d', 'atenção'],
            ['Boletos emitidos · abr', 'R$ 612.800', '184 títulos', 'no prazo'],
          ].map((r,i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', padding:'9px 14px', borderBottom: i<2?'1px solid var(--line)':'none', fontSize:11.5, alignItems:'center'}}>
              <div style={{fontWeight:500}}>{r[0]}</div>
              <div style={{fontFamily:'var(--mono)'}}>{r[1]}</div>
              <div style={{fontFamily:'var(--mono)', color:'var(--ink-3)', fontSize:10.5}}>{r[2]}</div>
              <div><span style={{fontSize:10, padding:'2px 8px', borderRadius:99, background: r[3]==='atenção'?'#FFF3CD':'#E8F5E8', color: r[3]==='atenção'?'#9A6900':'#166534'}}>{r[3]}</span></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ============ OmniChannel ============
const OmniMockup = () => {
  const channels = [
    {n:'WhatsApp', c:'#25D366', count: 47},
    {n:'Email', c:'#5C544E', count: 23},
    {n:'Instagram', c:'#E1306C', count: 12},
    {n:'Web Chat', c:'#F08A2C', count: 8},
    {n:'Facebook', c:'#1877F2', count: 4},
  ];
  const conversations = [
    {n:'Carla Mendes', co:'Bruke', ch:'WhatsApp', m:'Pode me enviar a proposta atualizada?', t:'agora', un:2, c:'#25D366'},
    {n:'Roberto Silva', co:'Diprotec', ch:'Email', m:'Confirmando pedido #4821 para entrega...', t:'5min', un:0, c:'#5C544E'},
    {n:'@flexoseal', co:'', ch:'Instagram', m:'Vocês fazem entrega para SC?', t:'12min', un:1, c:'#E1306C'},
    {n:'João Costa', co:'Wtec', ch:'WhatsApp', m:'Obrigado pelo retorno rápido!', t:'34min', un:0, c:'#25D366'},
    {n:'Lead site', co:'', ch:'Web Chat', m:'Olá, gostaria de saber sobre o módulo...', t:'1h', un:0, c:'#F08A2C'},
  ];
  return (
    <div style={mockupStyles.app}>
      <div style={mockupStyles.bar}>
        <div style={mockupStyles.dot('#FF5F57')}/><div style={mockupStyles.dot('#FEBC2E')}/><div style={mockupStyles.dot('#28C840')}/>
        <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)'}}>frution.app/omni/inbox</div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'170px 280px 1fr', minHeight: 480}}>
        {/* channel rail */}
        <div style={{background:'#FBF9F5', borderRight:'1px solid var(--line)', padding:'18px 12px'}}>
          <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:10}}>Canais</div>
          <div style={{padding:'7px 9px', borderRadius:5, fontSize:11.5, fontWeight:600, background:'white', border:'1px solid var(--line)', display:'flex', justifyContent:'space-between', marginBottom:10}}>
            <span>Todos</span><span style={{color:'var(--ink-4)', fontFamily:'var(--mono)', fontSize:10}}>94</span>
          </div>
          {channels.map(c => (
            <div key={c.n} style={{padding:'6px 9px', borderRadius:5, fontSize:11.5, display:'flex', alignItems:'center', gap:8, marginBottom:2}}>
              <div style={{width:6, height:6, borderRadius:'50%', background:c.c}}/>
              <span style={{flex:1}}>{c.n}</span>
              <span style={{fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)'}}>{c.count}</span>
            </div>
          ))}
          <div style={{height:1, background:'var(--line)', margin:'14px -4px'}}/>
          <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:8}}>Etiquetas</div>
          {[['Urgente','#DC2626'],['Vendas','#F08A2C'],['Suporte','#16A34A'],['Pós-venda','#0891B2']].map(([n,c]) => (
            <div key={n} style={{padding:'5px 9px', fontSize:11, display:'flex', gap:7, alignItems:'center'}}>
              <div style={{width:8, height:8, borderRadius:2, background:c}}/>{n}
            </div>
          ))}
        </div>
        {/* conv list */}
        <div style={{borderRight:'1px solid var(--line)'}}>
          <div style={{padding:'14px 14px 10px', borderBottom:'1px solid var(--line)'}}>
            <div style={{fontSize:13, fontWeight:600, marginBottom:8, fontFamily:'var(--serif)'}}>Inbox</div>
            <div style={{fontSize:10.5, padding:'5px 10px', borderRadius:5, background:'#FBF9F5', border:'1px solid var(--line)', color:'var(--ink-3)', fontFamily:'var(--mono)'}}>🔍 buscar conversas...</div>
          </div>
          {conversations.map((c,i) => (
            <div key={i} style={{padding:'11px 14px', borderBottom:'1px solid var(--line)', background: i===0?'var(--primary-tint)':'white', cursor:'pointer'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:3}}>
                <div style={{display:'flex', gap:6, alignItems:'center'}}>
                  <div style={{width:7, height:7, borderRadius:'50%', background:c.c}}/>
                  <span style={{fontSize:11.5, fontWeight: c.un?700:600}}>{c.n}</span>
                  {c.co && <span style={{fontSize:10, color:'var(--ink-4)'}}>· {c.co}</span>}
                </div>
                <div style={{display:'flex', gap:6, alignItems:'center'}}>
                  {c.un > 0 && <span style={{fontSize:9, fontWeight:700, color:'white', background:'var(--primary)', padding:'1px 5px', borderRadius:8, minWidth:14, textAlign:'center'}}>{c.un}</span>}
                  <span style={{fontSize:10, color:'var(--ink-4)', fontFamily:'var(--mono)'}}>{c.t}</span>
                </div>
              </div>
              <div style={{fontSize:11, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{c.m}</div>
            </div>
          ))}
        </div>
        {/* conversation */}
        <div style={{display:'flex', flexDirection:'column'}}>
          <div style={{padding:'12px 18px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div>
              <div style={{fontSize:13, fontWeight:600}}>Carla Mendes</div>
              <div style={{fontSize:10, color:'var(--ink-4)', display:'flex', alignItems:'center', gap:5}}>
                <div style={{width:5, height:5, borderRadius:'50%', background:'#25D366'}}/>
                WhatsApp · Bruke Indústria · Online
              </div>
            </div>
            <div style={{fontSize:10, padding:'3px 8px', background:'var(--primary-soft)', color:'var(--primary-deep)', borderRadius:99, fontWeight:600}}>VENDAS</div>
          </div>
          <div style={{flex:1, padding:'18px', background:'#FBF9F5', display:'flex', flexDirection:'column', gap:10, overflow:'hidden'}}>
            <div style={{fontSize:9.5, color:'var(--ink-4)', textAlign:'center', fontFamily:'var(--mono)'}}>HOJE · 14:32</div>
            <div style={{maxWidth:'70%', background:'white', padding:'8px 12px', borderRadius:'10px 10px 10px 2px', fontSize:11.5, alignSelf:'flex-start', boxShadow:'0 1px 1px rgba(0,0,0,0.03)'}}>
              Oi! Tudo bem? Recebi seu email mas queria conferir um detalhe do pedido.
              <div style={{fontSize:9, color:'var(--ink-4)', marginTop:3, fontFamily:'var(--mono)'}}>14:32</div>
            </div>
            <div style={{maxWidth:'70%', background:'var(--ink)', color:'white', padding:'8px 12px', borderRadius:'10px 10px 2px 10px', fontSize:11.5, alignSelf:'flex-end'}}>
              Olá Carla! Claro, pode me dizer o número do pedido?
              <div style={{fontSize:9, color:'rgba(255,255,255,0.6)', marginTop:3, fontFamily:'var(--mono)'}}>14:33 ✓✓</div>
            </div>
            <div style={{maxWidth:'70%', background:'white', padding:'8px 12px', borderRadius:'10px 10px 10px 2px', fontSize:11.5, alignSelf:'flex-start', boxShadow:'0 1px 1px rgba(0,0,0,0.03)'}}>
              Pode me enviar a proposta atualizada?
              <div style={{fontSize:9, color:'var(--ink-4)', marginTop:3, fontFamily:'var(--mono)'}}>agora</div>
            </div>
          </div>
          <div style={{padding:'10px 14px', borderTop:'1px solid var(--line)', display:'flex', gap:8, alignItems:'center', background:'white'}}>
            <div style={{flex:1, fontSize:11, color:'var(--ink-4)', padding:'7px 11px', background:'#FBF9F5', border:'1px solid var(--line)', borderRadius:6}}>Digitar mensagem...</div>
            <div style={{padding:'6px 12px', background:'var(--primary)', color:'white', borderRadius:6, fontSize:11, fontWeight:600}}>Enviar</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============ Tracking ============
const TrackingMockup = () => {
  const sources = [
    {key:'gads', label:'Google Ads', color:'#4285F4', count:412, pct:34, conv:48, cpl:'R$ 38'},
    {key:'meta', label:'Meta Ads', color:'#1877F2', count:267, pct:22, conv:31, cpl:'R$ 52'},
    {key:'org', label:'Orgânico', color:'#16A34A', count:218, pct:18, conv:42, cpl:'R$ 0'},
    {key:'gpt', label:'ChatGPT', color:'#10A37F', count:148, pct:12, conv:22, cpl:'R$ 0'},
    {key:'ref', label:'Indicação', color:'#A855F7', count:108, pct:9, conv:35, cpl:'R$ 0'},
    {key:'dir', label:'Direto', color:'#5C544E', count:62, pct:5, conv:9, cpl:'R$ 0'},
  ];
  const conversations = [
    {name:'Mariana Soares', co:'Bruke', msg:'Vi o anúncio sobre automação de processos...', src:'gads', srcLabel:'Google Ads', srcColor:'#4285F4', glyph:'G', when:'agora', kw:'automação industrial'},
    {name:'Rafael Lima', co:'Diprotec', msg:'Cheguei pelo Instagram, queria saber valores', src:'meta', srcLabel:'Meta Ads', srcColor:'#1877F2', glyph:'f', when:'14 min', kw:'campanha · CRM PME'},
    {name:'Júlia Carvalho', co:'Flexoseal', msg:'Pesquisei "CRM pra indústria" no Google', src:'org', srcLabel:'Orgânico', srcColor:'#16A34A', glyph:'↗', when:'1h', kw:'crm para indústria'},
    {name:'Pedro Henrique', co:'—', msg:'O ChatGPT me indicou vocês como ERP nacional', src:'gpt', srcLabel:'ChatGPT', srcColor:'#10A37F', glyph:'✦', when:'2h', kw:'erp brasileiro mid-market'},
    {name:'Carla Mendes', co:'Wtec', msg:'Recebi indicação da Bruke sobre o Frution', src:'ref', srcLabel:'Indicação', srcColor:'#A855F7', glyph:'↺', when:'3h', kw:'cliente Bruke'},
  ];
  return (
    <div style={mockupStyles.app}>
      <div style={mockupStyles.bar}>
        <div style={mockupStyles.dot('#FF5F57')}/><div style={mockupStyles.dot('#FEBC2E')}/><div style={mockupStyles.dot('#28C840')}/>
        <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)'}}>frution.app/tracking/conversas</div>
      </div>
      <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line)', background:'#FBF9F5', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:4}}>Tracking · origem das conversas</div>
          <div style={{fontSize:17, fontWeight:600, fontFamily:'var(--serif)', display:'flex', alignItems:'center', gap:10}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#25D366"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.42 1.32 4.91L2 22l5.31-1.39a9.86 9.86 0 0 0 4.73 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2z"/></svg>
            Conversas WhatsApp por canal
          </div>
        </div>
        <div style={{display:'flex', gap:6}}>
          {['Hoje','7d','30d','90d'].map((p,i) => (
            <div key={p} style={{
              padding:'5px 11px', borderRadius:6, fontSize:10.5, fontFamily:'var(--mono)',
              background: i===2?'var(--ink)':'white', color: i===2?'white':'var(--ink-3)',
              border: i===2?'none':'1px solid var(--line)',
            }}>{p}</div>
          ))}
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.05fr 1fr', minHeight:460}}>
        {/* attribution panel */}
        <div style={{padding:'18px 22px', borderRight:'1px solid var(--line)'}}>
          <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:4}}>
            <div style={{fontFamily:'var(--serif)', fontSize:32, fontWeight:500, letterSpacing:'-0.02em'}}>1.215</div>
            <div style={{fontSize:11, color:'#16A34A', fontFamily:'var(--mono)', fontWeight:600}}>↑ 18,4%</div>
          </div>
          <div style={{fontSize:11, color:'var(--ink-4)', marginBottom:18}}>Conversas atribuídas · últimos 30 dias</div>

          {/* stacked horizontal bar */}
          <div style={{display:'flex', height:8, borderRadius:99, overflow:'hidden', marginBottom:6, background:'var(--paper-2)'}}>
            {sources.map(s => (
              <div key={s.key} style={{width:`${s.pct}%`, background:s.color}}/>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:9.5, fontFamily:'var(--mono)', color:'var(--ink-4)', marginBottom:18}}>
            <span>0%</span><span>100%</span>
          </div>

          {sources.map((s,i) => (
            <div key={s.key} style={{padding:'9px 0', borderTop: i===0?'none':'1px dashed var(--line)', display:'grid', gridTemplateColumns:'18px 1fr auto auto', gap:10, alignItems:'center'}}>
              <div style={{
                width:18, height:18, borderRadius:5, background:s.color,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:10, fontWeight:700, color:'white',
              }}>{s.label[0]}</div>
              <div>
                <div style={{fontSize:11.5, fontWeight:600}}>{s.label}</div>
                <div style={{fontSize:9.5, color:'var(--ink-4)', fontFamily:'var(--mono)'}}>{s.conv} viraram cliente · CPL {s.cpl}</div>
              </div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', textAlign:'right'}}>{s.count}</div>
              <div style={{fontFamily:'var(--mono)', fontSize:10.5, color:s.color, fontWeight:600, textAlign:'right', minWidth:28}}>{s.pct}%</div>
            </div>
          ))}
        </div>

        {/* live conversations list */}
        <div style={{padding:'16px 18px', background:'#FBF9F5'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12}}>
            <div style={{fontSize:13, fontWeight:600, fontFamily:'var(--serif)'}}>Últimas conversas</div>
            <div style={{display:'flex', alignItems:'center', gap:6, fontSize:9.5, fontFamily:'var(--mono)', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.08em'}}>
              <span style={{width:6, height:6, borderRadius:'50%', background:'#16A34A', boxShadow:'0 0 0 3px rgba(22,163,74,0.18)'}}/>
              ao vivo
            </div>
          </div>
          {conversations.map((c,i) => (
            <div key={i} style={{
              background:'white', border:'1px solid var(--line)', borderRadius:8,
              padding:'10px 12px', marginBottom:8,
              display:'grid', gridTemplateColumns:'28px 1fr auto', gap:10, alignItems:'flex-start',
            }}>
              <div style={{
                width:28, height:28, borderRadius:'50%',
                background:`linear-gradient(135deg, ${c.srcColor}, ${c.srcColor}AA)`,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:11, fontWeight:700, color:'white',
              }}>{c.name.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
              <div style={{minWidth:0}}>
                <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:2}}>
                  <span style={{fontSize:11.5, fontWeight:600}}>{c.name}</span>
                  {c.co !== '—' && <span style={{fontSize:10, color:'var(--ink-4)'}}>· {c.co}</span>}
                </div>
                <div style={{fontSize:10.5, color:'var(--ink-3)', marginBottom:5, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.msg}</div>
                <div style={{display:'flex', alignItems:'center', gap:6}}>
                  <span style={{
                    display:'inline-flex', alignItems:'center', gap:4,
                    fontSize:9, fontFamily:'var(--mono)', fontWeight:600,
                    padding:'2px 7px', borderRadius:99,
                    background:`${c.srcColor}1A`, color:c.srcColor,
                    border:`1px solid ${c.srcColor}33`,
                    letterSpacing:'0.04em',
                  }}>
                    <span style={{
                      width:11, height:11, borderRadius:'50%', background:c.srcColor, color:'white',
                      fontSize:8, fontWeight:700, display:'inline-flex', alignItems:'center', justifyContent:'center',
                    }}>{c.glyph}</span>
                    {c.srcLabel}
                  </span>
                  <span style={{fontSize:9.5, color:'var(--ink-4)', fontFamily:'var(--mono)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.kw}</span>
                </div>
              </div>
              <div style={{fontSize:9.5, color:'var(--ink-4)', fontFamily:'var(--mono)', whiteSpace:'nowrap'}}>{c.when}</div>
            </div>
          ))}
          <div style={{marginTop:10, padding:'9px 11px', background:'var(--primary-tint)', border:'1px solid var(--primary-soft)', borderRadius:6, fontSize:10.5, color:'var(--primary-deep)', display:'flex', gap:8, alignItems:'center'}}>
            <div style={{width:6, height:6, borderRadius:'50%', background:'var(--primary)'}}/>
            <strong>Google Ads</strong>&nbsp;converte 11,7% — melhor ROI do mês
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { CRMMockup, BPMMockup, ERPMockup, OmniMockup, TrackingMockup, FrutionMark, MockupFit });