// Permit Nav — How It Works (reworked: timeline + alternating editorial rows).
(function () {
  const S = window.PermitNavDesignSystem_779430;
  const { Eyebrow, Badge, IconTile, Button } = S;
  const { Icon, Reveal, Photo } = window;
  const { JourneyTimeline, SplitEditorial, StatBand, SectionHead } = window;

  function PageHero() {
    return (
      <section style={{ background: 'linear-gradient(180deg, var(--blue-50) 0%, rgba(234,244,254,0) 80%)' }}>
      <div className="pn-container" style={{ padding: '76px 32px 8px', maxWidth: 820, textAlign: 'center' }}>
        <Reveal>
          <Eyebrow>How it works</Eyebrow>
          <h1 className="pn-h1" style={{ fontSize: 'clamp(38px,4.6vw,56px)', margin: '16px 0 16px' }}>From big ideas
to approved.
            </h1>
          <p className="pn-sub" style={{ fontSize: 20, maxWidth: 560, margin: '0 auto' }}>A streamlined process: we tell you what’s required, catch problems before you submit, then file and track it for you.

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

  }

  function Timeline() {
    const steps = [
    { icon: 'pencil', label: 'Describe', desc: 'Your project, in plain words.' },
    { icon: 'shield-check', label: 'Validate', desc: 'Rejection risks, caught early.' },
    { icon: 'send', label: 'Submit', desc: 'Filed with the right department.' },
    { icon: 'activity', label: 'Track', desc: 'Real-time status & alerts.' },
    { icon: 'check-circle-2', label: 'Approved', desc: 'You build with confidence.', tone: 'green', done: true }];

    return (
      <section className="pn-section--tight">
      <div className="pn-container"><JourneyTimeline steps={steps} /></div>
    </section>);

  }

  const stageList = ({ items }) =>
  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
    {items.map((it) =>
    <li key={it.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <IconTile tone="neutral" size={38}><Icon n={it.icon} size={19} /></IconTile>
        <div>
          <div style={{ fontWeight: 700, fontSize: 15.5, color: 'var(--ink-900)' }}>{it.t}</div>
          <p style={{ fontSize: 14, lineHeight: 1.45, color: 'var(--ink-500)', margin: '3px 0 0' }}>{it.s}</p>
        </div>
      </li>
    )}
  </ul>;


  function Stages() {
    return (
      <React.Fragment>
      <SplitEditorial
          shot={{ src: 'assets/shot-summary.png', alt: 'Permit Nav summary screen: based on your answers, you need a Commercial Tenant Improvement, with document, requirement and fee counts' }} muted
          eyebrow="Step 01" title="Describe"
          badge={{ icon: 'compass', label: 'No account needed' }}>
          
        <p className="pn-sub" style={{ marginBottom: 22 }}>Describe your project, we do the rest. Permit Nav tells you exactly what the job requires: the permits, the documents and the fees.

          </p>
        {stageList({ items: [
            { icon: 'list-checks', t: 'Permits required, in order', s: 'Every permit your project triggers, and the sequence.' },
            { icon: 'clock', t: 'Timelines & costs', s: 'Realistic processing times and fees by permit type.' },
            { icon: 'git-branch', t: 'Documentation & dependencies', s: 'The checklist, and what blocks what.' }]
          })}
      </SplitEditorial>

      <SplitEditorial
          shot={{ src: 'assets/shot-plancheck.png', alt: 'Permit Nav plan-check view: the drawing set with reviewer comments and revision flags on each sheet' }} flip
          eyebrow="Step 02" title="Validate"
          badge={{ icon: 'shield-check', label: 'Before you submit' }}>
          
        <p className="pn-sub" style={{ marginBottom: 22 }}>Permit Nav reviews your documents against the exact requirements and flags anything that would cause a rejection.

          </p>
        {stageList({ items: [
            { icon: 'search-check', t: 'Document review', s: 'Your materials, checked against the real requirements.' },
            { icon: 'alert-triangle', t: 'Gaps flagged', s: 'The missing schedule, the report that doesn’t apply.' },
            { icon: 'shield-alert', t: 'Rejection risks surfaced', s: 'What a reviewer would bounce it for so you can fix it.' }]
          })}
      </SplitEditorial>

      <SplitEditorial
          shot={{ src: 'assets/shot-application.png', alt: 'Permit Nav application view: project details, completion progress and the documents required to submit' }} muted
          eyebrow="Step 03" title="Submit"
          badge={{ icon: 'send', label: 'We file it for you' }}>
          
        <p className="pn-sub" style={{ marginBottom: 22 }}>Permit Nav assembles the full packet and submits it to the right municipal department on your behalf, in the format each city expects.

          </p>
        {stageList({ items: [
            { icon: 'upload-cloud', t: 'Submitted for you', s: 'Filed with the right municipal department.' },
            { icon: 'file-check', t: 'Complete packet', s: 'Every form and document, in the order the city wants.' },
            { icon: 'layout-grid', t: 'Contractor dashboard', s: 'Every permit across multiple municipalities, in one place.' }]
          })}
      </SplitEditorial>

      <SplitEditorial
          shot={{ src: 'assets/shot-track.png', alt: 'Permit Nav status view: the application timeline with a paused review and an itemized list of changes the city has requested', tall: true }} flip
          eyebrow="Step 04" title="Track"
          badge={{ icon: 'activity', label: 'Real-time status' }}>
          
        <p className="pn-sub" style={{ marginBottom: 22 }}>Follow every application in real time. When a reviewer requests changes, Permit Nav tells you exactly what to fix and by when.

          </p>
        {stageList({ items: [
            { icon: 'route', t: 'Live status timeline', s: 'Every stage from submitted to issued, at a glance.' },
            { icon: 'bell', t: 'Alerts and deadlines', s: 'Action prompts and response dates, never missed.' },
            { icon: 'list-checks', t: 'Requested changes, itemized', s: 'Exactly what the city wants revised, in plain words.' }]
          })}
      </SplitEditorial>

      <SplitEditorial
          shot={{ src: 'assets/shot-approved.png', alt: 'Permit Nav approved view: the issued building permit with project details, a fully completed status timeline and a download button' }} muted
          eyebrow="Step 05" title="Approved"
          badge={{ icon: 'check-circle-2', label: 'Clear to build' }}>
          
        <p className="pn-sub" style={{ marginBottom: 22 }}>When the permit is issued, it lands in one place with your validity dates and everything you need.

          </p>
        {stageList({ items: [
            { icon: 'badge-check', t: 'Permit issued', s: 'Issue and expiry dates, tracked for you.' },
            { icon: 'download', t: 'All permits, one source', s: 'All your approved permits, ready the moment you need them.' },
            { icon: 'hammer', t: 'Clear to start construction', s: 'No surprises left between you and the work.' }]
          })}
      </SplitEditorial>
    </React.Fragment>);

  }

  function HowItWorksPage() {
    window.useLucide();
    return (
      <React.Fragment>
      <window.Header active="How It Works" />
      <main>
        <PageHero />
        <Timeline />
        <Stages />
        <StatBand
            eyebrow="A smarter system"
            title="Community focused and data driven"
            stats={[
            { big: 'Rules \nDatabase', label: 'Permit requirements across every covered city' },
            { big: 'City insights', label: 'How each municipality really moves a file' },
            { big: 'Field input', label: 'Contractor, trades & homeowner experience' },
            { big: 'Every project', label: 'Real outcomes sharpen the next estimate' }]
            } />
          
        <window.BetaSignup id="beta" />
      </main>
      <window.Footer />
    </React.Fragment>);

  }
  window.HowItWorksPage = HowItWorksPage;
})();