// ZION FireballsRow — featured ball products (the real catalog)
// Two products from thefireballguy.com: Street Freestyle Ball + Fire Football.
function FireballsRow({ onOpen, onAdd, onPreorder }) {
  const balls = window.ZION_FIREBALLS || [];

  return (
    <section style={{
      color: '#fff', padding: '88px 32px', background: '#0A0A0A',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontFamily: 'var(--font-script)', fontStyle: 'italic', textTransform: 'uppercase',
          fontSize: 'clamp(72px, 12vw, 200px)', lineHeight: 0.88, letterSpacing: '0.005em',
          margin: '0 0 8px', color: '#fff', textAlign: 'center',
        }}>FIRE<span style={{ color: '#F7591F' }}>BALLS</span></h2>
        <div style={{
          fontFamily: 'Poppins', fontWeight: 600, fontSize: 13, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: '#B8B8B8', textAlign: 'center', marginBottom: 56,
        }}>Ready to ignite your game?</div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
          {balls.map(b => <BallCard key={b.id} ball={b} onOpen={onOpen} onAdd={onAdd} onPreorder={onPreorder} />)}
        </div>
      </div>
    </section>
  );
}

function BallCard({ ball, onOpen, onAdd, onPreorder }) {
  const [hover, setHover] = React.useState(false);
  const isPreorder = ball.tag === 'PRE-ORDER';
  // Clicking a ball now opens its product page (gallery, description, add-to-cart).
  const handleClick = () => { onOpen && onOpen(ball); };
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={handleClick}
      style={{ display: 'block', userSelect: 'none', cursor: 'pointer' }}>
      <div style={{
        position: 'relative', overflow: 'hidden', borderRadius: 16,
        border: `1px solid ${hover ? 'rgba(247,89,31,0.5)' : 'rgba(255,255,255,0.10)'}`,
        boxShadow: hover ? '0 22px 56px rgba(247,89,31,0.18)' : '0 12px 32px rgba(0,0,0,0.4)',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'border-color 280ms, box-shadow 320ms, transform 320ms cubic-bezier(0.16,1,0.3,1)',
      }}>
        {ball.img ? (
          <div style={{ aspectRatio: '1 / 1', width: '100%', overflow: 'hidden', background: ball.bg }}>
            <img src={ball.img} alt={ball.name} style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              transform: hover ? 'scale(1.04)' : 'scale(1)',
              transition: 'transform 700ms cubic-bezier(0.16,1,0.3,1)',
            }} />
          </div>
        ) : (
          <image-slot
            data-id={`ball-${ball.id}`}
            data-placeholder={`drop ${ball.name.toLowerCase()} photo`}
            data-shape="rect"
            style={{
              aspectRatio: '1 / 1', width: '100%', display: 'block',
              background: '#141414',
              '--is-bg': '#141414',
              '--is-border': 'rgba(255,255,255,0.10)',
              '--is-fg': 'rgba(255,255,255,0.5)',
            }}
          />
        )}
        {ball.tag && (
          <div style={{
            position: 'absolute', top: 18, left: 18, zIndex: 2,
            fontFamily: 'Poppins', fontWeight: 800, fontStyle: 'italic', fontSize: 12,
            letterSpacing: '0.10em', textTransform: 'uppercase', color: '#fff',
            background: ball.tag === 'PRE-ORDER' ? '#F7591F' : 'rgba(0,0,0,0.55)',
            border: '1.5px solid #F7591F',
            padding: '6px 11px 4px', pointerEvents: 'none',
          }}>{ball.tag}</div>
        )}

        {/* warm gradient wash on hover */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'linear-gradient(180deg, transparent 55%, rgba(247,89,31,0.14) 100%)',
          opacity: hover ? 1 : 0, transition: 'opacity 280ms',
        }} />

        {/* Hover-reveal action ribbon */}
        <button
          onClick={handleClick}
          style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            background: '#F7591F', color: '#fff', border: 'none',
            fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, letterSpacing: '0.14em',
            textTransform: 'uppercase', textAlign: 'center', padding: '16px 0',
            cursor: 'pointer', zIndex: 3,
            transform: hover ? 'translateY(0)' : 'translateY(100%)',
            transition: 'transform 220ms cubic-bezier(0.7,0,0.2,1), background 200ms',
            boxShadow: '0 -8px 24px rgba(0,0,0,0.3)',
          }}>
          {ball.byRequest ? 'Remind me →' : 'View product →'}
        </button>
      </div>
      <div style={{ display: 'block', marginTop: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{
            fontFamily: 'var(--font-script)', fontStyle: 'italic', textTransform: 'uppercase',
            fontSize: 32, lineHeight: 1, color: '#fff', letterSpacing: '0.005em',
          }}>{ball.name}</div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 22, fontWeight: 700, color: '#F7591F',
          }}>{ball.byRequest ? 'Remind me' : (ball.priceLabel || ('$' + ball.price))}</div>
        </div>
        <div style={{
          fontFamily: 'Poppins', fontWeight: 500, fontSize: 13, color: '#B8B8B8', marginTop: 6,
        }}>{ball.sub}</div>
      </div>
    </div>
  );
}

window.FireballsRow = FireballsRow;

// PreorderModal — email waitlist capture for the Fire Football.
// No charge now: collects the email, fires a mailto to the manager so the
// signup is recorded, and shows a confirmation. Swap the mailto for a real
// email-service endpoint (Mailchimp/Klaviyo) when you connect one.
function PreorderModal({ open, product, onClose }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const TO = 'manager@levizion.com';

  React.useEffect(() => {
    if (open) { setEmail(''); setDone(false); }
  }, [open]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    const subject = `Pre-order waitlist · ${product ? product.name : 'Fireball'}`;
    const body = [
      `Add me to the pre-order waitlist for: ${product ? product.name : 'Fireball'}`,
      `Email: ${email}`,
      ``,
      `via thefireballguy.com`,
    ].join('\n');
    // Records the signup via the visitor's mail client.
    window.location.href = `mailto:${TO}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setDone(true);
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 300,
      background: 'rgba(10,10,10,0.9)', backdropFilter: 'blur(10px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', maxWidth: 460, position: 'relative',
        background: 'linear-gradient(180deg, #161310 0%, #0A0A0A 100%)',
        border: '1px solid rgba(247,89,31,0.4)', borderRadius: 20,
        padding: '40px 34px', boxShadow: '0 30px 80px rgba(0,0,0,0.6)',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 16, right: 18, background: 'transparent', border: 'none',
          color: 'rgba(255,255,255,0.6)', fontFamily: 'Poppins', fontWeight: 800, fontSize: 20, cursor: 'pointer',
        }}>✕</button>

        <div style={{
          fontFamily: 'Poppins', fontWeight: 700, fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: '#F7591F', marginBottom: 10,
        }}>Pre-order · Waitlist</div>

        {!done ? (
          <>
            <h3 style={{
              fontFamily: 'var(--font-script)', fontStyle: 'italic', textTransform: 'uppercase',
              fontSize: 40, lineHeight: 0.95, margin: '0 0 12px', color: '#fff',
            }}>{product ? product.name : 'Fireball'}</h3>
            <p style={{
              fontFamily: 'Poppins', fontWeight: 400, fontSize: 14, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.7)', margin: '0 0 24px',
            }}>
              The world's first fireball drops soon. Leave your email and you'll be the first to know the moment it's available to order. No charge today.
            </p>
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input
                type="email" required value={email} onChange={e => setEmail(e.target.value)}
                placeholder="your@email.com"
                style={{
                  width: '100%', boxSizing: 'border-box',
                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.18)',
                  borderRadius: 10, color: '#fff', outline: 'none',
                  fontFamily: 'Poppins', fontWeight: 500, fontSize: 15, padding: '14px 16px',
                }}
              />
              <button type="submit" style={{
                width: '100%', background: '#F7591F', color: '#fff', border: 'none',
                fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, letterSpacing: '0.14em',
                textTransform: 'uppercase', padding: '16px 0', cursor: 'pointer',
                borderRadius: 999, boxShadow: '0 8px 24px rgba(247,89,31,0.32)',
              }}>Notify me at launch</button>
            </form>
          </>
        ) : (
          <>
            <h3 style={{
              fontFamily: 'var(--font-script)', fontStyle: 'italic', textTransform: 'uppercase',
              fontSize: 40, lineHeight: 0.95, margin: '0 0 12px', color: '#fff',
            }}>You're on the list.</h3>
            <p style={{
              fontFamily: 'Poppins', fontWeight: 400, fontSize: 14, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.7)', margin: '0 0 24px',
            }}>
              We'll email <span style={{ color: '#F7591F', fontWeight: 600 }}>{email}</span> the moment the Fireball is ready to order. Stay lit.
            </p>
            <button onClick={onClose} style={{
              width: '100%', background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.4)',
              fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, letterSpacing: '0.14em',
              textTransform: 'uppercase', padding: '16px 0', cursor: 'pointer', borderRadius: 999,
            }}>Done</button>
          </>
        )}
      </div>
    </div>
  );
}

window.PreorderModal = PreorderModal;