/* global React, Common */
const { Eyebrow, SectionTitle } = Common;
const { useState: useFqS } = React;

function FAQSection() {
  const items = [
    {
      q: "Is Dimmy really free?",
      a: "Yes, if you compile it yourself. The whole code is public on GitHub and builds on macOS, Windows and Linux. Pro and Lifetime sell you the convenience: a signed pre-built binary, one-click in-app updates, early access before public releases, and a human on email. Same software, different distribution.",
    },
    {
      q: "How is it so fast offline?",
      a: "We ship Whisper Large v3 Turbo, quantized to 78 MB, running on ggml. On an M1 it's ~5× realtime; on a 2018 ThinkPad it's still under 500ms for a typical sentence.",
    },
    {
      q: "What about my privacy?",
      a: "Default mode is fully offline. Your audio never leaves your machine and is never written to disk. If you connect a cloud provider (Groq, OpenAI, Deepgram, Gemini), it's opt-in per provider, and your API key is encrypted in the OS keychain with AES-256-GCM.",
    },
    {
      q: "Why is it so fast and so small?",
      a: "Because we wrote it native, one platform at a time, with a shared Rust core for the parts that matter. A 12 MB binary boots in 80ms and runs smoothly on a 2014 laptop. The harder path was the right path.",
    },
    {
      q: "Will there be an iOS / Android version?",
      a: "Mobile is the most-requested feature by a mile. We'll ship the platform that crosses 1,000 ★ on GitHub first. Vote up above.",
    },
    {
      q: "What languages does it support?",
      a: "All 99 that Whisper supports. It auto-detects, and you can mix mid-sentence: English and Italian, English and Mandarin, whatever you actually speak.",
    },
    {
      q: "Can I use it for coding / dictating to my IDE?",
      a: "Yes. The 'Prompt' style structures speech as an LLM prompt; the 'Comprehensible' and 'Professional' styles work great for commit messages and doc strings. People mostly use it for Slack, email, and ChatGPT though.",
    },
    {
      q: "Why is it called Dimmy?",
      a: "Short for 'dimmi', Italian for 'tell me'. We're Italian. We thought it was cute. We're aware that's a bias.",
    },
  ];
  const [open, setOpen] = useFqS(0);
  return (
    <section style={{ padding: "120px 32px" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={13}>frequently asked</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            Yes, but really, <span className="grad-text">how?</span>
          </SectionTitle>
        </div>

        <div className="reveal" style={{ marginTop: 48 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: "1px solid var(--line)",
                borderBottom: i === items.length - 1 ? "1px solid var(--line)" : "0",
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: "100%", textAlign: "left",
                  padding: "20px 0", background: "transparent", border: 0,
                  color: "var(--fg)",
                  fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500,
                  letterSpacing: "-0.005em",
                  display: "flex", alignItems: "center", gap: 16,
                  cursor: "pointer",
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 12,
                    color: "var(--fg-faint)", minWidth: 24,
                  }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ flex: 1 }}>{it.q}</span>
                  <span style={{
                    width: 24, height: 24, borderRadius: 99,
                    border: "1px solid rgba(255,255,255,0.15)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontSize: 14, color: "var(--fg-muted)",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                    transition: "transform 250ms cubic-bezier(0.2,0.8,0.2,1)",
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 200 : 0, overflow: "hidden",
                  transition: "max-height 350ms cubic-bezier(0.2,0.8,0.2,1), opacity 250ms",
                  opacity: isOpen ? 1 : 0,
                }}>
                  <div style={{
                    padding: "0 0 24px 40px", fontSize: 15, lineHeight: 1.6,
                    color: "var(--fg-muted)", maxWidth: 720, textWrap: "pretty",
                  }}>{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.FAQSection = FAQSection;