/* Rust Truck — FAQ. A vintage accordion of common questions with
   dashed leaders and a brick chevron. Interactive (expand/collapse),
   bilingual and responsive. */
(function () {
  const { Eyebrow, Button } = window.RustTruckDesignSystem_a832c6;

  function FaqItem({ q, a, open, onToggle }) {
    return (
      <div style={{ borderBottom: '1px dashed var(--paper-400)' }}>
        <button type="button" onClick={onToggle} aria-expanded={open}
          style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, padding: '22px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
          <span style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(18px,2.2vw,23px)', color: open ? 'var(--brick-600)' : 'var(--ink-900)', lineHeight: 1.05, transition: 'color var(--dur-fast) var(--ease-out)' }}>{q}</span>
          <span style={{ flex: 'none', color: 'var(--brick-500)', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
          </span>
        </button>
        <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: 'grid-template-rows var(--dur-base) var(--ease-in-out)' }}>
          <div style={{ overflow: 'hidden' }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0, padding: '0 44px 24px 0', maxWidth: '64ch', textWrap: 'pretty' }}>{a}</p>
          </div>
        </div>
      </div>
    );
  }

  function FaqScreen({ lang, onNavigate }) {
    const el = lang === 'EL';
    const bp = window.useViewport();
    const [open, setOpen] = React.useState(0);
    const wrap = { maxWidth: 'var(--container-md)', margin: '0 auto', padding: bp.mobile ? '0 20px' : '0 32px' };

    const faqs = el ? [
      { q: 'Πού καλύπτετε;', a: 'Έδρα μας το Μπρίστολ και γυρνάμε όλη τη Νοτιοδυτική Αγγλία. Πάμε και πιο μακριά — πες μας τον τόπο και το συνυπολογίζουμε στην προσφορά.' },
      { q: 'Πόσους καλεσμένους εξυπηρετείτε;', a: 'Από μικρές, στενές παρέες μέχρι εκδηλώσεις με 200+ άτομα. Προσαρμόζουμε την ομάδα και το στήσιμο ώστε η ουρά να κινείται.' },
      { q: 'Τι χρειάζεστε στον χώρο;', a: 'Έναν σχετικά επίπεδο χώρο για το φορτηγό. Ιδανικά ρεύμα και νερό κοντά, αλλά μπορούμε να λειτουργήσουμε και αυτόνομα — απλώς πες μας από πριν.' },
      { q: 'Έχετε επιλογές χωρίς αλκοόλ;', a: 'Πάντα. Κάθε λίστα περιλαμβάνει low & no κοκτέιλ, φτιαγμένα με την ίδια φροντίδα όπως τα υπόλοιπα.' },
      { q: 'Πόσο νωρίς να κλείσω;', a: 'Όσο πιο νωρίς γίνεται για περιζήτητες ημερομηνίες. Μόλις λάβουμε το αίτημα, επιβεβαιώνουμε διαθεσιμότητα μέσα σε 48 ώρες.' },
      { q: 'Τι περιλαμβάνεται;', a: 'Το φορτηγό-μπαρ, το πλήρες στήσιμο, πάγος, ποτήρια, γκαρνιτούρες και η ομάδα μας. Εσύ φέρνεις τους καλεσμένους.' },
      { q: 'Χρειάζεται προκαταβολή;', a: 'Όχι για να ζητήσεις προσφορά. Μια προκαταβολή κλειδώνει την ημερομηνία μόλις επιβεβαιωθούν οι λεπτομέρειες.' },
    ] : [
      { q: 'Where do you cover?', a: 'We’re based in Bristol and roll across the South West. We’ll travel further too — tell us the location and we’ll factor it into the quote.' },
      { q: 'How many guests can you serve?', a: 'From small, intimate gatherings to events of 200+. We scale the team and setup so the queue keeps moving.' },
      { q: 'What do you need on site?', a: 'A reasonably flat spot for the truck. Power and water nearby is ideal, but we can run independently — just let us know in advance.' },
      { q: 'Do you do alcohol-free drinks?', a: 'Always. Every list includes low & no cocktails, made with the same care as everything else.' },
      { q: 'How far ahead should I book?', a: 'As early as you can for peak dates. Once we have your enquiry, we confirm availability within 48 hours.' },
      { q: 'What’s included?', a: 'The bar truck, full setup, ice, glassware, garnishes and our team. You just bring the guests.' },
      { q: 'Is there a deposit?', a: 'No deposit to enquire. A deposit secures your date once the details are confirmed.' },
    ];

    return (
      <div style={{ background: 'var(--paper-100)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)' }}>
        {/* header band */}
        <section style={{ background: 'var(--brick-700)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)', color: 'var(--paper-50)', textAlign: 'center' }}>
          <div style={{ ...wrap, padding: bp.mobile ? '52px 20px' : '72px 32px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow align="center" color="var(--amber-400)">{el ? 'Καλό να ξέρεις' : 'Good to know'}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(38px,5.6vw,72px)', lineHeight: 0.9, margin: '16px 0 0' }}>
              {el ? 'Συχνές ερωτήσεις' : 'Questions & answers'}
            </h1>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: bp.mobile ? 26 : 30, color: 'var(--brick-100)', margin: '12px 0 0' }}>
              {el ? 'ό,τι ρωτάνε συνήθως' : 'the things people ask'}
            </p>
          </div>
        </section>

        {/* accordion */}
        <section>
          <div style={{ ...wrap, padding: bp.mobile ? '40px 20px 16px' : '64px 32px 24px' }}>
            {faqs.map((f, i) => (
              <FaqItem key={f.q} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </section>

        {/* still-have-questions CTA */}
        <section>
          <div style={{ ...wrap, padding: bp.mobile ? '24px 20px 72px' : '32px 32px 96px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <p style={{ fontFamily: 'var(--font-label)', fontSize: 'var(--text-2xs)', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 18 }}>
              {el ? 'Δεν βρήκες την απάντηση;' : 'Didn’t find your answer?'}
            </p>
            <Button variant="primary" withArrow onClick={() => onNavigate('book')}>{el ? 'Ρώτησέ μας' : 'Ask us'}</Button>
          </div>
        </section>
      </div>
    );
  }

  window.RTFaqScreen = FaqScreen;
})();
