FAQ

import {
  FAQ,
  FAQContact,
  FAQHeader,
  FAQIntro,
  FAQItem,
  FAQList,
  FAQTitle,
} from '@fairgarden-private/design/components/FAQ'
import { Link } from '@fairgarden-private/design/components/Link'
import styles from './variants.module.css'

/** The ruled FAQ (default) with header, intro and contact line, and the barred form. */
export function FAQVariants() {
  return (
    <div className={styles.stack}>
      <FAQ>
        <FAQHeader>
          <FAQTitle>Visiting the preserves</FAQTitle>
          <FAQIntro>Answers to the questions we hear most at the trailhead.</FAQIntro>
        </FAQHeader>
        <FAQList defaultValue={['dogs']}>
          <FAQItem value="dogs" question="Can I bring my dog?">
            Yes, on a leash no longer than six feet. Please pack out what your dog leaves behind.
          </FAQItem>
          <FAQItem value="fees" question="Is there an entry fee?">
            No. Every FairGarden preserve is free and open from dawn to dusk.
          </FAQItem>
          <FAQItem value="bikes" question="Are bikes allowed on the trails?">
            Only on the gravel service roads, marked with a green post at each junction.
          </FAQItem>
          <FAQItem value="groups" question="Can our school group book a guided walk?">
            Yes. Walks run April to October for groups of up to 30.
          </FAQItem>
        </FAQList>
        <FAQContact>
          Still have a question? <Link href="#contact">Write to the stewardship team</Link>.
        </FAQContact>
      </FAQ>

      <FAQ barred>
        <FAQList defaultValue={['easement']}>
          <FAQItem value="easement" question="What is a conservation easement?">
            A legal agreement that limits development on land while it stays in private hands.
          </FAQItem>
          <FAQItem value="taxes" question="Does an easement change my property taxes?">
            It can lower them. Talk to your assessor before you sign.
          </FAQItem>
          <FAQItem value="sell" question="Can I still sell the land?">
            Yes. The easement travels with the deed to every future owner.
          </FAQItem>
        </FAQList>
      </FAQ>
    </div>
  )
}

import {
  FAQ,
  FAQContact,
  FAQHeader,
  FAQIntro,
  FAQItem,
  FAQList,
  FAQTitle,
} from '@fairgarden-private/design/components/FAQ'
import { Link } from '@fairgarden-private/design/components/Link'
import styles from './color.module.css'

/** `primary` drives rules, questions and glyph; `secondary` only the link underlines in answers. */
export function FAQColor() {
  return (
    <div className={styles.stack}>
      <FAQ primary="slate" secondary="indigo">
        <FAQHeader>
          <FAQTitle>Membership</FAQTitle>
        </FAQHeader>
        <FAQList defaultValue={['renew']}>
          <FAQItem value="renew" question="When does my membership renew?">
            Each spring. <Link href="#renew">Renew online</Link> any time after March 1.
          </FAQItem>
          <FAQItem value="gift" question="Can I give a membership as a gift?">
            Yes, with a printed card mailed to the recipient.
          </FAQItem>
        </FAQList>
      </FAQ>
    </div>
  )
}

import {
  FAQ,
  FAQContact,
  FAQHeader,
  FAQIntro,
  FAQItem,
  FAQList,
  FAQTitle,
} from '@fairgarden-private/design/components/FAQ'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** Light and deep grounds both hold an FAQ; the rules and glyph re-resolve per ground. */
export function FAQGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <p className={styles.name}>{preset}</p>
          <FAQ>
            <FAQList defaultValue={['open']}>
              <FAQItem value="open" question="Are the trails open in winter?">
                Yes, except after ice storms.
              </FAQItem>
              <FAQItem value="restrooms" question="Are there restrooms?">
                At the north lot, May to October.
              </FAQItem>
            </FAQList>
          </FAQ>
        </PresetGround>
      ))}
    </div>
  )
}