// ==================== FORMAL INVITATION SCREEN ====================
function Invitation() {
  const { motion, useScroll, useTransform } = window.Motion;
  const sectionRef = React.useRef(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ['start end', 'end start'],
  });
  // Card unfolds in 3D as you scroll into view, then settles.
  const rotateX  = useTransform(scrollYProgress, [0, 0.35, 0.65, 1], [70, 0, 0, -25]);
  const cardScale = useTransform(scrollYProgress, [0, 0.35, 0.7, 1], [0.6, 1, 1, 0.94]);
  const cardOpacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0.4]);

  // Stagger reveal of inner blocks once card is upright
  const containerVar = {
    hidden:  {},
    visible: { transition: { staggerChildren: 0.12, delayChildren: 0.25 } },
  };
  const lineVar = {
    hidden:  { opacity: 0, y: 18, filter: 'blur(6px)' },
    visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.6, ease: [0.2, 0.8, 0.2, 1] } },
  };
  const nameVar = {
    hidden:  { opacity: 0, y: 30, scale: 0.92 },
    visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 90, damping: 14 } },
  };

  return (
    <section ref={sectionRef} className="screen" style={{
      minHeight:'100vh', padding:'80px 20px',
      background:'var(--ivory-100)',
      display:'flex', alignItems:'center', justifyContent:'center',
      perspective: 1400,
    }}>
      <motion.div
        initial="hidden"
        whileInView="visible"
        viewport={{ once: false, amount: 0.25 }}
        variants={containerVar}
        style={{
          maxWidth: 640, width:'100%',
          rotateX, scale: cardScale, opacity: cardOpacity,
          transformStyle: 'preserve-3d',
          transformOrigin: 'center top',
          willChange: 'transform, opacity',
        }}
      >
      <CornerFrame className="invite-card" style={{
        background:'var(--ivory-50)',
        borderRadius: 24,
        border:'1px solid var(--gold-500)',
        padding:'80px clamp(24px, 6vw, 64px)',
        boxShadow:'var(--shadow-raised)',
        textAlign:'center',
      }}>
        <div style={{
          fontFamily:'var(--font-script)', fontSize:48, color:'var(--gold-700)', lineHeight:1,
        }}>
          Wedding Invitation
        </div>

        <Divider width={240} />

        <p style={{
          fontFamily:'var(--font-body)', fontSize:'clamp(13px, 3.4vw, 15px)', color:'var(--ink-700)',
          fontStyle:'italic', lineHeight:1.6, margin:'24px 0 8px',
        }}>
          We solicit your gracious presence with family &amp; friends on the auspicious
          <br/>occasion of the wedding of our <span style={{ color:'var(--marsala-700)' }}>eldest daughter</span>
        </p>

        <div style={{ margin:'28px 0 8px' }}>
          <div style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            fontSize:64, color:'var(--marsala-700)', lineHeight:1,
          }}>
            Keerthi
          </div>
        </div>

        <p style={{ fontFamily:'var(--font-body)', fontSize:16, color:'var(--ink-700)', fontStyle:'italic', margin:'4px 0' }}>
          weds
        </p>

        <div style={{ margin:'8px 0 20px' }}>
          <div style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            fontSize:64, color:'var(--marsala-700)', lineHeight:1,
          }}>
            Gopichand
          </div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-500)', fontStyle:'italic', marginTop:8 }}>
            (Elder S/o. Thota Ashok &amp; Malathi)
          </div>
        </div>

        <Divider width={240} label="Sumuhurtham" />

        <div style={{
          fontFamily:'var(--font-body)', fontSize:18, color:'var(--ink-800)',
          lineHeight:1.8, marginTop:8,
        }}>
          on <em>Saturday, 9th May 2026</em>
          <br />
          at <strong style={{ color:'var(--marsala-700)' }}>9:35 A.M.</strong>
        </div>
        <div style={{
          fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-600)',
          fontStyle:'italic', marginTop:10,
        }}>
          Shravana Nakshatram · Mithuna Lagnam
        </div>

        <div style={{
          fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.3em',
          textTransform:'uppercase', color:'var(--gold-700)', marginTop:28,
        }}>
          Venue
        </div>
        <div style={{
          fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:24,
          color:'var(--marsala-700)', marginTop:6,
        }}>
          Anvitha Gardens
        </div>
        <div style={{
          fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-700)', marginTop:4,
        }}>
          Near Matha Manikeshwari Temple,
          <br/>Theegalaguttapalli, Karimnagar
        </div>

        <div style={{
          fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.3em',
          textTransform:'uppercase', color:'var(--gold-700)', marginTop:24,
        }}>
          Lunch Follows
        </div>

        <Divider width={200} />

        <div style={{
          fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-600)',
          fontStyle:'italic', marginTop:8, lineHeight:1.7,
        }}>
          With best compliments from near &amp; dear,
          <br/><strong style={{ fontStyle:'normal', color:'var(--marsala-700)' }}>
            Smt. &amp; Sri. Muppidi Srilatha-Thirupathi
          </strong>
        </div>

        <div style={{
          fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.3em',
          textTransform:'uppercase', color:'var(--gold-700)', marginTop:20,
        }}>
          Along with
        </div>
        <div style={{
          fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-700)',
          fontStyle:'italic', marginTop:6, lineHeight:1.7,
        }}>
          Sister <strong style={{ fontStyle:'normal', color:'var(--marsala-700)' }}>Muppidi Snigdha</strong>
          <br/>Brother <strong style={{ fontStyle:'normal', color:'var(--marsala-700)' }}>Muppidi Srinith</strong>
        </div>
      </CornerFrame>
      </motion.div>
    </section>
  );
}

window.Invitation = Invitation;