/* FAQ */

function FAQ() {
  const items = [
    { q: 'What services does your agency offer?', a: 'We specialize in web design, no-code development, paid advertising, SEO, branding, copywriting and motion design. Our goal is to help businesses grow through high-performing digital experiences. Most engagements are a mix of CRO, paid media and lifecycle.' },
    { q: 'Do you work with startups or only established companies?', a: 'Both — about 40% of our clients are sub-$1M ARR and 60% are $5–50M scaling brands. We have engagement models for each.' },
    { q: 'What platforms do you use for no-code websites?', a: 'Primarily Shopify (we\'re Plus partners), Framer, and Webflow. For more custom needs we ship Next.js + Shopify Hydrogen.' },
    { q: 'How long does a typical project take?', a: 'A landing page redesign is 3–4 weeks. A full storefront rebuild is 8–12 weeks. Performance marketing retainers run quarterly with weekly experimentation cadence.' },
    { q: 'Can you help with just one part of the project?', a: 'Yes. About half our work is component engagements — a PDP refactor, a creative testing sprint, an analytics audit. We don\'t force full retainers.' },
    { q: 'What\'s your pricing structure?', a: 'Project work starts at $15k. Retainers start at $9k/mo. We offer performance-share pricing for select brands where we eat the downside.' },
    { q: 'Do you offer ongoing support after the project is finished?', a: 'Yes — every deliverable comes with a 60-day post-launch window, and most clients continue on a lightweight retainer for ongoing optimization.' },
  ];

  const isMobile = useWindowWidth() < 768;
  const [open, setOpen] = useState(0);

  return (
    <section data-screen-label="15 FAQ" id="faq" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.5fr', gap: 56, alignItems: 'start' }}>
          {/* Left intro + support card */}
          <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
            <span className="eyebrow"><span className="dot"></span>FAQs</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              Have questions,<br /><span className="accent">we got answers.</span>
            </h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Everything you need to know about our process, and how we deliver results.
            </p>

            {/* Testimonial-y sticker */}
            <div style={{ marginTop: 28, background: 'white', border: '1px solid var(--hairline-2)', borderRadius: 14, padding: 16, fontSize: 13 }}>
              <div style={{ color: 'var(--green-deep)', fontSize: 22, lineHeight: 1, marginBottom: 6, fontFamily: 'Georgia, serif' }}>"</div>
              <p style={{ margin: 0, color: 'var(--ink)' }}>
                Their animation work took our product videos to the next level. The team truly understands user experience and storytelling.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
                <Avatar name="Tom Becker" size={28} hue={30} />
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>Tom Becker</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>Founder</div>
                </div>
              </div>
            </div>

            {/* Cant find your answer card */}
            <div style={{ marginTop: 16, background: 'var(--ink)', color: 'white', borderRadius: 14, padding: 18 }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>Can't find your answer?</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.7)', marginBottom: 14 }}>Get in touch with our support team — they're friendly.</div>
              <button className="btn btn-green" style={{ height: 40, padding: '0 6px 0 16px', fontSize: 13 }}>
                Contact us
                <span className="ico" style={{ width: 24, height: 24 }}><Icon.Arrow size={11} /></span>
              </button>
            </div>
          </div>

          {/* Right FAQ list */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => (
              <FAQItem key={i} item={it} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--hairline)' }}>
      <button onClick={onToggle} style={{
        width: '100%', textAlign: 'left',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        padding: '22px 0',
        fontSize: 17, fontWeight: 500, color: 'var(--ink)',
        letterSpacing: '-0.005em',
      }}>
        <span>{item.q}</span>
        <span style={{
          flexShrink: 0,
          width: 28, height: 28, borderRadius: '50%',
          background: isOpen ? 'var(--ink)' : 'transparent',
          color: isOpen ? 'white' : 'var(--ink)',
          border: isOpen ? 'none' : '1px solid var(--hairline)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all .25s var(--ease)',
        }}>
          {isOpen ? <span style={{ width: 10, height: 1.5, background: 'white' }}></span> : <Icon.Plus size={12} />}
        </span>
      </button>
      <div style={{
        overflow: 'hidden',
        maxHeight: isOpen ? 240 : 0,
        opacity: isOpen ? 1 : 0,
        transition: 'max-height .35s var(--ease), opacity .25s var(--ease), padding .25s var(--ease)',
        paddingBottom: isOpen ? 22 : 0,
      }}>
        <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, paddingRight: 40 }}>{item.a}</p>
      </div>
    </div>
  );
}

window.FAQ = FAQ;