// Permit Nav — Our Story (continuous editorial: narrative essay + team + vision + beta).
(function () {
  const S = window.PermitNavDesignSystem_779430;
  const { Eyebrow } = S;
  const { Icon, Reveal, Photo, pnImg } = window;
  const { SectionHead } = window;

  // ── Team bios, grouped and dropped into the middle of the story ──
  const TEAM = {
    paul: { name: 'Paul', role: 'Founder', photo: 'assets/team-paul.jpeg', banner: 'assets/nvan-skyline.jpg',
      bio: 'Led design at Amazon and has built startups from the ground up. A North Van homeowner who now teaches the next generation of designers at BrainStation.',
      logos: [{ src: 'assets/logo-amazon.png', alt: 'Amazon' }, { src: 'assets/logo-brainstation.png', alt: 'BrainStation', h: 30 }] },
    rob: { name: 'Rob', role: 'Co-Founder & Partnerships', photo: 'assets/team-rob.png', banner: pnImg('aerial', 900),
      bio: 'A North Van homeowner who runs an aerial drone business. He sparked the original idea and keeps us close to the community we build for.',
      logos: [{ src: 'assets/logo-action-aerials.png', alt: 'Action Aerials', h: 34 }] },
    billy: { name: 'Billy', role: 'Domain Expert', photo: 'assets/team-billy.jpeg', banner: pnImg('forest', 900),
      bio: 'Has built local businesses across the contracting space and knows the permitting system inside out including what it takes to get a real product off the ground.',
      logos: [{ src: 'assets/logo-axis.png', alt: 'Axis BC', h: 38 }] },
    matt: { name: 'Matt', role: 'UX Lead', photo: 'assets/team-matt.png', banner: pnImg('sketch', 900),
      bio: 'Ten years designing user-focused software, from complex systems at Purina to work with Canadian universities and startups. Breadth that keeps the product simple.',
      logos: [{ src: 'assets/logo-purina.png', alt: 'Purina' }, { src: 'assets/logo-sfu.png', alt: 'Simon Fraser University', h: 32 }] } };

  function Bio({ m }) {
    return (
      <div className="pn-bio2">
        <div className="pn-bio2__banner">
          {m.banner ? <img src={m.banner} alt="" loading="lazy" /> : null}
        </div>
        <div className="pn-bio2__id">
          {m.photo ?
          <img className="pn-bio2__photo" src={m.photo} alt={m.name} loading="lazy" /> :
          <div className="pn-bio2__sil" aria-hidden="true"><Icon n="user" size={44} /></div>}
          <div className="pn-bio2__name">{m.name}</div>
          <div className="pn-bio2__role">{m.role}</div>
        </div>
        <div className="pn-bio2__body">
          <p className="pn-bio2__text">{m.bio}</p>
          {m.logos && m.logos.length ?
          <div className="pn-bio2__logos">
              {m.logos.map((l) =>
            <span className="pn-logo-chip" key={l.src}><img src={l.src} alt={l.alt} style={l.h ? { height: l.h } : undefined} /></span>
            )}
            </div> : null}
        </div>
      </div>);

  }

  function TeamBlock() {
    const order = ['paul', 'rob', 'billy', 'matt'];
    return (
      <Reveal className="pn-team-block">
        <div className="pn-team-block__head">
          <Eyebrow>Who we are</Eyebrow>
          <h2 className="pn-h2" style={{ margin: '12px 0 0' }}>A small team solving big problems.</h2>
        </div>
        <div className="pn-bio2-grid">
          {order.map((k) => <Bio m={TEAM[k]} key={k} />)}
        </div>
      </Reveal>);

  }

  // ── Editorial hero ─────────────────────────────────────────
  function PageHero() {
    return (
      <section className="pn-hero-full pn-hero-full--left" style={{ backgroundImage: 'none' }}>
      <div data-pn-parallax="0.07" style={{ position: 'absolute', top: '-8%', left: 0, right: 0, height: '116%', zIndex: 0 }}>
        <img src={pnImg('blueprints', 2400)} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: 'scaleX(-1)' }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, background: 'linear-gradient(180deg, rgba(8,11,18,0.25) 0%, rgba(8,11,18,0.45) 40%, rgba(8,11,18,0.70) 72%, rgba(8,11,18,0.92) 100%)' }}></div>
      <div className="pn-container" style={{ position: 'relative', zIndex: 1 }}>
        <Reveal className="pn-hero-full__inner" style={{ textAlign: 'left' }}>
          <Eyebrow style={{ color: 'var(--blue-300)' }}>Our Story</Eyebrow>
          <h1 className="pn-h1" style={{ fontSize: 'clamp(38px,4.8vw,60px)', margin: '16px 0 20px' }}>
            We got stuck in the system, so we rebuilt it.
          </h1>
          <p className="pn-sub pn-hero-sub" style={{ maxWidth: 560 }}>North Shore homeowners, contractors and designers who spent too many weekends lost in bylaws. Permit Nav is the solution we wish we’d had.</p>
        </Reveal>
      </div>
    </section>);

  }

  // ── The narrative essay ────────────────────────────────────
  function Story() {
    return (
      <section className="pn-section">
      <div className="pn-container">
        <div className="pn-essay">
          <Reveal>
            <p className="pn-essay__lead">We’re homeowners and contractors in Vancouver. We’ve pulled permits to finish basements, add suites and keep the city growing and every time, we hit the same wall.</p>
          </Reveal>

          <Reveal className="pn-essay__chapter">
            <h2>It started with a <span className="pn-hl">broken system</span>.</h2>
            <p>The process was archaic and opaque. The rules existed somewhere buried across bylaws, PDFs, counters and the heads of people who’d done it before. A forgotten form cost weeks, idle trades and real money.</p>
          </Reveal>

          <Reveal className="pn-essay__chapter">
            <h2>So we paired up with people who <span className="pn-hl">design for a living</span>.</h2>
            <p>We brought in UX experts who turn complicated enterprise software into something people actually <em>want</em> to use, and asked a different question: what if a permit felt less like fighting city hall and more like a guided, modern workflow?</p>
          </Reveal>

          <TeamBlock />

          <Reveal className="pn-essay__chapter">
            <h2>Then we combined human experience with <span className="pn-hl">modern technology</span>.</h2>
            <p>The hard part of permitting isn’t any single rule, it’s knowing which rules apply to <em>your</em> job, in <em>your</em> city. We pair on-the-ground experience with AI to read your project, surface exactly what it needs, and run one clear workflow from first form to final approval.</p>
          </Reveal>

          <Reveal className="pn-essay__chapter">
            <h2>And we’re <span className="pn-hl">just getting started</span>.</h2>
            <p>Today Permit Nav works for homeowners and contractors. Next, we want to work alongside the municipalities themselves - partnering with cities to integrate, so the process gets better on both sides of the counter.</p>
          </Reveal>
        </div>
      </div>
    </section>);

  }

  // ── Vision band (dark cinematic, North Van City Hall backdrop) ──
  function Vision() {
    return (
      <section className="pn-vision-split">
        <div className="pn-vision-split__text">
          <Reveal>
            <span style={{ color: 'var(--blue-600)' }}><Icon n="building-2" size={32} /></span>
            <h2 className="pn-h2" style={{ fontSize: 'clamp(28px,3.2vw,44px)', margin: '16px 0 14px' }}>Where this goes.</h2>
            <p className="pn-sub" style={{ fontSize: 19, color: 'var(--ink-600)', maxWidth: 480, margin: 0 }}>Expanding across permit types and municipalities, and eventually working directly with cities to fully integrate, making the process better on both sides of the counter.</p>
          </Reveal>
        </div>
        <div className="pn-vision-split__media">
          <img src="assets/cityhall.jpg" alt="" loading="lazy" />
        </div>
      </section>);

  }

  function AboutPage() {
    window.useLucide();
    return (
      <React.Fragment>
      <window.Header active="Our Story" />
      <main>
        <PageHero />
        <Story />
        <Vision />
        <window.BetaSignup id="beta" />
      </main>
      <window.Footer />
    </React.Fragment>);

  }
  window.AboutPage = AboutPage;
})();