Footer

import { Button } from '@fairgarden-private/design/components/Button'
import { Footer, FooterBlock } from '@fairgarden-private/design/components/Footer'
import { sitemap } from './footerSitemap'
import styles from './guide.module.css'

/** A 20 px outline social mark, drawn custom in currentColor. */
function Mark() {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={styles.mark}>
      <rect x="2.75" y="2.75" width="14.5" height="14.5" rx="4" />
      <circle cx="10" cy="10" r="3.5" />
    </svg>
  )
}

/** The field-guide footer on the night band: blocks, the sitemap from the navigation data, contact, legal and colophon. */
export function FooterGuide() {
  return (
    <div className={styles.frame}>
      <Footer
        brand={
          <a href="/" className={styles.logo}>
            FairGarden
          </a>
        }
        blocks={
          <>
            <FooterBlock
              icon="help"
              heading="Talk to a Land Trust"
              action={
                <Button variant="outline" render={<a href="/find" />} nativeButton={false}>
                  Find One Near You
                </Button>
              }
            >
              <p>Local experts can walk your land with you and explain your options.</p>
            </FooterBlock>
            <FooterBlock
              icon="download"
              heading="Get the Guide"
              action={
                <Button variant="outline" render={<a href="/guide" />} nativeButton={false}>
                  Download the Guide
                </Button>
              }
            >
              <p>A plain-language guide to easements, taxes and stewardship.</p>
            </FooterBlock>
            <FooterBlock
              icon="add"
              heading="Support the Work"
              action={
                <Button variant="solid" render={<a href="/donate" />} nativeButton={false}>
                  Donate
                </Button>
              }
            >
              <p>Every gift protects land that can never be made again.</p>
            </FooterBlock>
          </>
        }
        sitemap={sitemap}
        address={
          <>
            1250 H Street NW, Suite 600
            <br />
            Washington, DC 20005
          </>
        }
        contact={[
          { value: 'info@example.org', href: 'mailto:info@example.org' },
          { value: '202 555 0100', href: 'tel:+12025550100' },
        ]}
        social={[
          { label: 'Instagram', href: 'https://instagram.com/example', icon: <Mark /> },
          { label: 'Newsletter', href: '/newsletter' },
        ]}
        legal={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Accessibility', href: '/accessibility' },
          { label: 'Non-Discrimination', href: '/non-discrimination' },
        ]}
        copyright="© 2026 FairGarden"
        colophon="Set in Fraunces, Source Serif 4, Figtree and IBM Plex Mono. Last updated 22 Sept 2026."
        organization="FairGarden"
        backToTop={{ href: '#top' }}
      />
    </div>
  )
}

import { Footer } from '@fairgarden-private/design/components/Footer'
import { Newsletter } from '@fairgarden-private/design/components/Newsletter'
import { largeSitemap, sitemap } from '../guide/footerSitemap'
import styles from './column.module.css'

/**
 * The newsletter column (sitemap 1–7, newsletter 8–12 from 1024 px) with a
 * sitemap over 24 links, which collapses into an Accordion on phones; then
 * the ruled grid and the minimal footer on page grounds.
 */
export function FooterColumn() {
  return (
    <div className={styles.stack}>
      <Footer
        newsletterColumn
        brand={<span className={styles.logo}>FairGarden</span>}
        sitemap={largeSitemap}
        newsletter={
          <Newsletter
            heading="Get the Latest Conservation News"
            pitch="Stories from the land, once a month."
            printUrl="example.org/newsletter"
          />
        }
        newsletterUrl="example.org/newsletter"
        legal={[{ label: 'Privacy', href: '/privacy' }]}
        copyright="© 2026 FairGarden"
        signoff
        wordmark="FairGarden"
      />
      <Footer
        kind="ruled"
        sitemap={sitemap}
        contact={[
          { label: 'Email', value: 'hello@example.org', href: 'mailto:hello@example.org' },
          { label: 'Phone', value: '202 555 0100', href: 'tel:+12025550100' },
        ]}
        copyright="© 2026 FairGarden"
      />
      <Footer
        kind="minimal"
        preset="white"
        brand={<span className={styles.logo}>FairGarden</span>}
        sitemap={sitemap}
        legal={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Terms', href: '/terms' },
        ]}
        copyright="© 2026 FairGarden"
        colophon="Version 0.1.0."
      />
    </div>
  )
}

'use client'

import * as React from 'react'
import { Button } from '@fairgarden-private/design/components/Button'
import { Footer } from '@fairgarden-private/design/components/Footer'
import { NavDrawer, NavDrawerFooter, NavDrawerLink } from '@fairgarden-private/design/components/NavDrawer'
import { NavigationBar } from '@fairgarden-private/design/components/NavigationBar'
import { NavigationMenu, NavigationMenuSections } from '@fairgarden-private/design/components/NavigationMenu'
import { navigation } from './navigation'
import styles from './navigation.module.css'

/**
 * One navigation object feeds the header's menu (from 1024 px), the drawer
 * (below it; narrow the window) and the footer sitemap, so the footer
 * mirrors the mega panels [D187]. The page sits in What We Do › Our programs.
 */
export function FooterNavigation() {
  return (
    <div className={styles.page}>
      <NavigationBar
        logo={<span className={styles.logo}>FairGarden</span>}
        logoLabel="FairGarden home"
        currentPath="/what-we-do/our-programs"
        skipHref="#navigation-demo-content"
        action={
          <Button variant="solid" size="sm" nativeButton={false} render={<a href="/donate" />}>
            Donate
          </Button>
        }
        drawer={
          <NavDrawer
            sections={navigation}
            footer={
              <NavDrawerFooter
                action={
                  <Button variant="solid" size="lg" nativeButton={false} render={<a href="/donate" />}>
                    Donate
                  </Button>
                }
              >
                <NavDrawerLink href="/about">About</NavDrawerLink>
                <NavDrawerLink href="/accessibility">Accessibility settings</NavDrawerLink>
              </NavDrawerFooter>
            }
          />
        }
      >
        <NavigationMenu>
          <NavigationMenuSections sections={navigation} />
        </NavigationMenu>
      </NavigationBar>
      <div id="navigation-demo-content" className={styles.content} tabIndex={-1}>
        Page content starts here.
      </div>
      <Footer
        brand={
          <a href="/" className={styles.footerLogo}>
            FairGarden
          </a>
        }
        sitemap={navigation}
        legal={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Accessibility', href: '/accessibility' },
        ]}
        copyright="© 2026 FairGarden"
        organization="FairGarden"
        backToTop={{ href: '#navigation-demo-content' }}
      />
    </div>
  )
}