/* eslint-disable */
// Nav, ScrollBar, Contact, Footer

const { useState: _cUS, useEffect: _cUE } = React;

function ScrollBar() {
  const [w, setW] = _cUS(0);
  _cUE(() => {
    const on = () => {
      const h = document.documentElement;
      const m = h.scrollHeight - h.clientHeight;
      setW(m > 0 ? (h.scrollTop / m) * 100 : 0);
    };
    window.addEventListener("scroll", on, { passive: true }); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return <div className="scrollbar" style={{ width: w + "%" }} />;
}

function NavTicker() {
  const [clock, setClock] = _cUS("");
  _cUE(() => {
    const tick = () => {
      const d = new Date();
      setClock(`${String(d.getUTCHours()).padStart(2,"0")}:${String(d.getUTCMinutes()).padStart(2,"0")}:${String(d.getUTCSeconds()).padStart(2,"0")} UTC`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="nav-ticker">
      <div className="nav-ticker-inner">
        <div className="left">
          <span className="group"><span className="blip"></span><span>Systems · Nominal</span></span>
          <span className="sep hide-sm"></span>
          <span className="group hide-sm"><span>Node</span><span className="v">AIF-014</span></span>
          <span className="sep hide-sm"></span>
          <span className="group hide-sm"><span>Calls handled today</span><span className="v red">2,148</span></span>
        </div>
        <div className="right">
          <span className="group hide-sm"><span>Booking</span><span className="v">June 2026</span></span>
          <span className="sep hide-sm"></span>
          <span className="group"><span className="red-blip"></span><span className="v">{clock || "--:--:-- UTC"}</span></span>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <>
      <NavTicker />
      <nav className="nav">
        <div className="nav-inner">
          <Brand />
          <div className="nav-links">
            <a href="#services">Services</a>
            <a href="#how">How</a>
            <a href="#surfaces">Build</a>
            <a href="#about">Founder</a>
            <a href="#governance">Trust</a>
            <a href="mission-control.html">AiFusio MC</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="nav-cta">
            <span className="label"><span className="dot"></span>Booking June</span>
            <a href="mission-control.html" className="btn btn-mc btn-sm" aria-label="AiFusio MC — our free open-source agent console">
              <span className="mc-full">AiFusio MC</span>
              <span className="mc-short">MC</span>
              <span className="arrow">→</span>
            </a>
            <a href="#contact" className="btn btn-red btn-sm">
              <span className="cta-full">Talk to us</span>
              <span className="cta-short">Talk</span>
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </nav>
    </>
  );
}

function Contact() {
  const [status, setStatus] = _cUS("idle"); // idle | sending | ok | error
  const [errMsg, setErrMsg] = _cUS("");

  async function onSubmit(e) {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrMsg("");

    const fd = new FormData(e.currentTarget);
    const payload = Object.fromEntries(fd.entries());

    try {
      const r = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!r.ok) {
        const data = await r.json().catch(() => ({}));
        throw new Error(data.error || `Server returned ${r.status}`);
      }
      setStatus("ok");
      e.target.reset();
    } catch (err) {
      setStatus("error");
      setErrMsg(err.message || "Something went wrong. Please call 314-400-8006 or email sales@aifusio.com.");
    }
  }

  return (
    <section className="contact section-pad" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-left">
            <Reveal><Eyebrow>Let's talk</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{marginTop:24}}>Don't watch the<br/>AI shift from the<br/><em>sidelines.</em></h2>
            </Reveal>
            <Reveal delay={160}>
              <p>
                Tell us about your business. We'll come back within one business day with honest
                thoughts — not a sales pitch. <strong>First call is free.</strong> The audit is paid.
                If we're not the right fit, we'll tell you.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div className="contact-direct">
                <a href="tel:+13144008006" className="contact-direct-item">
                  <span className="lbl">▌Call directly</span>
                  <span className="v">314.400.8006</span>
                </a>
                <a href="mailto:sales@aifusio.com" className="contact-direct-item">
                  <span className="lbl">▌Or email</span>
                  <span className="v">sales@aifusio.com</span>
                </a>
              </div>
            </Reveal>
            <Reveal delay={260}>
              <ul className="bullets">
                <li>30-min discovery call · free</li>
                <li>NDA available on request</li>
                <li>Most clients in $1M–$50M revenue</li>
                <li>We'll tell you if you're not ready</li>
              </ul>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <form className="contact-form" onSubmit={onSubmit}>
              <div className="field">
                <label htmlFor="cf-name">Your name</label>
                <input id="cf-name" name="name" type="text" required />
              </div>
              <div className="field">
                <label htmlFor="cf-company">Company</label>
                <input id="cf-company" name="company" type="text" required />
              </div>
              <div className="field">
                <label htmlFor="cf-email">Work email</label>
                <input id="cf-email" name="email" type="email" required />
              </div>
              <div className="field">
                <label htmlFor="cf-phone">Phone</label>
                <input id="cf-phone" name="phone" type="tel" />
              </div>
              <div className="field">
                <label htmlFor="cf-industry">Industry</label>
                <select id="cf-industry" name="industry" required defaultValue="">
                  <option value="" disabled>Choose one</option>
                  <option>Contractor / Trades</option>
                  <option>Home Services</option>
                  <option>Professional Services</option>
                  <option>Medical / Wellness</option>
                  <option>Multi-Location Local</option>
                  <option>Manufacturing / Distribution</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="cf-rev">Annual revenue</label>
                <select id="cf-rev" name="revenue" required defaultValue="">
                  <option value="" disabled>Choose one</option>
                  <option>Under $1M</option>
                  <option>$1M – $5M</option>
                  <option>$5M – $15M</option>
                  <option>$15M – $50M</option>
                  <option>$50M+</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="cf-emp">Employees</label>
                <select id="cf-emp" name="employees" defaultValue="">
                  <option value="" disabled>Choose one</option>
                  <option>Under 10</option>
                  <option>10 – 50</option>
                  <option>50 – 150</option>
                  <option>150 – 500</option>
                  <option>500+</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="cf-software">Main software you use</label>
                <input id="cf-software" name="software" type="text" placeholder="HubSpot, Jobber, QB, etc." />
              </div>
              <div className="field full">
                <label htmlFor="cf-pain">Where's the biggest bottleneck right now?</label>
                <textarea id="cf-pain" name="bottleneck" placeholder="Calls falling through, paperwork drowning admin, leads going cold, manual reporting... say it like you'd say it to a friend." required></textarea>
              </div>
              <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
              <button type="submit" disabled={status === "sending"}>
                {status === "sending" ? "Sending…" : status === "ok" ? "Sent ✓ — we'll be in touch" : "Send to AI Fusio →"}
              </button>
              {status === "ok" && (
                <div className="contact-msg ok">
                  Thanks — Andrew will be in touch within one business day.
                </div>
              )}
              {status === "error" && (
                <div className="contact-msg err">
                  {errMsg} Call <a href="tel:+13144008006">314-400-8006</a> or email <a href="mailto:sales@aifusio.com">sales@aifusio.com</a>.
                </div>
              )}
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Brand />
            <p className="about">
              AI Fusio is an AI integration and productivity engineering company.
              We design, build, and operate the intelligent layer of modern businesses.
            </p>
          </div>
          <div>
            <h6>Services</h6>
            <ul>
              <li><a href="#services">Tech-stack audit</a></li>
              <li><a href="#services">Integration & build</a></li>
              <li><a href="#services">Managed AI department</a></li>
              <li><a href="#surfaces">Voice AI</a></li>
              <li><a href="#surfaces">Document AI</a></li>
            </ul>
          </div>
          <div>
            <h6>Industries</h6>
            <ul>
              <li><a href="#industries">Contractors</a></li>
              <li><a href="#industries">Home Services</a></li>
              <li><a href="#industries">Professional Services</a></li>
              <li><a href="#industries">Medical & Wellness</a></li>
              <li><a href="#industries">Manufacturing</a></li>
            </ul>
          </div>
          <div>
            <h6>Resources</h6>
            <ul>
              <li><a href="#scorecard">AI Readiness Scorecard</a></li>
              <li><a href="#governance">Governance & trust</a></li>
              <li><a href="#resources">Guides & templates</a></li>
              <li><a href="#workshops">Workshops</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#testimonials">References</a></li>
            </ul>
          </div>
          <div>
            <h6>Company</h6>
            <ul>
              <li><a href="#about">Andrew D'Angelo</a></li>
              <li><a href="#how">How we work</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="mailto:sales@aifusio.com">sales@aifusio.com</a></li>
              <li><a href="tel:+13144008006">314.400.8006</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="signature">AI FUSIO · <em>Don't get left behind.</em></div>
          <div>© {new Date().getFullYear()} AI FUSIO · ALL RIGHTS RESERVED</div>
        </div>
      </div>
    </footer>
  );
}

window.ScrollBar = ScrollBar;
window.Nav = Nav;
window.Contact = Contact;
window.Footer = Footer;