// Scene3Demo.jsx — 18–36s
// Ouverture: logo Darwin + « présente » → fondu → logo BrandSight → dashboard mocké.
// Layout: header avec logo + tagline. Grille:
//  - card 1: barres de citation par LLM (animées)
//  - card 2: courbe d'évolution (sparkline)
//  - card 3: liste des sujets / prompts
//  - card 4: comparatif concurrents

function Scene3Demo() {
  const { localTime } = useSprite();
  const t = localTime;

  // Beats (within ~18s scene):
  // 0.0  Darwin logo + "PRÉSENTE" fade in
  // 1.6  Darwin fades out
  // 2.0  BrandSight logo fades in (centered, big)
  // 4.0  BrandSight shrinks to top-left, dashboard chrome appears
  // 4.8  card 1 (Citation rate by LLM) draws bars
  // 7.0  card 2 (sparkline 14-day evolution)
  // 9.5  card 3 (top prompts list)
  // 12.0 card 4 (competitor share)
  // 14.5 hold

  // Darwin intro
  const darwinIn = clamp((t - 0.1) / 0.6, 0, 1);
  const darwinOut = clamp((t - 1.6) / 0.4, 0, 1);
  const darwinOp = darwinIn * (1 - darwinOut);

  // BrandSight (centered) reveal: 2.0 → 4.0, then shrinks/fades when dashboard arrives
  const bsCenterIn = clamp((t - 2.0) / 0.6, 0, 1);
  const bsCenterOut = clamp((t - 4.0) / 0.5, 0, 1);
  const bsCenterOp = bsCenterIn * (1 - bsCenterOut);
  const bsCenterScale = 0.85 + 0.15 * Easing.easeOutBack(bsCenterIn);

  // Top-left logo + dashboard
  const logoTopOp = clamp((t - 0.2) / 0.5, 0, 1);
  const dashOp = clamp((t - 0.3) / 0.5, 0, 1);

  // Dashboard cards positions (absolute within content area)
  return (
    <div style={{ position: 'absolute', inset: 0, color: '#0a0a0a' }}>
      {/* Section label */}
      <div style={{
        position: 'absolute', top: 60, right: 80,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 22, letterSpacing: '0.18em', color: '#FF6329',
        textTransform: 'uppercase', opacity: logoTopOp,
      }}>
        ▌ 03 — La solution
      </div>

      {/* Dashboard grid */}
      <div style={{
        position: 'absolute',
        left: 80, right: 80, top: 130, bottom: 80,
        display: 'grid',
        gridTemplateColumns: '1.3fr 1fr',
        gridTemplateRows: '1fr 1fr',
        gap: 20,
        opacity: dashOp,
      }}>
        <CardCitationRate t={t + 2.5} />
        <CardEvolution t={t + 2.5} />
        <CardTopPrompts t={t + 2.5} />
        <CardCompetitors t={t + 2.5} />
      </div>
    </div>
  );
}

function Card({ children, title, badge, op = 1, span }) {
  return (
    <div style={{
      background: '#ffffff',
      border: '1px solid #ffffff',
      borderRadius: 14,
      boxShadow: '0 16px 38px -18px rgba(0,0,0,0.20)',
      padding: '26px 32px',
      opacity: op,
      transform: `translateY(${(1 - op) * 12}px)`,
      gridColumn: span,
      display: 'flex', flexDirection: 'column',
      minWidth: 0, minHeight: 0,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 20,
      }}>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 21, fontWeight: 600, color: 'rgba(0,0,0,0.55)',
          textTransform: 'uppercase', letterSpacing: '0.08em',
        }}>{title}</div>
        {badge && (
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 18,
            color: '#FF6329', padding: '5px 12px',
            border: '1px solid #FF6329', borderRadius: 4,
            letterSpacing: '0.06em',
          }}>{badge}</div>
        )}
      </div>
      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

function CardCitationRate({ t }) {
  const op = clamp((t - 2.8) / 0.5, 0, 1);
  const llms = [
    { name: 'ChatGPT', val: 18.4, color: '#10a37f' },
    { name: 'Gemini',  val: 11.7, color: '#4285f4' },
    { name: 'Claude',  val: 14.2, color: '#cc785c' },
    { name: 'Mistral', val: 6.3,  color: '#ff7000' },
  ];
  const max = 22;
  return (
    <Card title="Taux de citation par LLM" badge="LIVE" op={op}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingTop: 4 }}>
        {llms.map((l, i) => {
          const barT = clamp((t - 3.0 - i * 0.2) / 0.9, 0, 1);
          const w = (l.val / max) * 100 * Easing.easeOutCubic(barT);
          return (
            <div key={l.name} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 150, fontFamily: 'Inter, sans-serif',
                fontSize: 27, fontWeight: 500, color: '#0a0a0a',
              }}>{l.name}</div>
              <div style={{ flex: 1, height: 26, background: 'rgba(0,0,0,0.07)', borderRadius: 4, position: 'relative' }}>
                <div style={{
                  width: `${w}%`, height: '100%',
                  background: l.color,
                  borderRadius: 4,
                  boxShadow: `0 0 16px ${l.color}55`,
                }}/>
              </div>
              <div style={{
                width: 110, textAlign: 'right',
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 27, fontWeight: 600, color: '#0a0a0a',
                fontVariantNumeric: 'tabular-nums',
              }}>
                {(l.val * Easing.easeOutCubic(barT)).toFixed(1)}%
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

function CardEvolution({ t }) {
  const op = clamp((t - 5.0) / 0.5, 0, 1);
  // 14 data points, growing
  const points = [3.2, 3.8, 4.1, 5.3, 6.0, 5.7, 7.2, 8.1, 9.4, 10.2, 11.1, 12.8, 13.9, 14.2];
  const max = 16;
  const drawT = clamp((t - 5.2) / 2.0, 0, 1);
  const drawn = Math.floor(points.length * drawT);
  const visible = points.slice(0, drawn + 1);
  const W = 100, H = 100;
  const path = visible.map((v, i) => {
    const x = (i / (points.length - 1)) * W;
    const y = H - (v / max) * H;
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');
  const lastX = visible.length > 0 ? ((visible.length - 1) / (points.length - 1)) * W : 0;
  const lastV = points[Math.min(drawn, points.length - 1)];

  return (
    <Card title="Évolution sur 14 jours" badge="+312%" op={op}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
        <div style={{
          fontFamily: '"Anton", Impact, sans-serif', fontSize: 78,
          color: '#0a0a0a', letterSpacing: '0em', marginBottom: 6, lineHeight: 1,
        }}>
          {(lastV * drawT).toFixed(1)}<span style={{ color: '#FF6329' }}>%</span>
        </div>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 500,
          color: 'rgba(0,0,0,0.55)', marginBottom: 12,
        }}>
          Taux de citation global, tendance 14j
        </div>
        <div style={{ flex: 1, position: 'relative', minHeight: 0, overflow: 'hidden' }}>
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{
            width: '100%', height: '100%', display: 'block',
          }}>
            {/* grid */}
            {[0.25, 0.5, 0.75].map(g => (
              <line key={g} x1="0" y1={H * g} x2={W} y2={H * g}
                stroke="rgba(0,0,0,0.10)" strokeWidth="0.3" />
            ))}
            {/* area under curve */}
            {visible.length > 1 && (
              <path d={`${path} L ${lastX} ${H} L 0 ${H} Z`}
                fill="url(#redgrad)" opacity="0.25" />
            )}
            {/* line */}
            <path d={path} stroke="#FF6329" strokeWidth="1.5"
              fill="none" strokeLinecap="round" strokeLinejoin="round"
              vectorEffect="non-scaling-stroke" />
            <defs>
              <linearGradient id="redgrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#FF6329" stopOpacity="0.6"/>
                <stop offset="100%" stopColor="#FF6329" stopOpacity="0"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    </Card>
  );
}

function CardTopPrompts({ t }) {
  const op = clamp((t - 7.5) / 0.5, 0, 1);
  const prompts = [
    { q: "meilleur SaaS RH 2026", rate: 24, mark: true },
    { q: "outil de paie pour PME", rate: 18, mark: true },
    { q: "alternative au leader du marché", rate: 9, mark: false },
    { q: "logiciel onboarding", rate: 31, mark: true },
  ];
  return (
    <Card title="Prompts les plus performants" op={op}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 4 }}>
        {prompts.map((p, i) => {
          const rowT = clamp((t - 7.7 - i * 0.18) / 0.5, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 16px',
              background: '#f6f1e9', borderRadius: 6,
              opacity: rowT,
              transform: `translateX(${(1 - rowT) * -10}px)`,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 18, color: 'rgba(0,0,0,0.45)', width: 34,
              }}>
                #{i + 1}
              </div>
              <div style={{
                flex: 1,
                fontFamily: 'Inter, sans-serif', fontSize: 25,
                color: 'rgba(0,0,0,0.7)',
              }}>
                « {p.q} »
              </div>
              <div style={{
                width: 11, height: 11, borderRadius: 6,
                background: p.mark ? '#FF6329' : 'rgba(0,0,0,0.20)',
              }}/>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 24, color: '#0a0a0a', fontWeight: 600,
                fontVariantNumeric: 'tabular-nums', width: 66, textAlign: 'right',
              }}>
                {p.rate}%
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

function CardCompetitors({ t }) {
  const op = clamp((t - 10.0) / 0.5, 0, 1);
  const competitors = [
    { name: 'VOTRE MARQUE', val: 12.6, you: true },
    { name: 'Concurrent A',   val: 18.2 },
    { name: 'Concurrent B',   val: 9.4 },
    { name: 'Concurrent C',   val: 6.1 },
  ];
  const max = 22;
  return (
    <Card title="Part de voix sectorielle" badge="TOP 2" op={op}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18, height: '100%', paddingTop: 12 }}>
        {competitors.map((c, i) => {
          const barT = clamp((t - 10.2 - i * 0.18) / 0.7, 0, 1);
          const h = (c.val / max) * 100 * Easing.easeOutCubic(barT);
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, height: '100%', justifyContent: 'flex-end' }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 24,
                color: c.you ? '#FF6329' : 'rgba(0,0,0,0.72)',
                fontVariantNumeric: 'tabular-nums', fontWeight: 700,
              }}>
                {(c.val * Easing.easeOutCubic(barT)).toFixed(1)}%
              </div>
              <div style={{
                width: '70%', height: `${h}%`,
                background: c.you ? '#FF6329' : 'rgba(0,0,0,0.12)',
                borderRadius: '4px 4px 0 0',
                boxShadow: c.you ? '0 0 20px #FF632966' : 'none',
                minHeight: 2,
              }}/>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontSize: 21,
                color: c.you ? '#FF6329' : 'rgba(0,0,0,0.55)',
                fontWeight: c.you ? 700 : 400,
                textTransform: c.you ? 'uppercase' : 'none',
                letterSpacing: c.you ? '0.06em' : '0',
                textAlign: 'center',
              }}>
                {c.name}
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

window.Scene3Demo = Scene3Demo;