// FAQSection.jsx — よくある質問（セクション＋フルページ）
const faqData = [
  { cat: '予約', q: '予約は必要ですか？', a: '原則予約制です。空きがある場合のみ当日対応が可能ですが、事前のご予約を強くお勧めします。特に週末・祝日はお早めにどうぞ。' },
  { cat: '予約', q: '予約開始日はいつですか？', a: 'プレオープン（2027年初夏予定）の予約開始日は、LINEとInstagramでお知らせします。まずはLINE友達登録をお願いします。' },
  { cat: '体験', q: 'その場で食べ放題ですか？', a: 'プラン内容により異なります。詳細は正式オープン前にご案内します。持ち帰り放題のプランはございません。' },
  { cat: '体験', q: '持ち帰りはできますか？', a: '量り売り・パック販売を予定しています。持ち帰り放題のプランはございません。' },
  { cat: '子連れ', q: '子ども連れでも大丈夫ですか？', a: '段差の少ない通路設計、日よけ付き休憩スペース、ベビーカー対応の動線を整備しています。小さなお子さまも安心してお越しください。' },
  { cat: '服装', q: '服装はどうすれば良いですか？', a: '帽子・タオル・歩きやすい靴をお持ちください。汚れても良い服装と、虫対策（長袖や虫よけスプレー）をお勧めします。ヒールやサンダルはご遠慮ください。' },
  { cat: '天気', q: '雨の日でも開催されますか？', a: '小雨の場合は決行します。荒天・警報発令時は中止となる場合があります。当日の状況はLINEまたはInstagramでご確認ください。カッパの持参をお勧めします。' },
  { cat: '駐車場', q: '駐車場はありますか？', a: '8台分の無料駐車場を整備予定です（オープン時に確定）。満車の場合の対応については、アクセスページをご確認ください。' },
  { cat: 'その他', q: 'ペットの同伴はできますか？', a: '衛生・安全面から、ペットの同伴はご遠慮いただく予定です。詳細はオープン前にご案内します。' },
  { cat: 'その他', q: '支払い方法は何が使えますか？', a: '現金・PayPayを予定しています。クレジットカードの取り扱いについては、正式オープン前にご案内します。' },
];

const FAQSection = ({ limit = 6 }) => {
  const [open, setOpen] = React.useState(null);
  const items = limit ? faqData.slice(0, limit) : faqData;

  return (
    <section style={{ background: '#FAF6F0', padding: '80px 24px' }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '48px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '12px' }}>FAQ</div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(24px,4vw,36px)', fontWeight: 500, color: '#0F2240' }}>よくあるご質問</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          {items.map((item, i) => (
            <div key={i} style={{ background: 'white', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 1px 4px rgba(18,42,82,0.06)' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '18px 20px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', gap: '12px',
              }}>
                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                  <span style={{ flexShrink: 0, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '10px', fontWeight: 500, background: '#E5ECF5', color: '#122A52', padding: '2px 8px', borderRadius: '4px' }}>{item.cat}</span>
                  <span style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#1C1410', lineHeight: 1.5 }}>{item.q}</span>
                </div>
                <span style={{ flexShrink: 0, fontSize: '18px', color: '#5B7AAA', fontWeight: 300, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 0.2s' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 20px 18px 20px', paddingLeft: '72px' }}>
                  <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9 }}>{item.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQPage = ({ onNavigate }) => (
  <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
    <div style={{ background: 'linear-gradient(135deg, #1A3A6E, #3E5C8A)', padding: '64px 24px', textAlign: 'center' }}>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#B5C4DB', marginBottom: '14px' }}>FAQ</div>
      <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '40px', fontWeight: 500, color: '#FAF6F0' }}>よくあるご質問</h1>
    </div>
    <FAQSection limit={0} />
    {/* Cautions */}
    <div style={{ background: '#F5F8FC', padding: '48px 24px' }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '16px' }}>Notes</div>
        <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '22px', fontWeight: 500, color: '#0F2240', marginBottom: '20px' }}>ご来園時のお願い</h2>
        <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px', listStyle: 'none' }}>
          {[
            '園内は全面禁煙です。',
            'ペットの同伴はご遠慮ください（予定）。',
            '日傘・ヒール・鋭利なサンダルでの来園はご遠慮ください。',
            '熱中症対策として、帽子・水分補給をお忘れなく。',
            '果実や枝を傷める採り方はご遠慮ください。',
            '遅刻・キャンセルの際は事前にご連絡をお願いします。',
          ].map(note => (
            <li key={note} style={{ display: 'flex', gap: '10px', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#1A3A6E', lineHeight: 1.7 }}>
              <span style={{ flexShrink: 0, color: '#5B7AAA' }}>—</span> {note}
            </li>
          ))}
        </ul>
      </div>
    </div>
    <Footer onNavigate={onNavigate} />
  </div>
);

Object.assign(window, { FAQSection, FAQPage });