// Azlani — FAQ page

const FaqHero = () => (
  <section style={{ minHeight: '50vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 140, paddingBottom: 60, borderBottom: '1px solid var(--line)' }}>
    <div className="container">
      <FadeUp><div className="eyebrow"><span className="dot"></span> Frequently asked</div></FadeUp>
      <h1 className="serif" style={{ fontSize: 'clamp(56px, 9vw, 144px)', lineHeight: 0.92, letterSpacing: '-0.035em', margin: '24px 0 0', fontWeight: 400 }}>
        <RevealLines lines={['The honest']} />
        <RevealLines lines={[<span key="l">answers, <span className="ital" style={{ color: 'var(--ember)' }}>up front.</span></span>]} baseDelay={0.08} />
      </h1>
    </div>
  </section>
);

const FaqList = () => {
  const [open, setOpen] = React.useState(0);
  const qs = [
    ['Is Azlani just an AI receptionist?', 'No. A receptionist answers the phone. Azlani qualifies the job, collects photos, follows up, books appointments, and sends your team a structured job brief — that\u2019s the difference between an answering service and an intake system.'],
    ['Will Azlani replace our office staff?', 'No. Azlani helps your team handle missed calls, after-hours calls, form follow-ups, and repetitive intake. Your team stays in control of pricing, proposals, inspections, and final customer decisions.'],
    ['Can we start with after-hours calls only?', 'Yes. Many shops should start with after-hours calls, missed calls, or website forms before routing more volume through the system. Lower risk, faster confidence.'],
    ['What happens if Azlani is unsure?', 'It escalates to a human, sends a summary, or marks the lead for manual follow-up — depending on the rules you set during pilot setup.'],
    ['Can Azlani collect photos?', 'Yes. Azlani can send an SMS asking the lead to reply with photos or videos before the inspection.'],
    ['Can Azlani book inspections?', 'Yes. Azlani can book through your calendar process or collect preferred times for your team to confirm. We can also require human approval before any booking is finalized.'],
    ['Does Azlani work with our CRM?', 'During pilot setup, leads can be sent by email, SMS, spreadsheet, or dashboard. CRM integrations are added depending on the tools you already use.'],
    ['Can Azlani qualify residential and commercial leads differently?', 'Yes. The call flow is customizable based on the type of property and service. Commercial roofing is what we\u2019ve tuned first.'],
    ['Does Azlani give estimates or prices?', 'No. The first version is for intake, qualification, booking, and handoff. Pricing and proposals stay with your team.'],
    ['Is this for outbound cold calling?', 'No. The first product focuses on inbound leads — calls, missed calls, website forms, and follow-ups from people who contacted the business.'],
    ['How long does setup take?', 'The pilot can usually be configured quickly once you provide your services, service area, business hours, qualification rules, and scheduling process.'],
    ['Who is this best for?', 'Commercial roofers and other high-ticket service businesses that receive valuable inbound leads and want faster response, better qualification, and cleaner team handoff.'],
  ];
  return (
    <section className="section-pad" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ maxWidth: 980 }}>
        {qs.map(([q, a], i) => {
          const isOpen = open === i;
          return (
            <FadeUp key={q} delay={i * 0.03}>
              <div style={{ borderTop: '1px solid var(--line)' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    padding: '32px 0',
                    display: 'grid', gridTemplateColumns: '60px 1fr 40px',
                    gap: 24, alignItems: 'center',
                  }}
                >
                  <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{(i + 1).toString().padStart(2, '0')}</span>
                  <span className="serif" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.15, letterSpacing: '-0.01em' }}>{q}</span>
                  <span className="serif" style={{ fontSize: 32, color: 'var(--ember)', textAlign: 'right', transition: 'transform .3s', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
                </button>
                <div style={{
                  display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows .4s cubic-bezier(.2,.7,.2,1)',
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ padding: '0 0 32px 84px', maxWidth: 720, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                      {a}
                    </div>
                  </div>
                </div>
              </div>
            </FadeUp>
          );
        })}
        <div style={{ borderTop: '1px solid var(--line)' }}></div>
      </div>
    </section>
  );
};

const FaqCTA = () => (
  <section className="dark section-pad">
    <div className="container">
      <h2 className="serif" style={{ fontSize: 'clamp(40px, 6vw, 96px)', lineHeight: 0.92, letterSpacing: '-0.03em', margin: 0, fontWeight: 400, maxWidth: 1100 }}>
        <RevealLines lines={['Still have questions?']} />
        <RevealLines lines={[<span key="l">A 10-minute demo <span className="ital" style={{ color: 'var(--ember-soft)' }}>answers most of them.</span></span>]} baseDelay={0.08} />
      </h2>
      <FadeUp delay={0.3} style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
        <a href="contact.html" className="btn btn-primary">Book demo <span className="arrow">↗</span></a>
      </FadeUp>
    </div>
  </section>
);

function App() {
  return (
    <div className="page-fade">
      <Nav current="faq" />
      <FaqHero />
      <FaqList />
      <FaqCTA />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);