/* global React, Eyebrow */
const { useState: useFAQState } = React;

function Testimonials() {
  const quotes = [
    {
      q: "Before Nova, I was spending Sunday nights catching up on emails I missed during the week. Now that work is handled before I even think about it. Worth every dollar.",
      who: "Sarah Mitchell", role: "Austin Marketing Agency"
    },
    {
      q: "I was skeptical about handing off things I had always done myself. Three months in, I cannot believe I waited this long. Ciara is thorough, proactive, and genuinely invested in making my business run better.",
      who: "David Chen", role: "Liberty Hill Consulting"
    },
  ];
  return (
    <section className="testimonials-section">
      <div className="container">
        <Eyebrow>What clients say</Eyebrow>
        <h2 className="t-headline">The kind of support that does not need supervision.</h2>
        <div className="t-grid">
          {quotes.map((t) => (
            <figure key={t.who} className="t-card">
              <blockquote className="t-quote">"{t.q}"</blockquote>
              <figcaption className="t-caption">
                <div className="t-avatar">{t.who.split(" ").map(n => n[0]).join("")}</div>
                <div>
                  <div className="t-name">{t.who}</div>
                  <div className="t-role">{t.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "How is Nova different from a freelance VA on Upwork?",
      a: "You get a direct relationship with one person who learns your business, not a rotating marketplace match. Ciara brings a background in business and government office management, not gig work."
    },
    {
      q: "What does a typical week with Nova look like?",
      a: "We start with a kickoff call to align on priorities and tools. From there, the rhythm is a Monday plan, steady work through the week, and a Friday recap covering what got done and what needs your attention."
    },
    {
      q: "Can Nova work alongside my accountant or bookkeeper?",
      a: "Yes. Nova handles the operational side: invoicing, expense tracking, and vendor communication. Your CPA or bookkeeper still owns tax filing and reconciliation. We make their job easier by keeping the data clean and current."
    },
    {
      q: "What tools do you work in?",
      a: "Google Workspace, Microsoft 365, QuickBooks, Notion, Asana, ClickUp, HubSpot, Mailchimp, and Canva. We adapt to your stack and do not ask you to switch."
    },
    {
      q: "How do you handle confidential information?",
      a: "A signed mutual NDA on day one. Access is limited to the systems you grant, and offboarding is fully documented if we ever part ways."
    },
    {
      q: "Are there long-term contracts?",
      a: "No. All packages are month-to-month. Cancel any time with 14 days notice."
    },
    {
      q: "Do you only work with Austin businesses?",
      a: "Most clients are in Austin, Liberty Hill, Round Rock, Cedar Park, Georgetown, or Pflugerville. Service is fully remote, so location is about community, not logistics."
    },
  ];

  const [open, setOpen] = useFAQState(0);

  return (
    <section className="faq-section" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <Eyebrow>Frequently asked</Eyebrow>
            <h2 className="faq-headline">Honest answers.<br/>No fine print.</h2>
            <p className="faq-sub">
              Do not see your question?{" "}
              <a href="mailto:novasolutionsatx@gmail.com" style={{ color: "#2f1d4b", fontWeight: 600, textDecoration: "none" }}>Get in touch</a>
            </p>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={it.q} className="faq-item">
                <button className="faq-btn" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className={`faq-icon${open === i ? " open" : ""}`}>+</span>
                </button>
                {open === i && (
                  <div className="faq-answer">{it.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials, FAQ });