/* ============================================================
   Digital Odyssey, data-viz mockups (the "data-driven" signature)
   SVG/CSS dashboard cards reused across home, work, services.
   These intentionally read as ad/analytics dashboards, not stock photos.
   ============================================================ */

function Spark({ up=true, w=120, h=40, color }) {
  const c = color || (up ? 'var(--up)' : 'var(--down)');
  const pts = up ? [38,32,34,22,26,12,16,5] : [6,12,10,20,16,28,24,36];
  const step = w / (pts.length - 1);
  const d = pts.map((y,i)=>`${i?'L':'M'}${(i*step).toFixed(1)} ${(y/40*h).toFixed(1)}`).join(' ');
  const gid = 'sk'+Math.round(Math.random()*1e6);
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none" style={{ display:'block' }}>
      <defs><linearGradient id={gid} x1="0" y1="0" x2="0" y2="1"><stop stopColor={c} stopOpacity=".22"/><stop offset="1" stopColor={c} stopOpacity="0"/></linearGradient></defs>
      <path d={`${d} L ${w} ${h} L 0 ${h} Z`} fill={`url(#${gid})`} />
      <path d={d} stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* Animated growth line with gradient fill + dot */
function GrowthLine({ height=160 }) {
  const ref = React.useRef(null);
  const [len, setLen] = React.useState(0);
  React.useEffect(()=>{ if(ref.current) setLen(ref.current.getTotalLength()); },[]);
  const w=440, h=height;
  const d = `M0 ${h-24} C 70 ${h-30}, 110 ${h-70}, 170 ${h-78} S 280 ${h-58}, 330 ${h-110} S 410 ${h-132}, ${w} ${h-150}`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{ display:'block' }} preserveAspectRatio="none">
      <defs>
        <linearGradient id="gl-stroke" x1="0" y1="0" x2={w} y2="0"><stop stopColor="#0052ff"/><stop offset="1" stopColor="#1ae0e6"/></linearGradient>
        <linearGradient id="gl-fill" x1="0" y1="0" x2="0" y2="1"><stop stopColor="#1ae0e6" stopOpacity=".22"/><stop offset="1" stopColor="#1ae0e6" stopOpacity="0"/></linearGradient>
      </defs>
      <path d={`${d} L ${w} ${h} L 0 ${h} Z`} fill="url(#gl-fill)" />
      <path ref={ref} d={d} fill="none" stroke="url(#gl-stroke)" strokeWidth="3" strokeLinecap="round"
        style={{ strokeDasharray:len, strokeDashoffset:len, animation: len?'gl-draw 2s ease forwards .2s':'none' }} />
      <style>{`@keyframes gl-draw{to{stroke-dashoffset:0}}`}</style>
    </svg>
  );
}

/* Bars */
function Bars({ data=[40,58,46,72,64,88,96], color='var(--cyan)' }) {
  const max = Math.max(...data);
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap:8, height:96 }}>
      {data.map((v,i)=>(
        <div key={i} style={{ flex:1, height:`${v/max*100}%`, borderRadius:6, background: i===data.length-1?'var(--grad-energy)':'rgba(125,140,180,.22)', minHeight:6 }}></div>
      ))}
    </div>
  );
}

/* Donut metric */
function Donut({ pct=72, label='ROAS', color='#1ae0e6', size=120 }) {
  const r = size/2 - 9, c = 2*Math.PI*r;
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:12, width:size }}>
      <div style={{ position:'relative', width:size, height:size }}>
        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(125,140,180,.18)" strokeWidth="9" />
          <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth="9" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c*(1-pct/100)} transform={`rotate(-90 ${size/2} ${size/2})`}
            style={{ transition:'stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)' }} />
        </svg>
        <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <span style={{ fontFamily:'var(--font-mono)', fontWeight:500, fontSize:size*0.24, color:'var(--text)' }}>{pct}%</span>
        </div>
      </div>
      <span style={{ fontFamily:'var(--font-sans)', fontWeight:600, fontSize:11, color:'var(--text-3)', letterSpacing:'.08em', textTransform:'uppercase', textAlign:'center', lineHeight:1.3 }}>{label}</span>
    </div>
  );
}

/* The signature floating analytics dashboard card (dark) */
function AnalyticsCard({ style={} }) {
  const rows = [
    ['Meta Ads', '$24,180', '+3.8x', true],
    ['Google Search', '$18,640', '+5.1x', true],
    ['TikTok', '$9,210', '-0.4x', false],
  ];
  return (
    <div style={{ background:'var(--navy-elevated)', border:'1px solid rgba(255,255,255,.08)', borderRadius:'var(--radius-xl)', padding:26, width:360, boxShadow:'0 30px 70px rgba(0,0,0,.5)', color:'#fff', ...style }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:18 }}>
        <div>
          <div style={{ fontFamily:'var(--font-sans)', fontSize:13, color:'rgba(255,255,255,.6)' }}>Blended ROAS · 30d</div>
          <div style={{ fontFamily:'var(--font-mono)', fontWeight:500, fontSize:32, marginTop:4, letterSpacing:'-1px' }}>4.6x</div>
        </div>
        <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--up)', background:'rgba(25,201,138,.12)', padding:'5px 10px', borderRadius:100 }}>▲ 38%</span>
      </div>
      <div style={{ marginBottom:18 }}><Bars /></div>
      <div>
        {rows.map(([name, spend, roas, up], i)=>(
          <div key={name} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'11px 0', borderTop:i?'1px solid rgba(255,255,255,.07)':'none' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ width:8, height:8, borderRadius:9999, background: up?'var(--cyan)':'rgba(255,255,255,.25)' }}></span>
              <span style={{ fontFamily:'var(--font-sans)', fontWeight:600, fontSize:13.5 }}>{name}</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:18 }}>
              <span style={{ fontFamily:'var(--font-mono)', fontSize:13, color:'rgba(255,255,255,.7)' }}>{spend}</span>
              <span style={{ fontFamily:'var(--font-mono)', fontSize:13, color: up?'var(--up)':'var(--down)', width:42, textAlign:'right' }}>{roas}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* Small "audience reached" stat chip card */
function MiniStatCard({ icon, label, value, delta, up=true, style={} }) {
  return (
    <div style={{ background:'var(--navy-elevated)', border:'1px solid rgba(255,255,255,.08)', borderRadius:'var(--radius-lg)', padding:18, width:200, boxShadow:'0 24px 60px rgba(0,0,0,.5)', color:'#fff', ...style }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
        <div style={{ width:34, height:34, borderRadius:9999, background:'rgba(26,224,230,.12)', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name={icon} size={17} color="var(--cyan)" />
        </div>
        <Spark up={up} w={56} h={24} color={up?'var(--cyan)':'var(--down)'} />
      </div>
      <div style={{ fontFamily:'var(--font-mono)', fontWeight:500, fontSize:24, letterSpacing:'-0.5px' }}>{value}</div>
      <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:4 }}>
        <span style={{ fontFamily:'var(--font-sans)', fontSize:12, color:'rgba(255,255,255,.55)' }}>{label}</span>
        <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color: up?'var(--up)':'var(--down)' }}>{delta}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Spark, GrowthLine, Bars, Donut, AnalyticsCard, MiniStatCard });