// FAQ page — common questions about cost, timeline, data, and when AI isn't the answer.

const FAQ = () => {
  const sections = [
    {
      group: 'Getting started',
      items: [
        { q: "How do we know if we even need AI?", a: "You probably need parts of it, not all of it. The AI Opportunity Audit (or the 60-second quiz on the homepage) is designed to find the 2-3 places where AI actually pays off in your business — and to be honest about the places where it doesn't. We've turned down work where the right answer was a clearer process or a better spreadsheet." },
        { q: "What does an engagement actually cost?", a: "Audits start in the low five figures. Build engagements typically range from mid-five to low-six figures depending on scope. We don't publish a price list because honest pricing depends on what you're trying to do — but we'll always quote a fixed number after the first conversation, no surprise hourly billing." },
        { q: "How long until we see results?", a: "Audits: 2 weeks to a written plan. Most builds: 6-10 weeks to something live. We optimize for shipping the smallest useful thing first, then iterating — not 6-month projects with one launch at the end." },
        { q: "Do you only work with companies in Toronto?", a: "We're based in Toronto and most of our clients are in the GTA, but we work remotely with companies anywhere in Canada and the US. The work is the same; we just do more video calls." },
      ],
    },
    {
      group: "When AI isn't the answer",
      items: [
        { q: "Is AI right for every business problem?", a: "No, and we'll tell you when it isn't. Sometimes the answer is a clearer SOP, a one-page dashboard, or just hiring one more person. AI is a tool — a powerful one — but it's not a strategy. Some of our most valuable consulting hours have ended with \"don't build the thing.\"" },
        { q: "When do you recommend NOT using AI?", a: "When the underlying process is broken (AI will scale the chaos), when the data is messy or scarce (garbage in, garbage out), when the task is rare (the ROI doesn't pencil out), or when accuracy needs to be 100% with no human in the loop. In those cases we'd rather lose the engagement than sell you something that won't work." },
        { q: "What if AI changes everything in the next year?", a: "It will, and we plan for that. Everything we build is owned by you, runs on standard infrastructure, and is documented for handover. If a better model or tool comes out next quarter, you can swap it in without rebuilding from scratch." },
      ],
    },
    {
      group: 'Data & trust',
      items: [
        { q: 'Will our data be used to train public AI models?', a: 'No. We work exclusively with API providers (OpenAI, Anthropic, Google) on enterprise tiers that contractually exclude your data from training, or with private models hosted in your own cloud. This is non-negotiable for us, and it\'s in writing in every engagement.' },
        { q: "Where does our data live?", a: "By default, in your existing infrastructure — your cloud account, your databases, your Slack workspace. We avoid creating new data silos. When that's not possible, we'll tell you exactly what's stored where and for how long, in plain language." },
        { q: "What about hallucinations and AI mistakes?", a: "Real concern. Every system we build includes a human-in-the-loop checkpoint for anything that touches a customer, a regulator, or money. We design for the failure modes, not just the happy path." },
      ],
    },
    {
      group: 'Working with us',
      items: [
        { q: "What does 'partnership' actually mean?", a: "We're not a one-and-done agency. We work with a small number of clients deeply — usually staying involved for quarters or years after the initial build, as a thinking partner more than a vendor. We currently accept 2 new partnerships per quarter." },
        { q: "Who actually does the work?", a: "We do. There's no offshore team you've never met. The same people who scope your project build it and train your team. That's why we keep the client list small." },
        { q: "What if our team doesn't have technical people?", a: "Most of our clients don't. The whole point of our Training & Enablement phase is to make sure non-technical teams can run, tweak, and extend what we build. If a tool requires an engineer to maintain, we built the wrong thing." },
        { q: "What happens after the engagement ends?", a: "You own everything — code, configs, documentation, accounts. We can stay on as a quarterly partner, or you can take it in-house. Most clients pick the middle path: we handle major updates, they handle day-to-day." },
      ],
    },
  ];

  const css = `
    .faq-h1 { font-family: 'Instrument Serif', serif; font-size: 124px; line-height: 0.95; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 36px; max-width: 1280px; }
    .faq-h1 em { color: #c8542a; font-style: italic; }

    .faq-body { padding: 32px 56px 0; max-width: 1100px; margin: 0 auto; }
    .faq-group { margin-bottom: 80px; }
    .faq-group-h { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(26,22,18,0.12); display: flex; align-items: center; gap: 14px; }
    .faq-group-h::before { content: ''; width: 28px; height: 1px; background: #c8542a; }

    .faq-item { padding: 32px 0; border-bottom: 1px solid rgba(26,22,18,0.12); cursor: pointer; transition: padding 0.3s; }
    .faq-item:hover { padding-left: 8px; }
    .faq-q { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
    .faq-q-text { font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; color: #1a1612; font-weight: 400; margin: 0; flex: 1; }
    .faq-toggle { font-family: 'Instrument Serif', serif; font-size: 32px; font-style: italic; color: #c8542a; transition: transform 0.3s cubic-bezier(.7,0,.3,1); flex-shrink: 0; line-height: 1; }
    .faq-item.open .faq-toggle { transform: rotate(45deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(.4,0,.2,1), margin-top 0.3s, opacity 0.3s; opacity: 0; }
    .faq-item.open .faq-a { max-height: 600px; margin-top: 18px; opacity: 1; }
    .faq-a p { font-size: 17px; line-height: 1.6; color: #4a3f33; margin: 0; max-width: 820px; }

    .faq-cta { padding: 80px 56px 0; max-width: 1400px; margin: 40px auto 0; }
    .faq-cta-card { background: #ede5d6; border-radius: 18px; padding: 56px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .faq-cta-h { font-family: 'Instrument Serif', serif; font-size: 42px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; }
    .faq-cta-h em { font-style: italic; color: #c8542a; }
    .faq-cta-p { font-size: 16px; line-height: 1.55; color: #4a3f33; margin: 0; }
    .faq-cta-btn { font-size: 15px; padding: 14px 24px; background: #1a1612; color: #f4efe6; border-radius: 999px; transition: transform 0.2s, background 0.2s; justify-self: end; }
    .faq-cta-btn:hover { transform: translateY(-2px); background: #c8542a; }

    @media (max-width: 1024px) {
      .faq-h1 { font-size: 92px; }
      .faq-body { padding: 24px 32px 0; }
      .faq-q-text { font-size: 24px; }
      .faq-cta { padding: 48px 32px 0; }
      .faq-cta-card { padding: 40px 32px; gap: 28px; grid-template-columns: 1fr; }
      .faq-cta-btn { justify-self: start; }
    }
    @media (max-width: 720px) {
      .faq-h1 { font-size: 56px; line-height: 0.96; margin: 0 0 24px; }
      .faq-body { padding: 12px 20px 0; }
      .faq-group { margin-bottom: 56px; }
      .faq-q-text { font-size: 19px; }
      .faq-toggle { font-size: 26px; }
      .faq-a p { font-size: 15px; }
      .faq-item { padding: 24px 0; }
      .faq-cta { padding: 32px 20px 0; }
      .faq-cta-card { padding: 32px 24px; border-radius: 14px; }
      .faq-cta-h { font-size: 28px; }
    }
  `;

  // FAQ JSON-LD for rich-result eligibility
  React.useEffect(() => {
    const all = sections.flatMap(s => s.items);
    let ld = document.getElementById('faq-jsonld');
    if (!ld) { ld = document.createElement('script'); ld.id = 'faq-jsonld'; ld.type = 'application/ld+json'; document.head.appendChild(ld); }
    ld.textContent = JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: all.map(({ q, a }) => ({
        '@type': 'Question', name: q,
        acceptedAnswer: { '@type': 'Answer', text: a },
      })),
    });
  }, []);

  const [open, setOpen] = React.useState({ '0-0': true });
  const toggle = (key) => setOpen(o => ({ ...o, [key]: !o[key] }));

  return (
    <>
      <window.WeNav />
      <window.WeSEO page="faq" />
      <style>{css}</style>

      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>FAQ</div>
        <h1 className="faq-h1">Honest answers to <em>real questions.</em></h1>
        <p className="we-page-sub">No marketing-speak. If you have a question we haven't covered, email us — and we'll add it here.</p>
      </section>

      <div className="faq-body">
        {sections.map((sec, gi) => (
          <div className="faq-group" key={sec.group}>
            <div className="faq-group-h">{sec.group}</div>
            {sec.items.map((it, ii) => {
              const key = `${gi}-${ii}`;
              return (
                <div className={`faq-item ${open[key] ? 'open' : ''}`} key={key} onClick={() => toggle(key)}>
                  <div className="faq-q">
                    <h3 className="faq-q-text">{it.q}</h3>
                    <div className="faq-toggle">+</div>
                  </div>
                  <div className="faq-a"><p>{it.a}</p></div>
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <section className="faq-cta">
        <div className="faq-cta-card">
          <div>
            <h2 className="faq-cta-h">Still have <em>questions?</em></h2>
            <p className="faq-cta-p">30 minutes, no deck, no pitch. Tell us what you're working on and we'll be honest about whether we can help.</p>
          </div>
          <a className="faq-cta-btn" href="Leviyet Contact.html">Book intro call →</a>
        </div>
      </section>

      <window.WeFooter />
    </>
  );
};

window.FAQ = FAQ;
