// Permit Nav — Product.
// DUPLICATED 2026-08-16 from pages/HowItWorks.jsx (owner call: fork the page
// as "Product" to evolve separately). Identical at fork time; edit freely —
// the How It Works page is untouched.
//
// TRANSPLANT 2026-08-04: everything below the hero is the owner's prototype
// page ("permite nav/prototype/how-it-works.html") ported 1:1 — process strip,
// role triage, five step sections, the smarter-system band and the closing CTA,
// in the prototype's own order. Copy is verbatim. Styling lives in
// shared/site.css under the ".pn-hiw2-*" block, which also carries the
// prototype→site colour map.
//
// Kept from the previous page: the site Header (which renders the shared beta
// modal), this page's hero block, and the site Footer.
(function () {
  const S = window.PermitNavDesignSystem_779430;
  const { Eyebrow } = S;
  const { Reveal, Icon } = window;

  const LOGO = window.__resources && window.__resources.logoMark || 'assets/logo-mark.png';

  // Dead links: the prototype's two "Learn more" affordances point at "#".
  // Kept in place, kept non-navigating, until the owner supplies destinations.
  function noNav(e) {if (e) e.preventDefault();}

  // ── Prototype glyphs ──────────────────────────────────────
  // Ported as raw SVG rather than Lucide names so the marks are the ones the
  // prototype draws (and so they keep its 2 / 2.5 stroke, not the site's 1.5).
  const IcSparkle = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z" />
    <path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" />
  </svg>;

  const IcHome = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </svg>;

  const IcClipboard = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
    <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
  </svg>;

  const IcWrench = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
  </svg>;

  const IcLock = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>;

  const IcShare = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" />
    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
  </svg>;

  const IcFolder = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
  </svg>;

  const IcCity = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="3" y1="21" x2="21" y2="21" /><line x1="6" y1="21" x2="6" y2="10" />
    <line x1="10" y1="21" x2="10" y2="10" /><line x1="14" y1="21" x2="14" y2="10" />
    <line x1="18" y1="21" x2="18" y2="10" /><polygon points="12 3 20 8 4 8" />
  </svg>;

  const IcHardHat = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M3 15a9 9 0 0 1 18 0" /><path d="M9 15V9a3 3 0 0 1 6 0v6" />
    <rect x="1.5" y="15" width="21" height="3.5" rx="1.5" />
  </svg>;

  const IcMessage = () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>;

  // ── Hero (unchanged) ──────────────────────────────────────
  function PageHero() {
    return (
      <section style={{ background: 'linear-gradient(180deg, var(--blue-50) 0%, rgba(234,244,254,0) 80%)' }}>
      {/* The container keeps the standard gutter; the narrow measure is an
          inner block, so this hero's ink lands on the page grid instead of on
          a gutter of its own. */}
      <div className="pn-container" style={{ paddingTop: 76, paddingBottom: 8, textAlign: 'center' }}>
        <Reveal animate style={{ maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <Eyebrow>Our products</Eyebrow>
          {/* Owner copy 2026-08-16: the Product page speaks to the municipal
              side of the process. Sentence case + closing period per house
              style (supplied as "From Submission to Approval"). */}
          <h1 className="pn-h1" style={{ fontSize: 'clamp(38px,4.6vw,56px)', margin: '16px 0 16px' }}>From submission to approval.
            </h1>
          <p className="pn-sub" style={{ fontSize: 20, maxWidth: 620, margin: '0 auto' }}>Provide applicants instant clarity on local rules, catch submission errors before intake, and manage application workflows seamlessly in one centralized platform.

            </p>
        </Reveal>
      </div>
    </section>);

  }

  // ── Process strip ─────────────────────────────────────────
  // Step 2 ("AI review") carries the sparkle and NO numeral — deliberate in
  // the prototype, so the numbered steps read 1-2-3. Step 5 carries the brand
  // mark in a white chip (owner's standing call).
  // Owner copy 2026-08-16: the strip now traces the municipal side of the
  // process. Owner call 2026-08-16: the 1-2-3 numerals became icons; the final
  // step keeps the brand-mark chip (owner's standing call) as the payoff.
  const STRIP = [
  { k: 'intake', mark: 'icon', ic: 'inbox', h: 'Intake', p: 'Receive pre-screened, compliant applications before review starts.' },
  { k: 'review', mark: 'icon', ic: 'file-search', h: 'Review', p: 'Automated deficiency checks eliminate tedious back-and-forth cycles.' },
  { k: 'coordinate', mark: 'icon', ic: 'workflow', h: 'Coordinate', p: 'Streamline inter-department approvals using centralized workflows.' },
  { k: 'issue', mark: 'logo', h: 'Approve', p: 'Approve submissions quicker with clear, real-time permit tracking.' }];


  function ProcessStrip() {
    return (
      <section className="pn-hiw2-strip-wrap">
      <div className="pn-container">
        <div className="pn-hiw2-strip">
          {STRIP.map((s) =>
          <div className="pn-hiw2-step" key={s.k}>
              <span className={'pn-hiw2-stepno' + (s.mark === 'logo' ? ' pn-hiw2-stepno--logo' : '')}>
                {s.mark === 'sparkle' ? <IcSparkle /> :
              s.mark === 'logo' ? <img src={LOGO} alt="" /> :
              s.mark === 'icon' ? <Icon n={s.ic} size={20} /> :
              s.mark}
              </span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </div>
        {/* Owner call 2026-08-16: the applicant-facing "No account needed to
            start" pill becomes the site CTA. Kept for restore:
        <div className="pn-hiw2-noacct"><span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="15" height="11" x="1.5" y="10.5" rx="2" ry="2" /><path d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75" /></svg>
          {' '}No account needed to start</span></div> */}
        <div className="pn-hiw2-noacct">
          <button type="button" className="pn-cta-link pn-sweep" onClick={() => window.openBetaModal()}>
            <span>Book a demo</span>
            <span style={{ display: 'inline-flex' }}><Icon n="arrow-right" size={18} /></span>
          </button>
        </div>
      </div>
    </section>);

  }

  // ── See it for your role ──────────────────────────────────
  // Order is deliberate: Contractor leads and is the default selection, matching
  // the site's contractors-first positioning (owner call 2026-08-04).
  const ROLES = [
  { id: 'contractor', ic: <IcClipboard />, h: 'Contractor', p: 'All permits, organized on one dashboard.' },
  // owner call 2026-08-04 (late): Homeowner RESTORED, in the middle of the roster.
  { id: 'home', ic: <IcHome />, h: 'Homeowner', p: 'Every permit for your project.' },
  { id: 'muni', ic: <IcCity />, h: 'Municipalities', p: 'Drawing applications, checked and validated.' }];

  // owner call 2026-08-04: Trade hidden until launch scope settles.
  // HIDDEN, NOT DELETED — re-enable by uncommenting the single line below.
  // Its mock data (MOCKS.trade), its icon (IcWrench) and its photograph
  // (assets/role-trade.jpg) are all still in place and untouched.
  // { id: 'trade', ic: <IcWrench />, h: 'Trade', p: "Only your trade's requirements." }


  const MOCKS = {
    home: {
      head: '5 municipalities',
      title: 'All permits you need',
      list: [
      { t: 'Building Permit', tag: 'Required' },
      { t: 'Plumbing Permit', tag: 'Required' },
      { t: 'Electrical Permit', tag: 'Required' }],

      foot: 'Est. fees and timeline mapped in order',
      // Owner call 2026-08-04: per-role CTA — homeowners go enter an address.
      cta: { label: 'See what you need', href: 'Home.html#check' }
    },
    contractor: {
      head: 'Your dashboard · all active projects',
      title: 'Every permit, one view',
      rows: [
      { t: 'Oak St duplex', stat: 'Issued', tone: ' is-green' },
      { t: 'Main St tenant improvement', stat: 'In review', tone: ' is-amber' },
      { t: '2nd Ave reno', stat: 'Submitted', tone: ' is-amber' },
      { t: 'Cedar deck addition', stat: 'Draft', tone: '' }],

      foot: 'Across 5 municipalities. Nothing slips.',
      // Contractors start projects — the beta modal is the live action today.
      cta: { label: 'Start your projects', modal: true }
    },
    // Rows mirror the real Drawing Package Checker screen (the role's own
    // background photo). CTA destination TBD — owner to supply the checker
    // link; opens the beta modal until then.
    muni: {
      head: 'Drawing Package Checker',
      title: 'Municipality guidelines applied',
      rows: [
      { t: 'Site plan', stat: 'Pass', tone: ' is-green' },
      { t: 'Cross sections', stat: 'Pass', tone: ' is-green' },
      { t: 'Elevations', stat: 'Pass', tone: ' is-green' },
      { t: 'Parcel ID (PID)', stat: 'Review', tone: ' is-amber' }],

      foot: 'From the city’s own submission checklist.',
      cta: { label: 'Show the drawing checker', modal: true }
    },
    trade: {
      head: 'Electrical · City of Burnaby',
      title: 'Only your requirements',
      list: [
      { t: 'Electrical Permit application' },
      { t: 'Load calculation sheet' },
      { t: 'Licensed contractor number' }],

      foot: 'Filtered to your trade. No unrelated forms.'
    }
  };

  // One mock panel. Every role's panel is rendered and stacked in the same grid
  // cell so switching is a true crossfade (outgoing fades out while incoming
  // fades in) — and the wrapper sizes itself to the TALLEST panel, so the box
  // never changes height when roles switch. No magic min-height to maintain.
  function RoleMock({ id, on }) {
    const m = MOCKS[id];
    return (
      <div className={'pn-hiw2-mock' + (on ? ' is-on' : '')} data-role={id} aria-hidden={!on}>
        <div className="pn-hiw2-mock-head"><span className="pn-hiw2-mock-dot" aria-hidden="true"></span> {m.head}</div>
        <div className="pn-hiw2-mock-title">{m.title}</div>
        {m.list ?
        <ul className="pn-hiw2-mock-list">
            {m.list.map((it) =>
          <li key={it.t}>
                <span className="pn-hiw2-mchk" aria-hidden="true">✓</span> {it.t}
                {it.tag ? <span className="pn-hiw2-mtag">{it.tag}</span> : null}
              </li>
          )}
          </ul> :
        null}
        {m.rows ?
        <ul className="pn-hiw2-mock-rows">
            {m.rows.map((it) =>
          <li key={it.t}>{it.t} <span className={'pn-hiw2-mstat' + it.tone}>{it.stat}</span></li>
          )}
          </ul> :
        null}
        <div className="pn-hiw2-mock-foot">{m.foot}</div>
        {/* Owner call 2026-08-10: every role mock's CTA button removed — the
            mocks are illustrations of the product, not conversion points. The
            cta objects stay on MOCKS above so this can be restored:
        {m.cta ?
        m.cta.modal ?
        <button type="button" className="pn-hiw2-btn pn-hiw2-btn--lg pn-hiw2-mock-cta" onClick={() => window.openBetaModal()}>
              {m.cta.label} <span className="pn-hiw2-arw" aria-hidden="true">→</span>
            </button> :
        <a className="pn-hiw2-btn pn-hiw2-btn--lg pn-hiw2-mock-cta" href={m.cta.href}>
              {m.cta.label} <span className="pn-hiw2-arw" aria-hidden="true">→</span>
            </a> :
        null} */}
      </div>);

  }

  function RoleTriage() {
    const [role, setRole] = React.useState('contractor');
    return (
      <section className="pn-hiw2-sec pn-hiw2-sec--surface pn-hiw2-rolebg">
      {/* One layer per role, crossfaded by opacity. Absolutely positioned, so
          they contribute no height and the band cannot shift as roles switch. */}
      {ROLES.map((r) =>
      // The image is set in CSS by data-role, not inline: phones need a portrait
      // crop of the same photo, and an inline background-image would outrank the
      // media query that swaps it.
      <span
        key={r.id} aria-hidden="true" data-role={r.id}
        className={'pn-hiw2-rolebg__img' + (role === r.id ? ' is-on' : '')} />
      )}
      <span className="pn-hiw2-rolebg__veil" aria-hidden="true"></span>
      <div className="pn-container">
        <div className="pn-hiw2-head">
          <span className="pn-hiw2-eyebrow">Built the way you think</span>
          <h2 className="pn-h2 pn-hiw2-h2">Use Permit Nav your way.</h2>
          <p className="pn-hiw2-lead">Choose your role, and we'll tailor the experience to the way you work.</p>
        </div>

        <div className="pn-hiw2-tri">
          <div className="pn-hiw2-triage">
            <span className="pn-hiw2-triage-label" id="pn-hiw2-triage-label">{"I'm a…"}</span>
            <div className="pn-hiw2-triage-opts" role="group" aria-labelledby="pn-hiw2-triage-label">
              {/* Owner call 2026-08-10: on phones the selected role's context
                  lives INSIDE its own card, so each option is a wrapper holding
                  the button plus that context — keeping it out of the button
                  means the button's accessible name stays just the role. The
                  block is CSS-hidden above 820, where the mock panel shows it
                  instead, so only one copy is ever exposed. */}
              {ROLES.map((r) =>
              <div key={r.id} className={'pn-hiw2-optwrap' + (role === r.id ? ' is-sel' : '')}>
                <button
                  type="button" data-role={r.id}
                  className={'pn-hiw2-opt' + (role === r.id ? ' is-sel' : '')}
                  aria-pressed={role === r.id}
                  onClick={() => setRole(r.id)}>

                    <span className="pn-hiw2-opt-ic">{r.ic}</span>
                    <div><h5>{r.h}</h5><p>{r.p}</p></div>
                    <span className="pn-hiw2-opt-chk" aria-hidden="true">✓</span>
                  </button>
                <div className="pn-hiw2-optctx" aria-hidden={role !== r.id}>
                  <div className="pn-hiw2-mock-head"><span className="pn-hiw2-mock-dot" aria-hidden="true"></span> {MOCKS[r.id].head}</div>
                  <div className="pn-hiw2-mock-title">{MOCKS[r.id].title}</div>
                  <div className="pn-hiw2-mock-foot">{MOCKS[r.id].foot}</div>
                </div>
              </div>
              )}
            </div>
          </div>

          <div className="pn-hiw2-mockwrap" aria-live="polite">
            {ROLES.map((r) => <RoleMock key={r.id} id={r.id} on={role === r.id} />)}
          </div>
        </div>
      </div>
    </section>);

  }

  // ── Lightbox ──────────────────────────────────────────────
  // Mounted once by the page; opened through window.pnOpenLightbox(src, alt),
  // matching how the beta modal is reached from anywhere on the page.
  function Lightbox() {
    const [shot, setShot] = React.useState(null);
    const closeRef = React.useRef(null);
    const openerRef = React.useRef(null);

    React.useEffect(() => {
      window.pnOpenLightbox = (src, alt) => {
        // Owner call 2026-08-16: no enlarge on phones — the guard covers
        // keyboard/AT activation; site.css removes the visual affordance.
        if (window.matchMedia('(max-width: 760px)').matches) return;
        openerRef.current = document.activeElement;
        setShot({ src, alt });
      };
      return () => {delete window.pnOpenLightbox;};
    }, []);

    React.useEffect(() => {
      if (!shot) return undefined;
      // Body scroll lock: without it the page scrolls behind the overlay.
      const prevOverflow = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      function onKey(e) {
        if (e.key === 'Escape') {setShot(null);return;}
        // Only two focusables in here, so the trap is a straight bounce.
        if (e.key === 'Tab') {e.preventDefault();if (closeRef.current) closeRef.current.focus();}
      }
      document.addEventListener('keydown', onKey);
      if (closeRef.current) closeRef.current.focus();
      return () => {
        document.removeEventListener('keydown', onKey);
        document.body.style.overflow = prevOverflow;
        // Return focus to the thumbnail that opened it.
        if (openerRef.current && openerRef.current.focus) openerRef.current.focus();
      };
    }, [shot]);

    if (!shot) return null;
    return (
      <div className="pn-lb" role="dialog" aria-modal="true"
        aria-label={shot.alt || 'Enlarged screenshot'}
        onClick={() => setShot(null)}>
        <button type="button" className="pn-lb__close" ref={closeRef} aria-label="Close enlarged view"
          onClick={() => setShot(null)}>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg>
        </button>
        {/* stopPropagation: clicking the picture itself must not close it. */}
        <img className="pn-lb__img" src={shot.src} alt={shot.alt} onClick={(e) => e.stopPropagation()} />
        {/* Phone-only (hidden by CSS above 760): the image is wider than the
            screen there, so say that it pans. */}
        <span className="pn-lb__hint" aria-hidden="true">Drag to pan</span>
      </div>);

  }

  // ── Step sections ─────────────────────────────────────────
  function StepSection({ surface, flip, shot, alt, eyebrow, title, lead, substeps, icon, children }) {
    // A real <button>, not a div with onClick: the screenshots carry the detail
    // the copy describes, so enlarging them has to be reachable by keyboard and
    // announced as an action (owner call 2026-08-10).
    // --pad (owner call 2026-08-16): the module captures sat flush against the
    // frame border and read as cut off; the modifier mats them on a light
    // ground with breathing room. Product-only — How It Works keeps the flush
    // frame.
    const media =
    <div className="pn-hiw2-media pn-hiw2-media--pad">
      <button type="button" className="pn-hiw2-zoom" onClick={() => window.pnOpenLightbox(shot, alt)}
        aria-label={'Enlarge screenshot: ' + alt}>
        <img src={shot} alt={alt} />
        <span className="pn-hiw2-zoom__hint" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3M11 8v6M8 11h6" /></svg>
          Enlarge
        </span>
      </button>
    </div>;

    const copy =
    <div className="pn-hiw2-copy">
      <span className="pn-hiw2-eyebrow">{eyebrow}</span>
      <h2 className={'pn-h2 pn-hiw2-h2' + (icon ? ' pn-hiw2-h2--ic' : '')}>
        {icon ? <span className="pn-hiw2-h2ic" aria-hidden="true"><Icon n={icon} size={23} /></span> : null}
        {title}</h2>
      <p className="pn-hiw2-lead">{lead}</p>
      <div className="pn-hiw2-substeps">
        {substeps.map((s) =>
        <div className="pn-hiw2-substep" key={s.t}>
            <span className="pn-hiw2-substep-d" aria-hidden="true"></span>
            <div><h5>{s.t}</h5><p>{s.s}</p></div>
          </div>
        )}
      </div>
      {children}
    </div>;

    return (
      <section className={'pn-hiw2-sec pn-hiw2-step-sec pn-hiw2-sec--' + surface}>
      <div className="pn-container">
        {flip ? copy : media}
        {flip ? media : copy}
      </div>
    </section>);

  }

  function Steps() {
    // Owner call 2026-08-10: Step 1's shot swapped from the "You need a
    // Commercial Tenant Improvement" result to the job-entry card, cropped in
    // from Describe.png. The old asset stays in assets/proto-shot-summary.jpg.
    return (
      <React.Fragment>
      <StepSection
          surface="band"
          shot="assets/proto-shot-describe.jpg"
          alt="Permit Nav job entry: describe the job in plain words, or pick a category such as add space to a house or renovate inside a home"
          eyebrow="Step 1 · No account needed"
          title="Describe"
          lead="Describe your project, we do the rest. Permit Nav tells you exactly what the job requires: the permits, the documents and the fees."
          substeps={[
          { t: 'Permits required, in order', s: 'Every permit your project triggers, and the sequence.' },
          { t: 'Timelines & costs', s: 'Realistic processing times and fees by permit type.' },
          { t: 'Documentation & dependencies', s: 'The checklist, and what blocks what.' }]
          }>

        {/* Owner call 2026-08-10: step CTAs and "Learn more" links all removed.
            HIDDEN, NOT DELETED — direct flex child of .pn-hiw2-copy, which is
            what makes it stretch to the column's width:
        <button type="button" className="pn-hiw2-btn pn-hiw2-btn--lg" style={{ marginTop: 8 }} onClick={() => window.openBetaModal()}>
          Try it, no commitment <span className="pn-hiw2-arw" aria-hidden="true">→</span>
        </button> */}
      </StepSection>

      <StepSection
          surface="surface" flip
          shot="assets/proto-shot-diagnostic.jpg"
          alt="Plan check on a site plan sheet: a rear yard setback deficiency and a site coverage advisory, each cited to the zoning bylaw"
          eyebrow="Step 2 · Before you submit"
          title="Diagnostic review"
          lead="Permit Nav reviews your documents against municipality requirements and flags anything that would cause a rejection."
          substeps={[
          { t: 'Document review', s: 'Check your plans and documents against applicable codes and bylaws.' },
          { t: 'Submission completeness', s: 'Ensure every required document is included before you apply.' },
          { t: 'Approval risk management', s: 'See the issues most likely to delay or prevent approval before you submit.' },
          { t: 'Permit manager', s: 'Every permit across multiple municipalities, in one place.' }]
          }>

        <div className="pn-hiw2-note">
          <IcLock />
          <div className="pn-hiw2-note-body">
            {/* Owner call 2026-08-10: trailing "Learn more →" link removed (it
                pointed at "#" anyway). Restore by putting back:
                <a className="pn-hiw2-note-link" href="#" onClick={noNav}>Learn more →</a> */}
            <p>Your documents stay private: encrypted in transit and at rest, never sold or shared.</p>
          </div>
        </div>
      </StepSection>

      <StepSection
          surface="band"
          shot="assets/proto-shot-requirements.jpg"
          alt="The required-to-submit checklist: eight items including the city permit application, title search, site survey, architectural and structural drawings, energy report, arborist report and asbestos assessment, each showing who prepares it"
          eyebrow="Step 3 · We file it for you"
          title="Submit"
          lead="Permit Nav assembles the full packet and submits it to the right municipal department on your behalf, in the format each city expects."
          substeps={[
          { t: 'Submitted for you', s: 'Filed with the right municipal department.' },
          { t: 'Complete packet', s: 'Every form and document, in the order the city wants.' },
          { t: 'Contractor dashboard', s: 'Every permit across multiple municipalities, in one place.' }]
          }>

        <div className="pn-hiw2-note">
          <IcShare />
          <div className="pn-hiw2-note-body">
            <p>Connected directly with Metro Vancouver municipalities. You submit once, and Permit Nav routes every form and document to the right department.</p>
            {/* Owner call 2026-08-10: "Learn more" ghost button removed:
            <button type="button" className="pn-hiw2-btn pn-hiw2-btn--ghost pn-hiw2-btn--sm" onClick={noNav}>
              Learn more <span className="pn-hiw2-arw" aria-hidden="true">→</span>
            </button> */}
          </div>
        </div>
      </StepSection>

      <StepSection
          surface="surface" flip
          shot="assets/proto-shot-status.jpg"
          alt="Application status timeline: submitted and completeness check passed, plan review paused with changes requested by June 22, and the two requested changes listed with a respond-by date"
          eyebrow="Step 4 · Real-time status"
          title="Track"
          lead="Follow every application in real time. When a reviewer requests changes, Permit Nav tells you exactly what to fix and by when."
          substeps={[
          { t: 'Live status', s: 'Every stage of your application, from submission to approval.' },
          { t: 'Alerts & deadlines', s: 'Stay ahead of response deadlines and required actions.' },
          { t: 'Fewer revisions', s: 'Issues are identified before submission to help reduce review comments.' }]
          } />


      <StepSection
          surface="band"
          shot="assets/proto-shot-approved.jpg"
          alt="Permit approved dialog: the permit number, issue date and validity, with the next steps to post the permit, pull sub-permits and book inspections"
          eyebrow="Step 5 · Clear to build"
          title="Approved"
          lead="When the permit is issued, it lands in one place with your validity dates and everything you need."
          substeps={[
          { t: 'Permit on file', s: 'Your issued permit, with issue and expiry dates, in one place.' },
          { t: 'Always accessible', s: 'Every approved permit, organized and ready whenever you need it.' },
          { t: 'Ready to build', s: 'Construction can begin with confidence.' }]
          }>

        <div className="pn-hiw2-note">
          <IcFolder />
          <div className="pn-hiw2-note-body">
            <p>Everything lives in <strong>your Document Center</strong>{": every permit, approval and file in one place, for good. Plans change? We'll help you re-apply or amend, without starting over."}</p>
          </div>
        </div>
      </StepSection>
    </React.Fragment>);

  }

  // ── A smarter system ──────────────────────────────────────
  // Owner copy 2026-08-16 (municipal reframe of the band).
  const SYS = [
  { ic: <IcSparkle />, h: 'Rules database', p: 'Multi-jurisdictional permit rules and guidelines aligned with your municipality’s standards.' },
  { ic: <IcCity />, h: 'Local insights', p: 'Tailored to how your municipal authority processes, reviews, and approves files.' },
  { ic: <IcHardHat />, h: 'Field input', p: 'Real-world feedback from contractors and homeowners to reduce common intake errors.' },
  { ic: <IcMessage />, h: 'Every project', p: 'Historical submission data used to improve completeness and speed up review cycles.' }];


  function SmarterSystem() {
    return (
      <section className="pn-hiw2-sec pn-hiw2-sec--dark">
      <div className="pn-container">
        <div className="pn-hiw2-head">
          <span className="pn-hiw2-eyebrow pn-hiw2-eyebrow--on-dark">A smarter system</span>
          <h2 className="pn-h2 pn-hiw2-h2">Data driven.</h2>
          <p className="pn-hiw2-lead">Every answer is grounded in official regulations, municipality operations, and field experience.</p>
        </div>
        <div className="pn-hiw2-sys">
          {SYS.map((c) =>
          <div className="pn-hiw2-sys-card" key={c.h}>
              <div className="pn-hiw2-sys-ic">{c.ic}</div>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

  }

  // ── Closing CTA ───────────────────────────────────────────
  // Owner call 2026-08-04: the prototype's own CTA block (★ eyebrow, prep-list
  // deep link) is replaced by the shared BetaSignup band so this page closes
  // exactly like Home/About/Privacy (skyline backdrop, chip, modal button).

  // ── Product modules (owner content pivot 2026-08-16) ──────
  // The page moved from an applicant journey to the product suite: four
  // modules, each on the StepSection skeleton (eyebrow / name / promise /
  // proof bullets / screenshot with lightbox). Copy is the owner's, normalized
  // to house mechanics. Screenshot provenance:
  //   Intake Assistant — STAND-IN (shot-projectplan.jpg, the Home stepper's
  //     project-plan card): the owner's source, dashboard-permitnav.vercel.app
  //     /contractor, is login-gated headless. Swap when the owner exports one.
  //   Drawing Checker — owner capture 2026-08-16 of the live Drawing Package
  //     Checker (replaced the earlier hero-film frame).
  //   Permit Tracker — the Figma site's City Admin View (read-cherry-25099918
  //     .figma.site), prototype nav bar cropped off.
  //   Parcel Lookup — address-lookup-permitnav.vercel.app with a real search
  //     (355 W Queens Rd, District of North Vancouver).
  function Modules() {
    return (
      <React.Fragment>
      <StepSection
          surface="band"
          shot="assets/shot-projectplan.jpg"
          alt="Permit Nav project plan: every permit the project triggers with city review steps, trade permits and inspections in order, plus requirements count and estimated fees"
          eyebrow="Pre-submission"
          title="Permit Nav"
          icon="clipboard-list"
          lead="Guide applicants through local bylaws from start to finish. Permit Nav automatically determines exact municipal requirements, required documentation, and applicable fees."
          substeps={[
          { t: 'Diagnostic form & document validator', s: 'Smart content analyzer that selects the correct permit forms and verifies your uploaded documents.' },
          { t: 'Clear fee schedules and timelines', s: 'Surface fee calculations and municipal processing timelines up front.' },
          { t: 'Complete submission checklists', s: 'Provides applicants with jurisdiction-specific document lists and prerequisite requirements before submitting.' }]
          } />

      <StepSection
          surface="surface" flip
          shot="assets/module-drawcheck.jpg"
          alt="Permit Nav Drawing Package Checker: measured facts from the uploaded drawings, site address, zone and lot dimensions matched against land records, five checks passing, beside the site plan and floor plan sheets of the drawing package"
          eyebrow="Pre-submission check"
          title="Drawing Checker"
          icon="pencil-ruler"
          lead="Permit Nav verifies applicant drawings and documentation directly against municipal codes and bylaws to catch deficiencies before they reach plan checkers."
          substeps={[
          { t: 'Drawing & document validation', s: 'Auto check plans against local zoning bylaws and building standards.' },
          { t: 'Completeness verification', s: 'Makes sure any required files or permits are not missed before hitting submit.' },
          { t: 'Deficiency & risk flagging', s: 'Flags non-compliant setback, height, or coverage issues upfront so applicants can fix them before submission.' },
          { t: 'Centralized file routing', s: 'Organizes submitted documentation seamlessly to prepare clean packages for departmental review.' }]
          }>

        <div className="pn-hiw2-note">
          <IcLock />
          <div className="pn-hiw2-note-body">
            <p>Documents stay private: encrypted in transit and at rest, never sold or shared.</p>
          </div>
        </div>
      </StepSection>

      {/* Tracker shot = owner capture 2026-08-16 of the static mockup at
          mockups/permit-tracker-admin.html (replaced the Figma-site City
          Admin View screenshot). */}
      <StepSection
          surface="band"
          shot="assets/module-tracker.jpg"
          alt="Municipal review dashboard: an incoming permit application with a verified Permit Nav badge, project overview with intake finding chips, an automated drawing check showing five passes, per-document submission statuses, accept and reject actions, department routing and an estimated processing timeline"
          eyebrow="Workflow routing"
          title="Permit Tracker"
          icon="workflow"
          lead="Permit Nav packages fully pre-validated submissions and routes them directly to the appropriate municipal departments in the exact digital formats required."
          substeps={[
          { t: 'Standardized submission packets', s: 'Delivers structured application files formatted specifically for municipal intake systems.' },
          { t: 'Automated inter-departmental routing', s: 'Directs files to planning, engineering, building, or environmental review teams.' },
          { t: 'Municipal review dashboard', s: 'Provides staff a single, centralized portal to manage incoming applications across jurisdictions.' },
          { t: 'Direct integration', s: 'Connects seamlessly with local permitting software to reduce manual data entry for municipal intake.' }]
          } />

      <StepSection
          surface="surface" flip
          shot="assets/module-parcel.jpg"
          alt="Parcel lookup for 355 West Queens Road, District of North Vancouver: address, parcel identifier, zoning and building envelope values beside an interactive map drawing the property boundary and setbacks"
          eyebrow="Map & address lookup"
          title="Parcel Lookup"
          icon="map-pin"
          lead="Instantly pull local zoning and building parameters by searching any property address, visualized directly on an interactive municipal map."
          substeps={[
          { t: 'Instant spatial & zoning data', s: 'Pulls up property boundaries, zoning details, and local building rules automatically when you search an address.' },
          { t: 'Interactive GIS map integration', s: 'Shows property boundaries, rules, and local details directly on an interactive map.' },
          { t: 'Unified property profiles', s: 'Gives staff a single view of all bylaws, building rules, and past permit records for a specific property.' }]
          } />


      {/* Document Reviewer, regrounded 2026-08-16 after reading the owner's
          admin pages (dashboard /admin/source-docs and /admin/zoning-rules):
          the module is the rule PIPELINE — a corpus of 336 municipal source
          PDFs, LLM extraction of each zone's numbers with confidence grades,
          and a human verifying every value against the source bylaw before it
          drives a checker verdict. All four bullets are observed capability.
          Municipal benefit stated softly (their own documents cited), per
          owner direction: subtle, not full-on municipal.
          Shot: the owner's own capture (2026-08-16) of the verify workflow —
          the PA zone's extracted values open for human review beside the
          District of North Vancouver's website. The owner chose this frame
          knowing the DNV window shows the district's page-not-found helper. */}
      <StepSection
          surface="band"
          shot="assets/module-docreview.jpg"
          alt="Permit Nav bylaw verification: the PA zone's extracted setbacks, height, floor space ratio and lot coverage open for human review, with fields citing the source bylaw URL and section, beside the District of North Vancouver's website"
          eyebrow="Document review"
          title="Rule Verifier"
          icon="book-open-check"
          lead="Permit Nav reads the municipal record itself: hundreds of bylaws, checklists, forms, and bulletins, distilled into verified rules that every answer traces back to."
          substeps={[
          { t: 'Authoritative source library', s: 'Bylaws, application checklists, forms, and bulletins from Metro Vancouver municipalities, alongside the BC Building Code.' },
          { t: 'AI extraction, human verification', s: 'Setbacks, heights, and coverage limits are read from each bylaw, and no number drives a verdict until a person confirms it against the source.' },
          { t: 'Confidence-graded review', s: 'Every extracted value carries a confidence grade, so human review lands first where the source is least clear.' },
          { t: 'Traceable answers', s: 'Every rule links back to the exact municipal document it came from, so applicants and staff see the city’s own words, not a paraphrase.' }]
          } />

      </React.Fragment>);

  }

  function ProductPage() {
    window.useLucide();
    return (
      <React.Fragment>
      <window.Header active="Our Products" />
      <main>
        <PageHero />
        <ProcessStrip />
        {/* Owner call 2026-08-16: the role band ("Built the way you think" /
            "Use Permit Nav your way.") is off the Product page. Hidden, not
            deleted — the RoleTriage component and its CSS are untouched, so
            restoring it is this one line. */}
        {/* <RoleTriage /> */}
        {/* Owner content pivot 2026-08-16: the applicant journey (Steps 1-5)
            gave way to the module suite. Hidden, not deleted:
        <Steps /> */}
        <Modules />
        {/* Owner call 2026-08-16: the four-card band stays, below the modules. */}
        <SmarterSystem />
        <window.BetaSignup id="beta" />
      </main>
      <Lightbox />
      <window.Footer />
    </React.Fragment>);

  }
  window.ProductPage = ProductPage;
})();