// faq.jsx — full FAQ accordion by category

const { useState: useStateF } = React;

function FAQ({ setRoute }) {
  const [category, setCategory] = useStateF("All");

  const categories = [
    {
      cat: "Ordering",
      items: [
        { q: "How long does an animation take?",
          a: "Two to five days from the moment your brief is locked in. Starter is five days, Standard is four, Pro is two. If you need it faster, add rush delivery — 24 hours, +$50." },
        { q: "Can I see the work in progress?",
          a: "Yes. You'll see the first cut after about 60–70% of the timeline, with time to send notes before final delivery. The progress tracker on your order page updates live." },
        { q: "What file formats do I get?",
          a: "MP4 at 1080p in every package. Standard and Pro also get a transparent MOV (with alpha channel) so you can paste your logo over video. The .aep source file is a $50 add-on." },
        { q: "Can I order more than one logo?",
          a: "Of course. Each is a separate order — but if you're commissioning three or more, send me a note and I'll bundle them at a discount." },
      ],
    },
    {
      cat: "Process",
      items: [
        { q: "Do you use templates?",
          a: "Never. Every frame is keyed by hand in After Effects. If you see something on a marketplace template site, you're not getting it from me. That's the whole point of Visimatic." },
        { q: "Do you use AI?",
          a: "For brainstorming and reference moodboards, sometimes. For the animation itself — no. AI generators don't yet understand brand-specific timing the way a person does, so they're not part of my pipeline." },
        { q: "Do I need to send you a vector logo?",
          a: "It's the best starting point — SVG, AI, EPS or PDF. If you only have a PNG, I'll redraw it as vectors for $30 (the 'vectorise' add-on)." },
        { q: "What if my brand doesn't have a clear style yet?",
          a: "Pick 'Leave it to you' on the order form and I'll send back two directions based on your sector and aesthetic references. We refine from there." },
      ],
    },
    {
      cat: "Pricing & payment",
      items: [
        { q: "Is the price really one-off?",
          a: "Yes. Pay once, keep the files, no subscription. No 'licensing per platform' nonsense — you own the animation and can use it anywhere." },
        { q: "What does Stripe charge?",
          a: "Nothing extra to you. Stripe takes their cut from my side. You see one number on the order summary and that's exactly what gets charged." },
        { q: "Do you charge in USD?",
          a: "Yes, but Stripe converts at checkout, so you can pay in your local currency. The total on your card will closely match the USD total." },
        { q: "Is the deposit refundable?",
          a: "Yes. Within seven days of payment, if you're not happy with the first cut, you get a full refund — no questions asked, no clawback of work in progress." },
      ],
    },
    {
      cat: "After delivery",
      items: [
        { q: "Do I get commercial rights?",
          a: "Every package includes full commercial rights — broadcast, social, paid ads, web, anything. The only thing you can't do is resell the animation itself." },
        { q: "Can I get edits later?",
          a: "Within the project, you get one (Starter, Standard) or two (Pro) revision rounds. After delivery, edits are billed at $60/hour with a one-hour minimum." },
        { q: "What if my brand changes colours next year?",
          a: "If you commissioned the source file (.aep add-on), your team can recolour it themselves. Otherwise, recolouring runs around $60 — half an hour of work." },
        { q: "Can I credit you?",
          a: "I'd love it — 'animated by Visimatic' anywhere on your site or socials is gratitude enough. Not required, just appreciated." },
      ],
    },
  ];

  const visible = category === "All"
    ? categories
    : categories.filter(c => c.cat === category);

  const total = categories.reduce((s, c) => s + c.items.length, 0);

  return (
    <main style={{ paddingTop: 88 }}>
      {/* ─── header ─── */}
      <section style={{ padding: "60px 0 var(--d-block)" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  Frequently asked</div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "1.5fr 1fr",
            gap: 64, alignItems: "flex-end",
            marginBottom: 56,
          }}>
            <h1 style={{ fontSize: "clamp(56px, 7.4vw, 136px)" }}>
              <span style={{ color: "var(--ink)" }}>Sixteen </span>
              <span className="serif spectrum">answers.</span>
              <br/>
              <span className="serif" style={{ color: "var(--ink-2)" }}>One DM away</span>
              <span style={{ color: "var(--ink)" }}> from more.</span>
            </h1>
            <p style={{
              color: "var(--ink-2)", fontSize: 19, lineHeight: 1.5,
              margin: 0, maxWidth: 420,
            }}>
              Most of what people ask, organised by category. Can't find what you need?
              The contact form is two clicks away.
            </p>
          </div>

          {/* category chips */}
          <div style={{
            display: "flex", gap: 8, flexWrap: "wrap",
            padding: "16px 0",
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
          }}>
            {[{ cat: "All", count: total }, ...categories.map(c => ({ cat: c.cat, count: c.items.length }))].map(c => {
              const active = category === c.cat;
              return (
                <button
                  key={c.cat}
                  onClick={() => setCategory(c.cat)}
                  style={{
                    padding: "8px 16px", borderRadius: 999,
                    background: active ? "var(--ink)" : "transparent",
                    color: active ? "var(--void)" : "var(--ink-2)",
                    border: "1px solid",
                    borderColor: active ? "var(--ink)" : "var(--line-2)",
                    fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500,
                    cursor: "pointer",
                    transition: "background 200ms, color 200ms",
                  }}
                >
                  {c.cat}
                  <span style={{
                    marginLeft: 8,
                    color: active ? "rgba(0,0,0,0.4)" : "var(--ink-4)",
                    fontFamily: "var(--font-mono)", fontSize: 11,
                  }}>
                    {c.count}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* ─── content ─── */}
      <section style={{ padding: "0 0 var(--d-block)" }}>
        <div className="wrap-wide">
          {visible.map((c, idx) => (
            <Reveal key={c.cat} delay={idx * 80}>
              <div style={{ marginBottom: 64 }}>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: "260px 1fr",
                  gap: 32, alignItems: "flex-start",
                  marginBottom: 8,
                }}>
                  <div style={{ position: "sticky", top: 110 }}>
                    <div className="mono" style={{
                      fontSize: 11, letterSpacing: "0.18em", color: "var(--p-cyan)",
                      marginBottom: 8,
                    }}>
                      {String(idx + 1).padStart(2, "0")} —
                    </div>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: 36,
                      fontWeight: 500, letterSpacing: "-0.03em",
                    }}>
                      {c.cat}
                    </div>
                  </div>
                  <div>
                    <Accordion items={c.items} />
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ─── still curious? ─── */}
      <section style={{ padding: "0 0 var(--d-section)" }}>
        <div className="wrap-wide">
          <Reveal>
            <div className="glass" style={{
              padding: "56px 48px",
              borderRadius: "var(--radius-lg)",
              display: "grid",
              gridTemplateColumns: "1fr auto",
              gap: 32, alignItems: "center",
            }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>—  Still curious?</div>
                <h2 style={{ fontSize: "clamp(36px, 4.4vw, 56px)", marginBottom: 12 }}>
                  Easier to <span className="serif">just ask.</span>
                </h2>
                <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.5, margin: 0, maxWidth: 540 }}>
                  Replies within 24 hours. Often within the hour, depending on time zones.
                </p>
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button onClick={() => setRoute("contact")} className="btn btn-ghost" style={{ fontSize: 15 }}>
                  Book a call
                </button>
                <button onClick={() => setRoute("contact")} className="btn btn-primary" style={{ fontSize: 15 }}>
                  Send a message <span className="arr">→</span>
                </button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { FAQ });