// ==================== STORY: BRIDE + GROOM + HOW WE MET ====================
function Story() {
  const { motion, useScroll, useTransform } = window.Motion;

  const headerVar = {
    hidden:  { opacity: 0, y: 30 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.2, 0.8, 0.2, 1] } },
  };
  const fromLeft = {
    hidden:  { opacity: 0, x: -120, rotate: -3 },
    visible: { opacity: 1, x: 0, rotate: 0, transition: { type: 'spring', stiffness: 80, damping: 16 } },
  };
  const fromRight = {
    hidden:  { opacity: 0, x: 120, rotate: 3 },
    visible: { opacity: 1, x: 0, rotate: 0, transition: { type: 'spring', stiffness: 80, damping: 16 } },
  };
  const ampVar = {
    hidden:  { opacity: 0, scale: 0.2, rotate: -30 },
    visible: { opacity: 1, scale: 1, rotate: 0, transition: { type: 'spring', stiffness: 110, damping: 12, delay: 0.25 } },
  };

  // Word-by-word reveal for the "How we met" paragraph
  const story =
    "Two engineers, one matrimony profile, and a hello that turned into long calls and longer video calls. The families spoke, the elders smiled, and a week before the engagement we finally met in person — it felt, somehow, like we already knew. Rings were exchanged, a date was set, and now this little card finds its way to you with a very full heart.";
  const storyWords = React.useMemo(() => story.split(/(\s+)/), []);

  const wordsContainer = {
    hidden:  {},
    visible: { transition: { staggerChildren: 0.025, delayChildren: 0.1 } },
  };
  const wordVar = {
    hidden:  { opacity: 0, y: 12, filter: 'blur(6px)' },
    visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.45, ease: 'easeOut' } },
  };

  // Peacock parallax — drifts left as you scroll into the section
  const sectionRef = React.useRef(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ['start end', 'end start'],
  });
  const peacockX = useTransform(scrollYProgress, [0, 1], [60, -120]);
  const peacockRot = useTransform(scrollYProgress, [0, 1], [-8, 12]);

  return (
    <section ref={sectionRef} className="screen" style={{
      minHeight:'100vh', padding:'80px 16px',
      background:'var(--marsala-700)',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'url(../../assets/patterns/kolam-tile.svg)',
        backgroundSize:'200px', opacity:.08, filter:'invert(1)', pointerEvents:'none',
      }}/>
      <motion.img src="../../assets/ornaments/peacock.svg" className="hide-sm" style={{
        position:'absolute', top:40, right:40, width:120, color:'var(--gold-400)', opacity:.5,
        x: peacockX, rotate: peacockRot,
      }}/>

      <div style={{
        position:'relative', maxWidth: 1040, margin:'0 auto',
        color:'var(--ivory-100)', textAlign:'center',
      }}>
        <motion.div initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.4 }} variants={headerVar}>
          <div style={{ fontFamily:'var(--font-ui)', fontSize:12, letterSpacing:'.4em', textTransform:'uppercase', color:'var(--gold-400)' }}>
            ✦ The Two of Us ✦
          </div>
          <h2 className="section-h2" style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            color:'var(--ivory-100)', margin:'16px 0 8px', lineHeight:1,
          }}>
            Our Story
          </h2>
          <Divider width={200} />
        </motion.div>

        <div className="couple-grid" style={{ marginTop: 40 }}>
          {/* Keerthi — slides in from left */}
          <motion.div className="couple-card"
            initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.3 }} variants={fromLeft}>
            <div className="couple-photo" style={{
              backgroundImage:'url(../../assets/photos/keerthi-portrait.jpg)',
              backgroundPosition:'center 20%',
            }}/>
            <div style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:'clamp(32px, 6vw, 44px)', color:'var(--ivory-100)', fontWeight:500, lineHeight:1, marginTop:20 }}>Keerthi</div>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--gold-400)', marginTop:8 }}>The Bride</div>
            <p style={{
              fontFamily:'var(--font-body)', fontSize:16, fontStyle:'italic',
              color:'var(--gold-200)', lineHeight:1.7, marginTop:14, maxWidth:300, marginInline:'auto',
            }}>
              A software engineer with a quiet curiosity and a wide laugh — the kind of person who debugs your day before you've finished describing it.
            </p>
          </motion.div>

          {/* Center monogram — spring pop, then perpetual breathing */}
          <div className="couple-amp">
            <motion.div
              initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.4 }} variants={ampVar}
              style={{
                fontFamily:'var(--font-script)',
                fontSize:'clamp(80px, 14vw, 140px)',
                color:'var(--gold-500)', lineHeight:1,
                animation:'pulse 3s ease-in-out infinite',
                display:'inline-block',
              }}>
              &amp;
            </motion.div>
          </div>

          {/* Gopi — slides in from right */}
          <motion.div className="couple-card"
            initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.3 }} variants={fromRight}>
            <div className="couple-photo" style={{
              backgroundImage:'url(../../assets/photos/gopi-portrait.jpg)',
              backgroundPosition:'center 20%',
            }}/>
            <div style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:'clamp(32px, 6vw, 44px)', color:'var(--ivory-100)', fontWeight:500, lineHeight:1, marginTop:20 }}>Gopi</div>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--gold-400)', marginTop:8 }}>The Groom</div>
            <p style={{
              fontFamily:'var(--font-body)', fontSize:16, fontStyle:'italic',
              color:'var(--gold-200)', lineHeight:1.7, marginTop:14, maxWidth:300, marginInline:'auto',
            }}>
              A software engineer who'll happily debate semicolons over filter coffee — and somehow makes both arguments and chai go down smoother.
            </p>
          </motion.div>
        </div>

        <Divider width={280} label="How we met" />

        {/* Story — words stagger in as the paragraph enters view */}
        <motion.p className="story-line"
          initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.3 }} variants={wordsContainer}
          style={{
            fontFamily:'var(--font-body)', fontStyle:'italic',
            color:'var(--gold-200)', lineHeight:1.8, maxWidth: 680, margin:'16px auto 0',
          }}>
          {storyWords.map((w, i) =>
            /^\s+$/.test(w)
              ? w
              : <motion.span key={i} variants={wordVar} style={{ display:'inline-block' }}>{w}</motion.span>
          )}
        </motion.p>
      </div>
    </section>
  );
}

window.Story = Story;