/* eslint-disable */
const FAQ_ITEMS = [
  {
    q: 'Was passiert nach den 12 Monaten?',
    a: [
      'Nach den ersten zwölf Monaten läuft das tägliche KI-Handwerk in eurem Team. Eure Champions halten das Wissen lebendig, die Prozesse sind verankert.',
      'Aber der Cycle ist kein Projekt mit Enddatum. Die Technologie entwickelt sich rasant — und ehrlicherweise ist niemand schnell genug, um nebenbei am Puls zu bleiben. Deshalb begleiten wir die meisten Kunden danach in leichterer Cadence weiter: regelmässige Updates, neue Use Cases, gezielte Sprints, wenn ein Sprung der Technologie sich öffnet. Ihr behaltet das Tagesgeschäft. Wir halten den Vorsprung.',
    ],
  },
  {
    q: 'Warum endet der Cycle nicht?',
    a: [
      'Weil KI nicht stillsteht. Was heute State of the Art ist, ist in einem halben Jahr Standard. Wer nach zwölf Monaten Aufbau aufhört, fängt in achtzehn Monaten wieder bei null an.',
      'Wir glauben nicht an «Selbstläufer». Wir glauben an einen Cycle, der sich dreht — schnell, leicht, im Takt der Technologie. Eure Leute machen das Handwerk. Wir halten den Kurs.',
    ],
  },
  {
    q: 'Können wir den AI-Cycle pausieren oder vorzeitig beenden?',
    a: [
      'Wir setzen auf Partnerschaft, nicht auf Knebelverträge. Sollte sich eure Situation ändern, finden wir gemeinsam eine Lösung — pausieren, anpassen, neu skalieren.',
      'Wir wollen, dass die Zusammenarbeit für euch funktioniert. Sonst funktioniert sie für uns auch nicht.',
    ],
  },
  {
    q: 'Für wen ist der AI-Cycle gemacht?',
    a: [
      'Schweizer KMUs, die KI ernst meinen. Geschäftsleitungen, die nicht bei Buzzwords stehen bleiben wollen, sondern Wirkung im Tagesgeschäft suchen. Limitiert auf 10 Mandate pro Jahr — weil Handwerk Aufmerksamkeit braucht.',
    ],
  },
  {
    q: 'Was kostet der erste Zyklus?',
    a: [
      'Investitionen sind massgeschneidert auf Umfang, Anzahl Champions und Use Cases. Wir besprechen Budget und Erwartungen in der ersten Stunde — transparent, ohne Zwischenrunden. Wenn es nicht passt, sagen wir das.',
    ],
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: 'var(--s-9) var(--gutter)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'var(--s-8)',
        alignItems: 'start',
      }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-6)',
          }}>
            <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
            <span>Häufige Fragen</span>
          </div>
          <h2 style={{
            fontSize: 'clamp(36px, 4vw, 64px)', lineHeight: 1.04,
            letterSpacing: '-0.022em', fontWeight: 600,
            maxWidth: '12ch', margin: 0,
          }}>
            Was ihr <span style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontWeight: 400, color: 'var(--ocher)',
            }}>fragt,</span> bevor ihr bucht.
          </h2>
        </div>

        <div style={{ borderTop: '1px solid var(--rule)' }}>
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={item.q} style={{
                borderBottom: '1px solid var(--rule)',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    background: 'transparent', border: 0,
                    padding: 'var(--s-5) 0',
                    cursor: 'pointer',
                    display: 'grid', gridTemplateColumns: '32px 1fr 32px', gap: 'var(--s-4)',
                    alignItems: 'baseline',
                    color: 'var(--ink)',
                    fontFamily: 'var(--font-sans)',
                  }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em',
                    color: 'var(--fg-3)',
                  }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{
                    fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em',
                    lineHeight: 1.25, color: isOpen ? 'var(--ocher)' : 'var(--ink)',
                    transition: 'color .2s cubic-bezier(.2,0,0,1)',
                  }}>{item.q}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 20, color: 'var(--ink-3)',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform .2s cubic-bezier(.2,0,0,1)',
                    display: 'inline-block', textAlign: 'right',
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 0 var(--s-6) calc(32px + var(--s-4))',
                    display: 'flex', flexDirection: 'column', gap: 'var(--s-4)',
                  }}>
                    {item.a.map((p, j) => (
                      <p key={j} style={{
                        fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)',
                        margin: 0, maxWidth: '56ch',
                      }}>{p}</p>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.FAQ = FAQ;