/* global React, ReactDOM, Logo, ArrowRight, FloatCTA */

/* =====================================================================
   CONTACT PAGE — app-contact.jsx
   ===================================================================== */

/* ---------------------- NavMulti ---------------------- */

const NavMulti = () => {
  const [open, setOpen] = React.useState(false);
  return (
  <nav className="nav">
    <div className="wrap nav-inner">
      <a href="/" className="brand">
        <Logo size={64} />
        <span className="brand-name">
          octocrew<span className="tld">.ai</span>
        </span>
      </a>
      <div className="nav-links">
        <a href="agents.html">{window.t("AI Crew")}</a>
        <a href="case-studies.html">{window.t("Case Studies")}</a>
        <a href="contact.html">{window.t("Contact")}</a>
      </div>
      <LangToggle />
      <a href="contact.html" className="nav-cta" data-octocrew-cal="booking">
        {window.t("Book a discovery call")} <ArrowRight />
      </a>
      <button
        className="nav-burger"
        aria-label="Menu"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        <span /><span /><span />
      </button>
    </div>
    <div className={"nav-mobile" + (open ? " open" : "")}>
      <div className="wrap">
        <a href="agents.html">{window.t("AI Crew")}</a>
        <a href="case-studies.html">{window.t("Case Studies")}</a>
        <a href="contact.html">{window.t("Contact")}</a>
        <a href="contact.html" className="nav-mobile-cta" data-octocrew-cal="booking">{window.t("Book a discovery call")}</a>
        <LangToggle />
      </div>
    </div>
  </nav>
  );
};

/* ---------------------- Hero (glass / aura) ---------------------- */

const ContactHero = () => (
  <section
    className="hero"
    id="top"
    style={{ position: "relative", overflow: "hidden" }}
  >
    <div className="aura aura-violet" style={{ width: "62vmin", height: "62vmin", top: "-18%", left: "-6%" }} />
    <div className="aura aura-lime" style={{ width: "48vmin", height: "48vmin", bottom: "-22%", right: "-8%" }} />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div style={{ maxWidth: "780px" }}>
        <h1 className="h-display" dangerouslySetInnerHTML={{ __html: window.t('Let\'s talk about your <em class="accent">crew</em>') }} />
        <p className="sub">
          {window.t("Book a 30-minute discovery call. We'll map your ops, show the math, and tell you straight whether a crew is right for you.")}
        </p>
      </div>
    </div>
  </section>
);

/* ---------------------- Lead form ---------------------- */

const VERTICAL_OPTIONS = [
  ["", "Select…"],
  ["marketing-agency", "Marketing agency"],
  ["ecommerce", "E-commerce / DTC"],
  ["igaming", "iGaming / Affiliate"],
  ["saas", "SaaS / Tech"],
  ["other", "Other"],
];

const LeadForm = () => {
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | error
  const [form, setForm] = React.useState({ name: "", email: "", company: "", website: "", vertical: "", message: "" });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    if (!form.name.trim() || !form.email.trim()) { setStatus("error"); return; }
    setStatus("sending");
    try {
      const r = await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await r.json().catch(() => ({}));
      setStatus(r.ok && data.ok ? "ok" : "error");
    } catch (_) {
      setStatus("error");
    }
  };

  if (status === "ok") {
    return (
      <div className="lead-form-done">
        <span className="tick">&#10003;</span>
        <h3>{window.t("Got it — we'll be in touch.")}</h3>
        <p>{window.t("We'll reply within 24 hours. Prefer to book straight away?")}</p>
        <div style={{ paddingTop: 10 }}>
          <a className="btn btn-primary" href="contact.html" data-octocrew-cal="booking">
            {window.t("Book a discovery call")} <ArrowRight />
          </a>
        </div>
      </div>
    );
  }

  return (
    <form className="lead-form" onSubmit={submit} noValidate>
      <div className="lf-row">
        <label className="lf-field">
          <span>{window.t("Your name")} *</span>
          <input type="text" name="name" required value={form.name} onChange={upd("name")} autoComplete="name" />
        </label>
        <label className="lf-field">
          <span>{window.t("Work email")} *</span>
          <input type="email" name="email" required value={form.email} onChange={upd("email")} autoComplete="email" />
        </label>
      </div>
      <div className="lf-row">
        <label className="lf-field">
          <span>{window.t("Company")}</span>
          <input type="text" name="company" value={form.company} onChange={upd("company")} autoComplete="organization" />
        </label>
        <label className="lf-field">
          <span>{window.t("Website")}</span>
          <input type="text" name="website" value={form.website} onChange={upd("website")} placeholder="example.com" />
        </label>
      </div>
      <label className="lf-field">
        <span>{window.t("What kind of business?")}</span>
        <select name="vertical" value={form.vertical} onChange={upd("vertical")}>
          {VERTICAL_OPTIONS.map(([v, l]) => (
            <option key={v} value={v}>{window.t(l)}</option>
          ))}
        </select>
      </label>
      <label className="lf-field">
        <span>{window.t("What's draining your hours?")}</span>
        <textarea name="message" rows={3} value={form.message} onChange={upd("message")} />
      </label>
      {status === "error" && (
        <p className="lf-error">{window.t("Something went wrong. Please email us at hello@octocrew.ai.")}</p>
      )}
      <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
        {status === "sending"
          ? window.t("Sending…")
          : <React.Fragment>{window.t("Send brief")} <ArrowRight /></React.Fragment>}
      </button>
    </form>
  );
};

/* ---------------------- §1 Contact Options ---------------------- */

const ContactOptions = () => (
  <section className="section" id="options">
    <div className="wrap">
      <div className="block-head">
        <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Two ways to <span class="accent">start</span>') }} />
        <p className="sec-lead">{window.t("Pick the one that fits how you work.")}</p>
      </div>

      <div className="promises">
        <div className="promise">
          <div className="promise-tag">
            <span className="icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M8 13V3M3 8l5-5 5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            {window.t("Discovery call · 30 minutes")}
          </div>
          <h3>{window.t("Hire your AI crew.")}</h3>
          <p>
            {window.t("We'll map where your ops are leaking and show the math for your specific stack. Walk away with the numbers either way.")}
          </p>
          <div className="receipt" style={{ justifyContent: "flex-start", gap: 16, padding: "16px 0" }}>
            <span><span className="tick">&#10003;</span> {window.t("No deck")}</span>
            <span><span className="tick">&#10003;</span> {window.t("No sales pitch")}</span>
            <span><span className="tick">&#10003;</span> {window.t("Numbers walk-away")}</span>
          </div>
          <div style={{ paddingTop: 8 }}>
            <a className="btn btn-primary" href="contact.html" data-octocrew-cal="booking">
              {window.t("Book a discovery call")} <ArrowRight />
            </a>
          </div>
        </div>

        <div className="promise">
          <div className="promise-tag">
            <span className="icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            {window.t("Send a brief")}
          </div>
          <h3>{window.t("Send us a note.")}</h3>
          <p>
            {window.t("Prefer async? Tell us about your team, your stack, and what's draining your hours. We'll reply within 24 hours with whether a crew makes sense.")}
          </p>
          <LeadForm />
          <div className="lf-fallback">
            {window.t("Prefer email?")} <a href="mailto:hello@octocrew.ai">hello@octocrew.ai</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------------------- §2 What Happens Next ---------------------- */

const WhatHappensNext = () => (
  <section className="section sunken" id="next">
    <div className="wrap">
      <div className="block-head">
        <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Three steps. Zero <span class="accent">pressure</span>') }} />
        <p className="sec-lead">{window.t("From first call to decision, on your timeline.")}</p>
      </div>

      <div className="timeline timeline-3">
        <div className="week w1">
          <div className="bar" />
          <div className="week-tag">
            <b>{window.t("Step 01")}</b> <span className="accent-num">{window.t("Listen")}</span>
          </div>
          <h4>{window.t("We listen.")}</h4>
          <p>
            {window.t("30-minute call. We ask about your stack, team size, and what's draining hours. You talk, we take notes.")}
          </p>
          <div className="micro">&#8594; {window.t("No prep needed. Come as you are.")}</div>
        </div>
        <div className="week w2">
          <div className="bar" />
          <div className="week-tag">
            <b>{window.t("Step 02")}</b> <span className="accent-num">{window.t("Map")}</span>
          </div>
          <h4>{window.t("We map.")}</h4>
          <p>
            {window.t("Within 48 hours, you get a crew design and the math for your business. Real numbers, not a templated pitch deck.")}
          </p>
          <div className="micro">&#8594; {window.t("You keep the analysis even if you don't proceed.")}</div>
        </div>
        <div className="week w3">
          <div className="bar" />
          <div className="week-tag">
            <b>{window.t("Step 03")}</b> <span className="accent-num">{window.t("Decide")}</span>
          </div>
          <h4>{window.t("You decide.")}</h4>
          <p>
            {window.t("No pressure. If it makes sense, we start Week 1. If not, you keep the analysis and walk away with the numbers.")}
          </p>
          <div className="micro">&#8594; {window.t("No lock-in. No hard sell. Your call.")}</div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------------------- Simple Footer ---------------------- */

const SimpleFooter = () => (
  <section className="section" style={{ borderTop: "1px solid var(--rule)", paddingTop: "clamp(40px, 5vh, 64px)", paddingBottom: "clamp(40px, 5vh, 64px)" }}>
    <div className="wrap">
      <div className="foot-meta" style={{ marginTop: 0, borderTop: "none", paddingTop: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ color: "var(--brand)", display: "inline-flex" }}>
            <Logo size={22} />
          </span>
          <span>{window.t("Octocrew · Managed Agentic Crews · MMXXVI")}</span>
        </div>
        <div>hello@octocrew.ai</div>
        <div>{window.t("Privacy · Terms · Security")}</div>
      </div>
    </div>
  </section>
);

/* ---------------------- App ---------------------- */

function App() {
  return (
    <React.Fragment>
      <NavMulti />
      <main id="main-content">
        <ContactHero />
        <ContactOptions />
        <WhatHappensNext />
        <SimpleFooter />
      </main>
      <FloatCTA />
    </React.Fragment>
  );
}

Object.assign(window, { NavMulti, ContactHero, ContactOptions, WhatHappensNext, SimpleFooter });

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