// Permit Nav — Home page (reworked: photographic, less text, varied sections).
(function () {
  const S = window.PermitNavDesignSystem_779430;
  const { Eyebrow, Input, Button, Badge, IconTile } = S;
  const { Icon, Reveal, Photo, pnImg } = window;
  const { StatBand, JourneyTimeline, CompareOldWay, SplitEditorial, QuoteBand, SectionHead, CoverageSection, DataEngine, ProductCarousel } = window;

  // ---- Hero: split editorial with photo + beta CTA ----
  function Hero() {
    return (
      <section className="pn-hero-full" data-pn-parallax-bg data-pn-base="42" data-pn-range="22" style={{ backgroundImage: `linear-gradient(90deg, rgba(8,11,18,0.90) 0%, rgba(8,11,18,0.74) 40%, rgba(8,11,18,0.46) 72%, rgba(8,11,18,0.30) 100%), url('assets/hero-house.jpg')`, backgroundPosition: 'center 42%' }}>
      <div className="pn-container">
        <Reveal className="pn-hero-full__inner">
          <Eyebrow style={{ color: 'var(--blue-300)' }}>Serving the community of Metro Vancouver</Eyebrow>
          <h1 className="pn-h1" style={{ fontSize: 'clamp(42px,5.4vw,66px)', margin: '16px 0 20px' }}>
            Permits made simple.
          </h1>
          <p className="pn-sub pn-hero-sub" style={{ maxWidth: 540, marginBottom: 30 }}>Built right here in Vancouver, by people who've dealt with the same process you have. Permit Nav tells you what you need, submits it for you, and tracks your application so you can get back to the job.

            </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button className="pn-sweep" variant="primary" size="lg" onClick={() => window.openBetaModal()} iconRight={<Icon n="arrow-right" size={18} />}>Join the beta</Button>
          </div>
          <div style={{ display: 'flex', gap: 22, marginTop: 26, flexWrap: 'wrap' }}>
            {['Homeowners, contractors & trades', 'Built for Metro Vancouver'].map((c) =>
              <span key={c} className="pn-hero-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: "15px" }}>
                <span className="pn-hero-chip-i" style={{ display: 'inline-flex' }}><Icon n="check" size={15} /></span>{c}
              </span>
              )}
          </div>
        </Reveal>
      </div>
    </section>);

  }

  function AudiencesSection() {
    const audiences = [
    { icon: 'home', name: 'Homeowners', kicker: 'Single project, done right', blurb: 'Finishing a basement, adding a suite or taking on one big reno. You tell us the project; we figure out every permit it needs and submit it for you.' },
    { icon: 'wrench', name: 'Trades', kicker: 'Tailored to your industry', blurb: 'Electrical, plumbing, gas, HVAC. Your permits have their own rules and forms. We handle the requirements specific to your trade so the work never stalls.' },
    { icon: 'hard-hat', name: 'Contractors', kicker: 'Many permits, one dashboard', blurb: 'Running larger projects with multiple permits at once. We manage, validate, submit, and track all permits in a single single dashboard so nothing slips.' }];

    return (
      <section className="pn-section pn-aud">
      <div className="pn-container">
        <Reveal style={{ textAlign: 'center', maxWidth: 580, margin: '0 auto 56px' }}>
          <Eyebrow style={{ color: 'var(--blue-400)' }}>Who we serve</Eyebrow>
          <h2 className="pn-h2" style={{ color: '#fff', margin: '14px 0 12px', fontSize: "30px" }}>Built for everyone who needs a permit.</h2>
          <p style={{ fontSize: 18, color: 'var(--text-on-dark-muted)', lineHeight: 1.5, margin: 0 }}>We get the permit work gets done for you so you can focus on
getting the job done.</p>
        </Reveal>
        <div className="pn-aud-grid">
          {audiences.map((a, idx) => <Reveal key={a.name} delay={idx + 1}>
              <div className="pn-aud-card">
                <span className="pn-aud-ic"><Icon n={a.icon} size={56} /></span>
                <div className="pn-aud-name">{a.name}</div>
                <div className="pn-aud-kicker">{a.kicker}</div>
                <p className="pn-aud-blurb">{a.blurb}</p>
              </div>
            </Reveal>
            )}
        </div>
      </div>
    </section>);

  }

  // Pinned scroll: the screenshot stays put while the four steps activate one
  // by one as you scroll through (gracefully degrades to a normal stack when
  // motion is off — see .pn-pin rules in site.css).
  function PinnedSteps() {
    const steps = [
    { icon: 'pencil', t: 'Describe the job once', s: 'In plain words - no bylaw codes or jargon required.' },
    { icon: 'list-checks', t: 'See exactly what it needs', s: 'Every permit, document, approval and fee, itemized.' },
    { icon: 'clock', t: 'Get realistic timelines', s: 'How long each permit really takes in your city.' },
    { icon: 'alert-triangle', t: 'Catch hidden requirements', s: 'The conditions that usually surface only after a rejection.' }];

    return (
      <section className="pn-pin pn-muted" data-pn-pin>
        <div className="pn-pin__sticky">
          <div className="pn-container pn-pin__inner">
            <div className="pn-pin__media">
              <div className="pn-shot"><img src="assets/shot-summary.png" alt="Permit Nav summary: from your answers it identifies the permit you need, with document, requirement and fee counts" /></div>
            </div>
            <div>
              <Eyebrow>A solution for homeowners, trades, and contractors</Eyebrow>
              <h2 className="pn-h2" style={{ fontSize: 'clamp(28px,3.2vw,42px)', margin: '14px 0 14px' }}>Get it right, the first time.</h2>
              <p className="pn-sub" style={{ marginBottom: 22 }}>Permit Nav navigates the tricky and time consuming permit process for homeowners, trades, and contractors. Using an AI powered database, we walk you through the exact needs for your project.</p>
              <div className="pn-pin__steps">
                {steps.map((p, idx) =>
                <div className={`pn-pin__step${idx === 0 ? ' is-on' : ''}`} data-pin-step key={p.t}>
                    <IconTile tone="blue" size={38}><Icon n={p.icon} size={19} /></IconTile>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink-900)', lineHeight: 1.3 }}>{p.t}</div>
                      <div style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 2, lineHeight: 1.45 }}>{p.s}</div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>);

  }

  function HomePage() {
    window.useLucide();
    return (
      <React.Fragment>
      <window.Header active="Home" />
      <main>
        <Hero />
        <PinnedSteps />
        <section className="pn-section">
          <div className="pn-container">
            <Reveal style={{ marginBottom: 44, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }}>
              <SectionHead align="center" title={<>Don't guess<br />your way through it.</>} sub="The same project, two very different experiences." />
            </Reveal>
            <CompareOldWay rows={[
              { label: 'Requirements', icon: 'search', old: 'Dig through bylaws, forums and phone calls', neu: 'Every permit and condition, mapped instantly' },
              { label: 'Hidden requirements', icon: 'alert-triangle', old: 'Found only after a costly rejection', neu: 'Surfaced up front, before you submit' },
              { label: 'Submit & track', icon: 'send', old: 'Print, courier, then chase the city by phone', neu: 'Filed for you, with live status in one place' }]
              } />
            <Reveal className="pn-cmp-stats">
              {[
                { big: '$500–15k', label: 'Typical expediter fee a complete packet helps you avoid' },
                { big: 'Weeks', label: 'Saved by catching rejection risks before you submit' },
                { big: 'Minutes', label: 'To see every permit your project actually needs' }].
                map((st) =>
                <div className="pn-cmp-stat" key={st.label}>
                  <div className="pn-cmp-stat__big">{st.big}</div>
                  <div className="pn-cmp-stat__label">{st.label}</div>
                </div>
                )}
            </Reveal>
          </div>
        </section>
        <AudiencesSection />
        <section className="pn-section pn-showcase">
          <div className="pn-container">
            <Reveal style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 40px' }}>
              <SectionHead align="center" eyebrow="See it in action" title="A look inside Permit Nav." sub="Built by Vancouverites who've lived the frustrations of an outdated permitting process." />
            </Reveal>
            <Reveal style={{ maxWidth: 900, margin: '0 auto' }}>
              <ProductCarousel />
            </Reveal>
          </div>
        </section>
        <DataEngine />
        <CoverageSection />
        <window.BetaSignup id="beta" />
      </main>
      <window.Footer />
    </React.Fragment>);

  }
  window.HomePage = HomePage;
})();