// obsidian-sections.jsx — additional sections + ticket flow + modal shell
// for the full Obsidian landing prototype. Reuses obsidianStyles from
// direction-obsidian.jsx.

// ─────────────────────────────────────────────────────────────────────
// MODAL SHELL — common to ticket + sponsor flows on the full prototype
// ─────────────────────────────────────────────────────────────────────
function ObsidianModal({ open, onClose, children }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;
  const s = obsidianStyles;

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(5,5,4,0.84)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 32, animation: 'fadeIn 0.25s ease-out'
      }}>
      
      <style>{`@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}`}</style>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 1280, height: '88vh', maxHeight: 880,
          background: s.bg, border: `1px solid ${s.gold}40`,
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,76,0.08)',
          animation: 'slideUp 0.32s cubic-bezier(0.16,1,0.3,1)'
        }}>
        
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 20, right: 20, zIndex: 10,
          background: 'transparent', color: s.cream, border: `1px solid ${s.graySoft}`,
          width: 36, height: 36, cursor: 'pointer', fontFamily: s.sans, fontSize: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 0.2s'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.borderColor = s.gold;e.currentTarget.style.color = s.gold;}}
        onMouseLeave={(e) => {e.currentTarget.style.borderColor = s.graySoft;e.currentTarget.style.color = s.cream;}}>
          ×</button>
        {children}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────
// OBSIDIAN TICKET FLOW
// ─────────────────────────────────────────────────────────────────────
function ObsidianTicketFlow({ onClose }) {
  const s = obsidianStyles;
  const f = useTicketFlow();

  const StepDot = ({ n, label }) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
      width: 24, height: 24, borderRadius: '50%',
      border: `1px solid ${f.step >= n ? s.gold : s.graySoft}`,
      background: f.step > n ? s.gold : 'transparent',
      color: f.step > n ? s.bg : f.step === n ? s.gold : s.gray,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: s.mono, fontSize: 10, fontWeight: 500
    }}>{f.step > n ? '✓' : n}</div>
      <span style={{
      fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
      color: f.step >= n ? s.cream : s.gray
    }}>{label}</span>
    </div>;


  const Btn = ({ children, primary, onClick, disabled }) =>
  <button onClick={onClick} disabled={disabled} style={{
    background: primary ? s.gold : 'transparent',
    color: primary ? s.bg : s.gold,
    border: primary ? 'none' : `1px solid ${s.gold}`,
    padding: '14px 32px', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
    fontWeight: 500, cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: s.sans,
    opacity: disabled ? 0.3 : 1, transition: 'all 0.2s'
  }}>{children}</button>;


  return (
    <div style={{
      width: '100%', height: '100%', background: s.bg, color: s.cream, fontFamily: s.sans,
      padding: '44px 56px 36px', display: 'flex', flexDirection: 'column', gap: 24, position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ position: 'absolute', right: -120, top: -80, opacity: 0.04, color: s.gold }}>
        <CrownGlyph size={520} stroke={0.6} />
      </div>

      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
        <div>
          <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 8 }}>RESERVATIONS · OCTOBER 17 · 2026</div>
          <div style={{ fontFamily: s.serif, fontSize: 44, fontWeight: 300, lineHeight: 1 }}>
            Reserve <span style={{ fontStyle: 'italic', color: s.gold }}>your seat.</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center', paddingTop: 12, paddingRight: 44 }}>
          <StepDot n={1} label="Seat" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={2} label="Quantity" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={3} label="Guest" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={4} label="Confirm" />
        </div>
      </div>

      {/* steps */}
      <div style={{ flex: 1, position: 'relative', zIndex: 2, minHeight: 0 }}>

        {f.step === 1 &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>
            {/* Early bird toggle */}
            <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '14px 20px', background: s.bgSoft, border: `1px solid ${f.earlyBird ? s.gold : s.graySoft}`
          }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                width: 8, height: 8, borderRadius: '50%',
                background: f.earlyBird ? s.gold : s.gray,
                boxShadow: f.earlyBird ? `0 0 12px ${s.gold}99` : 'none'
              }} />
                <div>
                  <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: f.earlyBird ? s.gold : s.gray }}>
                    {f.earlyBird ? '◇ EARLY BIRD ACTIVE · LIMITED TIME' : 'REGULAR PRICING'}
                  </div>
                  <div style={{ fontSize: 12, color: s.cream, opacity: 0.7, marginTop: 2 }}>
                    {f.earlyBird ? 'Early bird pricing automatically applied — reserve before doors release.' : 'Early bird window closed.'}
                  </div>
                </div>
              </div>
              <button onClick={() => f.setEarlyBird((v) => !v)} style={{
              background: 'transparent', color: f.earlyBird ? s.gold : s.gray,
              border: `1px solid ${f.earlyBird ? s.gold : s.graySoft}`, padding: '8px 14px',
              fontFamily: s.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              cursor: 'pointer'
            }}>{f.earlyBird ? 'Toggle off' : 'Toggle on'}</button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, flex: 1, minHeight: 0 }}>
            {TICKET_TYPES.map((t, i) => {
              const sel = f.ticketId === t.id;
              const displayPrice = f.earlyBird ? t.earlyPrice : t.price;
              return (
                <button key={t.id} onClick={() => f.setTicketId(t.id)} style={{
                  background: sel ? `linear-gradient(180deg, ${s.gold}18, ${s.gold}04)` : s.bgSoft,
                  border: `1px solid ${sel ? s.gold : s.graySoft}`,
                  padding: '24px 24px', textAlign: 'left', cursor: 'pointer',
                  fontFamily: s.sans, color: s.cream, display: 'flex', flexDirection: 'column',
                  transition: 'all 0.25s', position: 'relative', overflow: 'hidden'
                }}>
                  {sel && <div style={{ position: 'absolute', top: 14, right: 14, color: s.gold, fontFamily: s.mono, fontSize: 11 }}>●</div>}
                  <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: sel ? s.gold : s.gray, marginBottom: 12 }}>
                    TIER {String(i + 1).padStart(2, '0')} · {t.badge.toUpperCase()}
                  </div>
                  <div style={{ fontFamily: s.serif, fontSize: 24, fontWeight: 400, fontStyle: 'italic', color: sel ? s.gold : s.cream, lineHeight: 1.1, marginBottom: 6 }}>
                    {t.name}
                  </div>
                  <div style={{ fontSize: 11.5, color: s.cream, opacity: 0.6, marginBottom: 14, lineHeight: 1.55 }}>{t.desc}</div>

                  {/* price block */}
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
                    <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 36, color: s.cream }}>
                      ${displayPrice}
                    </div>
                    {f.earlyBird &&
                    <div style={{ fontFamily: s.serif, fontSize: 18, color: s.gray, textDecoration: 'line-through' }}>
                        ${t.price}
                      </div>
                    }
                  </div>
                  <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: f.earlyBird ? s.gold : s.gray, marginBottom: 14 }}>
                    {f.earlyBird ? `◇ EARLY BIRD · SAVE $${t.price - t.earlyPrice}` : 'PER TICKET'}
                  </div>
                  <div style={{ height: 1, background: sel ? `${s.gold}44` : s.graySoft, marginBottom: 14 }} />
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0 }}>
                    {t.perks.map((p, j) =>
                    <li key={j} style={{ fontSize: 11, lineHeight: 1.45, color: s.cream, opacity: 0.78, display: 'flex', gap: 8 }}>
                        <span style={{ color: s.gold, opacity: 0.85, flexShrink: 0 }}>—</span><span>{p}</span>
                      </li>
                    )}
                  </ul>
                </button>);
            })}
            </div>
          </div>
        }

        {f.step === 2 &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, height: '100%' }}>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 24 }}>
              <div>
                <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 8 }}>HOW MANY?</div>
                <div style={{ fontFamily: s.serif, fontSize: 32, fontWeight: 300 }}>
                  How many <span style={{ fontStyle: 'italic', color: s.gold }}>tickets?</span>
                </div>
                <p style={{ fontSize: 13, color: s.cream, opacity: 0.65, marginTop: 12, maxWidth: 380, lineHeight: 1.7 }}>
                  Bringing a group of 4+? Reach out and we'll arrange complimentary side-by-side seating and a welcome touch on arrival.
                </p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
                <button onClick={() => f.setQty((q) => Math.max(1, q - 1))}
              style={{ width: 64, height: 64, background: 'transparent', border: `1px solid ${s.gold}`, color: s.gold, fontSize: 22, cursor: 'pointer', fontFamily: s.serif }}>−</button>
                <div style={{ fontFamily: s.serif, fontSize: 96, fontWeight: 300, color: s.cream, minWidth: 80, textAlign: 'center', lineHeight: 1 }}>
                  {f.qty}
                </div>
                <button onClick={() => f.setQty((q) => Math.min(12, q + 1))}
              style={{ width: 64, height: 64, background: 'transparent', border: `1px solid ${s.gold}`, color: s.gold, fontSize: 22, cursor: 'pointer', fontFamily: s.serif }}>+</button>
              </div>
            </div>
            {/* summary card */}
            <div style={{ background: s.bgSoft, border: `1px solid ${s.graySoft}`, padding: 32, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 12 }}>YOUR RESERVATION</div>
              <div style={{ fontFamily: s.serif, fontSize: 28, fontWeight: 400, lineHeight: 1.1 }}>{f.ticket.name}</div>
              <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', color: s.gold, marginTop: 6 }}>{f.ticket.badge.toUpperCase()}</div>
              <div style={{ height: 1, background: s.graySoft, margin: '20px 0' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 10 }}>
                <span style={{ color: s.cream, opacity: 0.75 }}>
                  ${f.unitPrice} × {f.effectiveQty} {f.earlyBird ? <span style={{ color: s.gold, marginLeft: 6 }}>· early bird</span> : null}
                </span>
                <span>{money(f.subtotal)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 10 }}>
                <span style={{ color: s.cream, opacity: 0.55 }}>Service fees</span>
                <span style={{ color: s.cream, opacity: 0.8 }}>{money(f.fees)}</span>
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ height: 1, background: s.graySoft, margin: '12px 0' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gold }}>Total</span>
                <span style={{ fontFamily: s.serif, fontSize: 38, color: s.gold, fontStyle: 'italic' }}>{money(f.total)}</span>
              </div>
              <div style={{ fontSize: 10, color: s.gray, marginTop: 10, letterSpacing: '0.06em' }}>
                {f.ticket.id === 'gold' ? 'Includes everything · refreshments → after-party.' :
              f.ticket.id === 'silver' ? 'Cultural moments only · runway · panel · performances.' :
              'After-party access · DJ set · cash bar.'}
              </div>
            </div>
          </div>
        }

        {f.step === 3 &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, height: '100%' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ fontFamily: s.serif, fontSize: 26, fontWeight: 300, marginBottom: 4 }}>
                Tell us <span style={{ fontStyle: 'italic', color: s.gold }}>about you.</span>
              </div>
              {[
            ['Full name', 'Ama Boateng', true],
            ['Email', 'ama@example.com', true],
            ['Phone', '+1 416 555 0188', false],
            ['Dietary or accessibility needs', 'None — looking forward!', false]].
            map(([label, ph, fill], i) =>
            <div key={label}>
                  <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>{label}</div>
                  <input defaultValue={fill ? ph : ''} placeholder={ph} style={{
                width: '100%', background: 'transparent', border: 'none',
                borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0', color: s.cream,
                fontFamily: s.serif, fontSize: 20, fontWeight: 300, outline: 'none'
              }} />
                </div>
            )}
              <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 16, height: 16, border: `1px solid ${s.gold}`, background: s.gold, color: s.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>✓</div>
                <span style={{ fontSize: 12, color: s.cream, opacity: 0.8 }}>Send me the night-of program & after-party details</span>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ fontFamily: s.serif, fontSize: 26, fontWeight: 300, marginBottom: 4 }}>
                Payment.
              </div>
              <div>
                <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>Card number</div>
                <div style={{ display: 'flex', alignItems: 'center', borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0' }}>
                  <input defaultValue="4242 4242 4242 4242" style={{
                  flex: 1, background: 'transparent', border: 'none', color: s.cream,
                  fontFamily: s.mono, fontSize: 18, outline: 'none', letterSpacing: '0.05em'
                }} />
                  <span style={{ fontFamily: s.mono, fontSize: 10, color: s.gold, letterSpacing: '0.18em' }}>VISA</span>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div>
                  <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>Expiry</div>
                  <input defaultValue="12 / 28" style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0', color: s.cream, fontFamily: s.mono, fontSize: 18, outline: 'none' }} />
                </div>
                <div>
                  <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>CVC</div>
                  <input defaultValue="•••" placeholder="•••" style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0', color: s.cream, fontFamily: s.mono, fontSize: 18, outline: 'none', letterSpacing: '0.2em' }} />
                </div>
              </div>
              <div>
                <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>Postal code</div>
                <input defaultValue="M5V 2N4" style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0', color: s.cream, fontFamily: s.mono, fontSize: 18, outline: 'none' }} />
              </div>

              <div style={{ marginTop: 'auto', background: s.bgSoft, border: `1px solid ${s.graySoft}`, padding: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div>
                  <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gray }}>Charge today</div>
                  <div style={{ fontSize: 12, color: s.cream, opacity: 0.7 }}>{f.ticket.name} × {f.effectiveQty} · fees included</div>
                </div>
                <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 36, color: s.gold }}>{money(f.total)}</div>
              </div>
            </div>
          </div>
        }

        {f.step === 4 &&
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', textAlign: 'center', padding: '0 60px' }}>
            <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'center' }}><LogoMark size={88} /></div>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 16 }}>RESERVATION CONFIRMED · #EN2026-{Math.floor(Math.random() * 9000 + 1000)}</div>
            <div style={{ fontFamily: s.serif, fontSize: 64, fontWeight: 300, lineHeight: 1.05, marginBottom: 18 }}>
              See you on the <span style={{ fontStyle: 'italic', color: s.gold }}>seventeenth.</span>
            </div>
            <div style={{ fontSize: 15, color: s.cream, opacity: 0.75, maxWidth: 520, lineHeight: 1.7 }}>
              Your {f.ticket.name.toLowerCase()} reservation for {f.effectiveQty} {f.effectiveQty === 1 ? 'ticket' : 'tickets'} is locked in. A confirmation with the night-of program is on its way to your inbox.
            </div>

            {/* mini ticket card */}
            <div style={{
            marginTop: 36, padding: '24px 32px', border: `1px solid ${s.gold}55`,
            background: s.bgSoft, display: 'grid', gridTemplateColumns: 'auto 1px auto auto', gap: 28, alignItems: 'center'
          }}>
              <div>
                <div style={{ fontFamily: s.mono, fontSize: 9, letterSpacing: '0.22em', color: s.gold, marginBottom: 4 }}>EVENING</div>
                <div style={{ fontFamily: s.serif, fontSize: 20, fontStyle: 'italic' }}>Elevate Noir</div>
              </div>
              <div style={{ width: 1, height: 40, background: s.graySoft }} />
              <div>
                <div style={{ fontFamily: s.mono, fontSize: 9, letterSpacing: '0.22em', color: s.gold, marginBottom: 4 }}>DATE · DOORS</div>
                <div style={{ fontFamily: s.serif, fontSize: 18 }}>17 OCT 2026 · 6:30 PM</div>
              </div>
              <div style={{ marginLeft: 16 }}>
                <Btn onClick={onClose}>Add to wallet</Btn>
              </div>
            </div>
          </div>
        }
      </div>

      {/* footer */}
      {f.step < 4 &&
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${s.graySoft}`, paddingTop: 20, position: 'relative', zIndex: 2 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gray }}>Total</div>
            <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 28, color: s.gold }}>{money(f.total)}</div>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <Btn onClick={f.prev} disabled={f.step === 1}>← Back</Btn>
            <Btn primary onClick={f.next}>{f.step === 3 ? 'Confirm payment →' : 'Continue →'}</Btn>
          </div>
        </div>
      }
    </div>);

}

// ─────────────────────────────────────────────────────────────────────
// FULL-PAGE OBSIDIAN LANDING SECTIONS
// ─────────────────────────────────────────────────────────────────────

// Smooth scroll-reveal hook
function useReveal() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setSeen(true);io.disconnect();}
    }, { threshold: 0.12 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}

function Reveal({ children, delay = 0, style = {} }) {
  const [ref, seen] = useReveal();
  return (
    <div ref={ref} style={{
      opacity: seen ? 1 : 0,
      transform: seen ? 'translateY(0)' : 'translateY(24px)',
      transition: `opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
      ...style
    }}>{children}</div>);

}

// Nav (sticky, scroll-aware)
function ObsidianNav({ onTickets, onSponsor }) {
  const s = obsidianStyles;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 32);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 56px' : '24px 56px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(10,9,8,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(1.2)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? `1px solid ${s.gold}1f` : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      fontFamily: s.sans, fontWeight: "400"
    }}>
      <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
        <LogoMark size={scrolled ? 36 : 44} style={{ transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)' }} />
        <span style={{ fontFamily: s.serif, fontStyle: 'italic', color: s.gold, letterSpacing: '0.02em', fontSize: "20px" }}>Elevate Noir</span>
      </a>
      <div style={{ display: 'flex', gap: 36, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: s.cream, opacity: 0.85 }} data-comment-anchor="91ffb50e45-div-433-7">
        <a href="#about" style={{ color: 'inherit', textDecoration: 'none', fontSize: "15px" }}>The Evening</a>
        <a href="#mission" style={{ color: 'inherit', textDecoration: 'none', fontSize: "15px" }}>About</a>
        <a href="#experience" style={{ color: 'inherit', textDecoration: 'none', fontSize: "15px" }}>Experience</a>
        <a href="#sponsors" style={{ color: 'inherit', textDecoration: 'none', fontSize: "15px" }}>Partner</a>
        <a href="#footer" style={{ color: 'inherit', textDecoration: 'none', fontSize: "15px" }}>Contact</a>
      </div>
      <button onClick={onTickets} style={{
        background: s.gold, color: s.bg, border: 'none', padding: '11px 22px',
        letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', fontFamily: s.sans,
        transition: 'transform 0.2s, box-shadow 0.2s', fontSize: "15px"
      }}
      onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-1px)';e.currentTarget.style.boxShadow = `0 8px 30px ${s.gold}40`;}}
      onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
        Reserve</button>
    </nav>);

}

// Tagline + investment statement
function ObsidianTagline() {
  const s = obsidianStyles;
  return (
    <section style={{
      padding: '140px 56px 120px', background: s.bg, color: s.cream, fontFamily: s.sans,
      borderBottom: `1px solid ${s.graySoft}`
    }} id="about">
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
        <Reveal>
          <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 28 }}>◇ THE VISION</div>
          <h2 style={{ fontFamily: s.serif, fontSize: 76, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.015em', margin: 0 }}>
            Where Culture, Capital
            <br /><span style={{ fontStyle: 'italic', color: s.gold }}>&</span> Community Connect.
          </h2>
        </Reveal>
        <Reveal delay={0.15}>
          <p style={{ fontFamily: s.serif, fontSize: 19, lineHeight: 1.7, color: s.cream, opacity: 0.85, fontStyle: 'italic', fontWeight: 300, marginTop: 10 }}>
            The Elevate Noir Gala is more than an event — it is a curated cultural experience that brings together influential professionals, creatives, entrepreneurs, and tastemakers for an unforgettable evening of knowledge, empowerment, connection, and visibility.
          </p>
          <p style={{ fontFamily: s.sans, fontSize: 14, lineHeight: 1.8, color: s.cream, opacity: 0.6, marginTop: 24 }}>
            This is not a donation — it's a strategic investment in Black excellence.
          </p>
          <div style={{ marginTop: 30 }}>
            <a href="#experience" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'transparent', color: s.gold, border: `1px solid ${s.gold}`,
              padding: '13px 28px', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 500, textDecoration: 'none', fontFamily: s.sans
            }}>Discover the evening →</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Stats / 250+ + by the numbers
function ObsidianStats({ onTickets }) {
  const s = obsidianStyles;
  return (
    <section style={{ padding: '60px 56px', background: s.bg }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
        <Reveal>
          <div style={{
            background: `linear-gradient(135deg, ${s.gold}14 0%, ${s.gold}03 100%)`,
            border: `1px solid ${s.gold}24`,
            padding: 56, color: s.cream, position: 'relative', overflow: 'hidden'
          }}>
            <div style={{ position: 'absolute', right: -50, bottom: -50, opacity: 0.06, color: s.gold }}>
              <CrownGlyph size={320} stroke={0.6} />
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: s.serif, fontSize: 132, fontWeight: 300, lineHeight: 0.92, letterSpacing: '-0.02em' }}>
                250<span style={{ color: s.gold }}>+</span>
              </div>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gold, marginTop: 10, marginBottom: 22 }}>
                Professionals & Entrepreneurs
              </div>
              <p style={{ fontFamily: s.serif, fontSize: 17, lineHeight: 1.7, color: s.cream, opacity: 0.78, maxWidth: 520, fontStyle: 'italic', fontWeight: 300 }}>
                A curated, high-intent audience of business owners, creatives, consultants, and career-driven individuals — the kind of room where conversations turn into companies.
              </p>
              <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 48, alignItems: 'baseline' }}>
                {[
                ['07', 'Distinct experiences'],
                ['$40K', 'Sponsorship goal'],
                ['16', 'Partner spots']].
                map(([n, l]) =>
                <div key={l}>
                    <div style={{ fontFamily: s.serif, fontSize: 38, fontWeight: 300, color: s.gold }}>{n}</div>
                    <div style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: s.gray, marginTop: 6 }}>{l}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={0.15}>
          <div style={{
            background: s.bgSoft, border: `1px solid ${s.graySoft}`,
            padding: 48, color: s.cream, height: '100%', display: 'flex', flexDirection: 'column'
          }} id="tickets">
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 16 }}>◇ DON'T MISS THIS NIGHT</div>
            <h3 style={{ fontFamily: s.serif, fontSize: 44, fontWeight: 300, lineHeight: 1.05, margin: 0 }}>
              Reserve your <span style={{ fontStyle: 'italic', color: s.gold }}>seat.</span>
            </h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.7, color: s.cream, opacity: 0.7, marginTop: 16 }}>
              Tickets release in waves. Get the night-of program, the after-party address, and first access to early-bird seats.
            </p>
            <div style={{ flex: 1 }} />
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', marginTop: 24 }}>
              <input type="email" placeholder="your@email.com" style={{
                flex: 1, background: s.bg, border: `1px solid ${s.graySoft}`, borderRight: 'none',
                color: s.cream, fontFamily: s.sans, fontSize: 13, padding: '14px 18px', outline: 'none'
              }} />
              <button type="submit" style={{
                background: s.gold, color: s.bg, border: `1px solid ${s.gold}`,
                padding: '14px 24px', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
                fontWeight: 500, cursor: 'pointer', fontFamily: s.sans
              }}>Notify me</button>
            </form>
            <button onClick={onTickets} style={{
              marginTop: 12, background: 'transparent', color: s.gold, border: 'none',
              padding: '14px 0 0', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 500, cursor: 'pointer', fontFamily: s.sans, textAlign: 'left'
            }}>Or reserve a seat now →</button>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Mission / Party & Bash about
function ObsidianAbout() {
  const s = obsidianStyles;
  return (
    <section style={{
      padding: '120px 56px', background: s.bg, color: s.cream, fontFamily: s.sans,
      borderTop: `1px solid ${s.graySoft}`, borderBottom: `1px solid ${s.graySoft}`
    }} id="mission">
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80 }}>
        <Reveal>
          <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 28 }}>◇ THE MISSION</div>
          <p style={{ fontFamily: s.serif, fontSize: 34, fontWeight: 300, fontStyle: 'italic', lineHeight: 1.4, color: s.cream, margin: 0 }}>
            To create a safe space for Black professionals to learn from experts in their field, experience the talents of creatives within Toronto, and foster connections that develop <span style={{ color: s.gold }}>long-term economic growth</span> within the Black community.
          </p>

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 32, borderTop: `1px solid ${s.graySoft}` }}>
            {[
            { h: 'The Gap', b: 'Black-owned businesses receive less funding and visibility. Safe, high-quality networking spaces remain limited.' },
            { h: 'The Solution', b: 'A premium environment where attendees connect and are noticed at a high level. A platform where emerging and established voices are amplified together.' },
            { h: 'The Impact', b: 'Meaningful networking that fosters real relationships and opportunity for long-term economic development within the community.' }].
            map((p, i) =>
            <div key={p.h}>
                <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', color: s.gold, marginBottom: 10 }}>{String(i + 1).padStart(2, '0')} ━</div>
                <div style={{ fontFamily: s.serif, fontSize: 22, fontWeight: 400, marginBottom: 10 }}>{p.h}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.7, color: s.cream, opacity: 0.7, margin: 0 }}>{p.b}</p>
              </div>
            )}
          </div>

          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            <a href="About.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              background: s.gold, color: s.bg, border: 'none',
              padding: '16px 32px', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
              fontWeight: 500, textDecoration: 'none', fontFamily: s.sans,
              transition: 'all 0.2s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 12px 40px ${s.gold}3a`; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
            >Learn more about us →</a>
            <span style={{ fontFamily: s.mono, fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray }}>
              Our story · the night · the people behind it
            </span>
          </div>
        </Reveal>

        <Reveal delay={0.15}>
          <div style={{ position: 'sticky', top: 120 }}>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gray, marginBottom: 10 }}>PRESENTED BY</div>
            <div style={{ fontFamily: s.serif, fontSize: 38, fontWeight: 400, color: s.gold, fontStyle: 'italic', marginBottom: 18 }}>
              Party &amp; Bash
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.8, color: s.cream, opacity: 0.75, marginBottom: 18 }}>
              A luxury event design company creating immersive, intentional experiences across Toronto — from intimate celebrations to large-scale cultural moments.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.8, color: s.cream, opacity: 0.6, marginBottom: 24 }}>
              As the creator of Elevate Noir, Party &amp; Bash partners with Black-owned businesses, creatives, and entrepreneurs across the city to bring the vision to life — from décor to dining, fashion to media.
            </p>
            <a href="https://www.partyandbash.com" target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'transparent', color: s.gold, border: `1px solid ${s.gold}`,
              padding: '12px 24px', fontSize: 10.5, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 500, textDecoration: 'none', fontFamily: s.sans
            }}>Visit the studio →</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Experience grid — full bleed
function ObsidianExperience() {
  const s = obsidianStyles;
  return (
    <section style={{ padding: '120px 56px', background: s.bg, color: s.cream, fontFamily: s.sans }} id="experience">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 18 }}>◇ THE EVENING IN SEVEN ACTS</div>
            <h2 style={{ fontFamily: s.serif, fontSize: 76, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
              The <span style={{ fontStyle: 'italic', color: s.gold }}>experience.</span>
            </h2>
            <p style={{ fontFamily: s.serif, fontSize: 18, fontStyle: 'italic', color: s.cream, opacity: 0.6, maxWidth: 600, margin: '20px auto 0', lineHeight: 1.6, fontWeight: 300 }}>
              Every moment intentionally designed for connection, culture, and celebration.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {EXPERIENCES.slice(0, 6).map((e, i) =>
          <Reveal key={e.n} delay={Math.min(i * 0.08, 0.5)}>
              <div style={{
              background: s.bgSoft, border: `1px solid ${s.graySoft}`,
              padding: 36, height: '100%', display: 'flex', flexDirection: 'column',
              transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)',
              cursor: 'default', position: 'relative', overflow: 'hidden'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = `${obsidianStyles.gold}55`;e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 20px 60px rgba(0,0,0,0.4)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = obsidianStyles.graySoft;e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
              
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36 }}>
                  <div style={{ fontFamily: s.serif, fontSize: 56, fontWeight: 300, fontStyle: 'italic', color: s.gold, lineHeight: 1 }}>{e.n}</div>
                  <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gray }}>ACT</div>
                </div>
                <div style={{ fontFamily: s.serif, fontSize: 26, fontWeight: 400, marginBottom: 10, color: s.cream }}>{e.name}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.7, color: s.cream, opacity: 0.7, margin: 0 }}>{e.blurb}</p>
              </div>
            </Reveal>
          )}
        </div>

        {/* Finale — full-width closing act */}
        {EXPERIENCES[6] && (() => {
          const e = EXPERIENCES[6];
          return (
            <Reveal delay={0.2} style={{ marginTop: 18 }}>
              <div style={{
                position: 'relative', overflow: 'hidden',
                background: s.bgSoft, border: `1px solid ${s.gold}33`,
                minHeight: 340, display: 'grid', gridTemplateColumns: '1.2fr 1fr',
                transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)'
              }}
              onMouseEnter={(ev) => {ev.currentTarget.style.borderColor = `${obsidianStyles.gold}88`;ev.currentTarget.style.boxShadow = '0 30px 80px rgba(0,0,0,0.5)';}}
              onMouseLeave={(ev) => {ev.currentTarget.style.borderColor = `${obsidianStyles.gold}33`;ev.currentTarget.style.boxShadow = 'none';}}>
                
                {/* video / atmosphere panel */}
                <div style={{ position: 'relative', overflow: 'hidden', minHeight: 340 }}>
                  <video autoPlay muted loop playsInline
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.6 }}>
                    <source src="assets/hero-video-2.mp4" type="video/mp4" />
                  </video>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: `linear-gradient(90deg, transparent 0%, ${s.bgSoft} 100%),
                                 linear-gradient(180deg, rgba(10,9,8,0.3) 0%, rgba(10,9,8,0.6) 100%)`
                  }} />
                  <div style={{ position: 'absolute', top: 36, left: 36, zIndex: 2 }}>
                    <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 10 }}>FINALE</div>
                    <div style={{ fontFamily: s.serif, fontSize: 88, fontWeight: 300, fontStyle: 'italic', color: s.gold, lineHeight: 0.9 }}>{e.n}</div>
                  </div>
                </div>

                {/* copy panel */}
                <div style={{ padding: '48px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gray, marginBottom: 14 }}>ACT · CLOSING THE NIGHT</div>
                  <div style={{ fontFamily: s.serif, fontSize: 44, fontWeight: 300, lineHeight: 1.05, marginBottom: 16, color: s.cream }}>
                    {e.name.split(' ').slice(0, -1).join(' ')} <span style={{ fontStyle: 'italic', color: s.gold }}>{e.name.split(' ').slice(-1)[0]}.</span>
                  </div>
                  <p style={{ fontSize: 15, lineHeight: 1.75, color: s.cream, opacity: 0.78, margin: 0, maxWidth: 440 }}>
                    {e.blurb} A curated soundtrack, a continued conversation, and a room that doesn't want to leave.
                  </p>
                  <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 18 }}>
                    <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold }}>11 PM — LATE</div>
                    <div style={{ height: 1, flex: 1, background: `${s.gold}33` }} />
                    <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold }}>RSVP REQUIRED</div>
                  </div>
                </div>
              </div>
            </Reveal>);

        })()}
      </div>
    </section>);

}

// Ticket tiers showcase — Gold / Silver / Bronze with early bird highlight
function ObsidianTicketTiers({ onTickets }) {
  const s = obsidianStyles;
  const tierColors = {
    gold: { ring: s.gold, glow: `${s.gold}33`, label: 'GOLD' },
    silver: { ring: '#B8B5AB', glow: '#B8B5AB22', label: 'SILVER' },
    bronze: { ring: '#A66B3A', glow: '#A66B3A22', label: 'BRONZE' }
  };
  return (
    <section style={{
      padding: '120px 56px', background: s.bg, color: s.cream, fontFamily: s.sans,
      borderTop: `1px solid ${s.graySoft}`, position: 'relative'
    }} id="tickets-section">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 56, alignItems: 'end', marginBottom: 56 }}>
            <div>
              <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 18 }}>◇ TICKETS · OCTOBER 17 · 2026</div>
              <h2 style={{ fontFamily: s.serif, fontSize: 76, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
                Choose how you <span style={{ fontStyle: 'italic', color: s.gold }}>arrive.</span>
              </h2>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 12,
                padding: '10px 18px', border: `1px solid ${s.gold}`, background: `${s.gold}0d`
              }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: s.gold, boxShadow: `0 0 12px ${s.gold}99` }} />
                <div style={{ fontFamily: s.mono, fontSize: 10.5, letterSpacing: '0.22em', color: s.gold, textTransform: 'uppercase' }}>
                  Early bird pricing live
                </div>
              </div>
              <div style={{ fontSize: 12, color: s.cream, opacity: 0.6, marginTop: 10 }}>
                Limited release — save up to $55 per ticket.
              </div>
            </div>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {TICKET_TYPES.map((t, i) => {
            const c = tierColors[t.id];
            const isFeatured = t.id === 'gold';
            return (
              <Reveal key={t.id} delay={Math.min(i * 0.1, 0.3)}>
                <div style={{
                  background: isFeatured ? `linear-gradient(180deg, ${s.gold}14 0%, ${s.bgSoft} 60%)` : s.bgSoft,
                  border: `1px solid ${isFeatured ? `${s.gold}55` : s.graySoft}`,
                  padding: 36, height: '100%', display: 'flex', flexDirection: 'column',
                  position: 'relative', overflow: 'hidden',
                  transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)'
                }}
                onMouseEnter={(e) => {e.currentTarget.style.borderColor = c.ring;e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = `0 20px 60px ${c.glow}`;}}
                onMouseLeave={(e) => {e.currentTarget.style.borderColor = isFeatured ? `${s.gold}55` : s.graySoft;e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
                  
                  {isFeatured &&
                  <div style={{
                    position: 'absolute', top: 18, right: 18,
                    fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: s.bg,
                    background: s.gold, padding: '5px 10px'
                  }}>MOST POPULAR</div>
                  }
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                    <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.24em', color: c.ring }}>
                      TIER {String(i + 1).padStart(2, '0')}
                    </div>
                    <div style={{ width: 24, height: 1, background: c.ring, opacity: 0.5 }} />
                    <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.24em', color: c.ring }}>
                      {c.label}
                    </div>
                  </div>
                  <div style={{ fontFamily: s.serif, fontSize: 32, fontWeight: 400, fontStyle: 'italic', color: s.cream, lineHeight: 1.1, marginBottom: 10 }}>
                    {t.name}
                  </div>
                  <p style={{ fontSize: 13, color: s.cream, opacity: 0.65, margin: 0, lineHeight: 1.7 }}>{t.desc}</p>

                  {/* price */}
                  <div style={{ marginTop: 28, paddingTop: 24, borderTop: `1px solid ${s.graySoft}` }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 6 }}>
                      <div style={{ fontFamily: s.serif, fontSize: 56, fontWeight: 300, color: s.gold, fontStyle: 'italic', lineHeight: 0.9 }}>
                        ${t.earlyPrice}
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                        <div style={{ fontFamily: s.serif, fontSize: 18, color: s.gray, textDecoration: 'line-through' }}>${t.price}</div>
                        <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.18em', color: s.gold }}>EARLY BIRD</div>
                      </div>
                    </div>
                    <div style={{ fontSize: 11.5, color: s.cream, opacity: 0.55, letterSpacing: '0.04em' }}>
                      Save ${t.price - t.earlyPrice} · regular pricing ${`$${t.price}`} when early bird closes.
                    </div>
                  </div>

                  {/* perks */}
                  <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                    {t.perks.map((p, j) =>
                    <li key={j} style={{ fontSize: 12.5, lineHeight: 1.55, color: s.cream, opacity: 0.82, display: 'flex', gap: 10 }}>
                        <span style={{ color: c.ring, opacity: 0.9, flexShrink: 0 }}>—</span><span>{p}</span>
                      </li>
                    )}
                  </ul>

                  <button onClick={onTickets} style={{
                    marginTop: 28,
                    background: isFeatured ? s.gold : 'transparent',
                    color: isFeatured ? s.bg : s.gold,
                    border: isFeatured ? 'none' : `1px solid ${s.gold}`,
                    padding: '14px 0', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                    fontWeight: 500, cursor: 'pointer', fontFamily: s.sans,
                    transition: 'all 0.2s'
                  }}
                  onMouseEnter={(e) => {if (!isFeatured) {e.currentTarget.style.background = s.gold;e.currentTarget.style.color = s.bg;}}}
                  onMouseLeave={(e) => {if (!isFeatured) {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = s.gold;}}}>
                    Reserve this tier →</button>
                </div>
              </Reveal>);

          })}
        </div>

        {/* fine print */}
        <Reveal delay={0.2}>
          <div style={{
            marginTop: 36, padding: '20px 28px', border: `1px solid ${s.graySoft}`, background: s.bgSoft,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap'
          }}>
            <div style={{ fontSize: 12.5, color: s.cream, opacity: 0.7, lineHeight: 1.5 }}>
              All tickets include arrival reception and program. <span style={{ color: s.gold }}>Groups of 4+ in any tier</span> — reach out for complimentary side-by-side seating.
            </div>
            <a href="mailto:tickets@elevatenoirgala.ca" style={{
              fontFamily: s.mono, fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: s.gold, textDecoration: 'none', borderBottom: `1px solid ${s.gold}`, paddingBottom: 2
            }}>tickets@elevatenoirgala.ca →</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Sponsor CTA — tiers preview + CTA to flow
function ObsidianSponsorCTA({ onSponsor }) {
  const s = obsidianStyles;
  return (
    <section style={{
      padding: '120px 56px', background: s.bg, color: s.cream, fontFamily: s.sans,
      borderTop: `1px solid ${s.graySoft}`
    }} id="sponsors">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 18 }}>◇ PARTNERSHIP · 2026</div>
            <h2 style={{ fontFamily: s.serif, fontSize: 76, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
              Become a <span style={{ fontStyle: 'italic', color: s.gold }}>partner.</span>
            </h2>
            <p style={{ fontFamily: s.serif, fontSize: 18, fontStyle: 'italic', color: s.cream, opacity: 0.65, maxWidth: 580, margin: '20px auto 0', lineHeight: 1.6, fontWeight: 300 }}>
              We're securing select brand partners. Spots are limited to maintain exclusivity, intentionality, and value.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 56 }}>
          {TIERS.map((t, i) =>
          <Reveal key={t.id} delay={Math.min(i * 0.08, 0.4)}>
              <div style={{
              background: s.bgSoft, border: `1px solid ${s.graySoft}`,
              padding: '32px 28px', textAlign: 'left', height: '100%', display: 'flex', flexDirection: 'column'
            }}>
                <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 16 }}>
                  {String(i + 1).padStart(2, '0')} · {t.avail} AVAIL
                </div>
                <div style={{ fontFamily: s.serif, fontSize: 26, fontWeight: 400, color: s.cream, marginBottom: 4 }}>
                  {t.name} <span style={{ fontStyle: 'italic', color: s.gold }}>Sponsor</span>
                </div>
                <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 30, color: s.cream, marginBottom: 18 }}>
                  {money(t.price)}<span style={{ fontSize: 14, color: s.gray }}>+</span>
                </div>
                <div style={{ height: 1, background: s.graySoft, marginBottom: 16 }} />
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                  {t.perks.slice(0, 3).map((p, j) =>
                <li key={j} style={{ fontSize: 11.5, lineHeight: 1.45, color: s.cream, opacity: 0.78, display: 'flex', gap: 8 }}>
                      <span style={{ color: s.gold, opacity: 0.9 }}>—</span><span>{p}</span>
                    </li>
                )}
                </ul>
              </div>
            </Reveal>
          )}
        </div>

        <Reveal>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button onClick={onSponsor} style={{
              background: s.gold, color: s.bg, border: 'none', padding: '16px 38px',
              fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', fontFamily: s.sans,
              transition: 'all 0.2s'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 12px 40px ${s.gold}3a`;}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
              Partner with us →</button>
            <a href="tel:6475256214" style={{
              background: 'transparent', color: s.gold, border: `1px solid ${s.gold}`,
              padding: '16px 38px', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
              fontWeight: 500, cursor: 'pointer', fontFamily: s.sans, textDecoration: 'none', display: 'inline-block'
            }}>Call 647-525-6214</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Footer
function ObsidianFooter() {
  const s = obsidianStyles;
  return (
    <footer style={{ padding: '80px 56px 0', background: s.bg, color: s.cream, fontFamily: s.sans, borderTop: `1px solid ${s.graySoft}` }} id="footer">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 56, borderBottom: `1px solid ${s.gold}1a` }}>
          <div>
            <div style={{ marginBottom: 18 }}>
              <LogoFull size={140} />
            </div>
            <p style={{ fontFamily: s.serif, fontSize: 16, fontStyle: 'italic', color: s.cream, opacity: 0.65, maxWidth: 340, margin: 0, fontWeight: 300, lineHeight: 1.5 }}>
              Where Culture, Capital &amp; Community Connect.
            </p>
          </div>
          {[
          { h: 'Contact', items: [['sponsorships@elevatenoirgala.ca', 'mailto:sponsorships@elevatenoirgala.ca'], ['647-525-6214', 'tel:6475256214']] },
          { h: 'Socials', items: [['@elevatenoirgala', 'https://instagram.com/elevatenoirgala']] },
          { h: 'Presented by', items: [['Party & Bash', 'https://www.partyandbash.com']] }].
          map((col) =>
          <div key={col.h} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gold, marginBottom: 8 }}>{col.h}</div>
              {col.items.map(([label, href]) =>
            <a key={label} href={href} style={{
              fontSize: 13.5, color: s.cream, opacity: 0.75, textDecoration: 'none'
            }}>{label}</a>
            )}
            </div>
          )}
        </div>

        <div style={{ padding: '40px 0 24px', overflow: 'hidden' }}>
          <div style={{
            fontFamily: s.serif, fontSize: 'clamp(80px, 14vw, 200px)', fontWeight: 300, lineHeight: 0.85,
            color: s.bgSoft, textAlign: 'center', letterSpacing: '-0.02em', userSelect: 'none',
            transition: 'color 0.6s', whiteSpace: 'nowrap'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.color = obsidianStyles.graySoft;}}
          onMouseLeave={(e) => {e.currentTarget.style.color = obsidianStyles.bgSoft;}}>
            
            Elevate <span style={{ fontStyle: 'italic' }}>Noir</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gray, marginTop: 16 }}>
            <span>© MMXXVI · ELEVATE NOIR GALA</span>
            <span>TORONTO · CANADA</span>
            <span>BLACK DREAM · VOL · I</span>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { ObsidianModal, ObsidianTicketFlow, ObsidianNav, ObsidianTagline, ObsidianStats, ObsidianAbout, ObsidianExperience, ObsidianTicketTiers, ObsidianSponsorCTA, ObsidianFooter });