// about-page.jsx — Standalone About page for Elevate Noir
// Uses the obsidian aesthetic system (obsidianStyles) shared with the
// main prototype.

const ab = obsidianStyles;

// ─────────────────────────────────────────────────────────────────────
// SIMPLE NAV — matches main site nav but with current-page state
// ─────────────────────────────────────────────────────────────────────
function AboutNav() {
  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)' : 'rgba(10,9,8,0.6)',
      backdropFilter: 'blur(20px) saturate(1.2)',
      WebkitBackdropFilter: 'blur(20px) saturate(1.2)',
      borderBottom: scrolled ? `1px solid ${ab.gold}1f` : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      fontFamily: ab.sans,
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
        <LogoMark size={scrolled ? 36 : 44} style={{ transition: 'all 0.4s' }}/>
        <span style={{ fontFamily: ab.serif, fontStyle: 'italic', fontSize: 19, color: ab.gold, letterSpacing: '0.02em' }}>Elevate Noir</span>
      </a>
      <div style={{ display: 'flex', gap: 36, fontSize: 15, letterSpacing: '0.18em', textTransform: 'uppercase', color: ab.cream, opacity: 0.85 }}>
        <a href="index.html#about" style={{ color: 'inherit', textDecoration: 'none' }}>The Evening</a>
        <a href="About.html" style={{ color: ab.gold, textDecoration: 'none' }}>About</a>
        <a href="index.html#experience" style={{ color: 'inherit', textDecoration: 'none' }}>Experience</a>
        <a href="index.html#sponsors" style={{ color: 'inherit', textDecoration: 'none' }}>Partner</a>
        <a href="index.html#footer" style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
      </div>
      <a href="index.html#tickets-section" style={{
        background: ab.gold, color: ab.bg, border: 'none', padding: '11px 22px',
        fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
        fontFamily: ab.sans, textDecoration: 'none', display: 'inline-block',
      }}>Reserve</a>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────────
// HERO — minimal, type-driven
// ─────────────────────────────────────────────────────────────────────
function AboutHero() {
  return (
    <section style={{
      minHeight: '90vh', padding: '180px 56px 100px',
      background: ab.bg, color: ab.cream, position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'center',
    }}>
      {/* faint background mark */}
      <div style={{ position: 'absolute', right: -160, top: -100, opacity: 0.05, color: ab.gold }}>
        <CrownGlyph size={680} stroke={0.6}/>
      </div>
      {/* grain */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.04, 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, pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 1400, margin: '0 auto', width: '100%', position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'end' }}>
        <Reveal>
          <div style={{ fontFamily: ab.mono, fontSize: 11, letterSpacing: '0.32em', color: ab.gold, marginBottom: 32 }}>
            ◇ ABOUT · MMXXVI · BLACK DREAM
          </div>
          <h1 style={{
            fontFamily: ab.serif, fontSize: 'clamp(72px, 10vw, 156px)', fontWeight: 300,
            lineHeight: 0.9, letterSpacing: '-0.02em', margin: 0,
          }}>
            The story <span style={{ fontStyle: 'italic', color: ab.gold }}>behind</span> the night.
          </h1>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{ fontFamily: ab.serif, fontSize: 22, lineHeight: 1.7, fontStyle: 'italic', fontWeight: 300, color: ab.cream, opacity: 0.85, margin: 0 }}>
            Elevate Noir is not a fundraiser, not a networking mixer, not a fashion show — though it holds all of those. It is a room built deliberately, for a community that deserves to be celebrated at the highest level.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// LETTER FROM THE FOUNDER
// ─────────────────────────────────────────────────────────────────────
function AboutFounder() {
  return (
    <section style={{
      padding: '120px 56px', background: ab.bgSoft, color: ab.cream,
      borderTop: `1px solid ${ab.graySoft}`, borderBottom: `1px solid ${ab.graySoft}`,
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
        <Reveal>
          <div style={{ position: 'sticky', top: 140 }}>
            <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.28em', color: ab.gold, marginBottom: 16 }}>◇ A LETTER</div>
            <div style={{ fontFamily: ab.serif, fontSize: 58, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em' }}>
              From the<br/><span style={{ fontStyle: 'italic', color: ab.gold }}>founder.</span>
            </div>
            <div style={{ marginTop: 32, padding: '20px 0', borderTop: `1px solid ${ab.graySoft}`, borderBottom: `1px solid ${ab.graySoft}` }}>
              <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.22em', color: ab.gray, marginBottom: 6 }}>FOUNDER · ELEVATE NOIR</div>
              <div style={{ fontFamily: ab.serif, fontSize: 26, fontStyle: 'italic', color: ab.gold }}>Angel Wiafe</div>
              <div style={{ fontSize: 12, color: ab.cream, opacity: 0.6, marginTop: 6 }}>Founder · Party &amp; Bash</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={0.15}>
          <div style={{ fontFamily: ab.serif, fontSize: 20, lineHeight: 1.75, fontWeight: 300, color: ab.cream, opacity: 0.9 }}>
            <p style={{ marginBottom: 24 }}>
              Toronto is a city of ambition and culture. It is also a city where Black professionals routinely walk into rooms where they are the only one, where Black-owned businesses build extraordinary work without the platforms to amplify it, and where the spaces designed to celebrate excellence are too often borrowed.
            </p>
            <p style={{ marginBottom: 24 }}>
              I built Elevate Noir because I wanted to attend an evening that did not yet exist — one where culture, capital, and community could meet in the same room, and where the production value matched the depth of the work happening in our city.
            </p>
            <p style={{ marginBottom: 24, fontStyle: 'italic', color: ab.gold, fontSize: 24, lineHeight: 1.5 }}>
              "This is not a donation. It is a strategic investment in Black excellence — and an evening built so beautifully that our community deserves nothing less."
            </p>
            <p style={{ marginBottom: 24 }}>
              Every choice — the venue, the table settings, the program, the runway — has been made with one question: would the people I most admire feel celebrated here? If the answer is anything short of an unequivocal yes, we keep going until it is.
            </p>
            <p style={{ marginBottom: 0 }}>
              We are saving you a seat at the table.
            </p>
            <p style={{ marginTop: 32, fontFamily: ab.serif, fontStyle: 'italic', fontSize: 32, color: ab.gold }}>
              — Angel.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// THE NUMBERS — pulled from the deck
// ─────────────────────────────────────────────────────────────────────
function AboutNumbers() {
  return (
    <section style={{ padding: '120px 56px', background: ab.bg, color: ab.cream }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.28em', color: ab.gold, marginBottom: 18 }}>◇ BY THE NUMBERS</div>
              <h2 style={{ fontFamily: ab.serif, fontSize: 72, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
                What this <span style={{ fontStyle: 'italic', color: ab.gold }}>night</span> is.
              </h2>
            </div>
            <div style={{ maxWidth: 380 }}>
              <p style={{ fontFamily: ab.serif, fontSize: 17, fontStyle: 'italic', fontWeight: 300, lineHeight: 1.6, color: ab.cream, opacity: 0.7, margin: 0 }}>
                Designed for a curated, high-intent audience — and built with production that meets it.
              </p>
            </div>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            { n: '250+', l: 'Professionals', d: 'Business owners, creatives, consultants, career-driven individuals.' },
            { n: '7',    l: 'Distinct acts', d: 'Vendors · dining · panels · runway · entertainment · auction · after-party.' },
            { n: '16',   l: 'Partner spots', d: 'Across Title, Gold, Silver, and Community tiers.' },
            { n: '$40K', l: 'Sponsorship goal', d: 'Underwriting the production, programming, and community access.' },
          ].map((s, i) => (
            <Reveal key={s.l} delay={Math.min(i * 0.08, 0.3)}>
              <div style={{
                background: ab.bgSoft, border: `1px solid ${ab.graySoft}`, padding: 36, height: '100%',
                transition: 'all 0.35s', display: 'flex', flexDirection: 'column',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = `${ab.gold}55`; e.currentTarget.style.transform = 'translateY(-4px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = ab.graySoft; e.currentTarget.style.transform = 'none'; }}
              >
                <div style={{ fontFamily: ab.serif, fontSize: 76, fontWeight: 300, color: ab.gold, lineHeight: 0.95, letterSpacing: '-0.02em' }}>
                  {s.n}
                </div>
                <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.22em', color: ab.cream, opacity: 0.8, marginTop: 14, marginBottom: 14, textTransform: 'uppercase' }}>
                  {s.l}
                </div>
                <p style={{ fontSize: 13, lineHeight: 1.65, color: ab.cream, opacity: 0.65, margin: 0 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// WHO IS IN THE ROOM
// ─────────────────────────────────────────────────────────────────────
function AboutAudience() {
  return (
    <section style={{
      padding: '120px 56px', background: ab.bg, color: ab.cream,
      borderTop: `1px solid ${ab.graySoft}`, borderBottom: `1px solid ${ab.graySoft}`,
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
        <Reveal>
          <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.28em', color: ab.gold, marginBottom: 18 }}>◇ WHO IS IN THE ROOM</div>
          <h2 style={{ fontFamily: ab.serif, fontSize: 60, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
            A room designed <span style={{ fontStyle: 'italic', color: ab.gold }}>on purpose.</span>
          </h2>
          <p style={{ fontFamily: ab.serif, fontSize: 16, fontStyle: 'italic', lineHeight: 1.7, color: ab.cream, opacity: 0.7, marginTop: 24, fontWeight: 300 }}>
            Guests arrive having said yes to an evening that asks them to show up at their highest level — black tie, full presence, real conversation.
          </p>
        </Reveal>
        <Reveal delay={0.15}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {[
              { h: 'Business owners',  b: 'Founders and leaders of established and emerging Black-owned companies across the GTA.' },
              { h: 'Creatives',         b: 'Designers, photographers, art directors, musicians, writers — the cultural shapers.' },
              { h: 'Consultants',       b: 'Strategy, finance, legal, and brand professionals serving the next generation.' },
              { h: 'Career-driven',     b: 'Mid- and senior-level professionals across tech, healthcare, media, and finance.' },
              { h: 'Tastemakers',       b: 'Stylists, hosts, editors, and influencers who set the tone of Toronto culture.' },
              { h: 'Allies & partners', b: 'Brands and organizations committing to the long-term work of Black economic growth.' },
            ].map(p => (
              <div key={p.h} style={{ padding: '24px 26px', background: ab.bgSoft, border: `1px solid ${ab.graySoft}` }}>
                <div style={{ fontFamily: ab.serif, fontSize: 22, fontWeight: 400, fontStyle: 'italic', color: ab.cream, marginBottom: 10 }}>{p.h}</div>
                <p style={{ fontSize: 13, lineHeight: 1.65, color: ab.cream, opacity: 0.7, margin: 0 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// PARTY & BASH — the studio
// ─────────────────────────────────────────────────────────────────────
function AboutPartyBash() {
  return (
    <section style={{ padding: '120px 56px', background: ab.bg, color: ab.cream }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.28em', color: ab.gold, marginBottom: 18 }}>◇ THE STUDIO BEHIND IT</div>
            <h2 style={{ fontFamily: ab.serif, fontSize: 76, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.015em', margin: 0 }}>
              <span style={{ fontStyle: 'italic', color: ab.gold }}>Party &amp; Bash.</span>
            </h2>
            <p style={{ fontFamily: ab.serif, fontSize: 18, fontStyle: 'italic', color: ab.cream, opacity: 0.65, maxWidth: 640, margin: '20px auto 0', lineHeight: 1.6, fontWeight: 300 }}>
              A luxury event design company creating immersive, intentional experiences across Toronto — from intimate celebrations to large-scale cultural moments.
            </p>
          </div>
        </Reveal>

        <Reveal delay={0.15}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginBottom: 48 }}>
            {[
              { h: 'Design',       b: 'Décor, florals, lighting, and immersive atmosphere built around a single intentional concept per evening.' },
              { h: 'Curation',     b: 'Vendors, talent, and partnerships handpicked for fit — from Black-owned restaurants to designers to entertainment.' },
              { h: 'Production',   b: 'End-to-end execution: timelines, run-of-show, hospitality, and the thousand details guests never see.' },
            ].map((c, i) => (
              <div key={c.h} style={{ padding: 36, background: ab.bgSoft, border: `1px solid ${ab.graySoft}` }}>
                <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.22em', color: ab.gold, marginBottom: 14 }}>0{i + 1} ━</div>
                <div style={{ fontFamily: ab.serif, fontSize: 26, fontWeight: 400, marginBottom: 12 }}>{c.h}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.7, color: ab.cream, opacity: 0.7, margin: 0 }}>{c.b}</p>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={0.2}>
          <div style={{
            padding: '48px 56px', background: `linear-gradient(135deg, ${ab.gold}14 0%, ${ab.gold}03 100%)`,
            border: `1px solid ${ab.gold}33`, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center',
          }}>
            <div>
              <div style={{ fontFamily: ab.mono, fontSize: 10, letterSpacing: '0.22em', color: ab.gold, marginBottom: 10 }}>OUR BELIEF</div>
              <p style={{ fontFamily: ab.serif, fontSize: 28, fontStyle: 'italic', fontWeight: 300, lineHeight: 1.4, color: ab.cream, margin: 0 }}>
                People should not just attend an event — they should feel inspired, connected, and fully immersed in it.
              </p>
            </div>
            <a href="https://www.partyandbash.com" target="_blank" rel="noopener noreferrer" style={{
              background: ab.gold, color: ab.bg, border: 'none', padding: '18px 36px',
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
              textDecoration: 'none', fontFamily: ab.sans, whiteSpace: 'nowrap',
            }}>Visit the studio →</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// CTA — return to the prototype
// ─────────────────────────────────────────────────────────────────────
function AboutCTA() {
  return (
    <section style={{ padding: '120px 56px', background: ab.bg, color: ab.cream, borderTop: `1px solid ${ab.graySoft}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ marginBottom: 32, display: 'flex', justifyContent: 'center' }}>
            <LogoMark size={88}/>
          </div>
          <div style={{ fontFamily: ab.mono, fontSize: 10.5, letterSpacing: '0.32em', color: ab.gold, marginBottom: 24 }}>◇ SATURDAY · OCTOBER 17 · 2026</div>
          <h2 style={{ fontFamily: ab.serif, fontSize: 'clamp(64px, 9vw, 124px)', fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.02em', margin: 0 }}>
            We are saving<br/>you <span style={{ fontStyle: 'italic', color: ab.gold }}>a seat.</span>
          </h2>
          <div style={{ marginTop: 40, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="Obsidian Prototype.html#tickets-section" style={{
              background: ab.gold, color: ab.bg, border: 'none', padding: '18px 40px',
              fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
              textDecoration: 'none', fontFamily: ab.sans,
            }}>Reserve a seat →</a>
            <a href="Obsidian Prototype.html#sponsors" style={{
              background: 'transparent', color: ab.gold, border: `1px solid ${ab.gold}`,
              padding: '18px 40px', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
              fontWeight: 500, textDecoration: 'none', fontFamily: ab.sans,
            }}>Partner with us</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────────
function AboutApp() {
  return (
    <>
      <AboutNav/>
      <AboutHero/>
      <AboutFounder/>
      <AboutNumbers/>
      <AboutAudience/>
      <AboutPartyBash/>
      <AboutCTA/>
      <ObsidianFooter/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutApp/>);
