// Venue.jsx + AudioPlayer.jsx + Footer.jsx

function Venue() {
  const v = useLL('venue') || {};
  return (
    <section id="venue" className="sec-cream" style={{ position: 'relative' }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div className="sec-head reveal">
          <span className="eyebrow">Location ✿ Địa điểm</span>
          <h2>{v.name}</h2>
          <div className="sub">{v.sub}</div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 32, alignItems: 'stretch',
        }}>
          <div className="card reveal" data-rv="left" style={{ padding: 32 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Địa chỉ</div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-900)', marginBottom: 20, lineHeight: 1.3, whiteSpace: 'pre-line' }}>
              {v.address}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: 'var(--fg-2)' }}>
              <div>🕕 <b style={{ color: 'var(--ink-900)' }}>{v.time}</b></div>
              <div>{v.parking}</div>
              <div>{v.dressCode}</div>
            </div>
            <a href={v.mapUrl || '#'} target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 24, fontSize: 14 }}>
              Mở Google Maps →
            </a>
          </div>

          <div className="reveal" data-rv="right" style={{
            borderRadius: 'var(--r-lg)',
            background: `
              linear-gradient(135deg, rgba(255,180,198,.2), rgba(216,168,78,.15)),
              repeating-linear-gradient(0deg, #F7EBD3 0 40px, #FDF6E9 40px 80px),
              repeating-linear-gradient(90deg, rgba(201,184,191,.3) 0 1px, transparent 1px 80px),
              repeating-linear-gradient(0deg, rgba(201,184,191,.3) 0 1px, transparent 1px 80px)`,
            border: '1px solid var(--border-rose)',
            boxShadow: 'var(--shadow-md)',
            position: 'relative', minHeight: 280, overflow: 'hidden',
          }}>
            {/* Fake streets */}
            <div style={{ position: 'absolute', top: '30%', left: 0, right: 0, height: 20, background: 'var(--cream-200)', borderTop: '1px solid var(--cream-300)', borderBottom: '1px solid var(--cream-300)' }}/>
            <div style={{ position: 'absolute', bottom: '25%', left: 0, right: 0, height: 14, background: 'var(--cream-200)' }}/>
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: '40%', width: 16, background: 'var(--cream-200)' }}/>
            {/* Pin */}
            <div style={{
              position: 'absolute', top: '45%', left: '50%', transform: 'translate(-50%, -100%)',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
            }}>
              <div style={{
                background: 'var(--pink-500)', color: 'var(--cream-50)', padding: '10px 16px',
                borderRadius: 'var(--r-pill)', fontFamily: 'var(--font-script)', fontSize: 20,
                boxShadow: 'var(--shadow-lg)', whiteSpace: 'nowrap',
              }}>♡ here ♡</div>
              <div style={{
                width: 0, height: 0, borderLeft: '10px solid transparent', borderRight: '10px solid transparent',
                borderTop: '14px solid var(--pink-500)',
              }}/>
              <div style={{
                width: 16, height: 16, borderRadius: '50%', background: 'var(--pink-500)',
                boxShadow: '0 0 0 6px rgba(229,106,138,.3)', marginTop: -2,
              }}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AudioPlayer() {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, zIndex: 40,
      background: 'var(--cream-50)', borderRadius: 'var(--r-pill)',
      padding: '8px 16px 8px 8px', boxShadow: 'var(--shadow-lg)',
      border: '1px solid var(--border-rose)',
      display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
    }} onClick={() => setPlaying(p => !p)}>
      <div style={{
        width: 36, height: 36, borderRadius: '50%',
        background: 'var(--pink-500)', color: 'var(--cream-50)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14,
      }}>{playing ? '❚❚' : '▶'}</div>
      <div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 700, color: 'var(--ink-900)' }}>
          Our Song
        </div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '.1em' }}>
          {playing ? 'now playing ♪' : 'tap to play'}
        </div>
      </div>
    </div>
  );
}

function Footer() {
  const h = useLL('hero') || {};
  return (
    <footer style={{
      background: 'var(--pink-500)', color: 'var(--cream-50)',
      padding: '64px 24px 48px', textAlign: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <img src="assets/icons/leaf-sprig.svg" style={{ position: 'absolute', top: 20, left: '10%', width: 80, opacity: .4, transform: 'rotate(30deg)' }}/>
      <img src="assets/icons/leaf-sprig.svg" style={{ position: 'absolute', top: 20, right: '10%', width: 80, opacity: .4, transform: 'rotate(-30deg) scaleX(-1)' }}/>
      <div style={{
        fontFamily: 'var(--font-display-script)', fontSize: 88, lineHeight: 1, marginBottom: 12,
      }}>With love,</div>
      <div style={{
        fontFamily: 'var(--font-accent-script)', fontStyle: 'normal', fontSize: 44,
        fontWeight: 400, marginBottom: 24,
      }}>{h.coupleLeft} & {h.coupleRight}</div>
      <div style={{
        fontFamily: 'var(--font-ui)', fontSize: 12, letterSpacing: '.2em',
        textTransform: 'uppercase', opacity: .8,
      }}>{h.dateLabel}</div>
      <div style={{
        marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.2)',
        fontFamily: 'var(--font-ui)', fontSize: 11, opacity: .6, letterSpacing: '.1em',
      }}>
        Made with ♡ on Love Letter
      </div>
    </footer>
  );
}

Object.assign(window, { Venue, AudioPlayer, Footer });
