// ==================== COVER SCREEN ====================
function Cover({ onEnter }) {
  return (
    <section className="screen cover" style={{
      minHeight:'100vh',
      background:'linear-gradient(180deg, var(--ivory-100), var(--ivory-200))',
      display:'flex', alignItems:'center', justifyContent:'center',
      position:'relative', overflow:'hidden', padding:'40px 16px',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'url(../../assets/patterns/kolam-tile.svg)',
        backgroundSize:'180px', opacity:.22, pointerEvents:'none',
      }} />
      <img src="../../assets/ornaments/toran.svg" style={{
        position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
        width:'min(820px, 95vw)', animation:'sway 6s ease-in-out infinite',
        pointerEvents:'none', display:'none',
      }}/>

      <div className="cover-inner" style={{
        position:'relative', zIndex:1,
        display:'flex', flexDirection:'column', alignItems:'center',
        textAlign:'center', maxWidth: 720, paddingTop: 80,
      }}>
        <div className="eyebrow" style={{
          fontFamily:'var(--font-ui)', letterSpacing:'.4em',
          textTransform:'uppercase', color:'var(--gold-700)', marginBottom:18,
        }}>
          ✦ &nbsp; Together with our families &nbsp; ✦
        </div>

        {/* Photo medallion */}
        <div className="cover-photo" style={{
          width:'min(260px, 60vw)', aspectRatio:'1', borderRadius:'50%',
          backgroundImage:'url(../../assets/photos/couple-3.jpeg)',
          backgroundSize:'cover', backgroundPosition:'center 30%',
          border:'4px solid var(--gold-500)',
          boxShadow:'0 0 0 10px var(--ivory-50), 0 0 0 11px var(--gold-300), 0 20px 40px rgba(122,31,43,.25)',
          marginBottom:24, marginTop: 20,
        }}/>

        <div style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center' }}>
          <img src="../../assets/ornaments/mandala.svg" style={{
            position:'absolute', width:'min(420px, 90vw)', height:'min(420px, 90vw)',
            top:'50%', left:'50%', transform:'translate(-50%,-50%)',
            color:'var(--gold-500)', opacity:.2, pointerEvents:'none',
            animation:'drift 22s linear infinite',
          }}/>

          <h1 className="hero-name" style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            lineHeight:1, color:'var(--marsala-700)', margin:'0',
            letterSpacing:'-.02em',
          }}>
            Keerthi
          </h1>
          <div className="hero-amp" style={{
            fontFamily:'var(--font-script)',
            color:'var(--gold-700)', lineHeight:1, margin:'-8px 0',
          }}>
            &amp;
          </div>
          <h1 className="hero-name" style={{
            fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500,
            lineHeight:1, color:'var(--marsala-700)', margin:'0',
            letterSpacing:'-.02em',
          }}>
            Gopichand
          </h1>
        </div>

        <div className="telugu" style={{
          fontFamily:'var(--font-telugu)', color:'var(--marsala-700)',
          marginTop:16, opacity:.85,
        }}>
          కీర్తి &amp; గోపి
        </div>

        <Divider width={Math.min(320, window.innerWidth - 60)} label="The Wedding" />

        <div className="cover-date" style={{
          fontFamily:'var(--font-body)', fontStyle:'italic',
          color:'var(--ink-700)', lineHeight:1.5,
        }}>
          Saturday, 9th May 2026
          <br />
          at 9:35 A.M.
        </div>
        <div className="cover-meta" style={{
          fontFamily:'var(--font-ui)', letterSpacing:'.24em',
          textTransform:'uppercase', color:'var(--gold-700)', marginTop:14,
        }}>
          Anvitha Gardens · Karimnagar
        </div>

        <div style={{ marginTop:36 }}>
          <Button variant="primary" onClick={onEnter}>Open the Invitation</Button>
        </div>

        <div style={{
          fontFamily:'var(--font-ui)', fontSize:10, letterSpacing:'.3em',
          textTransform:'uppercase', color:'var(--ink-500)', marginTop:48,
          animation:'pulse 2.4s ease-in-out infinite',
        }}>
          ↓ Scroll to read ↓
        </div>
      </div>
    </section>
  );
}

window.Cover = Cover;