// Saola Labs Landing — Sections part 3 (Quote form, Footer)
const D3 = window.SAOLA_DATA;
const { useState: useState3 } = React;

function QuoteForm() {
  const [budget, setBudget] = useState3("$25K–$50K");
  const [service, setService] = useState3("Web Development");
  const [sent, setSent] = useState3(false);

  return (
    <section className="section" id="quote">
      <div className="container">
        <div className="quote">
          <div className="quote__intro">
            <span className="eyebrow" style={{color: "rgba(255,255,255,0.5)"}}><span className="dot"></span>Request Free Quote</span>
            <h2 className="h2" style={{marginTop: 16}}>Tell us about the build.</h2>
            <p style={{marginTop: 16}}>Send a brief and we'll come back within one business day with a scoped proposal — timeline, team shape, indicative quote.</p>
            <div className="meta">
              <div className="meta-item"><b>01 →</b><span>You send us context: product, problem, budget range.</span></div>
              <div className="meta-item"><b>02 →</b><span>30-min call with a senior engineer, not a salesperson.</span></div>
              <div className="meta-item"><b>03 →</b><span>Written proposal with scope, team, and weekly rhythm.</span></div>
            </div>
          </div>
          <form className="quote__form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div style={{padding: "40px 0", textAlign: "center"}}>
                <div style={{fontSize: 48, lineHeight: 1, color: "var(--color-accent)"}}>✓</div>
                <h3 style={{fontSize: 22, marginTop: 16, fontWeight: 500}}>Brief received.</h3>
                <p style={{color: "var(--color-text-2)", marginTop: 8, fontSize: 14.5}}>A senior engineer will be in touch within one business day.</p>
                <button type="button" className="btn btn--ghost" style={{marginTop: 24}} onClick={() => setSent(false)}>Send another</button>
              </div>
            ) : (
              <>
                <div className="field field--row">
                  <div className="field"><label>First name<span className="req">*</span></label><input required placeholder="Maya"/></div>
                  <div className="field"><label>Last name<span className="req">*</span></label><input required placeholder="Tran"/></div>
                </div>
                <div className="field"><label>Email address<span className="req">*</span></label><input type="email" required placeholder="maya@company.com"/></div>
                <div className="field field--row">
                  <div className="field"><label>WhatsApp / Telegram<span className="req">*</span></label><input required placeholder="+65 …"/></div>
                  <div className="field"><label>Website</label><input placeholder="company.com"/></div>
                </div>
                <div className="field">
                  <label>Service interest<span className="req">*</span></label>
                  <div className="opts">
                    {D3.services_select.map(s => (
                      <button type="button" key={s} className={`opt ${service === s ? "is-active" : ""}`} onClick={() => setService(s)}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="field"><label>Project details</label><textarea placeholder="What are you building, who's it for, where are you stuck?"></textarea></div>
                <div className="field">
                  <label>Budget<span className="req">*</span></label>
                  <div className="opts">
                    {D3.budgets.map(b => (
                      <button type="button" key={b} className={`opt ${budget === b ? "is-active" : ""}`} onClick={() => setBudget(b)}>{b}</button>
                    ))}
                  </div>
                </div>
                <button type="submit" className="btn btn--primary btn--lg" style={{marginTop: 8, alignSelf: "stretch"}}>Send brief <span className="arrow">→</span></button>
                <p style={{fontSize: 12, color: "var(--color-text-3)", textAlign: "center", margin: 0}}>We respond within one business day · NDA on request</p>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="company">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <Brand/>
            <p>Senior product engineering for software that lives in production. Singapore-headquartered, built out of Ho Chi Minh City.</p>
          </div>
          {D3.offices.map(o => (
            <div className="footer__col" key={o.city}>
              <h4>{o.lbl} · {o.city}</h4>
              <address>
                {o.lines.map((l, i) => <div key={i}>{l}</div>)}
              </address>
            </div>
          ))}
          <div className="footer__col">
            <h4>About</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#company">Company</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#careers">Careers</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© 2026 Saola Labs Pte. Ltd. · All rights reserved.</div>
          <div style={{display: "flex", gap: 18}}>
            <a href="#linkedin">LinkedIn</a>
            <a href="#whatsapp">WhatsApp</a>
            <a href="#telegram">Telegram</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Header/>
      <main>
        <Hero/>
        <LogoCloud/>
        <Services/>
        <Portfolio/>
        <Filters/>
        <HowWeWork/>
        <Process/>
        <Testimonials/>
        <QuoteForm/>
      </main>
      <Footer/>
    </>
  );
}

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