// PDP site chrome — SiteHeader + SiteFooter ported from staging v2.
// Direct visual parity with /Users/cameronjovan/generations/perch-hero-preview-v2.html
// so this PDP feels like the same site.

function SiteHeader({ onOpenChat }) {
  const nav = [
    { label: 'Homes', href: '/homes', current: true },
    { label: 'Builders', href: '/builders' },
    { label: 'Land Check', href: '/land-check' },
    { label: 'Guides', href: '/guides' },
  ];
  return React.createElement('header', { className: 'site-header' },
    React.createElement('div', { className: 'site-header-inner' },
      React.createElement('a', { href: '/', className: 'site-wordmark', 'aria-label': 'PERCH home' }, 'PERCH'),
      React.createElement('div', { className: 'site-header-nav-wrap' },
        React.createElement('nav', { className: 'site-nav-pill', 'aria-label': 'Primary' },
          nav.map(n => React.createElement('a', { key: n.href, href: n.href, className: n.current ? 'is-current' : '' }, n.label)),
          React.createElement('button', {
            type: 'button',
            className: 'site-nav-chat',
            onClick: onOpenChat,
            'aria-label': 'Open chat with Wren'
          }, 'Chat')
        )
      )
    )
  );
}

function SiteFooter() {
  return React.createElement('footer', { className: 'site-footer' },
    React.createElement('div', { className: 'site-footer-inner' },
      React.createElement('div', { className: 'site-footer-grid' },

        // Brand column
        React.createElement('div', { className: 'sf-brand' },
          React.createElement('a', { href: '/', className: 'site-wordmark' }, 'PERCH'),
          React.createElement('div', { className: 'tagline' }, 'Friday mornings on the patio.'),
          React.createElement('p', { className: 'sub' }, 'Join 4,000 readers and get The Field Guide PDF free.'),
          React.createElement('form', { onSubmit: e => { e.preventDefault(); alert('newsletter stub — wire to Beehiiv'); } },
            React.createElement('input', { type: 'email', name: 'email', required: true, placeholder: 'you@email.com', 'aria-label': 'Email address' }),
            React.createElement('button', { type: 'submit' }, 'Subscribe →')
          ),
          React.createElement('p', { className: 'microcopy' }, 'Free · weekly · one letter · unsubscribe any time.'),
        ),

        // Data
        React.createElement('div', { className: 'sf-col' },
          React.createElement('h5', null, 'Data'),
          React.createElement('ul', null,
            React.createElement('li', null, React.createElement('a', { href: '/find-yours' }, 'Find Yours')),
            React.createElement('li', null, React.createElement('a', { href: '/yield' }, 'Yield')),
            React.createElement('li', null, React.createElement('a', { href: '/index' }, 'PERCH Index')),
            React.createElement('li', null, React.createElement('a', { href: '/leaderboards' }, 'Leaderboards')),
            React.createElement('li', null,
              React.createElement('a', { className: 'sf-chip-row', href: '/financing-finder' },
                React.createElement('span', null, 'Financing Finder'),
                React.createElement('span', { className: 'sf-chip sf-chip-live' }, 'Live')
              )
            ),
            React.createElement('li', null,
              React.createElement('a', { className: 'sf-chip-row', href: '/land-check' },
                React.createElement('span', null, 'Land Check'),
                React.createElement('span', { className: 'sf-chip sf-chip-live' }, 'Live')
              )
            ),
          )
        ),

        // Guides
        React.createElement('div', { className: 'sf-col' },
          React.createElement('h5', null, 'Guides'),
          React.createElement('ul', null,
            React.createElement('li', null, React.createElement('a', { href: '/guides' }, 'All Guides')),
            React.createElement('li', null, React.createElement('a', { href: '/news' }, 'News')),
            React.createElement('li', null, React.createElement('a', { href: '/guides/state' }, 'By State')),
            React.createElement('li', null, React.createElement('a', { href: '/guides/topic/financing' }, 'Financing')),
            React.createElement('li', null, React.createElement('a', { href: '/guides/topic/adu' }, 'ADU Guides')),
            React.createElement('li', null, React.createElement('a', { href: '/guides/topic/yield-reports' }, 'Yield Reports')),
            React.createElement('li', null,
              React.createElement('a', { className: 'sf-chip-row', href: '/field-guide' },
                React.createElement('span', null, 'The Field Guide'),
                React.createElement('span', { className: 'sf-chip sf-chip-format' }, 'Free PDF')
              )
            ),
          )
        ),

        // Markets
        React.createElement('div', { className: 'sf-col' },
          React.createElement('h5', null, 'Markets'),
          React.createElement('ul', null,
            ['Atlanta, GA','Dallas, TX','Houston, TX','Phoenix, AZ','Nashville, TN','Denver, CO','Seattle, WA','Miami, FL','San Diego, CA'].map(c =>
              React.createElement('li', { key: c }, React.createElement('a', { href: '/cities/' + c.split(',')[0].toLowerCase().replace(/\s+/g,'-') }, c))
            )
          )
        ),

        // Buy & Sell + Partners
        React.createElement('div', { className: 'sf-col' },
          React.createElement('h5', null, 'Buy & Sell'),
          React.createElement('ul', null,
            React.createElement('li', null,
              React.createElement('a', { className: 'sf-chip-row', href: '/concierge' },
                React.createElement('span', null, 'Concierge'),
                React.createElement('span', { className: 'sf-chip sf-chip-price' }, '$199')
              )
            ),
            React.createElement('li', null, React.createElement('a', { href: '/field-guide' }, 'The Field Guide')),
            React.createElement('li', null, React.createElement('a', { href: '/find-yours' }, 'Find Yours quiz')),
            React.createElement('li', null, React.createElement('a', { href: '/list' }, 'List a home')),
            React.createElement('li', null, React.createElement('a', { href: '/sell' }, 'Sell your home')),
          ),
          React.createElement('h5', { className: 'mt' }, 'Partners'),
          React.createElement('ul', null,
            React.createElement('li', null, React.createElement('a', { href: '/builders/apply' }, 'Builder Application')),
            React.createElement('li', null, React.createElement('a', { href: '/agents/apply' }, 'Agent Referrals')),
            React.createElement('li', { className: 'is-muted' },
              React.createElement('span', null, 'Logistics Partners'),
              React.createElement('span', { className: 'sf-mono' }, '— Coming 2027')
            ),
          )
        ),

        // The Perch + Company
        React.createElement('div', { className: 'sf-col' },
          React.createElement('h5', null, 'The Perch'),
          React.createElement('ul', null,
            React.createElement('li', null, React.createElement('a', { href: 'https://theperch.ownperch.com/', rel: 'noopener' }, 'Newsletter')),
            React.createElement('li', { className: 'is-muted' },
              React.createElement('span', null, 'ROOST'),
              React.createElement('span', { className: 'sf-mono' }, '— Q1 2027')
            ),
            React.createElement('li', { className: 'is-muted' },
              React.createElement('span', null, 'Chapter Dinners'),
              React.createElement('span', { className: 'sf-mono' }, '— Coming soon')
            ),
          ),
          React.createElement('h5', { className: 'mt' }, 'Company'),
          React.createElement('ul', null,
            React.createElement('li', null, React.createElement('a', { href: '/about' }, 'About')),
            React.createElement('li', null, React.createElement('a', { href: '/contact' }, 'Contact')),
          )
        ),
      ),

      React.createElement('div', { className: 'sf-bottom' },
        React.createElement('p', null, '© 2026 PERCH, Inc. · Atlanta, Georgia · All rights reserved.'),
        React.createElement('div', { className: 'sf-legal' },
          React.createElement('a', { href: '/privacy' }, 'Privacy'),
          React.createElement('a', { href: '/terms' }, 'Terms')
        ),
        React.createElement('div', { className: 'sf-social' },
          React.createElement('a', { href: 'https://linkedin.com/company/own-perch', 'aria-label': 'LinkedIn', rel: 'noopener' },
            React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
              React.createElement('path', { d: 'M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 18.5v-8.68H5.67v8.68h2.67zM7 8.66a1.55 1.55 0 1 0 0-3.1 1.55 1.55 0 0 0 0 3.1zm11.5 9.84v-4.75c0-2.55-1.36-3.74-3.18-3.74a2.75 2.75 0 0 0-2.5 1.37h-.04V9.82H10.2v8.68h2.66v-4.3c0-1.13.22-2.23 1.62-2.23 1.38 0 1.4 1.29 1.4 2.31v4.22h2.62z' })
            )
          ),
          React.createElement('a', { href: 'https://instagram.com/ownperch', 'aria-label': 'Instagram', rel: 'noopener' },
            React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, 'aria-hidden': true },
              React.createElement('rect', { x: 3, y: 3, width: 18, height: 18, rx: 5 }),
              React.createElement('circle', { cx: 12, cy: 12, r: 4 }),
              React.createElement('circle', { cx: 17.5, cy: 6.5, r: 1, fill: 'currentColor', stroke: 'none' })
            )
          ),
          React.createElement('a', { href: 'https://youtube.com/@ownperch', 'aria-label': 'YouTube', rel: 'noopener' },
            React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
              React.createElement('path', { d: 'M23 7.2s-.22-1.55-.9-2.24c-.86-.9-1.83-.9-2.28-.95C16.65 3.75 12 3.75 12 3.75s-4.65 0-7.82.26c-.44.05-1.42.05-2.28.95C1.22 5.65 1 7.2 1 7.2S.75 9.02.75 10.84v1.7c0 1.82.25 3.64.25 3.64s.22 1.55.9 2.24c.86.9 1.99.87 2.5.97 1.81.17 7.6.22 7.6.22s4.65-.01 7.82-.27c.44-.05 1.42-.05 2.28-.95.68-.69.9-2.24.9-2.24s.25-1.82.25-3.64v-1.7c0-1.82-.25-3.64-.25-3.64zM9.75 14.75v-6l6 3-6 3z' })
            )
          ),
          React.createElement('a', { href: 'https://x.com/ownperch', 'aria-label': 'X', rel: 'noopener' },
            React.createElement('svg', { width: 17, height: 17, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
              React.createElement('path', { d: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z' })
            )
          ),
        )
      )
    )
  );
}


Object.assign(window, { SiteHeader, SiteFooter });