"use client";

import { FAQ } from "@/components/ui/accordion";
import Headline from "@/components/ui/headline";
import { useSplitHeading } from "@/lib/useTextRevealHeading";
import { useRef } from "react";

const FAQSection = () => {
  const headingRef = useRef<HTMLHeadingElement | null>(null);
  const paraRef = useRef<HTMLParagraphElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  useSplitHeading(headingRef, paraRef);
  const faq = [
    {
      question: "What is Whispering Trees?",
      answer:
        "Whispering Trees is an IoT and AI platform that monitors the health of urban trees in real time. Our sensors measure moisture, stress, and environmental data — helping cities make smarter irrigation and maintenance decisions.",
    },

    {
      question: "How many trees can we monitor?",
      answer:
        "The system is fully scalable — from a single pilot district with 10 sensors to thousands of trees across multiple cities. You can start small and expand anytime without hardware changes.",
    },
    {
      question: "How accurate are the sensors?",
      answer:
        "Whispering Trees sensors are scientifically validated with precision readings for moisture and electrical resistance, ensuring early stress detection with over 95% reliability in field conditions.",
    },
    {
      question: "Do we need Wi-Fi or mobile data in the field?",
      answer:
        "No fixed Wi-Fi is required. The sensors communicate via low-power wireless networks (LoRaWAN or LTE-M), optimized for long range and minimal energy use — perfect for public spaces.",
    },
    {
      question: "What kind of support is included?",
      answer:
        "We offer onboarding assistance, online documentation, and email support for all Starter/Core users. Enterprise plans include dedicated account management and advanced analytics.",
    },
    {
      question: "How soon can we start a pilot project?",
      answer:
        "You can begin within 4–8 weeks. After the first sensor installation, data appears live on your dashboard — giving you immediate insights into your urban forest’s health.",
    },
  ];

  return (
    <section
      ref={containerRef}
      id="faq"
      className="tab:px-0 flex h-full flex-col items-center justify-center pb-8 sm:px-2.5"
    >
      <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-6/12">
        <Headline text="FAQ" />
        <h1
          ref={headingRef}
          className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
        >
          Whispering Trees{" "}
          <span className="font-playfair text-brand font-semibold italic">
            Explained
          </span>
        </h1>
        <p
          ref={paraRef}
          className="text-b-3-16 leading-b3 font-mium-reg max-w-2xl text-center tracking-[-0.8px] text-black/80"
        >
          Learn how Whispering Trees helps cities grow greener and smarter.
        </p>
      </div>
      <div className="tab:w-11/12 mt-10 w-full md:w-9/12">
        <FAQ faqData={faq} />
      </div>
    </section>
  );
};

export default FAQSection;