// ─────────────────────────────────────────────────────────
//  FAQ Section — accordion + filter + AI fallback
//  Mirrors the FAQPage JSON-LD schema for AEO parity
// ─────────────────────────────────────────────────────────

const { useState: useStateFQ, useMemo: useMemoFQ, useRef: useRefFQ } = React;

const FAQS = [
  {
    id: 'about',
    cat: 'Studio',
    q: 'What does WebBrandify do?',
    a: "WebBrandify is a premium one-operator design studio in Jammu, India, founded by Rohit Sharma. We engineer conversion-optimized websites, brand identity systems, and lead-automation engines for premium real estate, fashion, hospitality, and SaaS clients. Every build ships with sub-1-second LCP, Lighthouse 95+, and a full n8n / CRM / WhatsApp automation graph.",
  },
  {
    id: 'founder',
    cat: 'Founder',
    q: 'Who is Rohit Sharma?',
    a: "Rohit Sharma is the Founder and Principal Architect of WebBrandify. He's also a third-generation operator at JK Realtors. He started in 2019 selling premium real estate, taught himself React and n8n after watching premium clients leak to faster-loading competitor sites, and now runs a one-operator studio taking two engagements per quarter. Currently building BRANDSTACK — an AI design platform trained on premium brand DNA.",
  },
  {
    id: 'pricing',
    cat: 'Pricing',
    q: 'How much does WebBrandify charge?',
    a: "Three transparent tiers. Sprint: $1,000–5,000 for a 1–2 week audit or landing page. Build: $1,000–75,000 for a full 4–8 week platform engagement including design system, production build, and automation graph. Retainer: $1,000–10,000 per month with a 3-month minimum. INR pricing available on request. GST 18% applies for Indian clients.",
  },
  {
    id: 'timeline',
    cat: 'Process',
    q: 'How long does a website build take?',
    a: 'A standard Build engagement is 4–8 weeks, structured in four phases: Week 0 diagnose, Week 1–2 architect (tokens + component library + automation graph), Week 2–3 engineer (production build), Week 4 ship (zero-downtime cutover + 30-day post-launch retainer). Sprint engagements ship in 1–2 weeks.',
  },
  {
    id: 'brandstack',
    cat: 'Product',
    q: 'What is BRANDSTACK?',
    a: "BRANDSTACK is WebBrandify's upcoming AI design platform — v0 for brands that hate looking like v0. It's trained on 47 hand-shipped premium builds. You drop your logo, palette, voice samples, and three reference URLs, and BRANDSTACK scaffolds a production website matching your brand voice, deploying to the edge in 8 seconds with full lead-automation wiring. Currently raising a $2M pre-seed.",
  },
  {
    id: 'tenders',
    cat: 'Process',
    q: 'Do you support government and private sector tenders in India and internationally?',
    a: 'Yes. WebBrandify runs structured bid support on two regional tracks: India (GeM, CPP, NIC eProc, state portals, PSU, and private RFP) and international worldwide (UNGM, World Bank, EU TED, SAM.gov, UK Contracts Finder, GCC eProc, APAC portals, and global enterprise RFP). The TenderStack pipeline covers notice scan, technical bid assembly, compliance matrices, multi-portal submission, and post-bid clarification through contract onboarding. Book a walkthrough at #tenders or via the booking section.',
  },
  {
    id: 'audit',
    cat: 'Studio',
    q: 'Do you offer a free website audit?',
    a: 'Yes. Paste any URL into the AI Site Audit on this portfolio and get a 60-second verdict with the three highest-leverage conversion fixes — no signup, no card, no spam. For a deeper 23-point audit, book a 15-minute walkthrough via cal.com/webbrandify/15min.',
  },
  {
    id: 'location',
    cat: 'Studio',
    q: 'Where is WebBrandify based?',
    a: 'WebBrandify is based in Jammu, India (32.73°N · 74.86°E), and serves clients worldwide. Studio hours are Monday to Friday, 09:30 to 18:00 IST. Direct contact: rohit@webbrandify.com or +91 91860 57407.',
  },
  {
    id: 'stack',
    cat: 'Tech',
    q: 'What tech stack does WebBrandify use?',
    a: 'Premium front-end: React 18, Framer, Webflow, headless WordPress with Elementor overrides, GSAP, Three.js, Tailwind. Automation: n8n, Make.com, Zapier. SaaS infrastructure: serverless edge functions, multi-tenant data indexing, headless CRM dashboards. Every build enforces Lighthouse 95+ on every commit.',
  },
  {
    id: 'capacity',
    cat: 'Process',
    q: 'Why only two clients per quarter?',
    a: "Because depth beats spread. As a one-operator studio, Rohit personally architects, designs, builds, and ships every engagement — no account managers, no handoffs, no junior designers learning on your project. Two clients per quarter means each gets the full attention a premium build demands.",
  },
  {
    id: 'investors',
    cat: 'Product',
    q: "I'm a VC — how do I get the BRANDSTACK deck?",
    a: 'Email rohit@webbrandify.com with subject "BRANDSTACK · Investor brief request" and mention your fund, stage focus, and typical check size. You\'ll get a full pitch deck and 30-minute call slot within 48 hours.',
  },
];

const CATS = ['All', 'Studio', 'Founder', 'Pricing', 'Process', 'Product', 'Tech'];

function FAQ() {
  const [openId, setOpenId] = useStateFQ(null);
  const [filter, setFilter] = useStateFQ('All');
  const [query, setQuery] = useStateFQ('');

  const filtered = useMemoFQ(() => {
    const q = query.toLowerCase().trim();
    return FAQS.filter(f => {
      const catOk = filter === 'All' || f.cat === filter;
      const qOk = !q || f.q.toLowerCase().includes(q) || f.a.toLowerCase().includes(q);
      return catOk && qOk;
    });
  }, [filter, query]);

  const askAI = () => {
    const toggle = document.getElementById('chat-toggle');
    if (toggle) toggle.click();
  };

  return (
    <section className="section shell" data-screen-label="FAQ" id="faq">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:32, flexWrap:'wrap'}}>
        <div>
          <div className="kicker">§FAQ · The honest answers</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'20ch',
            textWrap:'balance',
          }}>
            Questions we get.<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>Plainly answered.</span>
          </h2>
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:11,
          letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)',
          textAlign:'right', lineHeight:1.7,
        }}>
          {filtered.length} of {FAQS.length} answers<br/>
          <span style={{color:'var(--accent)'}}>FAQPage schema · live</span>
        </div>
      </div>

      {/* Search + filter toolbar */}
      <div className="faq-toolbar">
        <div className="faq-search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
          <input
            type="text"
            placeholder="Search questions… try &ldquo;pricing&rdquo;"
            value={query}
            onChange={e => setQuery(e.target.value)}
          />
          {query && (
            <button className="faq-clear magnetic-trigger" onClick={() => setQuery('')} aria-label="Clear">×</button>
          )}
        </div>
        <div className="faq-filters">
          {CATS.map(c => (
            <button
              key={c}
              className={`faq-chip magnetic-trigger ${filter === c ? 'active' : ''}`}
              onClick={() => setFilter(c)}
            >{c}</button>
          ))}
        </div>
      </div>

      {/* Accordion */}
      <div className="faq-list">
        {filtered.length === 0 ? (
          <div className="faq-empty">
            <div className="faq-empty-i">∅</div>
            <h4>No matches.</h4>
            <p>Try a different keyword, or ask Rohit AI directly.</p>
            <button className="faq-empty-cta magnetic-trigger" onClick={askAI}>
              Ask Rohit AI <span>→</span>
            </button>
          </div>
        ) : filtered.map((f, i) => {
          const isOpen = openId === f.id;
          return (
            <div key={f.id} className={`faq-item ${isOpen ? 'open' : ''}`}>
              <button
                className="faq-q magnetic-trigger"
                onClick={() => setOpenId(isOpen ? null : f.id)}
                aria-expanded={isOpen}
              >
                <span className="faq-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="faq-q-text">{f.q}</span>
                <span className="faq-cat-tag">{f.cat}</span>
                <span className="faq-chev" aria-hidden="true">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </span>
              </button>
              <div className="faq-a-wrap">
                <div className="faq-a">{f.a}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* AI fallback CTA */}
      <div className="faq-ai-cta">
        <div className="faq-ai-l">
          <span className="kicker">§ Couldn&rsquo;t find it?</span>
          <h4>Ask Rohit AI directly — it&rsquo;s trained on every section of this site.</h4>
        </div>
        <button className="faq-ai-btn magnetic-trigger" onClick={askAI}>
          <span className="faq-ai-orb">
            <svg width="20" height="20" viewBox="0 0 32 32" fill="currentColor">
              <path d="M 16 6 L 17.8 13 L 25 14.5 L 17.8 16 L 16 23 L 14.2 16 L 7 14.5 L 14.2 13 Z"/>
            </svg>
          </span>
          <span>Ask Rohit AI</span>
          <span className="faq-ai-arr">→</span>
        </button>
      </div>
    </section>
  );
}

window.FAQ = FAQ;