// FAQ page

const { useState: useFAQState } = React;

const FAQS = [
  {
    q: 'What is Ashok Malhotra Group?',
    a: 'Ashok Malhotra Group (AMG) is one of Punjab\'s leading real estate developers, with over 40 years of legacy in delivering premium commercial and residential projects across Ludhiana.',
  },
  {
    q: 'What kind of projects does AMG offer?',
    a: 'We specialise in malls, high-street markets, luxury commercial spaces, plotted developments, and residential townships. Our portfolio spans mixed-use destinations, factory outlets, neighbourhood hubs, gated communities, and luxury plotted developments.',
  },
  {
    q: 'Where are AMG projects located?',
    a: 'Our projects are strategically located across Ludhiana\'s prime corridors — including Sidhwan Canal Road (Palm Marina, Palm Heights), GT Road Sahnewal (Palm Garden), and Dugri (One AMG). All residential townships are within Ludhiana\'s established neighbourhoods.',
  },
  {
    q: 'Why should I invest in an AMG project?',
    a: 'AMG offers prime locations with strong catchment, high rental yields in commercial projects, future capital appreciation, quality construction with 40+ years of delivery track record, timely possession, and dedicated leasing support for commercial investors.',
  },
  {
    q: 'Are AMG projects RERA approved?',
    a: 'Yes. All applicable AMG projects are fully RERA-approved and PUDA-sanctioned, ensuring complete transparency, regulatory compliance, and reliability for buyers and investors.',
  },
  {
    q: 'What makes AMG different from other developers?',
    a: 'Our 40+ years of experience, customer-first approach, ethical business practices, and consistent delivery of high-value projects set us apart. We design for permanence — every project is intended to serve its community for generations, not just the next sales cycle.',
  },
  {
    q: 'Does AMG provide leasing support for commercial units?',
    a: 'Yes. We offer end-to-end leasing assistance to help commercial investors secure reputed brands and maximise rental income. Our team has established relationships with national and regional retail brands across fashion, food, and entertainment.',
  },
  {
    q: 'What financing options are available?',
    a: 'Our team can guide you through various financing and loan options available with reputed banks and NBFCs associated with AMG. We assist buyers in navigating home loan and LAP processes for eligible residential and commercial units.',
  },
  {
    q: 'How do I stay updated about new project launches?',
    a: 'Follow our social media channels or visit amgrealty.in regularly for the latest updates, project announcements, and possession milestones. You can also register your interest on our Contact page and our team will keep you informed.',
  },
];

function FAQItem({ item, open, onToggle }) {
  return (
    <div className="border-b border-bone-50/10 reveal">
      <button
        onClick={onToggle}
        className="w-full flex items-start justify-between gap-6 py-6 text-left group"
        aria-expanded={open}
      >
        <span className="font-display text-[20px] sm:text-[24px] leading-snug text-bone-50 group-hover:text-accent-soft transition-colors">
          {item.q}
        </span>
        <span className={`mt-1 flex-shrink-0 h-8 w-8 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/60 transition-transform duration-300 ${open ? 'rotate-45 border-accent/40 text-accent' : ''}`}>
          <Icon.Plus size={14}/>
        </span>
      </button>
      {open && (
        <p className="pb-7 text-bone-50/65 text-[15px] leading-relaxed max-w-3xl">
          {item.a}
        </p>
      )}
    </div>
  );
}

function FAQPage({ setPage }) {
  const [openIdx, setOpenIdx] = useFAQState(null);
  useReveal();

  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

  return (
    <main className="page-enter">

      {/* ── Hero ── */}
      <section className="pt-28 sm:pt-40 pb-16">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <div className="flex items-center justify-between flex-wrap gap-6 mb-10 reveal">
            <Eyebrow>Support · FAQ</Eyebrow>
            <div className="text-[12px] uppercase tracking-[0.22em] text-bone-50/45">{FAQS.length} questions</div>
          </div>
          <h1 className="font-display text-[36px] sm:text-[56px] lg:text-[110px] leading-[0.96] tracking-tightest reveal">
            Questions,<br/><span className="italic text-accent-soft">answered.</span>
          </h1>
          <div className="mt-10 grid lg:grid-cols-12 gap-8 reveal">
            <p className="lg:col-span-5 text-bone-50/60 text-[15px] leading-relaxed max-w-md">
              Everything you need to know about AMG, our projects, and how to get involved — as an investor, a resident, or a brand partner.
            </p>
            <div className="lg:col-span-4 lg:col-start-9 flex flex-wrap gap-3">
              <button
                onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
                className="btn rounded-full bg-bone-50 text-ink-950 px-5 py-3 text-[12px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2"
              >
                Ask a question <Icon.ArrowUpRight size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ── Accordion ── */}
      <section className="pb-28">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
          <div className="max-w-4xl">
            {FAQS.map((item, i) => (
              <FAQItem
                key={i}
                item={item}
                open={openIdx === i}
                onToggle={() => toggle(i)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-20 border-t border-bone-50/10 bg-ink-900/30">
        <div className="mx-auto max-w-[1320px] px-5 sm:px-8 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 reveal">
            <div className="font-display text-[40px] sm:text-[56px] leading-[1.05]">
              Still have a question?{' '}
              <span className="italic text-accent-soft">Talk to us.</span>
            </div>
            <p className="mt-5 text-bone-50/60 text-[15px] leading-relaxed max-w-lg">
              Our team is available Monday–Saturday, 9:30 am to 6:00 pm. Walk in, call us, or reach us on WhatsApp — whichever works best for you.
            </p>
          </div>
          <div className="lg:col-span-5 flex flex-wrap gap-4 reveal">
            <button
              onClick={() => { setPage('contact'); window.scrollTo(0,0); }}
              className="btn rounded-full bg-bone-50 text-ink-950 px-6 py-3.5 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2"
            >
              Contact us <Icon.ArrowUpRight size={14}/>
            </button>
            <a
              href="https://wa.me/918968566656?text=Hi%2C%20I%20have%20a%20question%20about%20AMG."
              target="_blank"
              rel="noopener noreferrer"
              className="btn rounded-full border border-bone-50/30 text-bone-50 px-6 py-3.5 text-[13px] font-medium hover:bg-bone-50/10 inline-flex items-center gap-2"
            >
              <Icon.WhatsApp size={14}/> Chat on WhatsApp
            </a>
          </div>
        </div>
      </section>

    </main>
  );
}

window.FAQPage = FAQPage;