/* Section 10 — FAQ. Clean accordion, editorial tone. */
function FAQ() {
  const items = [
    {
      q: "Who is this for?",
      a: (
        <p>
          Home service companies who already have a working business and the
          capacity to take on more work — roofers, plumbers, HVAC, restoration,
          electrical, general repairs, anyone who would benefit from recurring
          relationships with property managers and HOAs. You need a strong vision
          for property management as a channel, confidence in your service quality,
          and the operational room to handle more jobs as they come in.
        </p>
      ),
    },
    {
      q: "What does it cost?",
      a: (
        <p>
          We don't list pricing publicly because every territory is different.
          Some of our clients drive 15 miles. Some cover 15 states. The number of
          property managers, the ROI potential, and the level of exclusivity you
          want all factor in. Pricing comes after we've audited your territory and
          we both agree it's a fit. We've structured pricing options for home
          service companies at a range of stages.
        </p>
      ),
    },
    {
      q: "Do you offer training?",
      a: (
        <>
          <p>
            Yes — through our companion program, <strong>10X Your BDR</strong>. If you
            have a sales rep on staff who needs to be sharper, we offer one-on-one
            training, mock calls, and coaching specifically for the property management
            buyer. Most agencies do group training. We do one-on-one.
          </p>
          <a href="https://10xyourbdr.com" target="_blank" rel="noopener noreferrer" className="text-link" style={{ marginTop: 12 }}>
            Learn more about 10X Your BDR
          </a>
        </>
      ),
    },
    {
      q: "What if I only do commercial work?",
      a: (
        <p>
          That's fine. Most of our clients prefer commercial. It takes a little more
          qualification on each PM relationship to confirm fit, but commercial is the
          fastest-growing segment of property management spend right now.
        </p>
      ),
    },
    {
      q: "Do you offer territory exclusivity?",
      a: (
        <p>
          Yes, two kinds. <strong>Standard exclusivity</strong> caps us at 2 home
          service companies per territory per vertical. <strong>Competitive
          exclusivity</strong> makes you the only company we work with in your
          territory, period — that's a premium tier with limited availability.
        </p>
      ),
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="section--light section-pad" data-screen-label="10 FAQ">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.6fr)',
          gap: 80,
          alignItems: 'start',
        }} className="two-col">
          <div style={{ position: 'sticky', top: 100 }}>
            <p className="eyebrow">What home service companies usually ask</p>
            <h2 className="h-section" style={{ marginBottom: 20 }}>
              The five questions we get on every first call.
            </h2>
      <p style={{
              margin: '0 0 36px',
              maxWidth: '36ch',
              fontSize: 17,
              lineHeight: 1.5,
              color: 'var(--fg-muted)',
            }}>
              Direct answers, no marketing hedge. If you don't see your question here,{' '}
              <a href="mailto:info@pmhoa.pro" style={{
                color: 'var(--pmhoa-blue)',
                fontWeight: 700,
                textDecoration: 'underline',
                textUnderlineOffset: '3px',
                textDecorationThickness: '2px',
              }}>contact us</a>.
            </p>
          </div>
          <div>
            {items.map((item, i) => (
              <FAQItem
                key={i}
                index={i + 1}
                question={item.q}
                answer={item.a}
                isOpen={open === i}
                onToggle={() => setOpen(open === i ? -1 : i)}
                last={i === items.length - 1}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ index, question, answer, isOpen, onToggle, last }) {
  return (
    <div style={{
      borderTop: '1px solid var(--border)',
      borderBottom: last ? '1px solid var(--border)' : 'none',
    }}>
      <button
        onClick={onToggle}
        aria-expanded={isOpen}
        style={{
          all: 'unset',
          display: 'flex',
          alignItems: 'baseline',
          gap: 20,
          width: '100%',
          padding: '24px 0',
          cursor: 'pointer',
        }}
      >
        <span className="tnum" style={{
          fontFamily: 'var(--font-condensed)',
          fontSize: 13,
          fontWeight: 700,
          color: 'var(--fg-subtle)',
          letterSpacing: '0.08em',
          width: 28,
          flexShrink: 0,
        }}>
          {String(index).padStart(2, '0')}
        </span>
        <span style={{
          flex: 1,
          fontSize: 19,
          fontWeight: 700,
          letterSpacing: '-0.012em',
          color: 'var(--fg)',
          lineHeight: 1.35,
        }}>{question}</span>
        <span style={{
          width: 24, height: 24,
          display: 'grid', placeItems: 'center',
          flexShrink: 0,
          color: 'var(--fg-muted)',
        }}>
          {isOpen ? (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true">
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
          ) : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
              <line x1="12" y1="4" x2="12" y2="20" />
              <line x1="4" y1="12" x2="20" y2="12" />
            </svg>
          )}
        </span>
      </button>
      {/* No animation — conditional render. Avoids React-style-object vs CSS-transition fights. */}
      {isOpen && (
        <div style={{
          paddingLeft: 48,
          paddingBottom: 28,
          paddingRight: 24,
          fontSize: 16,
          lineHeight: 1.6,
          color: 'var(--fg-muted)',
          maxWidth: '64ch',
        }}>
          {answer}
        </div>
      )}
    </div>
  );
}

window.FAQ = FAQ;