/* FAQScreen: "FAQ": quick answers to the questions we hear most, plus a nudge to reach out. */
const { Eyebrow, Button, StickerNote, Icon } = window.SchoolhausDesignSystem_a5b1bb;

function FAQScreen() {
  const mobile = window.useIsMobile(760);
  const tablet = window.useIsMobile(1040);
  const wrap = { maxWidth: 1280, margin: '0 auto', padding: mobile ? '0 20px' : '0 40px' };
  const go = (p) => window.shGo && window.shGo(p);

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

  const faqs = [
    ['Who do you work with?', 'K–12 schools and districts, higher ed institutions, nonprofits, and edtech companies. If you’re building learning experiences for real people, we’re likely a fit.'],
    ['What do you actually build?', 'Curriculum & courses, educational games, learning experiences, and learning software, plus the assessment, analytics, and strategy work that ties it all together.'],
    ['How does a project start?', 'With a short discovery conversation to understand your goals, learners, and constraints. From there, we put together a tailored proposal scoped to your needs.'],
    ['How long does a typical project take?', 'It ranges from a few weeks for focused work to several months for larger builds. We scope timelines up front so there are no surprises.'],
    ['How much does it cost?', 'Every engagement is custom. We work across a range of budgets and share pricing once we understand the scope. Reach out and we’ll figure it out together.'],
    ['Where are you based? Do you work remotely?', 'We’re based in Austin, TX, and we partner with organizations across the country. Remote collaboration is built into how we work.'],
    ['Who owns the work you create?', 'You do. The curriculum, games, experiences, and software we build for you are yours, fully and clearly.'],
    ['Can you work with our existing tools and LMS?', 'Yes. We design to integrate with the platforms and systems you already use, rather than asking you to start over.'],
    ['How do you measure success?', 'We define success metrics with you at the start of every project, then track the outcomes that matter throughout, not just at the finish line.'],
  ];

  const sectionLabel = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--grey)', marginBottom: 18 };

  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      {/* HERO */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 24 : 40, paddingBottom: mobile ? 20 : 28 }}>
        <window.Deco src="icons/asterisk.svg" w={26} anim="sh-twinkle" style={{ top: 6, right: '6%' }} />
        <Eyebrow>FAQ</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 38 : (tablet ? 52 : 64), lineHeight: 0.95, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 14px' : '16px 0 16px', maxWidth: 760 }}>
          Questions? <span style={{ color: 'var(--lavender)' }}>We’ve Got Answers.</span>
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.55, color: 'var(--text-secondary)', maxWidth: 560 }}>
          Everything we get asked most, in one place. If yours isn’t here, just reach out.
        </p>
      </section>

      {/* ACCORDION */}
      <section className="sh-reveal" style={{ ...wrap, paddingTop: mobile ? 8 : 12, paddingBottom: mobile ? 40 : 56 }}>
        <div style={{ maxWidth: 860 }}>
          {faqs.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={q} style={{ background: 'var(--white)', border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', marginBottom: 12, overflow: 'hidden' }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 22px', textAlign: 'left', gap: 16 }}
                >
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 16 : 18, textTransform: 'none', lineHeight: 1.25, color: 'var(--haus-black)' }}>{q}</span>
                  <Icon name={isOpen ? 'minus' : 'plus'} size={20} color="var(--haus-black)" style={{ flex: '0 0 auto' }} />
                </button>
                {isOpen && (
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)', padding: '0 22px 20px' }}>
                    {a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* CTA */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 56 : 72 }}>
        <div style={{ position: 'relative', background: 'var(--lime)', borderRadius: 'var(--radius-lg)', padding: mobile ? '32px 24px' : '44px 48px', display: 'flex', gap: mobile ? 18 : 32, alignItems: mobile ? 'stretch' : 'center', flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row', overflow: 'hidden' }}>
          <window.Deco src="motifs/squiggle-purple.svg" w={64} anim="sh-wiggle" style={{ top: 12, right: 24 }} />
          <div style={{ flex: 1, minWidth: mobile ? 'auto' : 260 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 36, textTransform: 'uppercase', lineHeight: 1 }}>Still have questions?</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.5, color: 'var(--haus-black)', margin: '12px 0 0', maxWidth: 480 }}>
              Tell us what you’re working on and we’ll help you figure out the rest.
            </p>
          </div>
          <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Start a conversation</Button>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { FAQScreen });