"use client";

import { useState } from "react";

const FAQItem = ({
  question,
  answer,
}: {
  question: string;
  answer: string;
}) => {
  const [open, setOpen] = useState(false);

  return (
    <div className="border-b border-zinc-300 py-4">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex justify-between items-center text-left"
      >
        <span className="font-medium text-lg">{question}</span>
        <span className="text-zinc-500">{open ? "−" : "+"}</span>
      </button>

      <div
        className={`transition-all overflow-hidden ${
          open ? "max-h-[500px] mt-2" : "max-h-0"
        }`}
      >
        <p className="text-zinc-600 whitespace-pre-line">
          {answer}
        </p>
      </div>
    </div>
  );
};

const HelpPage = () => {
  const faqs = [
    {
      question: "Is Ara the same as an on-site PAS 2035 assessment?",
      answer: `No. Ara is a remote pre-assessment designed to give fast, indicative recommendations.

A PAS 2035 assessment requires an onsite inspection and provides guaranteed upgrade pathways, full Retrofit Assessment reports, and validated specifications.`,
    },
    {
      question: "How do I add a property to the app?",
      answer:
        "Click “New Property” at the top of your portfolio screen, enter the property address, and the system will generate your report automatically.",
    },
    {
      question: "I’ve added my property, but I can’t see the results – what should I do?",
      answer: `Try refreshing the page or logging out and back in.

If the issue continues, contact us and we can add the property manually for you.`,
    },
    {
      question: "How do I view my property results?",
      answer: `To view your results, simply click on the property address in your portfolio.

This will open the full summary, including:

• Current EPC position  
• Property data and assumptions  
• Estimated costs  
• Retrofit plan`,
    },
    {
      question: "What do the recommendations mean?",
      answer: `The system suggests the quickest and most cost-effective measures to reach EPC C based on your property’s current data.

These are estimates only — exact requirements can only be confirmed through a full PAS 2035 on-site assessment.`,
    },
    {
      question: "Can I change the recommended measures in Ara?",
      answer: `Yes — you can adjust the recommended measures within the app to explore different upgrade options.

When you change a measure (for example, swapping insulation for solar PV), the app will automatically update:

• Energy-efficiency impact  
• SAP point gains  
• Estimated costs  

This allows you to compare different routes to EPC C.`,
    },
    {
      question: "Will Ara tell me if I can get funding?",
      answer: `Ara provides indicative funding guidance. However, funding eligibility 	depends 	on current scheme criteria and availability, which change regularly. A 	full 		eligibility check is included as part of a PAS 2035 assessment.`,
    },
    {
      question: "I’ve completed the remote assessment. What’s next?",
      answer: `If you want to proceed with improvements, the next step is a PAS 2035 on-site Retrofit Assessment, which includes:

• Property fabric inspection  
• Condition survey  
• RdSAP  
• Ventilation & occupancy assessment  
• A guaranteed improvement plan`,
    },
    {
      question: "What if I can’t get the app to work?",
      answer: `If you have any technical issues, email us at enquiries@domna.homes and we can:

• Add the property for you  
• Send the results manually  
• Arrange a call with a team member`,
    },
  ];

  return (
    <div className="max-w-2xl mx-auto mt-12 px-4">
      <h1 className="text-3xl font-bold mb-6">Help & FAQ</h1>
      <p className="text-zinc-600 mb-8">
        Answers to common questions below.
      </p>

      {faqs.map((f, i) => (
        <FAQItem key={i} question={f.question} answer={f.answer} />
      ))}
        <div className="py-4">
          <h2 className="text-xl font-semibold mb-2">Still need help?</h2>
          <p className="text-zinc-600 mb-4">
            If you can’t find the answer you’re looking for, our team is happy to help.
          </p>
          <a
            href="mailto:enquiries@domna.homes"
            className="text-blue-600 font-medium hover:underline"
          >
            Contact us at enquiries@domna.homes
          </a>
        </div>
      </div>
  );
};

export default HelpPage;