From cf5f7b8e634e28bfa5bf3de4d4e2b6b1108ace1c Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 14 Jul 2026 19:12:52 +0000
Subject: [PATCH] Deploy

---
 .../sections/KnowBeforeYouGoSection.tsx       | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/sections/KnowBeforeYouGoSection.tsx

diff --git a/src/components/sections/KnowBeforeYouGoSection.tsx b/src/components/sections/KnowBeforeYouGoSection.tsx
new file mode 100644
index 0000000..7c3965f
--- /dev/null
+++ b/src/components/sections/KnowBeforeYouGoSection.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { useState } from 'react'
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { ChevronDown, ChevronUp, Info } from 'lucide-react'
+
+export default function KnowBeforeYouGoSection() {
+  const { items, loading } = useEmDashContent('policies')
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16 bg-[#f7f9f4]">
+        <div className="w-8 h-8 rounded-full border-2 border-[#6b8e23] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const toggle = (index: number) => {
+    setOpenIndex(prev => (prev === index ? null : index))
+  }
+
+  return (
+    <section id="know-before-you-go" data-vula-section="knowbeforeyougo" data-vula-cms="policies" className="py-20 bg-[#f5f5dc]">
+      <div className="max-w-4xl mx-auto px-6">
+        <h2 className="text-3xl font-bold text-[#1b210d] mb-8 text-center">Know before you go</h2>
+        <div className="space-y-3">
+          {items.map((item, idx) => {
+            const d = item.data as { title?: string; description?: string; body?: string }
+            const content = d.description || d.body || ''
+            const isOpen = openIndex === idx
+
+            return (
+              <div key={item.id} className="bg-white rounded-xl border border-[#dee2d4] overflow-hidden shadow-sm">
+                <button
+                  onClick={() => toggle(idx)}
+                  className="w-full flex items-center justify-between p-4 text-left text-[#1b210d] font-medium hover:bg-[#f5f5dc] transition-colors"
+                >
+                  <span className="flex items-center gap-2">
+                    <Info className="w-4 h-4 text-[#6b8e23]" />
+                    {d.title || 'Policy'}
+                  </span>
+                  {isOpen ? (
+                    <ChevronUp className="w-4 h-4 text-[#8b5a3c]" />
+                  ) : (
+                    <ChevronDown className="w-4 h-4 text-[#8b5a3c]" />
+                  )}
+                </button>
+                {isOpen && (
+                  <div className="px-4 pb-4 text-sm text-[#1b210d]/80 border-t border-[#dee2d4] pt-3">
+                    {content || 'Details coming soon.'}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}