// FAQ, CTA, Footer

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section shell" id="faq">
      <div className="faq">
        <div className="faq__intro">
          <span className="eyebrow"><span className="dot"/>FAQ</span>
          <h2 className="h2" style={{marginTop:18}}>The questions<br/>we get on calls.</h2>
          <p className="lede" style={{marginTop:18}}>
            Don't see yours? Email <a style={{textDecoration:"underline",textUnderlineOffset:3,color:"var(--ink)"}} href="mailto:hello@barrage.studio">hello@barrage.studio</a> and we'll answer the same day.
          </p>
        </div>
        <div className="faq__list">
          {window.BARRAGE.faq.map((item, i) => (
            <div className="faq__item" data-open={open === i} key={i}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <Icon.chev className="chev" />
              </button>
              <div className="faq__a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta" id="contact">
      <div className="cta__inner">
        <h2 className="h2">Ready to be the<br/>best-looking shop in town?</h2>
        <p className="lede" style={{margin:"18px auto 0"}}>
          A 30-minute call, no slides, no commitment.
          We'll audit your current site live and tell you exactly what's slowing new inquiries down.
        </p>
        <ContactForm />
      </div>
    </section>
  );
}

function ContactForm() {
  return (
    <form
      className="contact-form"
      action="https://formsubmit.co/ryan.klapper.MA@gmail.com"
      method="POST"
    >
      <input type="hidden" name="_subject" value="New Barrage website inquiry" />
      <input type="hidden" name="_template" value="table" />
      <input type="hidden" name="_captcha" value="false" />
      <input className="contact-form__trap" type="text" name="_honey" tabIndex="-1" autoComplete="off" />

      <div className="contact-form__grid">
        <label>
          <span>Name</span>
          <input name="name" type="text" autoComplete="name" required />
        </label>
        <label>
          <span>Email</span>
          <input name="email" type="email" autoComplete="email" required />
        </label>
        <label>
          <span>Business</span>
          <input name="business" type="text" autoComplete="organization" required />
        </label>
        <label>
          <span>Website</span>
          <input name="website" type="url" placeholder="https://" />
        </label>
      </div>

      <label>
        <span>What should we look at?</span>
        <textarea
          name="message"
          rows="5"
          placeholder="Tell us what you run, where you serve, and what you want the site to do better."
          required
        />
      </label>

      <div className="contact-form__footer">
        <button className="btn btn--primary btn--lg" type="submit">
          Send the inquiry <Icon.arrow />
        </button>
      </div>
    </form>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__grid">
        <div className="footer__brand">
          <div className="nav__brand">Barrage</div>
          <p>A small studio building websites for the businesses your neighborhood couldn't do without.</p>
        </div>
        <div className="footer__col">
          <h5>Studio</h5>
          <ul>
            <li><a href="#work">Work</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#process">Process</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>For owners</h5>
          <ul>
            <li><a href="#free-site-audit">Free site audit</a></li>
            <li><a href="#local-seo-guide">Local SEO guide</a></li>
            <li><a href="#booking-integrations">Booking integrations</a></li>
            <li><a href="#care-plans">Care Plans</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Studio</h5>
          <ul>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__rule">
        <div>© Barrage Studio, 2026</div>
        <div>Open for new projects · Q3</div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, CTA, ContactForm, Footer });