// direction-obsidian.jsx — DIRECTION 01: Obsidian Cinema
// Cinematic, video-led, deep black, italic Cormorant serif, restrained gold.
// A refined evolution of the existing direction.

const obsidianStyles = {
  bg: '#0A0908',
  bgSoft: '#141312',
  cream: '#E8E2D3',
  gold: '#C9A24C',
  goldSoft: '#A88B3A',
  gray: '#6C6760',
  graySoft: '#3B3833',
  serif: '"Cormorant Garamond", Georgia, serif',
  sans: '"Outfit", -apple-system, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace'
};

function ObsidianHero({ onTickets, fullViewport } = {}) {
  const s = obsidianStyles;
  const { mobile, tablet } = useMobile();
  const px = mobile ? 24 : 56;

  return (
    <div style={{
      width: '100%',
      height: fullViewport ? '100vh' : '100%',
      minHeight: fullViewport ? (mobile ? 600 : 700) : undefined,
      position: 'relative', overflow: 'hidden',
      background: s.bg, color: s.cream, fontFamily: s.sans
    }}>
      {/* hero bg */}
      <video autoPlay muted loop playsInline aria-label="Elevate Noir Gala — Black Dream"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.42 }}>
        <source src="assets/hero.mp4" type="video/mp4" />
      </video>
      {/* vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(10,9,8,0.65) 0%, rgba(10,9,8,0.25) 30%, rgba(10,9,8,0.4) 60%, rgba(10,9,8,0.96) 100%),
                     radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,9,8,0.5) 100%)`
      }} />
      {/* film grain */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06, mixBlendMode: 'overlay',
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        backgroundSize: 200
      }} />

      {/* top nav — only shown when standalone in canvas */}
      {!fullViewport &&
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, padding: `28px ${px}px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 3
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LogoMark size={mobile ? 32 : 40} />
          <span style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 16 : 19, color: s.gold, letterSpacing: '0.02em' }}>Elevate Noir Gala</span>
        </div>
        {!mobile &&
        <div style={{ display: 'flex', gap: 36, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: s.cream, opacity: 0.7 }}>
          <span>The Evening</span><span>Experience</span><span>Sponsors</span><span>Contact</span>
        </div>
        }
        <button style={{
          background: s.gold, color: s.bg, border: 'none', padding: mobile ? '9px 16px' : '11px 22px',
          fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', fontFamily: s.sans
        }}>Reserve</button>
      </div>
      }

      {/* corner marks */}
      {!mobile &&
      <>
        <div style={{ position: 'absolute', top: 96, left: px, fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', color: s.gold, opacity: 0.7, zIndex: 3 }}>
          ◇ EST 2026 · TORONTO
        </div>
        <div style={{ position: 'absolute', top: 96, right: px, fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', color: s.gold, opacity: 0.7, zIndex: 3 }}>
          VOL · I · BLACK DREAM
        </div>
      </>
      }

      {/* prominent date — bottom right, aligned with tagline */}

      {/* main content */}
      <div style={{
        position: 'absolute', left: px, right: px, top: 90, bottom: mobile ? 24 : 56, zIndex: 3,
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
      }}>
        <div style={{ fontFamily: s.serif, fontWeight: 300, lineHeight: 0.86, letterSpacing: '-0.015em' }}>
          <div style={{ fontSize: mobile ? 'min(18vw, 10vh)' : 'min(12vw, 10vh, 170px)', lineHeight: 0.95 }}>Elevate</div>
          <div style={{ fontSize: mobile ? 'min(22vw, 13vh)' : 'min(15vw, 13vh, 210px)', fontStyle: 'italic', fontWeight: 400, color: s.gold, lineHeight: 0.95 }}>Noir</div>
          <div style={{ fontSize: mobile ? 'min(18vw, 10vh)' : 'min(12vw, 10vh, 170px)', lineHeight: 0.95 }}>Gala<span style={{ color: s.gold, fontStyle: 'italic' }}>.</span></div>
        </div>

        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-end', marginTop: mobile ? 20 : 36, gap: mobile ? 14 : 0 }}>
          <div style={{ fontSize: mobile ? 10 : 14, letterSpacing: mobile ? '0.2em' : '0.32em', textTransform: 'uppercase', color: s.gold, lineHeight: "1.5", padding: mobile ? 0 : "0px 0px 0px 10px" }}>
            A Luxury Experience Advancing Black Excellence
          </div>
          <div style={{ textAlign: mobile ? 'left' : 'right', flexShrink: 0, marginLeft: mobile ? 0 : 40 }}>
            <div style={{ fontFamily: s.serif, fontSize: mobile ? 22 : tablet ? 32 : 42, fontWeight: 300, color: s.gold, lineHeight: 1.15 }}>
              {GALA_DATA.date}
            </div>
            <div style={{ fontFamily: s.mono, fontSize: mobile ? 10 : 13, letterSpacing: '0.22em', color: s.cream, opacity: 0.8, marginTop: mobile ? 4 : 8 }}>
              {GALA_DATA.time}
            </div>
          </div>
        </div>

        <div style={{
          marginTop: mobile ? 16 : 32, paddingTop: mobile ? 16 : 32, borderTop: `1px solid ${s.gold}33`,
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr) auto',
          gap: mobile ? '16px 24px' : 32, alignItems: 'start'
        }}>
          {[
          ['Date', GALA_DATA.date],
          ['Venue', GALA_DATA.venue + ' · Toronto'],
          ['Dress Code', GALA_DATA.dress],
          ['Theme', 'Black Dream']].
          map(([k, v]) =>
          <div key={k}>
              <div style={{ fontSize: mobile ? 9 : tablet ? 10 : 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: s.gray, marginBottom: mobile ? 4 : 10 }}>{k}</div>
              <div style={{ fontSize: mobile ? 13 : tablet ? 14.5 : 16, color: s.cream, fontWeight: 300 }}>{v}</div>
            </div>
          )}
          <button onClick={onTickets} style={{
            background: s.gold, color: s.bg, border: 'none',
            padding: mobile ? '14px 24px' : '20px 48px',
            fontSize: mobile ? 11 : 13, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', fontFamily: s.sans,
            gridColumn: mobile ? '1 / -1' : undefined, marginTop: mobile ? 8 : 0
          }}>Reserve a Table →</button>
        </div>
      </div>

      {/* right edge scroll mark — hide on mobile */}
      {!mobile &&
      <div style={{
        position: 'absolute', right: 22, top: '50%', transform: 'translateY(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, zIndex: 3
      }}>
        <div style={{ width: 1, height: 60, background: `linear-gradient(to bottom, ${s.gold}, transparent)` }} />
        <div style={{ fontSize: 9, letterSpacing: '0.25em', color: s.gold, writingMode: 'vertical-rl' }}>SCROLL</div>
      </div>
      }
    </div>);

}

// ----- sponsor flow -----
function ObsidianFlow({ initialTier }) {
  const s = obsidianStyles;
  const { mobile } = useMobile();
  const isDonationMode = initialTier === 'donation';
  const flow = useSponsorFlow(isDonationMode ? 'title' : initialTier);
  React.useEffect(() => { if (isDonationMode) flow.setIsDonation(true); }, []);

  // Stripe payment state
  const [stripeSecret, setStripeSecret] = React.useState(null);
  const [paymentStatus, setPaymentStatus] = React.useState('idle'); // idle | loading | ready | processing | error | success
  const [paymentError, setPaymentError] = React.useState('');
  const [stripeElements, setStripeElements] = React.useState(null);
  const [stripeInstance, setStripeInstance] = React.useState(null);
  const paymentRef = React.useRef(null);
  const formRef = React.useRef({});

  // Collect form data from step 3 inputs
  const getFormData = () => {
    const inputs = formRef.current;
    if (flow.isDonation) {
      return { name: inputs['Full Name'] || '', email: inputs['Email'] || '', phone: inputs['Phone'] || '' };
    }
    return { name: inputs['Primary Contact'] || '', email: inputs['Email'] || '', company: inputs['Brand · Company'] || '', phone: inputs['Phone'] || '' };
  };

  // Create PaymentIntent and mount Stripe Elements
  const initPayment = async () => {
    setPaymentStatus('loading');
    setPaymentError('');
    const form = getFormData();
    if (!form.name || !form.email) {
      setPaymentError('Please fill in all required fields.');
      setPaymentStatus('idle');
      return false;
    }
    try {
      // Send application/inquiry email first (best-effort, don't block on failure)
      fetch('sponsor-apply.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name, email: form.email, phone: form.phone || '',
          company: form.company || '', tier: flow.tier.name, amount: flow.total,
          activations: flow.activations.map(id => ACTIVATIONS.find(a => a.id === id)?.name || id),
          isDonation: flow.isDonation,
        }),
      }).catch(() => {});

      const res = await fetch('create-payment-intent.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: flow.total,
          tier: flow.tier.name,
          name: form.name,
          email: form.email,
          activations: flow.activations.map(id => ACTIVATIONS.find(a => a.id === id)?.name || id),
          isDonation: flow.isDonation,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.clientSecret) {
        setPaymentError(data.error || 'Could not initiate payment.');
        setPaymentStatus('error');
        return false;
      }
      setStripeSecret(data.clientSecret);
      const stripe = window.Stripe(window.STRIPE_PK);
      setStripeInstance(stripe);
      const elements = stripe.elements({
        clientSecret: data.clientSecret,
        appearance: {
          theme: 'night',
          variables: {
            colorPrimary: '#C9A24C',
            colorBackground: '#141312',
            colorText: '#E8E2D3',
            colorDanger: '#c44',
            fontFamily: 'Outfit, system-ui, sans-serif',
            borderRadius: '0px',
            spacingUnit: '4px',
          },
          rules: {
            '.Input': { border: '1px solid #3B3833', backgroundColor: '#0A0908', color: '#E8E2D3', fontSize: '14px' },
            '.Input:focus': { border: '1px solid #C9A24C', boxShadow: '0 0 0 1px #C9A24C33' },
            '.Label': { color: '#6C6760', fontSize: '11px', letterSpacing: '0.18em', textTransform: 'uppercase' },
          }
        }
      });
      setStripeElements(elements);
      setPaymentStatus('ready');
      // Mount after render
      setTimeout(() => {
        if (paymentRef.current) {
          const pe = elements.create('payment');
          pe.mount(paymentRef.current);
        }
      }, 50);
      return true;
    } catch (err) {
      setPaymentError('Network error. Please try again.');
      setPaymentStatus('error');
      return false;
    }
  };

  // Confirm payment
  const confirmPayment = async () => {
    if (!stripeInstance || !stripeElements) return;
    setPaymentStatus('processing');
    setPaymentError('');
    const form = getFormData();
    const { error } = await stripeInstance.confirmPayment({
      elements: stripeElements,
      confirmParams: { return_url: window.location.href, payment_method_data: { billing_details: { name: form.name, email: form.email } } },
      redirect: 'if_required',
    });
    if (error) {
      setPaymentError(error.message);
      setPaymentStatus('ready');
    } else {
      setPaymentStatus('success');
      // Send confirmation emails
      try {
        await fetch('payment-success.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            paymentIntentId: stripeSecret?.split('_secret_')[0] || '',
            name: form.name, email: form.email, tier: flow.tier.name,
            amount: flow.total, activations: flow.activations.map(id => ACTIVATIONS.find(a => a.id === id)?.name || id),
            isDonation: flow.isDonation,
          }),
        });
      } catch (e) { /* emails are best-effort */ }
      flow.setStep(5);
    }
  };

  const StepDot = ({ n, label }) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 6 : 10 }}>
      <div style={{
      width: 24, height: 24, borderRadius: '50%',
      border: `1px solid ${flow.step >= n ? s.gold : s.graySoft}`,
      background: flow.step > n ? s.gold : 'transparent',
      color: flow.step > n ? s.bg : flow.step === n ? s.gold : s.gray,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: s.mono, fontSize: 10, fontWeight: 500
    }}>{flow.step > n ? '✓' : n}</div>
      {!mobile &&
      <span style={{
      fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
      color: flow.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: mobile ? '12px 20px' : '14px 32px', fontSize: mobile ? 10 : 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: mobile ? '24px 20px' : '40px 56px', display: 'flex', flexDirection: 'column', gap: mobile ? 18 : 28, position: 'relative', overflow: 'hidden'
    }}>
      {/* faint background ornament */}
      <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: mobile ? 'center' : 'flex-start', justifyContent: 'space-between', position: 'relative', zIndex: 2, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 8 }}>SPONSORSHIP · 2026</div>
          <div style={{ fontFamily: s.serif, fontSize: mobile ? 28 : 44, fontWeight: 300, lineHeight: 1 }}>
            Partner <span style={{ fontStyle: 'italic', color: s.gold }}>with us.</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: mobile ? 12 : 28, alignItems: 'center', paddingTop: mobile ? 0 : 12 }}>
          <StepDot n={1} label="Tier" />
          <div style={{ width: mobile ? 6 : 14, height: 1, background: s.graySoft }} />
          <StepDot n={2} label="Activations" />
          <div style={{ width: mobile ? 6 : 14, height: 1, background: s.graySoft }} />
          <StepDot n={3} label="Details" />
          <div style={{ width: mobile ? 6 : 14, height: 1, background: s.graySoft }} />
          <StepDot n={4} label="Payment" />
          <div style={{ width: mobile ? 6 : 14, height: 1, background: s.graySoft }} />
          <StepDot n={5} label="Confirm" />
        </div>
      </div>

      {/* step content */}
      <div style={{ flex: 1, position: 'relative', zIndex: 2, minHeight: 0, overflowY: 'auto' }}>
        {flow.step === 1 &&
        <React.Fragment>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : `repeat(${TIERS.length}, 1fr)`, gap: 14 }}>
            {TIERS.map((t) => {
            const sel = flow.tierId === t.id && !flow.isDonation;
            return (
              <button key={t.id} onClick={() => { flow.setIsDonation(false); flow.setTierId(t.id); if (!flow.customAmount || flow.tierId !== t.id) flow.setCustomAmount(String(t.price)); }} style={{
                background: sel ? `linear-gradient(180deg, ${s.gold}18, ${s.gold}04)` : s.bgSoft,
                border: `1px solid ${sel ? s.gold : s.graySoft}`,
                padding: mobile ? '20px 18px' : '28px 22px', textAlign: 'left', cursor: 'pointer',
                fontFamily: s.sans, color: s.cream, display: 'flex', flexDirection: 'column',
                transition: 'all 0.25s', position: 'relative'
              }}>
                  <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: sel ? s.gold : s.gray, marginBottom: 14 }}>
                    {String(TIERS.indexOf(t) + 1).padStart(2, '0')} · {t.avail} AVAIL
                  </div>
                  <div style={{ fontFamily: s.serif, fontSize: mobile ? 22 : 28, fontWeight: 400, color: sel ? s.gold : s.cream, marginBottom: 4 }}>
                    {t.name}
                  </div>
                  <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 26 : 32, color: s.cream, marginBottom: sel ? 4 : 8, display: 'flex', alignItems: 'baseline', gap: 2 }}>
                    {sel ? (
                      <React.Fragment>
                        <span style={{ color: s.gold, fontSize: mobile ? 20 : 24 }}>$</span>
                        <input
                          type="number"
                          min={t.price}
                          placeholder={String(t.price)}
                          value={flow.customAmount}
                          onChange={(e) => flow.setCustomAmount(e.target.value)}
                          onClick={(e) => e.stopPropagation()}
                          style={{
                            width: mobile ? 100 : 120, background: 'transparent', border: 'none',
                            borderBottom: `1px solid ${flow.customAmount && Number(flow.customAmount) < t.price ? '#c44' : s.gold + '66'}`,
                            padding: '2px 0', color: s.gold,
                            fontFamily: s.serif, fontSize: mobile ? 26 : 32, fontStyle: 'italic', outline: 'none'
                          }}
                        />
                      </React.Fragment>
                    ) : (
                      <React.Fragment>{money(t.price)}<span style={{ fontSize: 14, color: s.gray }}>+</span></React.Fragment>
                    )}
                  </div>
                  {sel && flow.customAmount && Number(flow.customAmount) < t.price &&
                    <div style={{ fontSize: 10, color: '#c44', marginBottom: 4 }}>Minimum {money(t.price)}</div>
                  }
                  <div style={{ height: 1, background: sel ? `${s.gold}44` : s.graySoft, marginBottom: 16 }} />
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {t.perks.map((p) =>
                  <li key={p} style={{ fontSize: 11.5, lineHeight: 1.4, color: s.cream, opacity: 0.8, display: 'flex', gap: 8 }}>
                        <span style={{ color: s.gold, opacity: 0.9 }}>—</span><span>{p}</span>
                      </li>
                  )}
                  </ul>
                  {sel &&
                <div style={{ position: 'absolute', top: 14, right: 14, color: s.gold, fontFamily: s.mono, fontSize: 11 }}>●</div>
                }
                </button>);

          })}
          </div>

          {/* Donation option for non-sponsors */}
          <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ flex: 1, height: 1, background: s.graySoft }} />
            <span style={{ fontFamily: s.mono, fontSize: 9, letterSpacing: '0.2em', color: s.gray }}>OR</span>
            <div style={{ flex: 1, height: 1, background: s.graySoft }} />
          </div>
          <button
            onClick={() => { flow.setIsDonation(!flow.isDonation); }}
            style={{
              marginTop: 14,
              background: flow.isDonation ? `linear-gradient(180deg, ${s.gold}18, ${s.gold}04)` : s.bgSoft,
              border: `1px solid ${flow.isDonation ? s.gold : s.graySoft}`,
              padding: mobile ? '16px 20px' : '20px 28px',
              textAlign: 'left', cursor: 'pointer', fontFamily: s.sans, color: s.cream,
              display: 'flex', alignItems: 'center', gap: mobile ? 14 : 20, width: '100%',
              transition: 'all 0.25s', position: 'relative'
            }}
          >
            <div style={{
              width: 20, height: 20, border: `1px solid ${flow.isDonation ? s.gold : s.gray}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: flow.isDonation ? s.gold : 'transparent', color: s.bg, fontSize: 12
            }}>{flow.isDonation && '✓'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: s.serif, fontSize: mobile ? 18 : 22, fontWeight: 400 }}>
                Community Donation
              </div>
              <div style={{ fontSize: 11.5, color: s.cream, opacity: 0.6, marginTop: 2 }}>
                Not sponsoring? Still want to support the movement.
              </div>
            </div>
            <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 22 : 28, color: flow.isDonation ? s.gold : s.cream, display: 'flex', alignItems: 'baseline', gap: 2 }}>
              {flow.isDonation ? (
                <React.Fragment>
                  <span style={{ color: s.gold, fontSize: mobile ? 16 : 20 }}>$</span>
                  <input
                    type="number"
                    min={flow.DONATION_MIN}
                    value={flow.donationAmount}
                    onChange={e => { e.stopPropagation(); flow.setDonationAmount(e.target.value); }}
                    onClick={e => e.stopPropagation()}
                    placeholder="50"
                    style={{
                      width: 90, background: 'transparent', border: 'none',
                      borderBottom: `1px solid ${flow.donationAmount && Number(flow.donationAmount) < flow.DONATION_MIN ? '#c44' : s.gold + '66'}`,
                      padding: '2px 0', color: s.gold,
                      fontFamily: s.serif, fontSize: mobile ? 22 : 28, fontStyle: 'italic', outline: 'none'
                    }}
                  />
                </React.Fragment>
              ) : (
                <React.Fragment>{money(flow.DONATION_MIN)}+</React.Fragment>
              )}
            </div>
          </button>
          {flow.isDonation && flow.donationAmount && Number(flow.donationAmount) < flow.DONATION_MIN && (
            <div style={{ fontSize: 10, color: '#c44', marginTop: 4, paddingLeft: 54 }}>Minimum ${flow.DONATION_MIN}</div>
          )}
        </React.Fragment>
        }

        {flow.step === 2 && !flow.isDonation &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, height: mobile ? 'auto' : '100%' }}>
            <div style={{ fontSize: 13, color: s.cream, opacity: 0.7, maxWidth: 560 }}>
              Add custom brand activations to amplify your visibility throughout the night. Optional — but each one is a moment.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: 12 }}>
              {ACTIVATIONS.map((a) => {
              const sel = flow.activations.includes(a.id);
              return (
                <button key={a.id} onClick={() => flow.toggleActivation(a.id)} style={{
                  background: sel ? `${s.gold}10` : s.bgSoft,
                  border: `1px solid ${sel ? s.gold : s.graySoft}`,
                  padding: mobile ? '16px 18px' : '22px 26px', textAlign: 'left', cursor: 'pointer',
                  fontFamily: s.sans, color: s.cream, display: 'flex', alignItems: 'center', gap: mobile ? 14 : 20
                }}>
                    <div style={{
                    width: 20, height: 20, border: `1px solid ${sel ? s.gold : s.gray}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: sel ? s.gold : 'transparent', color: s.bg, fontSize: 12
                  }}>{sel && '✓'}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: s.serif, fontSize: mobile ? 18 : 22, fontWeight: 400, marginBottom: 4 }}>{a.name}</div>
                      <div style={{ fontSize: 12, color: s.cream, opacity: 0.65 }}>{a.detail}</div>
                    </div>
                    <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 18 : 22, color: sel ? s.gold : s.cream }}>
                      +{money(a.price)}
                    </div>
                  </button>);

            })}
            </div>
          </div>
        }

        {flow.step === 3 &&
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 24 : 32, height: mobile ? 'auto' : '100%' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {(flow.isDonation
                ? [['Full Name', 'Ama Boateng', true], ['Email', 'ama@example.com', true], ['Phone', '+1 416 555 0188', false]]
                : [['Brand · Company', 'Acme Holdings Inc.', true], ['Primary Contact', 'Ama Boateng', true], ['Email', 'partnerships@acme.com', true], ['Phone', '+1 416 555 0188', true]]
              ).map(([label, ph, req], i) =>
            <div key={label}>
                  <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>{label}{req && <span style={{ color: s.gold, marginLeft: 4 }}>*</span>}</div>
                  <input required={req} placeholder={ph} defaultValue={formRef.current[label] || ''} onChange={(e) => { formRef.current[label] = e.target.value; }} style={{
                width: '100%', background: 'transparent', border: 'none',
                borderBottom: `1px solid ${s.graySoft}`, padding: '8px 0', color: s.cream,
                fontFamily: s.serif, fontSize: mobile ? 16 : 20, fontWeight: 300, outline: 'none'
              }} />
                </div>
            )}
            </div>
            <div style={{ background: s.bgSoft, border: `1px solid ${s.graySoft}`, padding: mobile ? 20 : 28, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: s.gold, marginBottom: 12 }}>{flow.isDonation ? 'YOUR DONATION' : 'YOUR PARTNERSHIP'}</div>
              <div style={{ fontFamily: s.serif, fontSize: mobile ? 26 : 34, fontWeight: 400 }}>
                {flow.isDonation
                  ? <span>Community <span style={{ fontStyle: 'italic', color: s.gold }}>Donation</span></span>
                  : <span>{flow.tier.name} <span style={{ fontStyle: 'italic', color: s.gold }}>Sponsor</span></span>}
              </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.7 }}>{flow.isDonation ? 'Community donation' : `${flow.tier.name} tier${flow.customAmount && Number(flow.customAmount) > flow.tier.price ? ' (custom)' : ''}`}</span>
                <span>{money(flow.basePrice)}</span>
              </div>
              {!flow.isDonation && flow.activations.map((id) => {
              const a = ACTIVATIONS.find((x) => x.id === id);
              return (
                <div key={id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 10 }}>
                    <span style={{ color: s.cream, opacity: 0.7 }}>{a.name}</span>
                    <span>+{money(a.price)}</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: mobile ? 28 : 38, color: s.gold, fontStyle: 'italic' }}>{money(flow.total)}</span>
              </div>
            </div>
          </div>
        }

        {flow.step === 4 &&
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 24 : 32, height: mobile ? 'auto' : '100%' }}>
            <div>
              <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.22em', color: s.gold, marginBottom: 16 }}>◇ SECURE PAYMENT</div>
              <div style={{ fontFamily: s.serif, fontSize: mobile ? 22 : 30, fontWeight: 300, marginBottom: 8 }}>
                Complete your <span style={{ fontStyle: 'italic', color: s.gold }}>{flow.isDonation ? 'donation' : 'sponsorship'}.</span>
              </div>
              <p style={{ fontSize: 13, color: s.cream, opacity: 0.6, marginBottom: 24, lineHeight: 1.6 }}>
                All payments are processed securely via Stripe. Your card details never touch our servers.
              </p>
              {paymentStatus === 'loading' && (
                <div style={{ padding: 40, textAlign: 'center' }}>
                  <div style={{ fontFamily: s.mono, fontSize: 11, letterSpacing: '0.2em', color: s.gold }}>PREPARING PAYMENT...</div>
                </div>
              )}
              <div ref={paymentRef} style={{ minHeight: paymentStatus === 'ready' || paymentStatus === 'processing' ? 200 : 0, marginBottom: 16 }} />
              {paymentError && (
                <div style={{ padding: '12px 16px', border: '1px solid #c44', background: '#c4410', marginBottom: 16 }}>
                  <p style={{ fontSize: 13, color: '#f88', margin: 0 }}>{paymentError}</p>
                </div>
              )}
              {(paymentStatus === 'ready' || paymentStatus === 'processing') && (
                <button onClick={confirmPayment} disabled={paymentStatus === 'processing'} style={{
                  width: '100%', background: s.gold, color: s.bg, border: 'none', padding: '16px 32px',
                  fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
                  cursor: paymentStatus === 'processing' ? 'not-allowed' : 'pointer', fontFamily: s.sans,
                  opacity: paymentStatus === 'processing' ? 0.6 : 1, transition: 'all 0.2s'
                }}>
                  {paymentStatus === 'processing' ? 'Processing...' : `Pay ${money(flow.total)} CAD →`}
                </button>
              )}
            </div>
            <div style={{ background: s.bgSoft, border: `1px solid ${s.graySoft}`, padding: mobile ? 20 : 28, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: s.gold, marginBottom: 12 }}>ORDER SUMMARY</div>
              <div style={{ fontFamily: s.serif, fontSize: mobile ? 22 : 28, fontWeight: 400, marginBottom: 16 }}>
                {flow.isDonation
                  ? <span>Community <span style={{ fontStyle: 'italic', color: s.gold }}>Donation</span></span>
                  : <span>{flow.tier.name} <span style={{ fontStyle: 'italic', color: s.gold }}>Sponsor</span></span>}
              </div>
              <div style={{ height: 1, background: s.graySoft, marginBottom: 16 }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 10 }}>
                <span style={{ color: s.cream, opacity: 0.7 }}>{flow.isDonation ? 'Donation' : `${flow.tier.name} tier`}</span>
                <span>{money(flow.basePrice)}</span>
              </div>
              {!flow.isDonation && flow.activations.map((id) => {
                const a = ACTIVATIONS.find((x) => x.id === id);
                return (
                  <div key={id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 10 }}>
                    <span style={{ color: s.cream, opacity: 0.7 }}>{a.name}</span>
                    <span>+{money(a.price)}</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: mobile ? 28 : 38, color: s.gold, fontStyle: 'italic' }}>{money(flow.total)} <span style={{ fontSize: 14 }}>CAD</span></span>
              </div>
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 8, opacity: 0.5 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                <span style={{ fontSize: 10, letterSpacing: '0.15em' }}>SECURED BY STRIPE</span>
              </div>
            </div>
          </div>
        }

        {flow.step === 5 &&
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', textAlign: 'center', padding: mobile ? '0 16px' : '0 40px' }}>
            <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'center' }}><LogoMark size={mobile ? 60 : 88} /></div>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.28em', color: s.gold, marginBottom: 16 }}>{flow.isDonation ? 'PAYMENT CONFIRMED · THANK YOU' : 'PAYMENT CONFIRMED · WELCOME TO THE TABLE'}</div>
            <div style={{ fontFamily: s.serif, fontSize: mobile ? 36 : 56, fontWeight: 300, lineHeight: 1.05, marginBottom: 18 }}>
              Thank you,<br /><span style={{ fontStyle: 'italic', color: s.gold }}>{flow.isDonation ? 'supporter.' : 'partner.'}</span>
            </div>
            <div style={{ fontSize: 14, color: s.cream, opacity: 0.7, maxWidth: 460, lineHeight: 1.6 }}>
              {flow.isDonation
                ? <>Your <span style={{ color: s.gold }}>{money(flow.total)}</span> CAD donation supports the Elevate Noir movement. A receipt has been sent to your email.</>
                : <>We've received your {flow.tier.name.toLowerCase()} commitment of <span style={{ color: s.gold }}>{money(flow.total)}</span> CAD. A partnership lead will reach out within 48 hours with next steps. A receipt has been sent to your email.</>}
            </div>
            <div style={{ marginTop: 36 }}>
              <Btn onClick={() => { flow.reset(); setStripeSecret(null); setPaymentStatus('idle'); setStripeElements(null); setStripeInstance(null); formRef.current = {}; }}>Start again</Btn>
            </div>
          </div>
        }
      </div>

      {/* footer */}
      {flow.step < 4 &&
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${s.graySoft}`, paddingTop: 20, position: 'relative', zIndex: 2, flexWrap: mobile ? 'wrap' : 'nowrap', gap: mobile ? 12 : 0 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gray }}>{flow.isDonation ? 'Donation' : 'Running Total'}</div>
            <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 22 : 28, color: s.gold }}>{money(flow.total)}</div>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <Btn onClick={flow.prev} disabled={flow.step === 1}>← Back</Btn>
            {flow.step === 3 ? (
              <Btn primary onClick={async () => { const ok = await initPayment(); if (ok) flow.setStep(4); }} disabled={paymentStatus === 'loading'}>
                {paymentStatus === 'loading' ? 'Loading...' : 'Proceed to Payment →'}
              </Btn>
            ) : (
              <Btn primary onClick={flow.next} disabled={flow.step === 1 && (flow.isDonation ? (!flow.donationAmount || Number(flow.donationAmount) < flow.DONATION_MIN) : (!flow.customAmount || Number(flow.customAmount) < flow.tier.price))}>Continue →</Btn>
            )}
          </div>
        </div>
      }
      {flow.step === 4 &&
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${s.graySoft}`, paddingTop: 20, position: 'relative', zIndex: 2, flexWrap: mobile ? 'wrap' : 'nowrap', gap: mobile ? 12 : 0 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gray }}>Total</div>
            <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: mobile ? 22 : 28, color: s.gold }}>{money(flow.total)} CAD</div>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <Btn onClick={() => { flow.setStep(3); setPaymentStatus('idle'); setStripeSecret(null); setStripeElements(null); }}>← Back</Btn>
          </div>
        </div>
      }
    </div>);

}

Object.assign(window, { ObsidianHero, ObsidianFlow });