const { useState } = React;

const FAQS = [
  { q: "How long does setup take?", a: "48 hours from sign-up to live. All we need from you: your WhatsApp Business number, your product or service catalog, and 10–20 sample messages from your inbox so the AI matches your tone. We handle the platform setup end-to-end on your behalf." },
  { q: "Which WhatsApp setup do I need?", a: "Works with any WhatsApp Business number. We handle the platform setup end-to-end and cover platform fees as part of your monthly bill. You don't need a new number, and you keep all existing chats." },
  { q: "Will my customers know it's AI?", a: "That's your call. Most clients prefer to disclose after a booking is confirmed — \"thanks, Sarah will follow up shortly.\" Customers care about speed and accuracy, not whether a human typed it." },
  { q: "What if the AI gets a question wrong?", a: "It's conservative by default — if it's uncertain, it asks clarifying questions or escalates to you instantly. You see every conversation in real time and can intervene mid-thread." },
  { q: "Can I see every conversation it has?", a: "All of them. Live, searchable, exportable. You can step into any conversation at any time, and you'll get push notifications for hot leads or escalations." },
  { q: "Can I cancel anytime?", a: "Yes. Month-to-month, cancel with 7 days' notice. 14-day money-back on your first month if it's not for you." },
  { q: "Does it work in languages other than English?", a: "Yes — Arabic, French, Spanish, Hindi, Tagalog, and more. The AI auto-detects the customer's language and replies in kind." },
  { q: "What about WhatsApp's official rules and pricing?", a: "We run exclusively on WhatsApp's official Business API — no scraping, no unofficial workarounds. Meta charges a per-conversation fee on top (typically $0.005–$0.08 depending on country and template type), which is included in your monthly bill." },
  { q: "Can the AI take payments?", a: "Not directly today. It can send payment links from Stripe, Tap, or your existing checkout — and confirm receipt back to the customer once the payment lands." },
  { q: "Is my customer data safe?", a: "Conversations are encrypted in transit and at rest. We don't train shared models on your messages. You own your data and can export or delete it at any time." },
];

function FAQItem({ q, a, open, onClick }) {
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={onClick}>
        <span>{q}</span>
        <span className="faq-icon" aria-hidden="true"/>
      </button>
      <div className="faq-a"><div className="faq-a-inner">{a}</div></div>
    </div>
  );
}

function FAQPage() {
  const [open, setOpen] = useState(0);
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", "dark");
    try { localStorage.removeItem("wa-theme"); } catch (e) {}
  }, []);
  return (
    <>
      <nav className="nav scrolled">
        <a href="index.html" className="nav-logo" aria-label="SamaLabs home">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556 531" fill="var(--emerald)" fillRule="evenodd" style={{ height: 36, width: "auto", display: "block" }}>
            <path d="M234.59,503.35C236.96,499.36 243.72,488.22 249.62,478.60C266.87,450.43 299.88,395.81 305.16,386.72L310.02,378.35L307.46,376.22C302.26,371.91 266.05,341.25 264.69,340.00C263.50,338.91 264.97,335.76 274.35,319.40C325.65,229.89 338.52,207.34 338.90,206.30C339.47,204.69 339.46,204.67 345.81,216.10C348.86,221.60 361.69,244.33 374.31,266.60C386.93,288.87 402.35,316.10 408.58,327.10C441.99,386.12 483.51,459.34 488.54,468.10C491.70,473.60 495.74,480.69 497.51,483.85L500.75,489.60L476.42,489.55L452.10,489.51L434.15,457.83C424.28,440.41 403.61,404.32 388.21,377.63C372.82,350.94 357.94,325.10 355.16,320.21C352.38,315.31 349.65,311.43 349.10,311.57C347.37,312.03 338.71,333.94 339.60,335.60C340.05,336.42 347.03,348.58 355.11,362.60C379.26,404.48 415.48,467.69 428.03,489.85L439.78,510.60L487.69,510.60C515.01,510.60 535.60,510.22 535.60,509.71C535.60,508.10 523.32,486.25 418.61,301.60C391.38,253.57 353.60,186.85 345.08,171.74L339.81,162.39L337.31,166.74C335.93,169.14 330.77,178.30 325.83,187.10C320.90,195.90 308.18,218.17 297.58,236.60C286.98,255.03 271.36,282.25 262.87,297.10C254.38,311.95 247.26,324.27 247.05,324.48C246.72,324.81 237.44,317.15 191.67,278.71C184.20,272.44 178.18,267.04 178.28,266.71C178.38,266.37 188.22,248.33 200.15,226.60C232.31,168.03 264.69,107.63 284.84,68.60C289.53,59.52 297.02,45.01 301.50,36.35C305.97,27.69 309.38,20.60 309.08,20.60C304.86,20.60 226.07,66.34 120.10,130.30C93.70,146.24 64.45,163.90 55.10,169.54C45.75,175.18 37.54,180.26 36.85,180.82C35.89,181.61 35.60,191.18 35.60,222.47L35.60,263.10L76.76,296.60C99.40,315.03 118.34,330.78 118.86,331.61C119.54,332.73 116.03,339.75 105.35,358.61C61.89,435.36 20.60,509.14 20.60,510.04C20.60,510.35 67.78,510.60 125.44,510.60L230.29,510.60L234.59,503.35ZM56.60,488.82C56.60,488.40 64.97,473.21 75.20,455.07C85.44,436.94 97.72,415.12 102.50,406.60C107.27,398.08 116.79,381.10 123.64,368.87C130.49,356.64 136.33,346.63 136.61,346.62C136.89,346.61 140.50,349.41 144.63,352.85C148.77,356.29 162.49,367.69 175.12,378.19C187.76,388.68 198.71,398.01 199.45,398.91C200.62,400.33 200.12,401.83 195.72,410.07L190.64,419.58L193.02,429.66C194.33,435.20 195.60,439.93 195.85,440.18C196.50,440.83 224.60,395.06 224.60,393.35C224.60,392.56 222.15,389.93 219.16,387.50C216.17,385.08 188.14,361.72 156.87,335.60C125.60,309.48 90.49,280.45 78.85,271.10L57.68,254.10L57.64,223.46L57.60,192.81L88.85,173.86C176.25,120.87 257.71,72.38 258.31,72.98C258.98,73.65 224.54,138.07 177.65,223.84L161.40,253.57L154.75,247.77C151.09,244.58 144.53,238.96 140.18,235.28L132.25,228.60L123.68,228.61C118.96,228.61 112.00,228.91 108.21,229.27L101.31,229.92L104.34,232.51C126.39,251.39 170.08,288.30 217.11,327.75C249.00,354.51 276.84,377.93 278.98,379.78L282.85,383.16L276.64,393.63C273.22,399.39 258.71,423.34 244.39,446.85L218.35,489.60L137.48,489.60C92.99,489.60 56.60,489.25 56.60,488.82Z"/>
          </svg>
          <span style={{ fontSize: 17, letterSpacing: "-0.01em", color: "var(--ink)", fontFamily: "Inter, sans-serif" }}>
            <span style={{ fontWeight: 500 }}>Sama</span><span style={{ fontWeight: 700 }}>Labs</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="index.html#industries">Industries</a>
          <a href="index.html#how">How it works</a>
          <a href="index.html#tryit">Try it</a>
          <a href="FAQ.html">FAQ</a>
          <a className="btn btn-primary" href="https://cal.com/samalabs-rbrmuq/samalabs-demo">Book a demo</a>
        </div>
      </nav>

      <section className="faq-page-hero">
        <div className="wrap-narrow">
          <a href="/" className="faq-page-back">← Back to homepage</a>
          <span className="eyebrow" style={{ justifyContent: "center", marginBottom: 16 }}>FAQ</span>
          <h1 className="display">Questions, <em className="italic-serif">answered.</em></h1>
          <p className="lede" style={{ margin: "20px auto 0", maxWidth: "60ch" }}>
            Everything you'd want to know before booking a demo. Still curious? <a href="mailto:hello@samalabs.ai" style={{ color: "var(--emerald-2)" }}>Email us</a>.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="wrap-narrow">
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <FAQItem key={i} q={f.q} a={f.a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)}/>
            ))}
          </div>
        </div>
      </section>

      <section className="faq-page-cta">
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <h2 className="display" style={{ marginBottom: 16 }}>Ready to <em className="italic-serif">see it live?</em></h2>
          <p className="lede" style={{ margin: "0 auto 32px", maxWidth: "52ch" }}>15 minutes. We'll set up a demo on your industry's setup, with your business's tone of voice.</p>
          <a className="btn btn-primary btn-xl" href="https://cal.com/samalabs-rbrmuq/samalabs-demo">Book a 15-min demo</a>
        </div>
      </section>

      <footer className="footer">
        <div className="wrap">
          <div className="footer-inner">
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556 531" fill="var(--emerald)" fillRule="evenodd" style={{ height: 24, width: "auto", display: "block" }}>
                <path d="M234.59,503.35C236.96,499.36 243.72,488.22 249.62,478.60C266.87,450.43 299.88,395.81 305.16,386.72L310.02,378.35L307.46,376.22C302.26,371.91 266.05,341.25 264.69,340.00C263.50,338.91 264.97,335.76 274.35,319.40C325.65,229.89 338.52,207.34 338.90,206.30C339.47,204.69 339.46,204.67 345.81,216.10C348.86,221.60 361.69,244.33 374.31,266.60C386.93,288.87 402.35,316.10 408.58,327.10C441.99,386.12 483.51,459.34 488.54,468.10C491.70,473.60 495.74,480.69 497.51,483.85L500.75,489.60L476.42,489.55L452.10,489.51L434.15,457.83C424.28,440.41 403.61,404.32 388.21,377.63C372.82,350.94 357.94,325.10 355.16,320.21C352.38,315.31 349.65,311.43 349.10,311.57C347.37,312.03 338.71,333.94 339.60,335.60C340.05,336.42 347.03,348.58 355.11,362.60C379.26,404.48 415.48,467.69 428.03,489.85L439.78,510.60L487.69,510.60C515.01,510.60 535.60,510.22 535.60,509.71C535.60,508.10 523.32,486.25 418.61,301.60C391.38,253.57 353.60,186.85 345.08,171.74L339.81,162.39L337.31,166.74C335.93,169.14 330.77,178.30 325.83,187.10C320.90,195.90 308.18,218.17 297.58,236.60C286.98,255.03 271.36,282.25 262.87,297.10C254.38,311.95 247.26,324.27 247.05,324.48C246.72,324.81 237.44,317.15 191.67,278.71C184.20,272.44 178.18,267.04 178.28,266.71C178.38,266.37 188.22,248.33 200.15,226.60C232.31,168.03 264.69,107.63 284.84,68.60C289.53,59.52 297.02,45.01 301.50,36.35C305.97,27.69 309.38,20.60 309.08,20.60C304.86,20.60 226.07,66.34 120.10,130.30C93.70,146.24 64.45,163.90 55.10,169.54C45.75,175.18 37.54,180.26 36.85,180.82C35.89,181.61 35.60,191.18 35.60,222.47L35.60,263.10L76.76,296.60C99.40,315.03 118.34,330.78 118.86,331.61C119.54,332.73 116.03,339.75 105.35,358.61C61.89,435.36 20.60,509.14 20.60,510.04C20.60,510.35 67.78,510.60 125.44,510.60L230.29,510.60L234.59,503.35ZM56.60,488.82C56.60,488.40 64.97,473.21 75.20,455.07C85.44,436.94 97.72,415.12 102.50,406.60C107.27,398.08 116.79,381.10 123.64,368.87C130.49,356.64 136.33,346.63 136.61,346.62C136.89,346.61 140.50,349.41 144.63,352.85C148.77,356.29 162.49,367.69 175.12,378.19C187.76,388.68 198.71,398.01 199.45,398.91C200.62,400.33 200.12,401.83 195.72,410.07L190.64,419.58L193.02,429.66C194.33,435.20 195.60,439.93 195.85,440.18C196.50,440.83 224.60,395.06 224.60,393.35C224.60,392.56 222.15,389.93 219.16,387.50C216.17,385.08 188.14,361.72 156.87,335.60C125.60,309.48 90.49,280.45 78.85,271.10L57.68,254.10L57.64,223.46L57.60,192.81L88.85,173.86C176.25,120.87 257.71,72.38 258.31,72.98C258.98,73.65 224.54,138.07 177.65,223.84L161.40,253.57L154.75,247.77C151.09,244.58 144.53,238.96 140.18,235.28L132.25,228.60L123.68,228.61C118.96,228.61 112.00,228.91 108.21,229.27L101.31,229.92L104.34,232.51C126.39,251.39 170.08,288.30 217.11,327.75C249.00,354.51 276.84,377.93 278.98,379.78L282.85,383.16L276.64,393.63C273.22,399.39 258.71,423.34 244.39,446.85L218.35,489.60L137.48,489.60C92.99,489.60 56.60,489.25 56.60,488.82Z"/>
              </svg>
              <span style={{ fontSize: 14, letterSpacing: "-0.01em", color: "var(--ink)", fontFamily: "Inter, sans-serif" }}>
                <span style={{ fontWeight: 500 }}>Sama</span><span style={{ fontWeight: 700 }}>Labs</span>
              </span>
              <span className="tagline" style={{ marginLeft: 6 }}>· AI for WhatsApp Business</span>
            </div>
            <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
              <a href="mailto:hello@samalabs.ai">hello@samalabs.ai</a>
              <a href="index.html">Home</a>
              <span className="copy">© 2026</span>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FAQPage />);