// Dashboard mockups for hero and features
const { useEffect, useRef, useState } = React;

// === Animated bar chart ===
function MockBarChart({ values = [42, 58, 51, 67, 74, 68, 82], color = '#22c55e' }) {
  const max = Math.max(...values);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 110, paddingTop: 8 }}>
      {values.map((v, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: '100%',
            height: `${(v/max)*100}%`,
            background: `linear-gradient(180deg, ${color}, ${color}55)`,
            borderRadius: '4px 4px 2px 2px',
            transformOrigin: 'bottom',
            animation: `barGrow .9s ${i*0.07}s cubic-bezier(.2,.9,.2,1) backwards`,
            boxShadow: `0 0 14px -2px ${color}66`,
          }} />
          <div style={{ fontSize: 9, color: '#6b7280', fontFamily: 'JetBrains Mono, monospace' }}>{['月','火','水','木','金','土','日'][i]}</div>
        </div>
      ))}
    </div>
  );
}

// === Animated counter ===
function Counter({ to, duration = 1400, suffix = '', decimals = 0, prefix = '' }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start)/duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setVal(eased * to);
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{prefix}{val.toFixed(decimals)}{suffix}</span>;
}

// === Hero dashboard mockup ===
function HeroDashboard() {
  return (
    <div className="glass ai-border" style={{
      position: 'relative',
      borderRadius: 24,
      padding: 18,
      background: 'linear-gradient(180deg, rgba(13,18,26,.85), rgba(7,9,13,.85))',
      boxShadow: '0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset',
    }}>
      {/* window chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,.06)' }}>
        <div style={{ width: 10, height: 10, borderRadius: 999, background: '#ef4444' }} />
        <div style={{ width: 10, height: 10, borderRadius: 999, background: '#f59e0b' }} />
        <div style={{ width: 10, height: 10, borderRadius: 999, background: '#22c55e' }} />
        <div style={{ marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6b7280' }}>repicare.ai/dashboard</div>
        <div style={{ width: 6, height: 6, borderRadius: 999, background: '#22c55e' }} className="pulse-dot" />
      </div>

      {/* header row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', padding: '16px 6px 14px' }}>
        <div>
          <div style={{ fontSize: 11, color: '#6b7280', letterSpacing: '.18em', fontFamily: 'JetBrains Mono, monospace' }}>RETENTION RATE</div>
          <div style={{ fontSize: 38, fontWeight: 800, marginTop: 4, fontFamily: 'Space Grotesk, sans-serif', letterSpacing: '-.02em' }}>
            <Counter to={78.4} decimals={1} suffix="%" />
          </div>
          <div style={{ fontSize: 12, color: '#22c55e', marginTop: 4, fontWeight: 600 }}>
            ▲ +12.3% <span style={{ color: '#6b7280', fontWeight: 400 }}>vs. 先月</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['7D','30D','90D'].map((t,i) => (
            <div key={t} style={{
              fontSize: 11, padding: '5px 10px', borderRadius: 8,
              background: i===1 ? 'rgba(34,197,94,.15)' : 'rgba(255,255,255,.03)',
              border: '1px solid ' + (i===1 ? 'rgba(34,197,94,.35)' : 'rgba(255,255,255,.06)'),
              color: i===1 ? '#22c55e' : '#9ca3af',
              fontFamily: 'JetBrains Mono, monospace',
            }}>{t}</div>
          ))}
        </div>
      </div>

      {/* chart */}
      <div style={{ padding: '8px 6px 6px' }}>
        <MockBarChart values={[42, 58, 51, 67, 74, 68, 82]} />
      </div>

      {/* meta cards */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
        <div style={{ padding: 12, borderRadius: 12, background: 'rgba(255,255,255,.025)', border: '1px solid rgba(255,255,255,.05)' }}>
          <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.15em' }}>AI問診 解析中</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
            <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Space Grotesk' }}>
              <Counter to={24} />
            </div>
            <div style={{ fontSize: 11, color: '#9ca3af' }}>件 / 今日</div>
          </div>
          <div style={{ marginTop: 8, height: 4, borderRadius: 4, background: 'rgba(255,255,255,.06)', overflow: 'hidden' }}>
            <div style={{ width: '72%', height: '100%', background: 'linear-gradient(90deg, #7c3aed, #06b6d4, #22c55e)', borderRadius: 4 }} />
          </div>
        </div>
        <div style={{ padding: 12, borderRadius: 12, background: 'rgba(255,255,255,.025)', border: '1px solid rgba(255,255,255,.05)' }}>
          <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.15em' }}>離脱予兆アラート</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
            <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Space Grotesk', color: '#fb7847' }}>
              <Counter to={7} />
            </div>
            <div style={{ fontSize: 11, color: '#9ca3af' }}>名 要フォロー</div>
          </div>
          <div style={{ marginTop: 8, display: 'flex', gap: 3 }}>
            {[1,1,1,1,1,1,1,0,0,0].map((on,i) => (
              <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: on ? '#fb7847' : 'rgba(255,255,255,.08)' }} />
            ))}
          </div>
        </div>
      </div>

      {/* Live tail / AI activity */}
      <div style={{ marginTop: 12, padding: 12, borderRadius: 12, background: 'rgba(124,58,237,.06)', border: '1px solid rgba(124,58,237,.18)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
          <div style={{ width: 6, height: 6, borderRadius: 999, background: '#7c3aed' }} className="pulse-dot" />
          <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '.15em', color: '#c084fc' }}>AI ACTIVITY · LIVE</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#9ca3af' }}>
          <div><span style={{ color: '#22c55e' }}>✓</span> 田中様の問診票を解析 <span style={{ color: '#6b7280' }}>· 2s</span></div>
          <div><span style={{ color: '#06b6d4' }}>↻</span> フォロー文面を生成中 <span style={{ color: '#6b7280' }}>· 5s</span></div>
          <div><span style={{ color: '#22c55e' }}>✓</span> 山本様にLINE送信完了 <span style={{ color: '#6b7280' }}>· 12s</span></div>
        </div>
      </div>
    </div>
  );
}

// === LINE message mockup ===
function LineChatMock() {
  return (
    <div style={{
      borderRadius: 22,
      padding: 14,
      background: 'linear-gradient(180deg, #1a3a5c, #0f2440)',
      border: '1px solid rgba(255,255,255,.06)',
      boxShadow: '0 30px 60px -20px rgba(0,0,0,.6)',
      minWidth: 280,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 10, borderBottom: '1px solid rgba(255,255,255,.08)', marginBottom: 12 }}>
        <div style={{ width: 28, height: 28, borderRadius: 999, background: 'linear-gradient(135deg, #22c55e, #10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 12, color: '#0a0f14' }}>R</div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700 }}>あおぞら整骨院</div>
          <div style={{ fontSize: 10, color: '#9ca3af' }}>LINE 公式アカウント</div>
        </div>
      </div>

      {/* received bubble */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          alignSelf: 'flex-start',
          maxWidth: '85%',
          background: '#ffffff',
          color: '#1f2937',
          borderRadius: '4px 14px 14px 14px',
          padding: '10px 12px',
          fontSize: 12,
          lineHeight: 1.65,
        }}>
          田中さま、先日はご来院ありがとうございました。<br/>
          腰の張り、その後いかがでしょうか？<br/>
          今週は施術頻度を少し上げると回復が早まる時期です🌱
        </div>
        <div style={{ alignSelf: 'flex-start', fontSize: 9, color: '#9ca3af', paddingLeft: 4 }}>14:32</div>

        <div style={{
          alignSelf: 'flex-end',
          maxWidth: '78%',
          background: '#86dc6b',
          color: '#0a1a0a',
          borderRadius: '14px 4px 14px 14px',
          padding: '10px 12px',
          fontSize: 12,
          lineHeight: 1.65,
        }}>
          ありがとうございます！<br/>
          明日18時で予約お願いします🙇
        </div>
        <div style={{ alignSelf: 'flex-end', fontSize: 9, color: '#9ca3af', paddingRight: 4 }}>14:34 · 既読</div>
      </div>
    </div>
  );
}

// === AI Intake analysis mockup ===
function IntakeMock() {
  const tags = [
    { label: '主訴: 腰痛', conf: 0.98, c: '#22c55e' },
    { label: '部位: 腰椎L4-L5', conf: 0.92, c: '#06b6d4' },
    { label: 'デスクワーク要因', conf: 0.87, c: '#7c3aed' },
    { label: '再発リスク: 中', conf: 0.71, c: '#fb7847' },
  ];
  return (
    <div className="glass" style={{ padding: 18, borderRadius: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '.18em', color: '#c084fc' }}>AI 問診解析</div>
        <div style={{ marginLeft: 'auto', fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono' }}>処理: 1.2s</div>
      </div>
      <div style={{ fontSize: 12, color: '#9ca3af', marginBottom: 10, padding: 10, borderRadius: 10, background: 'rgba(255,255,255,.025)', borderLeft: '2px solid rgba(255,255,255,.1)' }}>
        「3週間前からデスクワーク中に左腰が張る感じ。前屈すると痛い。朝起きた時が一番つらく…」
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {tags.map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: t.c, boxShadow: `0 0 10px ${t.c}` }} />
            <div style={{ fontSize: 13, color: '#e5e7eb', fontWeight: 500 }}>{t.label}</div>
            <div style={{ flex: 1, height: 3, borderRadius: 2, background: 'rgba(255,255,255,.05)', overflow: 'hidden' }}>
              <div style={{ width: `${t.conf*100}%`, height: '100%', background: t.c, borderRadius: 2 }} />
            </div>
            <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono', minWidth: 32, textAlign: 'right' }}>{Math.round(t.conf*100)}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// === AI Trend chart mockup ===
function TrendMock() {
  const points = [25, 32, 28, 41, 38, 52, 58, 49, 65, 71, 68, 82];
  const max = 100;
  const w = 280, h = 120;
  const step = w / (points.length - 1);
  const path = points.map((p, i) => `${i===0?'M':'L'} ${i*step} ${h - (p/max)*h}`).join(' ');
  const area = path + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <div className="glass" style={{ padding: 18, borderRadius: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '.18em', color: '#5eead4' }}>AI 傾向分析</div>
        <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono' }}>過去12週</div>
      </div>
      <div style={{ fontSize: 11, color: '#9ca3af', marginBottom: 6 }}>3回目までの来院転換率</div>
      <div style={{ fontSize: 28, fontWeight: 800, fontFamily: 'Space Grotesk', letterSpacing: '-.02em' }}>
        <span className="ai-text">82%</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 100, marginTop: 8 }}>
        <defs>
          <linearGradient id="trend-area" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#22c55e" stopOpacity=".4" />
            <stop offset="100%" stopColor="#22c55e" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="trend-stroke" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#7c3aed" />
            <stop offset="50%" stopColor="#06b6d4" />
            <stop offset="100%" stopColor="#22c55e" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#trend-area)" />
        <path d={path} stroke="url(#trend-stroke)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        {points.map((p,i) => (
          <circle key={i} cx={i*step} cy={h-(p/max)*h} r="2" fill="#fff" opacity={i===points.length-1?1:.3} />
        ))}
      </svg>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginTop: 8, fontSize: 10, fontFamily: 'JetBrains Mono', color: '#9ca3af' }}>
        <div><span style={{ color: '#22c55e' }}>●</span> 腰痛: 41%</div>
        <div><span style={{ color: '#06b6d4' }}>●</span> 肩こり: 32%</div>
        <div><span style={{ color: '#fb7847' }}>●</span> 膝痛: 18%</div>
      </div>
    </div>
  );
}

// === AI follow draft mockup ===
function FollowDraftMock() {
  return (
    <div className="glass" style={{ padding: 18, borderRadius: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '.18em', color: '#fb7847' }}>AI フォローLINE</div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, padding: '3px 8px', borderRadius: 999, background: 'rgba(124,58,237,.12)', border: '1px solid rgba(124,58,237,.3)' }}>
          <div style={{ width: 5, height: 5, borderRadius: 999, background: '#c084fc' }} className="pulse-dot" />
          <div style={{ fontSize: 9, color: '#c084fc', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>DRAFT READY</div>
        </div>
      </div>

      <div style={{ fontSize: 10, color: '#6b7280', fontFamily: 'JetBrains Mono', letterSpacing: '.1em', marginBottom: 6 }}>FOR: 田中 健一 様 · 来院3回目</div>
      <div style={{
        background: 'rgba(255,255,255,.02)',
        border: '1px solid rgba(255,255,255,.06)',
        borderRadius: 12, padding: 12,
        fontSize: 12, lineHeight: 1.75, color: '#e5e7eb',
        position: 'relative',
        overflow: 'hidden',
      }}>
        田中さま、こんにちは。あおぞら整骨院です。<br/>
        先日の施術お疲れさまでした。<br/>
        腰の張り、デスクワーク中に少し気をつけていただくと、回復のスピードが上がります。<br/>
        来週、3回目の調整をおすすめする時期です🌱
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button style={{
          flex: 1,
          background: 'linear-gradient(110deg, #fb7847, #22c55e)',
          color: '#0a0f14', fontWeight: 700, fontSize: 12,
          border: 'none', padding: '10px 12px', borderRadius: 10,
          cursor: 'pointer'
        }}>送信する</button>
        <button style={{
          background: 'rgba(255,255,255,.05)',
          color: '#e5e7eb', fontSize: 12,
          border: '1px solid rgba(255,255,255,.1)',
          padding: '10px 12px', borderRadius: 10,
          cursor: 'pointer'
        }}>編集</button>
        <button style={{
          background: 'rgba(255,255,255,.05)',
          color: '#9ca3af', fontSize: 12,
          border: '1px solid rgba(255,255,255,.1)',
          padding: '10px 12px', borderRadius: 10,
          cursor: 'pointer'
        }}>再生成</button>
      </div>
    </div>
  );
}

Object.assign(window, { HeroDashboard, LineChatMock, IntakeMock, TrendMock, FollowDraftMock, MockBarChart, Counter });