// ZION StayLit — closing block. Footer chrome above, massive STAY LIT mark
// emerging from a dark sangria backdrop and bleeding off the bottom edge.
function StayLit({ onNavigate, showPayments = true }) {
  const PaymentBadges = window.PaymentBadges;
  return (
    <section style={{
      color: '#fff', position: 'relative', overflow: 'hidden',
      // Dark brown / sangria → near-black wash. Reads as ember-glow ground.
      background:
        'radial-gradient(ellipse 90% 60% at 50% 100%, #3A0F08 0%, #1A0506 45%, #0A0A0A 100%)',
      paddingTop: 88,
    }}>
      {/* === FOOTER CHROME ===================================== */}
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
        {/* Accepted payment methods */}
        {showPayments && PaymentBadges && (
          <div style={{ marginBottom: 30 }}>
            <PaymentBadges align="center" />
          </div>
        )}
        {/* Links row with hairline dashes between */}
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          gap: 14, marginBottom: 32,
        }}>
          <FooterLink onClick={() => onNavigate?.('faq')}>FAQ</FooterLink>
          <Dash />
          <FooterLink onClick={() => onNavigate?.('terms')}>Terms &amp; Policy</FooterLink>
          <Dash />
          <FooterLink onClick={() => onNavigate?.('safety')}>Safety</FooterLink>
        </div>

        {/* Contact emails — labeled by purpose */}
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '14px 48px', marginBottom: 26 }}>
          <ContactItem label="Support" email={(typeof window !== 'undefined' && window.ZION_CONTACT_EMAIL) || 'manager@levizion.com'} note="orders · products · help" />
          <ContactItem label="Payments &amp; returns" email={(typeof window !== 'undefined' && window.ZION_FINANCE_EMAIL) || 'finance@levizion.com'} note="billing · refunds" />
          <ContactItem label="Collabs &amp; events" email={(typeof window !== 'undefined' && window.ZION_PARTNERSHIPS_EMAIL) || 'partnerships@levizion.com'} note="bookings · partnerships" />
        </div>

        {/* Socials */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, alignItems: 'center', marginBottom: 32 }}>
            <SocialIcon href="https://www.instagram.com/thefireballguyy/" label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
              </svg>
            </SocialIcon>
            <SocialIcon href="https://www.tiktok.com/@thefireballguy" label="TikTok">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M16.5 2h-2.86v13.2a3.3 3.3 0 11-2.31-3.15V9.1a6.13 6.13 0 105.17 6.07V8.16a7.6 7.6 0 004.5 1.47V6.74a4.55 4.55 0 01-4.5-4.74z" />
              </svg>
            </SocialIcon>
            <SocialIcon href="https://www.youtube.com/@thefireballguyy" label="YouTube">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="2.5" y="5" width="19" height="14" rx="3" />
                <path d="M10 9 L15 12 L10 15 Z" fill="currentColor" stroke="none" />
              </svg>
            </SocialIcon>
        </div>

        {/* Copyright row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'Poppins', fontSize: 12, fontWeight: 500,
          color: 'rgba(255,255,255,0.55)',
          paddingBottom: 24,
        }}>
          <span>© 2026 The Fireball Guy</span>
          <span>All Rights Reserved</span>
        </div>
      </div>

      {/* === MASSIVE STAY LIT MARK ============================== */}
      <div style={{
        position: 'relative', width: '100%',
        height: 'clamp(70px, 11vw, 150px)',
        overflow: 'hidden',
      }}>
        <h2 style={{
          position: 'absolute', left: '50%', top: 0, transform: 'translateX(-50%)',
          margin: 0,
          fontFamily: 'Poppins, sans-serif', fontWeight: 900,
          fontSize: 'clamp(80px, 13vw, 190px)',
          lineHeight: 1, letterSpacing: '-0.02em',
          whiteSpace: 'nowrap',
          background: 'linear-gradient(180deg, #FF7A1A 0%, #F7591F 30%, #C8420E 55%, #6B2208 85%)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          color: 'transparent',
          WebkitMaskImage: 'linear-gradient(180deg, #000 0%, #000 60%, transparent 100%)',
          maskImage: 'linear-gradient(180deg, #000 0%, #000 60%, transparent 100%)',
          userSelect: 'none', pointerEvents: 'none',
        }}>STAY LIT</h2>
      </div>
    </section>
  );
}

function FooterLink({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
        color: hover ? '#F7591F' : '#fff', cursor: 'pointer',
        textDecoration: 'none',
        textShadow: hover ? '0 0 14px rgba(247,89,31,0.7), 0 0 32px rgba(247,89,31,0.35)' : 'none',
        transition: 'color 140ms, text-shadow 200ms',
        whiteSpace: 'nowrap',
      }}>{children}</a>
  );
}

// Labeled contact: a purpose label above a mailto link, with a small "what for" note.
function ContactItem({ label, email, note }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        fontFamily: 'Poppins', fontWeight: 700, fontSize: 10, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: '#F7591F', marginBottom: 5,
      }}>{label}</div>
      <a href={`mailto:${email}`}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 14, whiteSpace: 'nowrap',
          color: hover ? '#F7591F' : 'rgba(255,255,255,0.9)', textDecoration: 'none',
          transition: 'color 140ms',
        }}>{email}</a>
      {note && (
        <div style={{
          fontFamily: 'Poppins', fontWeight: 500, fontSize: 10.5, letterSpacing: '0.04em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginTop: 4,
        }}>{note}</div>
      )}
    </div>
  );
}

function Dash() {
  return <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.18)' }} />;
}
function DashLong() {
  return <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.18)' }} />;
}

function SocialIcon({ children, href, label }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: 30, height: 30, borderRadius: '50%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: hover ? '#F7591F' : 'rgba(255,255,255,0.85)',
        border: '1px solid',
        borderColor: hover ? 'rgba(247,89,31,0.6)' : 'rgba(255,255,255,0.18)',
        background: hover ? 'rgba(247,89,31,0.12)' : 'transparent',
        boxShadow: hover ? '0 0 16px rgba(247,89,31,0.55), 0 0 32px rgba(247,89,31,0.25)' : 'none',
        transition: 'color 140ms, border-color 140ms, background 160ms, box-shadow 200ms',
      }}>{children}</a>
  );
}

window.StayLit = StayLit;