// ==================== COUNTDOWN ====================
function Countdown({ targetDate }) {
  const [time, setTime] = React.useState(calcTime());
  function calcTime() {
    const diff = Math.max(0, new Date(targetDate) - new Date());
    return {
      d: Math.floor(diff / 86400000),
      h: Math.floor((diff / 3600000) % 24),
      m: Math.floor((diff / 60000) % 60),
      s: Math.floor((diff / 1000) % 60),
    };
  }
  React.useEffect(() => {
    const id = setInterval(() => setTime(calcTime()), 1000);
    return () => clearInterval(id);
  }, [targetDate]);

  const Tile = ({ n, lbl }) => (
    <div className="countdown-tile" style={{
      background:'var(--ivory-50)',
      borderRadius:12,
      boxShadow:'var(--shadow-card)',
      border:'1px solid var(--border-hair)',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      padding:12,
    }}>
      <div className="countdown-num" style={{ fontFamily:'var(--font-display)', fontStyle:'italic', color:'var(--marsala-700)', fontWeight:500, lineHeight:1 }}>
        {String(n).padStart(2,'0')}
      </div>
      <div className="countdown-lbl" style={{ fontFamily:'var(--font-ui)', letterSpacing:'.24em', textTransform:'uppercase', color:'var(--gold-700)', marginTop:8 }}>
        {lbl}
      </div>
    </div>
  );

  return (
    <div style={{ display:'flex', gap:'min(18px, 2vw)', justifyContent:'center', flexWrap:'wrap' }}>
      <Tile n={time.d} lbl="Days" />
      <Tile n={time.h} lbl="Hours" />
      <Tile n={time.m} lbl="Minutes" />
      <Tile n={time.s} lbl="Seconds" />
    </div>
  );
}

// ==================== DETAILS SCREEN ====================
function Details() {
  const { motion } = window.Motion;
  const items = [
    { icon:'diya', title:'Ceremony', body:'Sumuhurtham', meta:'Shravana Nakshatram · Mithuna Lagnam — the sacred South Indian wedding muhurtham, with vows, mangalsutra, and the blessings of the seven steps.' },
    { icon:'marigold', title:'Date & Time', body:'Saturday, 9 May 2026', meta:'Muhurtham at 9:35 A.M. sharp · Lunch follows the ceremony.' },
    { icon:'paisley', title:'Venue', body:'Anvitha Gardens', meta:'Near Matha Manikeshwari Temple, Theegalaguttapalli, Karimnagar.' },
    { icon:'peacock', title:'Dress Code', body:'Traditional Attire', meta:'Silk sarees, kurtas, dhotis — jewel tones encouraged.' },
  ];

  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 countdownVar = {
    hidden:  { opacity: 0, scale: 0.6, rotateX: 60 },
    visible: { opacity: 1, scale: 1, rotateX: 0, transition: { type:'spring', stiffness:90, damping:14, delay:0.15 } },
  };
  const grid = {
    hidden:  {},
    visible: { transition: { staggerChildren: 0.1, delayChildren: 0.1 } },
  };
  const card = {
    hidden:  { opacity: 0, y: 50, scale: 0.92, filter:'blur(6px)' },
    visible: {
      opacity: 1, y: 0, scale: 1, filter:'blur(0px)',
      transition: { type:'spring', stiffness:100, damping:16 },
    },
  };

  return (
    <section className="screen" style={{
      minHeight:'100vh', padding:'80px 16px',
      background:'var(--ivory-100)',
      perspective: 1200,
    }}>
      <div style={{ 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)' }}>
            ✦ Save the Date ✦
          </div>
          <h2 className="section-h2" style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500, color:'var(--marsala-700)', margin:'16px 0 12px', lineHeight:1 }}>
            The Celebration
          </h2>
        </motion.div>

        <Divider width={320} label="Details" />

        <motion.div className="details-grid"
          initial="hidden" whileInView="visible" viewport={{ once:false, amount:0.2 }} variants={grid}>
          {items.map((it, i) => (
            <motion.div key={i} className="detail-card"
              variants={card}
              whileHover={{ y: -4, transition: { type:'spring', stiffness:240, damping:18 } }}>
              <img src={`../../assets/ornaments/${it.icon}.svg`} className="detail-orn" />
              <div style={{ fontFamily:'var(--font-ui)', fontSize:10, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--gold-700)' }}>
                {it.title}
              </div>
              <div style={{ fontFamily:'var(--font-display)', fontSize:'clamp(18px, 4.5vw, 22px)', color:'var(--marsala-700)', fontWeight:500, lineHeight:1.25 }}>
                {it.body}
              </div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--ink-700)', lineHeight:1.5 }}>
                {it.meta}
              </div>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once:false, amount:0.5 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          style={{ marginTop:40, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
          <Button
            id="cta-get-directions"
            variant="secondary"
            onClick={() => window.open('https://www.google.com/maps/search/?api=1&query=Anvitha+Gardens+Theegalaguttapalli+Karimnagar', '_blank', 'noopener')}
          >
            Get Directions
          </Button>
        </motion.div>

      </div>
    </section>
  );
}

Object.assign(window, { Countdown, Details });