The interface assembles through a vertically coordinated choreography where a hero logo re

import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * MotionLens Corrected Implementation
 * Blueprint: X1 AI Interface Launch
 * Audit: Fixed timing offsets, iridescent logo fidelity, and spatial coordination.
 */

const EASE_OUT = [0.215, 0.61, 0.355, 1];
const EASE_IN_OUT = [0.42, 0, 0.58, 1];

const X1Logo = () => (
  <div style={{
    width: 80,
    height: 80,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: 'linear-gradient(135deg, #FFFFFF 0%, #A5A5A5 25%, #D1D1D1 50%, #8E8E93 75%, #FFFFFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontSize: '64px',
    fontWeight: '800',
    letterSpacing: '-2px',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    filter: 'drop-shadow(0 0 10px rgba(255,255,255,0.1))'
  }}>
    X1
  </div>
);

const SuggestionBubble = ({ text }) => (
  <motion.div
    variants={{
      initial: { opacity: 0, y: 20 },
      animate: { opacity: 1, y: 0 }
    }}
    transition={{ duration: 0.5, ease: EASE_OUT }}
    style={{
      width: 280,
      padding: '14px 18px',
      backgroundColor: '#1C1C1E',
      borderRadius: '22px',
      color: '#E5E5EA',
      fontSize: '15px',
      marginBottom: '10px',
      border: '1px solid #2C2C2E',
      cursor: 'pointer'
    }}
  >
    {text}
  </motion.div>
);

const IOSKeyboard = () => {
  const rows = [
    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
    ['⇧', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '⌫']
  ];

  return (
    <div style={{
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      gap: '8px',
      padding: '8px 6px 34px 6px' // 34px for home indicator area
    }}>
      {rows.map((row, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'center', gap: '6px' }}>
          {row.map(key => (
            <div key={key} style={{
              flex: key.length > 1 ? 1.4 : 1,
              height: 42,
              backgroundColor: '#3A3A3C',
              color: '#FFF',
              borderRadius: '5px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '18px',
              boxShadow: '0 1px 0 rgba(0,0,0,0.3)'
            }}>
              {key}
            </div>
          ))}
        </div>
      ))}
      <div style={{ display: 'flex', justifyContent: 'center', gap: '6px' }}>
        <div style={{ flex: 1.2, height: 42, backgroundColor: '#3A3A3C', borderRadius: '5px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF' }}>123</div>
        <div style={{ flex: 4, height: 42, backgroundColor: '#3A3A3C', borderRadius: '5px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF' }}>space</div>
        <div style={{ flex: 1.2, height: 42, backgroundColor: '#007AFF', borderRadius: '5px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', fontWeight: '600' }}>Go</div>
      </div>
    </div>
  );
};

export default function MotionLensApp() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setIsLoaded(true), 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      backgroundColor: '#000000',
      color: '#FFFFFF',
      overflow: 'hidden',
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
    }}>
      {/* Header Bar */}
      <motion.header
        initial={{ opacity: 0 }}
        animate={isLoaded ? { opacity: 1 } : {}}
        transition={{ delay: 0.15, duration: 0.4, ease: EASE_OUT }}
        style={{
          height: 60,
          padding: '0 20px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          zIndex: 50,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0
        }}
      >
        <span style={{ fontWeight: '700', fontSize: '20px', letterSpacing: '-0.5px' }}>Grok</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <motion.button
            whileTap={{ scale: 0.95 }}
            style={{
              backgroundColor: '#FFFFFF',
              color: '#000000',
              border: 'none',
              borderRadius: '15px',
              width: 70,
              height: 30,
              fontSize: '13px',
              fontWeight: '600',
              cursor: 'pointer'
            }}
          >
            Sign In
          </motion.button>
          <div style={{ width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
            </svg>
          </div>
        </div>
      </motion.header>

      {/* Main Content Area */}
      <main style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative'
      }}>
        {/* Hero X1 Logo - Receding Transition */}
        <motion.div
          initial={{ opacity: 1, scale: 1, y: "-50%", x: "-50%", top: "50%", left: "50%" }}
          animate={isLoaded ? {
            opacity: 0.2,
            scale: 0.8,
            y: "-180%", // Moves to upper background position
          } : {}}
          transition={{
            opacity: { delay: 0.117, duration: 0.55, ease: EASE_IN_OUT },
            scale: { delay: 0.117, duration: 0.55, ease: EASE_OUT },
            y: { delay: 0.117, duration: 0.55, ease: EASE_OUT }
          }}
          style={{ position: 'absolute' }}
        >
          <X1Logo />
        </motion.div>

        {/* Suggestion Bubbles Stack */}
        <motion.div
          initial="initial"
          animate={isLoaded ? "animate" : "initial"}
          variants={{
            animate: {
              transition: {
                delayChildren: 0.15,
                staggerChildren: 0.05
              }
            }
          }}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            zIndex: 5,
            marginTop: '40px'
          }}
        >
          <SuggestionBubble text="Explain quantum computing" />
          <SuggestionBubble text="Write a Python script for a bot" />
          <SuggestionBubble text="What's the latest in AI news?" />
        </motion.div>
      </main>

      {/* Bottom Section: Input + Keyboard */}
      <div style={{ width: '100%', position: 'relative', zIndex: 100 }}>
        {/* Input Bar */}
        <motion.div
          initial={{ y: 80 }}
          animate={isLoaded ? { y: 0 } : {}}
          transition={{ delay: 0.067, duration: 0.333, ease: EASE_OUT }}
          style={{
            padding: '0 20px 16px 20px',
            display: 'flex',
            justifyContent: 'center',
            backgroundColor: 'transparent'
          }}
        >
          <div style={{
            width: '100%',
            maxWidth: 340,
            height: 44,
            backgroundColor: '#2C2C2E',
            borderRadius: '22px',
            display: 'flex',
            alignItems: 'center',
            padding: '0 16px',
            color: '#8E8E93',
            fontSize: '17px',
            boxShadow: '0 -10px 20px rgba(0,0,0,0.5)'
          }}>
            Ask anything...
          </div>
        </motion.div>

        {/* Keyboard Mockup */}
        <motion.div
          initial={{ y: '100%' }}
          animate={isLoaded ? { y: 0 } : {}}
          transition={{ delay: 0.067, duration: 0.333, ease: EASE_OUT }}
          style={{
            width: '100%',
            height: '35vh',
            backgroundColor: '#1C1C1E',
            borderTop: '0.5px solid #3A3A3C'
          }}
        >
          <IOSKeyboard />
        </motion.div>
      </div>

      {/* Home Indicator */}
      <motion.div 
        initial={{ opacity: 0 }}
        animate={isLoaded ? { opacity: 1 } : {}}
        transition={{ delay: 0.4 }}
        style={{
          position: 'absolute',
          bottom: 8,
          left: '50%',
          transform: 'translateX(-50%)',
          width: 134,
          height: 5,
          backgroundColor: '#FFFFFF',
          borderRadius: 100,
          zIndex: 110
        }}
      />
    </div>
  );
}