// 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;
  return (
    <div style={{
      width: '100%',
      height: fullViewport ? '100vh' : '100%',
      position: 'relative', overflow: 'hidden',
      background: s.bg, color: s.cream, fontFamily: s.sans
    }}>
      {/* video bg */}
      <img src="assets/hero.gif" alt=""                                                                                                                             
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.42 }} />
      {/* 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 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 3
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LogoMark size={40} />
          <span style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 19, color: s.gold, letterSpacing: '0.02em' }}>Elevate Noir</span>
        </div>
        <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: '11px 22px',
          fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', fontFamily: s.sans
        }}>Reserve</button>
      </div>
      }

      {/* corner marks */}
      <div style={{ position: 'absolute', top: 96, left: 56, 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: 56, fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', color: s.gold, opacity: 0.7, zIndex: 3 }}>
        VOL · I · BLACK DREAM
      </div>

      {/* main content */}
      <div style={{
        position: 'absolute', left: 56, right: 56, bottom: 56, zIndex: 3
      }}>
        <div style={{ fontFamily: s.serif, fontWeight: 300, lineHeight: 0.86, letterSpacing: '-0.015em' }}>
          <div style={{ fontSize: 'clamp(120px, 16vw, 220px)', letterSpacing: "0px", height: "140px" }}>Elevate</div>
          <div style={{ fontSize: 'clamp(150px, 20vw, 280px)', fontStyle: 'italic', fontWeight: 400, color: s.gold, marginTop: -12, marginBottom: -12, height: "200px" }}>Noir</div>
          <div style={{ fontSize: 'clamp(120px, 16vw, 220px)' }}>Gala<span style={{ color: s.gold, fontStyle: 'italic' }}>.</span></div>
        </div>

        <div style={{ fontSize: 14, letterSpacing: '0.32em', textTransform: 'uppercase', color: s.gold, marginTop: 36, height: "17px", lineHeight: "1.5", padding: "0px 0px 0px 10px" }}>
          A Luxury Experience Advancing Black Excellence
        </div>

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

      {/* right edge scroll mark */}
      <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() {
  const s = obsidianStyles;
  const flow = useSponsorFlow();

  const StepDot = ({ n, label }) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 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>
      <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: '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: '40px 56px', display: 'flex', flexDirection: 'column', gap: 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: '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 }}>SPONSORSHIP · 2026</div>
          <div style={{ fontFamily: s.serif, fontSize: 44, fontWeight: 300, lineHeight: 1 }}>
            Partner <span style={{ fontStyle: 'italic', color: s.gold }}>with us.</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center', paddingTop: 12 }}>
          <StepDot n={1} label="Tier" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={2} label="Activations" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={3} label="Brand" />
          <div style={{ width: 20, height: 1, background: s.graySoft }} />
          <StepDot n={4} label="Confirm" />
        </div>
      </div>

      {/* step content */}
      <div style={{ flex: 1, position: 'relative', zIndex: 2, minHeight: 0 }}>
        {flow.step === 1 &&
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, height: '100%' }}>
            {TIERS.map((t) => {
            const sel = flow.tierId === t.id;
            return (
              <button key={t.id} onClick={() => flow.setTierId(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: '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: 28, fontWeight: 400, color: sel ? s.gold : s.cream, marginBottom: 4 }}>
                    {t.name}
                  </div>
                  <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 32, color: s.cream, marginBottom: 18 }}>
                    {money(t.price)}<span style={{ fontSize: 14, color: s.gray }}>+</span>
                  </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>
        }

        {flow.step === 2 &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, height: '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: '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: '22px 26px', textAlign: 'left', cursor: 'pointer',
                  fontFamily: s.sans, color: s.cream, display: 'flex', alignItems: 'center', gap: 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: 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: 22, color: sel ? s.gold : s.cream }}>
                      +{money(a.price)}
                    </div>
                  </button>);

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

        {flow.step === 3 &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, height: '100%' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
            ['Brand · Company', 'Acme Holdings Inc.'],
            ['Primary Contact', 'Ama Boateng'],
            ['Email', 'partnerships@acme.com'],
            ['Phone', '+1 416 555 0188']].
            map(([label, ph], i) =>
            <div key={label}>
                  <div style={{ fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: s.gray, marginBottom: 8 }}>{label}</div>
                  <input defaultValue={i < 2 ? 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>
            <div style={{ background: s.bgSoft, border: `1px solid ${s.graySoft}`, padding: 28, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: s.mono, fontSize: 9.5, letterSpacing: '0.22em', color: s.gold, marginBottom: 12 }}>YOUR PARTNERSHIP</div>
              <div style={{ fontFamily: s.serif, fontSize: 34, fontWeight: 400 }}>{flow.tier.name} <span style={{ fontStyle: 'italic', color: s.gold }}>Sponsor</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.tier.name} tier</span>
                <span>{money(flow.tier.price)}</span>
              </div>
              {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: 38, color: s.gold, fontStyle: 'italic' }}>{money(flow.total)}</span>
              </div>
            </div>
          </div>
        }

        {flow.step === 4 &&
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', textAlign: 'center', padding: '0 40px' }}>
            <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 }}>CONFIRMED · WELCOME TO THE TABLE</div>
            <div style={{ fontFamily: s.serif, fontSize: 56, fontWeight: 300, lineHeight: 1.05, marginBottom: 18 }}>
              Thank you,<br /><span style={{ fontStyle: 'italic', color: s.gold }}>partner.</span>
            </div>
            <div style={{ fontSize: 14, color: s.cream, opacity: 0.7, maxWidth: 460, lineHeight: 1.6 }}>
              We've received your {flow.tier.name.toLowerCase()} commitment of <span style={{ color: s.gold }}>{money(flow.total)}</span>. A partnership lead will reach out within 48 hours with the next steps.
            </div>
            <div style={{ marginTop: 36 }}>
              <Btn onClick={flow.reset}>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 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.gray }}>Running Total</div>
            <div style={{ fontFamily: s.serif, fontStyle: 'italic', fontSize: 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>
            <Btn primary onClick={flow.next}>{flow.step === 3 ? 'Confirm Partnership →' : 'Continue →'}</Btn>
          </div>
        </div>
      }
    </div>);

}

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