// Hero.jsx — save-the-date splash with couple names

function Hero({ guestName = 'bạn' }) {
  const h = useLL('hero') || {};
  const subst = (s) => (s || '').replaceAll('{guest}', guestName);

  return (
    <section id="hero" style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, var(--pink-100) 0%, var(--cream-100) 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      padding: '120px 24px 80px',
    }}>
      {/* Clouds */}
      <img src="assets/icons/cloud.svg" style={{ position: 'absolute', top: '12%', left: '6%', width: 160, opacity: .7 }}/>
      <img src="assets/icons/cloud.svg" style={{ position: 'absolute', top: '20%', right: '8%', width: 120, opacity: .6 }}/>
      <img src="assets/icons/cloud.svg" style={{ position: 'absolute', bottom: '14%', left: '14%', width: 100, opacity: .5 }}/>

      {/* Leaves framing */}
      <img src="assets/icons/leaf-sprig.svg" style={{ position: 'absolute', bottom: '-30px', left: '4%', width: 120, transform: 'rotate(-15deg)' }}/>
      <img src="assets/icons/leaf-sprig.svg" style={{ position: 'absolute', bottom: '-20px', right: '4%', width: 120, transform: 'rotate(195deg) scaleX(-1)' }}/>

      {/* Sparkles */}
      <SparkleCluster style={{ top: '22%', left: '14%' }}/>
      <SparkleCluster style={{ top: '30%', right: '18%' }}/>
      <SparkleCluster style={{ bottom: '28%', left: '22%' }}/>

      <div className="fadeup" style={{ textAlign: 'center', position: 'relative', zIndex: 2, maxWidth: 800 }}>
        <div style={{
          fontFamily: 'var(--font-ui)', fontSize: 13, letterSpacing: '.28em',
          fontWeight: 600, color: 'var(--fg-accent)', textTransform: 'uppercase',
          marginBottom: 16,
        }}>
          {h.eyebrow}
        </div>

        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--fg-2)',
          marginBottom: 24, fontStyle: 'italic',
        }}>
          {subst(h.greeting)}
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display-script)', fontSize: 'clamp(80px, 14vw, 180px)',
          fontWeight: 400, color: 'var(--pink-700)',
          margin: '0', lineHeight: .95,
        }}>
          {h.coupleLeft} <span style={{ fontFamily: 'var(--font-accent-script)', fontStyle: 'normal', fontSize: '.75em', color: 'var(--gold-500)', margin: '0 .05em' }}>&</span> {h.coupleRight}
        </h1>

        <img src="assets/icons/rings.svg" style={{ width: 96, margin: '24px auto 16px', display: 'block' }}/>

        <div style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(20px, 3vw, 28px)',
          color: 'var(--ink-700)', fontWeight: 300, letterSpacing: '.04em',
        }}>
          {h.dateLabel}
        </div>

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 17, color: 'var(--fg-2)',
          maxWidth: 520, margin: '24px auto 0', lineHeight: 1.7, fontStyle: 'italic',
          whiteSpace: 'pre-line',
        }}>
          {subst(h.tagline)}
        </p>

        <Countdown target={h.targetDate || '2026-05-03T18:00:00'}/>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
          <a href="#rsvp" className="btn btn-primary">{h.rsvpBtn}</a>
          <a href="#schedule" className="btn btn-secondary">{h.scheduleBtn}</a>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;