// ==================== RECEPTION ====================
// Sits right below the Wedding Invitation as the natural next page in the
// reading flow.

function Reception() {
  const { motion } = 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 cardVar = {
    hidden:  { opacity: 0, y: 50, scale: 0.95, filter:'blur(8px)' },
    visible: {
      opacity: 1, y: 0, scale: 1, filter:'blur(0px)',
      transition: { type:'spring', stiffness:90, damping:16, delay: 0.1 },
    },
  };

  return (
    <section className="screen" style={{
      minHeight:'100vh', padding:'80px 16px',
      background:'var(--ivory-100)',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'url(../../assets/patterns/kolam-tile.svg)',
        backgroundSize:'180px', opacity:.10, pointerEvents:'none',
      }}/>

      <div style={{ position:'relative', maxWidth: 1040, margin:'0 auto', 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-700)' }}>
            ✦ The Day After ✦
          </div>
          <h2 className="section-h2" style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            color:'var(--marsala-700)', margin:'14px 0 8px', lineHeight:1,
          }}>
            Reception
          </h2>
          <Divider width={220} />
        </motion.div>

        <motion.div
          initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.25 }} variants={cardVar}
          style={{
            position:'relative',
            margin:'24px auto 0',
            maxWidth: 720,
            padding:'40px clamp(24px, 5vw, 56px)',
            background:'var(--ivory-50)',
            border:'1px solid var(--gold-500)',
            borderRadius: 24,
            boxShadow:'var(--shadow-raised)',
            overflow:'hidden',
          }}>
          <img src="../../assets/ornaments/peacock.svg" style={{
            position:'absolute', top:-6, right:-6, width:80, height:80,
            opacity:.18, color:'var(--gold-600)', pointerEvents:'none',
          }} />

          <div style={{
            fontFamily:'var(--font-script)', fontSize:'clamp(36px, 7vw, 52px)',
            color:'var(--gold-700)', lineHeight:1,
          }}>
            Join us again
          </div>

          <div style={{
            fontFamily:'var(--font-display)', fontStyle:'italic',
            fontSize:'clamp(20px, 4.5vw, 26px)', color:'var(--marsala-700)',
            marginTop:18, lineHeight:1.3,
          }}>
            Sunday, 10<sup style={{ fontSize:'.55em', verticalAlign:'super' }}>th</sup> May 2026
          </div>
          <div style={{
            fontFamily:'var(--font-body)', fontSize:'clamp(15px, 3.2vw, 17px)',
            color:'var(--ink-700)', marginTop:6,
          }}>
            <strong style={{ color:'var(--marsala-700)' }}>7:30 P.M onwards</strong>
          </div>

          <div style={{
            margin:'22px auto', width:'min(220px, 70%)', height:1,
            background:'linear-gradient(90deg, transparent, var(--gold-500), transparent)',
          }}/>

          <div style={{
            fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.3em',
            textTransform:'uppercase', color:'var(--gold-700)',
          }}>
            Venue
          </div>
          <div style={{
            fontFamily:'var(--font-display)', fontStyle:'italic',
            fontSize:'clamp(20px, 4.5vw, 26px)', color:'var(--marsala-700)',
            marginTop:6, lineHeight:1.2,
          }}>
            A.R.R. Gardens
          </div>
          <div style={{
            fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-700)',
            marginTop:6, lineHeight:1.6,
          }}>
            Kakatiya Colony, Phase-2, KUC Road,
            <br/>Mulugu Bypass Road, Hanumakonda
          </div>

          <div style={{ marginTop:28, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
            <Button
              variant="secondary"
              onClick={() => window.open('https://www.google.com/maps/search/?api=1&query=A.R.R.+Gardens+Kakatiya+Colony+Phase+2+KUC+Road+Mulugu+Bypass+Hanumakonda', '_blank', 'noopener')}
            >
              Reception Directions
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

window.Reception = Reception;