// ==================== LIVE STREAM ====================
// Placeholder today — embed on the wedding day.
//
// To go live: set LIVE_STREAM_URL below to your YouTube/Vimeo/etc. embed URL
// (the `https://www.youtube.com/embed/<videoId>` form for YouTube). The card
// auto-switches to the iframe once `LIVE_STREAM_URL` is set AND the current
// time is on or after EVENT_START. Until then guests see a friendly
// "streaming here on the day" placeholder with the existing countdown.

const LIVE_STREAM_URL = null;
// const LIVE_STREAM_URL = 'https://www.youtube.com/embed/REPLACE_VIDEO_ID?autoplay=1';
const LIVE_EVENT_START = '2026-05-09T09:35:00+05:30';
// Show the embed up to ~6 hours after the event starts, then revert to a
// "stream ended" message.
const LIVE_EVENT_END   = '2026-05-09T15:30:00+05:30';

function LiveStream() {
  const { motion } = window.Motion;

  // Tick every minute so the live/placeholder switch happens automatically
  // around the event window without a refresh.
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 60_000);
    return () => clearInterval(id);
  }, []);

  const start = new Date(LIVE_EVENT_START);
  const end   = new Date(LIVE_EVENT_END);
  const inWindow = now >= start && now <= end;
  const live = !!LIVE_STREAM_URL && inWindow;
  const ended = now > end;

  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: 60, scale: 0.92, 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(--marsala-900)',
      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',
      }}/>

      <div style={{
        position: 'relative', maxWidth: 880, margin: '0 auto',
        textAlign: 'center', color: 'var(--ivory-100)',
      }}>
        <motion.div initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.4 }} variants={headerVar}>
          <div style={{
            display:'inline-flex', alignItems:'center', gap:10,
            fontFamily: 'var(--font-ui)', fontSize: 12, letterSpacing: '.4em',
            textTransform: 'uppercase', color: 'var(--gold-400)',
          }}>
            <span style={{
              display:'inline-block', width:8, height:8, borderRadius:'50%',
              background: live ? '#E85D1F' : 'var(--gold-500)',
              boxShadow: live ? '0 0 0 0 rgba(232,93,31,.7)' : 'none',
              animation: live ? 'pulse 1.4s ease-in-out infinite' : 'none',
            }}/>
            {live ? 'On Air' : 'Live Stream'}
          </div>
          <h2 className="section-h2" style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
            color: 'var(--ivory-100)', margin: '14px 0 8px', lineHeight: 1,
          }}>
            {live ? 'Watching from afar?' : ended ? 'Thank you for joining us' : 'Joining from afar?'}
          </h2>
          <Divider width={220} />
        </motion.div>

        <motion.div
          initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.25 }} variants={cardVar}
          style={{
            position:'relative', margin:'30px auto 0',
            width:'min(820px, 96%)',
            background:'var(--marsala-700)',
            border:'1.5px solid var(--gold-500)',
            borderRadius:24,
            boxShadow:'0 24px 60px rgba(0,0,0,.45), 0 6px 18px rgba(58,26,28,.35)',
            padding: live ? 14 : '36px clamp(20px, 5vw, 48px)',
          }}
        >
          {live ? (
            // ── LIVE: real iframe embed ─────────────────────────────────
            <div style={{
              position:'relative', overflow:'hidden',
              borderRadius:14,
              border:'1px solid var(--gold-500)',
              boxShadow:'inset 0 0 0 4px rgba(251,243,227,.15)',
              background:'#0a0508',
              aspectRatio:'16 / 9',
            }}>
              <iframe
                src={LIVE_STREAM_URL}
                title="Wedding Live Stream"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ position:'absolute', inset:0, width:'100%', height:'100%', border:0 }}
              />
            </div>
          ) : (
            // ── PLACEHOLDER: announcement + countdown ───────────────────
            <>
              <div style={{
                display:'inline-flex', alignItems:'center', gap:8,
                padding:'5px 12px', borderRadius:999,
                background:'rgba(232,93,31,.18)',
                border:'1px solid rgba(232,93,31,.55)',
                color:'#F69A63',
                fontFamily:'var(--font-ui)', fontSize:10, letterSpacing:'.3em',
                textTransform:'uppercase',
              }}>
                <span style={{
                  display:'inline-block', width:7, height:7, borderRadius:'50%',
                  background:'#E85D1F',
                  animation:'pulse 1.6s ease-in-out infinite',
                }}/>
                {ended ? 'Stream Ended' : 'Coming Soon'}
              </div>

              <div style={{
                fontFamily:'var(--font-display)', fontStyle:'italic',
                fontSize:'clamp(22px, 4.5vw, 32px)', color:'var(--ivory-50)',
                lineHeight:1.25, marginTop:18,
              }}>
                {ended
                  ? 'Recording will be shared with family soon.'
                  : <>We&apos;ll be streaming the wedding<br/>live, right here.</>}
              </div>

              {!ended && (
                <p style={{
                  fontFamily:'var(--font-body)', fontStyle:'italic',
                  fontSize:'clamp(14px, 2.4vw, 16px)',
                  color:'var(--gold-200)', lineHeight:1.7,
                  maxWidth: 520, margin:'14px auto 0',
                }}>
                  Bookmark this page and come back on the morning of the wedding —
                  the live video will appear in this card automatically.
                </p>
              )}

              {!ended && (
                <>
                  <div style={{
                    fontFamily:'var(--font-ui)', fontSize:11, letterSpacing:'.3em',
                    textTransform:'uppercase', color:'var(--gold-400)', marginTop:28,
                  }}>
                    Going live in
                  </div>
                  <div style={{ marginTop:14 }}>
                    <Countdown targetDate={LIVE_EVENT_START} />
                  </div>
                </>
              )}

              <div style={{
                marginTop: 28,
                fontFamily:'var(--font-ui)', fontSize:10, letterSpacing:'.3em',
                textTransform:'uppercase', color:'var(--gold-400)',
              }}>
                ✦ Saturday · 9 May 2026 · 9:35 A.M IST ✦
              </div>
            </>
          )}
        </motion.div>
      </div>
    </section>
  );
}

window.LiveStream = LiveStream;