'use client'; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform, } from 'framer-motion'; import { useEffect, useRef, useState } from 'react'; interface Step { label: string; // file-name badge top-left badge: string; // "01 · Describe" badge top-right code: string; } // Snippets are deliberately short — they have to fit in a tile that // shrinks to roughly 295 px wide on a 375 px mobile viewport, with // monospace 12.5 px. Long lines (URLs especially) get truncated to a // recognisable shape (`mcp/notion-x9`) so we never need horizontal // scrolling inside the tile. `whitespace-pre-wrap` on the

 below
// lets any remaining over-width tokens (e.g. someone shrinks the
// viewport to 320 px) wrap instead of overflowing.
// The prompt deliberately mentions the secret NAME (`NOTION_API_KEY`)
// but never its value — the value goes into the encrypted vault in a
// separate, backend-only flow (step 02 below). This wording mirrors
// what the actual product UI accepts.
const STEPS: Step[] = [
  {
    label: 'prompt.txt',
    badge: '01 · Describe',
    code: `Build an MCP server that
searches our Notion workspace.

Tools: search_pages, get_page
Needs: NOTION_API_KEY`,
  },
  {
    label: 'secrets.vault',
    badge: '02 · Secure',
    code: `NOTION_API_KEY  = secret_••••••3a8f
NOTION_DB_ID    = db_••••••f12c

🔒 AES-256, encrypted at rest
   never sent to the AI`,
  },
  {
    label: 'build.log',
    badge: '03 · Generate',
    code: `✓ Generating spec   (2 tools)
✓ Static checks     passed
✓ Building image    17.2s
✓ Deploying         ok
✓ Live  →  mcp/notion-x9`,
  },
  {
    label: 'claude.config.json',
    badge: '04 · Connect',
    code: `{
  "mcpServers": {
    "notion": {
      "url": ".../notion-x9/mcp",
      "auth": "oauth2"
    }
  }
}`,
  },
];

const AUTO_MS = 3500;

/**
 * Hero step rotator — single centered tile cycling through three states.
 *
 * Replaces the old static stack of three code blocks. Auto-advances every
 * 3.5s, pauses on hover, jumps instantly when the user clicks a dot.
 *
 * Mouse interaction: the tile reacts with a subtle 3D tilt driven by spring-
 * smoothed motion values, plus a radial glow that translates toward the
 * cursor. Both are disabled when `prefers-reduced-motion: reduce` is set —
 * the rotation is content-essential and still advances, but the transition
 * collapses to an instant cross-fade and the tilt/glow are stripped out.
 */
export function HeroStepRotator() {
  const [step, setStep] = useState(0);
  const [paused, setPaused] = useState(false);
  const containerRef = useRef(null);
  const reduced = useReducedMotion();

  // Mouse motion values for tilt + glow translation. `mx` and `my` are
  // raw cursor offsets (-1..1); the `*Spring` versions add the smoothing
  // so the tilt doesn't jitter on every mousemove event.
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const mxSpring = useSpring(mx, { damping: 22, stiffness: 200 });
  const mySpring = useSpring(my, { damping: 22, stiffness: 200 });
  const rotateX = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [6, -6]);
  const rotateY = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-8, 8]);
  // Glow translates rather than re-rendering background-position — keeps
  // it on the GPU compositor instead of pegging the main thread.
  const glowDx = useTransform(mxSpring, [-1, 1], reduced ? [0, 0] : [-140, 140]);
  const glowDy = useTransform(mySpring, [-1, 1], reduced ? [0, 0] : [-110, 110]);

  useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setStep((s) => (s + 1) % STEPS.length), AUTO_MS);
    return () => clearTimeout(t);
  }, [step, paused]);

  function onMove(e: React.MouseEvent) {
    const r = containerRef.current?.getBoundingClientRect();
    if (!r) return;
    const x = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
    const y = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
    mx.set(x);
    my.set(y);
  }
  function onEnter() {
    setPaused(true);
  }
  function onLeave() {
    setPaused(false);
    mx.set(0);
    my.set(0);
  }

  const current = STEPS[step]!;

  return (
    
      {/* Container is relative + has a min-height so the absolutely-
          positioned cards inside (during the slide) overlap cleanly
          without collapsing the layout. min-h is sized for the tallest
          card (claude_desktop_config.json at 7 lines). */}
      
        
          
            {/* Cursor-following glow — sits behind the content, additive. */}
            
            
              
                {current.label}
              
              
                {current.badge}
              
            
                          {current.code}
            
          
        
      

      {/* Step indicator — accent dot is wider + glows so the active step
          reads at a glance. Buttons stay clickable so users can jump. */}
      
        {STEPS.map((s, i) => (
          
    
  );
}