/* global React */
const { Arrow: Arrow2, Check: Check2 } = window.RivalIcons;

// ============ Contact / quote form ============
function ContactSection() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <div className="cta-card">
      <div style={{ position: "relative", zIndex: 1 }}>
        <span className="eyebrow" style={{ marginBottom: 24, display: "inline-flex" }}>Get started</span>
        <h2 className="h1" style={{ marginTop: 8, marginBottom: 24 }}>Tell us about your <em>volume.</em></h2>
        <p className="lead" style={{ marginBottom: 32 }}>
          We tailor routing, pricing and settlement to your business. Most merchants are processing live within two weeks.
        </p>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            "Bespoke pricing benchmarked against your current rates",
            "Migration support from your existing PSP",
            "Dedicated solutions engineer through go-live",
            "Settlement to your existing bank — no account change required",
          ].map((t, i) => (
            <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, fontSize: 15, color: "var(--text-2)" }}>
              <span style={{ marginTop: 4, color: "var(--accent)", flexShrink: 0 }}><Check2/></span>
              {t}
            </li>
          ))}
        </ul>
      </div>

      <div style={{ position: "relative", zIndex: 1 }}>
        {submitted ? (
          <div style={{ background: "var(--ink-900)", border: "1px solid var(--line-2)", borderRadius: 16, padding: 32, textAlign: "center" }}>
            <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
              <Check2/>
            </div>
            <h3 className="h3" style={{ marginBottom: 8 }}>Request received</h3>
            <p className="body" style={{ marginBottom: 16 }}>A solutions engineer will reach out within one business day.</p>
            <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>Submit another</button>
          </div>
        ) : (
          <form
            onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
            style={{ background: "var(--ink-900)", border: "1px solid var(--line-2)", borderRadius: 16, padding: 28 }}
          >
            <div className="form-grid">
              <div className="form-row">
                <label className="form-label">Full name</label>
                <input className="form-input" placeholder="Layla Khoury" required/>
              </div>
              <div className="form-row">
                <label className="form-label">Work email</label>
                <input className="form-input" type="email" placeholder="layla@company.com" required/>
              </div>
              <div className="form-row full">
                <label className="form-label">Company</label>
                <input className="form-input" placeholder="Your company" required/>
              </div>
              <div className="form-row">
                <label className="form-label">Monthly volume</label>
                <select className="form-select" defaultValue="">
                  <option value="" disabled>Select range</option>
                  <option>Under $100K</option>
                  <option>$100K – $1M</option>
                  <option>$1M – $10M</option>
                  <option>$10M – $50M</option>
                  <option>$50M+</option>
                </select>
              </div>
              <div className="form-row">
                <label className="form-label">Country</label>
                <select className="form-select" defaultValue="UAE">
                  <option>UAE</option>
                  <option>Saudi Arabia</option>
                  <option>Kuwait</option>
                  <option>Bahrain</option>
                  <option>Qatar</option>
                  <option>Oman</option>
                  <option>Egypt</option>
                  <option>Lebanon</option>
                  <option>Jordan</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="form-row full">
                <label className="form-label">What are you trying to solve?</label>
                <textarea className="form-textarea" rows={3} placeholder="Optional — context helps us route you to the right person."/>
              </div>
            </div>
            <button type="submit" className="btn btn-accent btn-lg" style={{ marginTop: 20, width: "100%", justifyContent: "center" }}>
              Request a quote <Arrow2/>
            </button>
            <p className="small" style={{ marginTop: 12, textAlign: "center" }}>We'll respond within one business day.</p>
          </form>
        )}
      </div>
    </div>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <window.RivalWordmark/>
            <p className="body" style={{ marginTop: 20, maxWidth: 320, fontSize: 14 }}>
              A payments aggregator for businesses. One contract, every method, every acquirer in the region.
            </p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#methods">Payment methods</a></li>
              <li><a href="#platform">Smart routing</a></li>
              <li><a href="#platform">Reconciliation</a></li>
              <li><a href="#platform">Risk</a></li>
              <li><a href="#developers">Payouts</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Developers</h4>
            <ul>
              <li><a href="#developers">Documentation</a></li>
              <li><a href="#developers">API reference</a></li>
              <li><a href="#developers">SDKs</a></li>
              <li><a href="#developers">Changelog</a></li>
              <li><a href="#developers">Status</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#company">About</a></li>
              <li><a href="#company">Customers</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#company">Careers</a></li>
              <li><a href="#company">Press</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 Rival Financial Technologies Ltd.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
            <a href="#">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.RivalContactSection = ContactSection;
window.RivalFooter = Footer;