// Analytics deep-dive — funnel, traffic sources, geo, time-to-sellout
const Analytics = () => {
  const [range, setRange] = React.useState('30d');
  const [event, setEvent] = React.useState('all');

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 30, fontWeight: 500, letterSpacing:'-0.02em' }}>Analytics</h1>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 }}>Understand how people discover, consider, and buy tickets.</div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <Select value={event} onChange={setEvent} options={[
            { value:'all', label:'All events' },
            { value:'apparat', label:'Apparat · Berghain' },
            { value:'comedy', label:'Comedy Abend vol. 4' },
            { value:'jazz', label:'Jazz · A-Trane' },
          ]}/>
          <SegControl value={range} onChange={setRange} options={[
            { value:'7d', label:'7D' },{ value:'30d', label:'30D' },{ value:'90d', label:'90D' },
          ]}/>
        </div>
      </div>

      {/* Funnel */}
      <div style={{ display:'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 18 }}>
        <Card pad={20}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Conversion funnel</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>How visitors become attendees</div>
            </div>
            <Chip tone="success" icon="sparkle">+2.4% vs. last period</Chip>
          </div>
          {[
            { stage:'Event page views', v:48218, pct:100 },
            { stage:'Clicked "Get tickets"', v:18420, pct:38.2 },
            { stage:'Started checkout', v:9621, pct:19.9 },
            { stage:'Entered payment', v:6840, pct:14.2 },
            { stage:'Completed purchase', v:5294, pct:11 },
          ].map((s, i, arr) => {
            const nextPct = arr[i+1]?.pct;
            const drop = nextPct != null ? (((s.pct - nextPct) / s.pct) * 100).toFixed(1) : null;
            return (
              <div key={i} style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, alignItems:'baseline' }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{s.stage}</span>
                  <div style={{ display:'flex', alignItems:'baseline', gap: 10 }}>
                    <span className="display" style={{ fontSize: 20, fontWeight: 500 }}>{s.v.toLocaleString()}</span>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{s.pct}%</span>
                  </div>
                </div>
                <div style={{ position: 'relative', height: 28 }}>
                  <div style={{ position:'absolute', inset: 0, background: 'var(--bg-muted)', borderRadius: 6 }}/>
                  <div style={{
                    position:'absolute', top: 0, left: 0, height: '100%',
                    width: `${s.pct}%`,
                    background: `linear-gradient(90deg, var(--ink), oklch(0.35 0.02 60))`,
                    borderRadius: 6,
                    transition: `width ${MOTION.dur.slow}ms ${MOTION.ease.out}`,
                  }}/>
                </div>
                {drop && <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, display:'flex', alignItems:'center', gap: 4 }}>
                  <Icon name="arrowDown" size={11} style={{ color: Number(drop) > 40 ? 'var(--danger)' : 'var(--ink-4)' }}/>
                  {drop}% dropped off
                </div>}
              </div>
            );
          })}
        </Card>
        <Card pad={20}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Traffic sources</div>
          {[
            { src:'Direct / Lesezeichen', pct: 38, v: '18,4K', color: 'var(--ink)' },
            { src:'Instagram', pct: 24, v: '11,6K', color: 'oklch(0.55 0.22 340)' },
            { src:'WhatsApp share', pct: 18, v: '8,7K', color: 'oklch(0.6 0.15 150)' },
            { src:'Google Suche', pct: 12, v: '5,8K', color: 'oklch(0.55 0.18 250)' },
            { src:'Twitter', pct: 5, v: '2,4K', color: 'oklch(0.55 0.16 230)' },
            { src:'Other', pct: 3, v: '1,4K', color: 'var(--ink-4)' },
          ].map((s, i) => (
            <div key={i} style={{ marginBottom: 12 }}>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 4 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500, display:'flex', alignItems:'center', gap: 7 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }}/>
                  {s.src}
                </span>
                <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{s.v} · {s.pct}%</span>
              </div>
              <div style={{ height: 4, borderRadius: 99, background: 'var(--bg-muted)' }}>
                <div style={{ height:'100%', width: `${s.pct}%`, background: s.color, borderRadius: 99 }}/>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Heatmap + geo + sellout */}
      <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        <Card pad={20}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>When people buy</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 14 }}>Heatmap by hour × day</div>
          <div style={{ display:'grid', gridTemplateColumns: 'auto repeat(7, 1fr)', gap: 3, fontSize: 10 }}>
            <div/>
            {['M','T','W','T','F','S','S'].map((d,i)=>(<div key={i} style={{ textAlign: 'center', color: 'var(--ink-4)', fontWeight: 600 }}>{d}</div>))}
            {Array.from({length: 12}).map((_, h) => (
              <React.Fragment key={h}>
                <div style={{ color: 'var(--ink-4)', paddingRight: 6, fontFamily:'var(--font-mono)' }}>{(h*2).toString().padStart(2,'0')}</div>
                {Array.from({length: 7}).map((_, d) => {
                  // Simulated pattern: evenings hotter, Sat/Sun hotter
                  const base = (h >= 8 && h <= 11 ? 0.7 : 0.3) * (d >= 5 ? 1.2 : 1) * (0.6 + Math.random()*0.5);
                  const intensity = Math.min(1, base);
                  return <div key={d} style={{
                    aspectRatio: '1', borderRadius: 3,
                    background: `oklch(${0.97 - intensity * 0.5} ${intensity * 0.15} 40)`,
                  }}/>;
                })}
              </React.Fragment>
            ))}
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 6, marginTop: 12, fontSize: 11, color: 'var(--ink-3)' }}>
            Less
            <div style={{ display: 'flex', gap: 2 }}>
              {[0.1, 0.3, 0.5, 0.7, 0.9].map(i => <div key={i} style={{ width: 14, height: 10, borderRadius: 2, background: `oklch(${0.97 - i * 0.5} ${i * 0.15} 40)` }}/>)}
            </div>
            More
          </div>
        </Card>

        <Card pad={20}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Top cities</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 16 }}>Where your buyers are</div>
          {[
            { city:'Berlin', pct: 42, tickets: 2224 },
            { city:'Hamburg', pct: 18, tickets: 954 },
            { city:'München', pct: 14, tickets: 742 },
            { city:'Köln', pct: 11, tickets: 583 },
            { city:'Frankfurt', pct: 7, tickets: 371 },
            { city:'Others', pct: 8, tickets: 420 },
          ].map((c, i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap: 10, padding: '8px 0', borderBottom: i<5?'1px solid var(--line)':'none' }}>
              <span style={{ width: 22, height: 22, borderRadius: 5, background: 'var(--bg-muted)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', fontFamily:'var(--font-mono)' }}>{i+1}</span>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{c.city}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{c.tickets.toLocaleString()}</span>
              <span style={{ width: 40, textAlign:'right', fontSize: 12.5, fontWeight: 600 }}>{c.pct}%</span>
            </div>
          ))}
        </Card>

        <Card pad={20}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Time to sellout</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 20 }}>Hours from launch to last ticket</div>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', padding: '14px 0' }}>
            <CircularProgress value={68} size={140} stroke={10} label={<div style={{ textAlign:'center' }}><div className="display" style={{ fontSize: 26, fontWeight: 500 }}>14h</div><div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>median</div></div>}/>
          </div>
          <Divider style={{ margin: '16px 0' }}/>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12 }}>
            <div><div style={{ color: 'var(--ink-3)' }}>Fastest</div><div className="mono" style={{ fontWeight: 600, marginTop: 2 }}>47m — Comedy</div></div>
            <div><div style={{ color: 'var(--ink-3)' }}>Slowest</div><div className="mono" style={{ fontWeight: 600, marginTop: 2 }}>9 days — Jazz</div></div>
          </div>
        </Card>
      </div>
    </div>
  );
};

window.Analytics = Analytics;