// Dashboard mockup section — shows the real product UI between Tech and ROI.
// Interactive: switch between Inbox, Pipeline and Analytics views.
const Dashboard = () => {
  const db = L('dashboard');
  const [tab, setTab] = React.useState('inbox');

  return (
    <section id="dashboard" className="section-pad" style={{ position:'relative', overflow:'hidden' }}>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(900px 500px at 50% 100%, rgba(0,228,122,0.06), transparent 60%)',
        pointerEvents:'none'
      }}/>
      <div className="container" style={{ position:'relative' }}>
        <div style={{ textAlign:'center', marginBottom:48, maxWidth:760, margin:'0 auto 48px' }}>
          <Reveal className="fade-up">
            <div className="eyebrow" style={{ marginBottom:14 }}>{db.eyebrow}</div>
          </Reveal>
          <Reveal className="fade-up" delay={80}>
            <h2 className="display" style={{ fontSize:'clamp(36px, 4.8vw, 64px)', margin:0 }}>
              {db.h2a} <span className="serif" style={{ color:'var(--green)' }}>{db.word}</span><br/>
              <span style={{ color:'var(--ink-3)' }}>—</span> {db.h2b.replace(/^—\s*/,'')}
            </h2>
          </Reveal>
          <Reveal className="fade-up" delay={160}>
            <p style={{ fontSize:16, color:'var(--ink-2)', marginTop:18 }}>
              {db.sub}
            </p>
          </Reveal>

          <Reveal className="fade-up" delay={240}>
            <div style={{ display:'inline-flex', marginTop:28, padding:5, borderRadius:999, border:'1px solid var(--line)', background:'rgba(255,255,255,0.02)', gap:2 }}>
              {[
                ['inbox',db.tabs.inbox],
                ['pipeline',db.tabs.pipeline],
                ['analytics',db.tabs.analytics],
              ].map(([id,label]) => (
                <button key={id} onClick={() => setTab(id)} style={{
                  padding:'10px 18px', borderRadius:999, fontSize:13,
                  background: tab === id ? 'var(--green)' : 'transparent',
                  color: tab === id ? '#001509' : 'var(--ink-2)',
                  fontWeight: tab === id ? 600 : 400,
                  whiteSpace:'nowrap',
                  transition:'all .2s'
                }}>
                  {label}
                </button>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal className="fade-up" delay={160}>
          <BrowserFrame>
            {tab === 'inbox'     && <InboxView/>}
            {tab === 'pipeline'  && <PipelineView/>}
            {tab === 'analytics' && <AnalyticsView/>}
          </BrowserFrame>
        </Reveal>
      </div>
    </section>
  );
};

const BrowserFrame = ({ children }) => (
  <div style={{
    borderRadius:18, overflow:'hidden',
    border:'1px solid var(--line)',
    background:'#070b08',
    boxShadow:'0 60px 120px -30px rgba(0,228,122,0.2), 0 30px 80px -30px rgba(0,0,0,0.6)',
  }}>
    {/* chrome */}
    <div style={{
      display:'flex', alignItems:'center', gap:10, padding:'12px 16px',
      borderBottom:'1px solid var(--line)', background:'#0a0f0c'
    }}>
      <div style={{ display:'flex', gap:6 }}>
        {['#FF5F57','#FEBB2E','#28C840'].map(c => (
          <div key={c} style={{ width:11, height:11, borderRadius:'50%', background:c, opacity:0.8 }}/>
        ))}
      </div>
      <div style={{
        marginLeft:14, padding:'5px 12px', borderRadius:7,
        background:'rgba(255,255,255,0.04)', border:'1px solid var(--line)',
        fontSize:11.5, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace",
        display:'flex', alignItems:'center', gap:8
      }}>
        <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--green)' }}/>
        app.zapflux.io / inbox
      </div>
    </div>
    {children}
  </div>
);

/* ───── INBOX VIEW ───── */
const InboxView = () => {
  const db = L('dashboard');
  const conversations = [
    { name:'Marina Vieira', last:'Quinta às 10 ✔️', time:'agora', unread:0, hot:true, avatar:'#FF6B9D' },
    { name:'João Pessoa', last:'Beleza, manda o boleto', time:'2min', unread:2, hot:true, avatar:'#0EA3FF' },
    { name:'Camila S.', last:'Vou pensar e te falo', time:'8min', unread:0, hot:false, avatar:'#FFB547' },
    { name:'Lucas Dantas', last:'Vocês entregam em SC?', time:'12min', unread:1, hot:false, avatar:'#b56dff' },
    { name:'Fernanda L.', last:'Audio: 0:22', time:'18min', unread:0, hot:false, avatar:'#00E47A' },
    { name:'Ricardo +1', last:'Aceitam Pix?', time:'31min', unread:0, hot:false, avatar:'#FF7A3D' },
  ];

  return (
    <div style={{ display:'grid', gridTemplateColumns:'72px 320px 1fr 280px', minHeight:560 }} className="inbox-grid">
      {/* nav */}
      <div style={{
        borderRight:'1px solid var(--line)', padding:'18px 0',
        display:'flex', flexDirection:'column', alignItems:'center', gap:10,
        background:'#080c0a'
      }} className="inbox-nav">
        <div style={{
          width:34, height:34, borderRadius:9,
          background:'linear-gradient(135deg, #00ff88, #00a55a)',
          display:'grid', placeItems:'center', marginBottom:8
        }}>
          <Icon name="bolt" size={16} stroke="#001509"/>
        </div>
        {['chat','users','trend','rocket','shield'].map((ic, i) => (
          <div key={ic} style={{
            width:38, height:38, borderRadius:10,
            display:'grid', placeItems:'center',
            background: i === 0 ? 'rgba(0,228,122,0.12)' : 'transparent',
            color: i === 0 ? 'var(--green)' : 'var(--ink-3)'
          }}>
            <Icon name={ic} size={16}/>
          </div>
        ))}
      </div>

      {/* conversation list */}
      <div style={{ borderRight:'1px solid var(--line)', display:'flex', flexDirection:'column' }} className="inbox-list">
        <div style={{ padding:'18px 18px 14px', borderBottom:'1px solid var(--line)' }}>
          <div style={{ fontSize:13, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace", marginBottom:8 }}>INBOX</div>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <div style={{ fontSize:18, fontWeight:600 }}>{db.inboxTitle}</div>
            <span style={{
              padding:'2px 7px', borderRadius:999,
              background:'rgba(0,228,122,0.12)', color:'var(--green)',
              fontSize:11, fontWeight:600
            }}>248</span>
          </div>
        </div>
        <div style={{ flex:1, overflow:'auto' }}>
          {conversations.map((c, i) => (
            <div key={i} style={{
              padding:'14px 18px', borderBottom:'1px solid var(--line-2)',
              display:'flex', gap:12, alignItems:'flex-start',
              background: i === 0 ? 'rgba(0,228,122,0.05)' : 'transparent',
              borderLeft: i === 0 ? '2px solid var(--green)' : '2px solid transparent',
              cursor:'pointer'
            }}>
              <div style={{
                width:36, height:36, borderRadius:'50%', flexShrink:0,
                background:`linear-gradient(135deg, ${c.avatar}, rgba(0,0,0,0.4))`,
                display:'grid', placeItems:'center', color:'#fff', fontSize:12, fontWeight:600
              }}>
                {c.name.split(' ').map(n => n[0]).slice(0,2).join('')}
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', justifyContent:'space-between', gap:8 }}>
                  <div style={{ fontSize:13.5, fontWeight:500, display:'flex', alignItems:'center', gap:6, minWidth:0 }}>
                    <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.name}</span>
                    {c.hot && <span title="lead quente"><Icon name="fire" size={12} stroke="var(--amber)"/></span>}
                  </div>
                  <div style={{ fontSize:11, color:'var(--ink-4)', flexShrink:0 }}>{c.time}</div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', gap:8, marginTop:4 }}>
                  <div style={{ fontSize:12.5, color:'var(--ink-3)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.last}</div>
                  {c.unread > 0 && <div style={{
                    width:18, height:18, borderRadius:'50%',
                    background:'var(--green)', color:'#001509', fontSize:10, fontWeight:700,
                    display:'grid', placeItems:'center', flexShrink:0
                  }}>{c.unread}</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* current conversation */}
      <div style={{ display:'flex', flexDirection:'column', minWidth:0 }} className="inbox-thread">
        <div style={{
          padding:'14px 22px', borderBottom:'1px solid var(--line)',
          display:'flex', alignItems:'center', gap:12
        }}>
          <div style={{
            width:36, height:36, borderRadius:'50%',
            background:'linear-gradient(135deg, #FF6B9D, rgba(0,0,0,0.4))',
            display:'grid', placeItems:'center', color:'#fff', fontSize:12, fontWeight:600
          }}>MV</div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:14.5, fontWeight:500, display:'flex', alignItems:'center', gap:8 }}>
              Marina Vieira
              <span style={{
                padding:'2px 8px', borderRadius:6,
                background:'rgba(0,228,122,0.12)', color:'var(--green)',
                fontSize:10.5, fontWeight:600, letterSpacing:'0.05em'
              }}>HOT · 92</span>
            </div>
            <div style={{ fontSize:11.5, color:'var(--ink-4)', marginTop:2 }}>+55 11 99XXX-4421 · WhatsApp</div>
          </div>
          <button style={{
            padding:'8px 14px', borderRadius:8, fontSize:12,
            background:'rgba(0,228,122,0.1)', color:'var(--green)',
            border:'1px solid rgba(0,228,122,0.25)'
          }}>
            {db.takeOver}
          </button>
        </div>
        <div style={{ flex:1, padding:'18px 22px', display:'flex', flexDirection:'column', gap:10, overflow:'auto' }}>
          {[
            { who:'them', text:db.thread[0] },
            { who:'ai', text:db.thread[1] },
            { who:'them', text:db.thread[2] },
            { who:'ai', text:db.thread[3] },
            { who:'them', text:db.thread[4] },
          ].map((m, i) => (
            <div key={i} style={{
              alignSelf: m.who === 'ai' ? 'flex-end' : 'flex-start',
              maxWidth:'72%',
              padding:'8px 12px',
              borderRadius: m.who === 'ai' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
              background: m.who === 'ai' ? 'linear-gradient(180deg, #00b860, #009147)' : '#1a2520',
              color: m.who === 'ai' ? '#001509' : '#e6efea',
              fontSize:13, lineHeight:1.4
            }}>{m.text}</div>
          ))}
          <div style={{
            alignSelf:'center', marginTop:12,
            padding:'8px 14px', borderRadius:10,
            border:'1px dashed rgba(0,228,122,0.35)',
            background:'rgba(0,228,122,0.05)',
            fontSize:11, color:'var(--green)', fontFamily:"'Geist Mono',monospace"
          }}>{db.scheduleCreated}</div>
        </div>
      </div>

      {/* lead panel */}
      <div style={{
        borderLeft:'1px solid var(--line)', padding:'18px 18px',
        background:'#080c0a'
      }} className="inbox-panel">
        <div style={{ fontSize:11.5, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace", marginBottom:14 }}>LEAD</div>
        <div style={{ fontSize:18, fontWeight:600 }}>Marina Vieira</div>
        <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:4 }}>marina@vieira.co</div>
        <div style={{
          marginTop:16, padding:14, borderRadius:11,
          background:'rgba(0,228,122,0.08)', border:'1px solid rgba(0,228,122,0.2)'
        }}>
          <div style={{ fontSize:11, color:'var(--green)', fontFamily:"'Geist Mono',monospace", marginBottom:6 }}>{db.secScore}</div>
          <div style={{
            fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700, fontSize:36, color:'var(--green)', letterSpacing:'-0.03em', lineHeight:1
          }}>92<span style={{ fontSize:14, color:'var(--ink-3)' }}>/100</span></div>
          <div style={{ fontSize:11.5, color:'var(--ink-2)', marginTop:6 }}>{db.leadReady}</div>
        </div>
        <div style={{ marginTop:18 }}>
          <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace", marginBottom:8 }}>{db.secTags}</div>
          <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
            {['Instalação','Moema','90m²','Agendado','Inst.'].map(t => (
              <span key={t} className="tag">{t}</span>
            ))}
          </div>
        </div>
        <div style={{ marginTop:18 }}>
          <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace", marginBottom:8 }}>{db.secJourney}</div>
          {db.journey.map(([t,d], i) => (
            <div key={i} style={{ display:'flex', gap:10, padding:'6px 0', fontSize:12 }}>
              <span style={{ fontFamily:"'Geist Mono',monospace", color:'var(--ink-4)', flexShrink:0 }}>{t}</span>
              <span style={{ color:'var(--ink-2)' }}>{d}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ───── PIPELINE KANBAN ───── */
const PipelineView = () => {
  const db = L('dashboard');
  const cols = [
    { title:db.pipeCols[0], count:42, color:'#0EA3FF', cards:[
      { name:'João Pessoa', val:'R$ 890', source:'WhatsApp', tag:'Inst.', avatar:'#0EA3FF' },
      { name:'Camila S.', val:'R$ 2.480', source:'Instagram', tag:'Premium', avatar:'#FFB547' },
      { name:'Lucas Dantas', val:'R$ 1.290', source:'WhatsApp', tag:'SC', avatar:'#b56dff' },
    ]},
    { title:db.pipeCols[1], count:18, color:'#00E47A', cards:[
      { name:'Marina Vieira', val:'R$ 2.480', source:'WhatsApp', tag:'Hot 92', avatar:'#FF6B9D', hot:true },
      { name:'Pedro Aoki', val:'R$ 3.120', source:'WhatsApp', tag:'Hot 87', avatar:'#00E47A', hot:true },
    ]},
    { title:db.pipeCols[2], count:9, color:'#FFB547', cards:[
      { name:'Aura Móveis', val:'R$ 12.400', source:'WhatsApp', tag:'B2B', avatar:'#FF7A3D' },
      { name:'Fernanda L.', val:'R$ 890', source:'Instagram', tag:'1ª compra', avatar:'#00E47A' },
    ]},
    { title:db.pipeCols[3], count:24, color:'#00E47A', cards:[
      { name:'OffGrid Solar', val:'R$ 48.700', source:'WhatsApp', tag:'Recorrente', avatar:'#0EA3FF' },
      { name:'Clinica Vértice', val:'R$ 6.300', source:'WhatsApp', tag:'B2B', avatar:'#FF6B9D' },
    ]},
  ];

  return (
    <div style={{
      padding:'24px 22px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14,
      minHeight:560, overflowX:'auto'
    }} className="pipe-grid">
      {cols.map((col, i) => (
        <div key={i} style={{ display:'flex', flexDirection:'column', gap:10, minWidth:200 }}>
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'8px 12px', borderRadius:10,
            background:'rgba(255,255,255,0.025)', border:'1px solid var(--line)'
          }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, fontWeight:500 }}>
              <span style={{ width:6, height:6, borderRadius:'50%', background:col.color }}/>
              {col.title}
            </div>
            <span style={{ fontSize:11.5, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace" }}>{col.count}</span>
          </div>
          {col.cards.map((c, j) => (
            <div key={j} className="card" style={{
              padding:'12px 14px', display:'flex', flexDirection:'column', gap:8
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <div style={{
                  width:24, height:24, borderRadius:'50%',
                  background:`linear-gradient(135deg, ${c.avatar}, rgba(0,0,0,0.4))`,
                  fontSize:10, color:'#fff', display:'grid', placeItems:'center', fontWeight:600
                }}>
                  {c.name.split(' ').map(n=>n[0]).slice(0,2).join('')}
                </div>
                <div style={{ fontSize:13, fontWeight:500, flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.name}</div>
                {c.hot && <Icon name="fire" size={12} stroke="var(--amber)"/>}
              </div>
              <div style={{ fontFamily:"'Geist Mono',monospace", fontSize:14, color:'var(--green)' }}>{c.val}</div>
              <div style={{ display:'flex', gap:6 }}>
                <span className="tag" style={{ fontSize:10 }}>{c.source}</span>
                <span className="tag" style={{ fontSize:10 }}>{c.tag}</span>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

/* ───── ANALYTICS ───── */
const AnalyticsView = () => {
  const db = L('dashboard');
  const bars = [22, 28, 35, 32, 48, 56, 64, 58, 78, 88, 92, 97, 84, 100];
  const srcColors = ['#00E47A','#0EA3FF','#FFB547','#FF6B9D'];
  const srcVals = [64, 24, 8, 4];
  const sources = db.sources.map((label, i) => ({ label, val:srcVals[i], color:srcColors[i] }));
  return (
    <div style={{ padding:'28px 28px', minHeight:560 }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:24 }} className="anl-kpi">
        {db.kpis.map(([k,v,d], i) => (
          <div key={i} className="card" style={{ padding:'18px 18px' }}>
            <div style={{ fontSize:11.5, color:'var(--ink-3)', fontFamily:"'Geist Mono',monospace", letterSpacing:'0.05em' }}>{k.toUpperCase()}</div>
            <div style={{ fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700, fontSize:30, marginTop:6, letterSpacing:'-0.03em' }}>{v}</div>
            <div style={{ fontSize:12, color:'var(--green)', marginTop:4, display:'flex', alignItems:'center', gap:5 }}>
              <Icon name="arrow-up" size={11}/> {d}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:14 }} className="anl-grid">
        <div className="card" style={{ padding:'22px 22px' }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:16 }}>
            <div>
              <div style={{ fontSize:14, fontWeight:500 }}>{db.convPerHour}</div>
              <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:2 }}>{db.last24}</div>
            </div>
            <div style={{ display:'flex', gap:6 }}>
              <span className="tag">{db.tagSales}</span>
              <span className="tag">{db.tagLeads}</span>
            </div>
          </div>
          <div style={{ display:'flex', alignItems:'flex-end', gap:6, height:140 }}>
            {bars.map((b, i) => (
              <div key={i} style={{
                flex:1, height: b + '%',
                background: i === bars.length-1
                  ? 'linear-gradient(180deg, var(--green-2), var(--green))'
                  : 'linear-gradient(180deg, rgba(0,228,122,0.45), rgba(0,228,122,0.12))',
                borderRadius:'3px 3px 1px 1px',
                boxShadow: i === bars.length-1 ? '0 0 12px var(--green-glow)' : 'none'
              }}/>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding:'22px 22px' }}>
          <div style={{ fontSize:14, fontWeight:500, marginBottom:14 }}>{db.leadSource}</div>
          <div style={{
            position:'relative', width:120, height:120, margin:'0 auto', borderRadius:'50%',
            background: `conic-gradient(${sources[0].color} 0% 64%, ${sources[1].color} 64% 88%, ${sources[2].color} 88% 96%, ${sources[3].color} 96% 100%)`
          }}>
            <div style={{
              position:'absolute', inset:18, borderRadius:'50%', background:'#0a0f0c',
              display:'grid', placeItems:'center', flexDirection:'column'
            }}>
              <div style={{ fontFamily:"'Bricolage Grotesque',sans-serif", fontSize:22, fontWeight:700, letterSpacing:'-0.03em' }}>312</div>
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:18 }}>
            {sources.map(s => (
              <div key={s.label} style={{ display:'flex', alignItems:'center', gap:8, fontSize:12.5 }}>
                <span style={{ width:8, height:8, borderRadius:2, background:s.color }}/>
                <span style={{ flex:1, color:'var(--ink-2)' }}>{s.label}</span>
                <span style={{ fontFamily:"'Geist Mono',monospace", color:'var(--ink-3)' }}>{s.val}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width:760px) {
          .anl-kpi { grid-template-columns: repeat(2, 1fr) !important; }
          .anl-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
};

window.Dashboard = Dashboard;