// The final E-E-A-T diagram scene: four chips converge into the diagram
// matching the hero on Anthony's resource page (Trust at center, three pillars).
//
// `progress` (0..1) controls the morph from "scattered chips" to "diagram".

function EEATDiagram({ sprite }) {
  const t = sprite.localTime;
  // The whole scene is ~10s. We morph in over 0..3.5s, hold, fade-in details.
  const morph = Easing.easeInOutCubic(clamp(t / 3.0, 0, 1));
  // Caption + diagram fade out before the close card appears (close starts ~7.5s)
  const detailFade = clamp((t - 2.6) / 1.0, 0, 1) - clamp((t - 6.5) / 0.8, 0, 1);
  const diagramFade = 1 - clamp((t - 6.5) / 0.8, 0, 0.85);
  const closingPan = clamp((t - 6.0) / 2.0, 0, 1);

  // Stage size 1920x1080 — diagram fills central area
  const cx = 960, cy = 520;

  // Final chip positions (the diagram)
  const finals = [
    // Trust at center, slightly above midline
    { id: 'T', label: 'Trust',            sub: 'the gravity well',   bg: '#1D1D1F', fg: '#FBFBFD', x: cx,        y: cy,        w: 240, h: 240, isCore: true },
    { id: 'E1',label: 'Experience',       sub: 'first-hand · lived',  bg: '#E3E8FA', x: cx - 480, y: cy - 230, w: 320, h: 80 },
    { id: 'E2',label: 'Expertise',        sub: 'depth · demonstrable',bg: '#D1F5E8', x: cx + 480, y: cy - 230, w: 320, h: 80 },
    { id: 'A', label: 'Authoritativeness',sub: 'reputation · cited',  bg: '#EDE4FA', x: cx - 480, y: cy + 230, w: 320, h: 80 },
  ];

  // Starting positions (faux-scattered, the "chips" leftover from previous scene)
  const starts = [
    { x: cx,        y: cy + 140 },
    { x: cx - 600,  y: cy + 140 },
    { x: cx + 600,  y: cy + 140 },
    { x: cx - 600,  y: cy - 140 },
  ];

  // Closing pan: subtle drift up
  const panY = closingPan * -30;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      transform: `translateY(${panY}px)`,
      opacity: diagramFade,
    }}>
      {/* Soft grid backdrop */}
      <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
        <defs>
          <pattern id="grid-final" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="#D8D8DE" fillOpacity="0.6"/>
          </pattern>
          <radialGradient id="trust-bg" cx="50%" cy="50%" r="40%">
            <stop offset="0%" stopColor="#0071E3" stopOpacity="0.18"/>
            <stop offset="60%" stopColor="#0071E3" stopOpacity="0.04"/>
            <stop offset="100%" stopColor="#0071E3" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="1920" height="1080" fill="url(#grid-final)" />
        {/* Trust gravity-well glow */}
        <circle cx={cx} cy={cy} r={420} fill="url(#trust-bg)" opacity={detailFade} />

        {/* Connecting dashed lines from pillars → trust */}
        {finals.filter(f => !f.isCore).map((f, i) => {
          const op = detailFade * 0.45;
          // Path from pillar edge toward Trust core
          return (
            <line
              key={i}
              x1={f.x} y1={f.y}
              x2={cx} y2={cy}
              stroke="#1D1D1F"
              strokeWidth="1.4"
              strokeDasharray="5 6"
              opacity={op}
            />
          );
        })}
      </svg>

      {/* Animated chips */}
      {finals.map((f, i) => {
        const start = starts[i];
        // Lerp position
        const x = start.x + (f.x - start.x) * morph;
        const y = start.y + (f.y - start.y) * morph;
        // Scale up at the end for the Trust core
        const scale = f.isCore
          ? 0.5 + 0.5 * morph
          : 0.92 + 0.08 * morph;

        if (f.isCore) {
          return (
            <div key={f.id} style={{
              position: 'absolute',
              left: x, top: y,
              width: f.w, height: f.h,
              transform: `translate(-50%, -50%) scale(${scale})`,
              borderRadius: '50%',
              background: f.bg,
              color: f.fg,
              border: '2px solid rgba(0,113,227,0.5)',
              boxShadow: '0 30px 80px rgba(0,0,0,0.35), 0 0 0 8px rgba(255,255,255,0.5)',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Inter, sans-serif',
            }}>
              <div style={{
                fontSize: 14,
                fontWeight: 700,
                letterSpacing: '0.22em',
              }}>TRUST</div>
              <div style={{
                fontFamily: 'Newsreader, serif',
                fontStyle: 'italic',
                fontSize: 16,
                opacity: 0.7,
                marginTop: 6,
              }}>{f.sub}</div>
            </div>
          );
        }

        return (
          <div key={f.id} style={{
            position: 'absolute',
            left: x, top: y,
            width: f.w, height: f.h,
            transform: `translate(-50%, -50%) scale(${scale})`,
            borderRadius: 999,
            background: '#FBFBFD',
            border: '1.5px solid #1D1D1F',
            boxShadow: '0 12px 30px rgba(0,0,0,0.10)',
            display: 'flex', alignItems: 'center',
            padding: '0 22px',
            gap: 14,
            fontFamily: 'Inter, sans-serif',
          }}>
            <span style={{
              width: 44, height: 44, borderRadius: 22,
              background: f.bg,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Newsreader, serif',
              fontStyle: 'italic',
              fontSize: 26, fontWeight: 500,
              color: '#1D1D1F',
              flex: '0 0 auto',
            }}>{f.id[0]}</span>
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
              <span style={{ fontSize: 18, fontWeight: 600, color: '#1D1D1F' }}>{f.label}</span>
              <span style={{ fontSize: 12, color: '#86868B', marginTop: 2 }}>{f.sub}</span>
            </div>
          </div>
        );
      })}

      {/* Caption appears once diagram has formed */}
      <div style={{
        position: 'absolute',
        left: cx, top: cy + 380,
        transform: 'translate(-50%, 0)',
        opacity: detailFade,
        textAlign: 'center',
        fontFamily: 'Newsreader, serif',
        fontStyle: 'italic',
        fontSize: 30,
        fontWeight: 500,
        color: '#1D1D1F',
        letterSpacing: '-0.015em',
        maxWidth: 900,
      }}>
        The three E's are evidence <span style={{ color: '#0071E3' }}>for</span> Trust —<br/>
        not substitutes for it.
      </div>
    </div>
  );
}

Object.assign(window, { EEATDiagram });