// ============================================================
// Coming Soon / Maintenance splash (static site)
// ============================================================
// Rendered by app.jsx when SITE.maintenance === true.

function ComingSoon() {
  return (
    <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', padding: '32px 20px' }}>
      <div style={{ position: 'relative', width: '100%', maxWidth: 720 }}>
        <div style={{ position: 'absolute', inset: -80, background: 'radial-gradient(circle at 50% 30%, rgba(200,19,172,0.18), transparent 60%)', filter: 'blur(50px)', pointerEvents: 'none', zIndex: -1 }}/>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
          <img src="assets/logo.png" alt="VividPix" style={{ height: 44, width: 'auto', marginBottom: 8 }}/>
          <div style={{ width: '100%', maxWidth: 460, background: 'linear-gradient(160deg, white 0%, var(--lav-100) 100%)', border: '1px solid var(--line)', borderRadius: 24, padding: 24, boxShadow: '0 40px 80px -30px rgba(109,15,197,0.25)' }}>
            <LEDDisplay src="assets/vividpix.gif" alt="VividPix LED display" mode="12bit"/>
          </div>
          <span className="eyebrow">Launching soon</span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px, 6vw, 56px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.02, margin: '4px 0 0', textWrap: 'balance' }}>
            Something bright is coming.
          </h1>
          <p style={{ fontSize: 17, color: 'var(--fg-1)', lineHeight: 1.6, maxWidth: 520, margin: 0, textWrap: 'pretty' }}>
            VividPix LED matrix displays — for storefronts, lobbies and facades. Our online store is almost ready. Message us on WhatsApp to order early.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 8 }}>
            <a className="btn btn-lg" style={{ background: '#25D366', color: 'white' }} href={waGeneralEnquiry()} target="_blank" rel="noopener noreferrer">
              <Icon.whatsapp/> Chat with us on WhatsApp
            </a>
            <a className="btn btn-secondary btn-lg" href={`mailto:${SITE.email}`}>
              <Icon.mail/> {SITE.email}
            </a>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.06em', display: 'flex', gap: 8, alignItems: 'center', marginTop: 8 }}>
            <span>{SITE.whatsappDisplay}</span>
            <span>·</span>
            <span>{SITE.whatsappHours}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ComingSoon });