FAQ Section

import { FaqSection } from "@/components/ui/faq-section" // Adjust path as needed

// Data for the FAQ
const faqItems = [
  {
    value: "item-1",
    question: "How exactly do you turn carbon into fat?",
    answer: (
      <>
        Life on Earth is carbon-based, meaning both we and the food we eat are
        made of carbon. At Savor, we use carbon in its simplest forms— gases
        like carbon dioxide or methane. These gases are transformed using heat
        and pressure into carbon chains, which are then turned into fatty acids
        (the building blocks of fats and oils) and eventually into fats.
        <br />
        <br />
        By starting directly with carbon gases, we bypass the lengthy, natural
        process which requires carbon to be captured by plants, for animals to
        eat those plants and for humans to then harvest, transform and refine
        them into fats. All of this uses huge amounts of land and water, requires
        an extensive supply chain, and releases substantial amounts of
        greenhouse gases in the process.
      </>
    ),
  },
  {
    value: "item-2",
    question: "Is your fat real fat?",
    answer:
      "Yes. Our fats are molecularly identical to conventional fats. They have the same chemical structure, properties, and nutritional value. The only difference is our sustainable, carbon-negative production method.",
  },
  {
    value: "item-3",
    question: "How is your fat different from conventional fat?",
    answer:
      "Functionally and nutritionally, it's not. The key difference is in its origin. Conventional fats come from agriculture (plants or animals), while our fat is created directly from carbon gases, resulting in a significantly lower environmental footprint.",
  },
  {
    value: "item-4",
    question: "Are your fats processed by the body the same way as conventional fats?",
    answer:
      "Absolutely. Since our fats are chemically identical to traditional fats, your body recognizes and processes them in exactly the same way.",
  },
  {
    value: "item-5",
    question: "What kinds of fats can you produce?",
    answer:
      "Our technology is a platform. We can create a wide variety of fats and oils, from solid fats perfect for baking (like a butter or shortening) to liquid oils for cooking and dressings (like olive or sunflower oil). We can customize the fatty acid profile to meet specific nutritional or functional needs.",
  },
]

/**
 * A demo showcasing the FaqSection component.
 */
export default function FaqSectionDemo() {
  return (
    <div className="w-full bg-background text-foreground py-12 md:py-24 px-4">
      <div className="flex justify-center">
        <FaqSection
          // The component is responsive, but we can set a max-width in the demo
          className="max-w-3xl"
          // We pass the title as a styled React node for full control
          title={
            <h2
              className="font-serif text-5xl md:text-6xl font-medium text-center"
              style={{ letterSpacing: "0.01em" }} // Matches the image's wide spacing
            >
              FAQ
            </h2>
          }
          // Pass the data array
          items={faqItems}
          // Pass props to the underlying accordion
          accordionProps={{
            type: "single",
            collapsible: true,
            defaultValue: "item-1", // Open the first item by default
          }}
        />
      </div>
    </div>
  )
}