/* v2 — Final CTA + Lead form (chip selectors + confirmation) + Footer. */

function FinalCTASection({ onScrollTo }) {
  return (
    <section style={{ background: "var(--brass-500)", color: "var(--navy-900)", borderBottom: "1px solid var(--brass-600)" }}>
      <Container style={{ paddingTop: 88, paddingBottom: 88 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)",
          gap: 64,
          alignItems: "end",
        }} className="two-col">
          <h2 style={{
            margin: 0,
            fontSize: "clamp(36px, 4.4vw, 64px)",
            lineHeight: 0.98,
            letterSpacing: "-0.03em",
            fontWeight: 500,
            textWrap: "balance",
          }}>
            Know the full path <em style={{ fontFamily: "inherit", fontStyle: "italic" }}>before</em> you commit a single dirham of capital.
          </h2>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: "var(--navy-800)", textWrap: "pretty" }}>
            Send us your product brief, formula stage, packaging status, or market-entry goal.
            We return a structured Launch Map proposal — timeline, sequence, budget.
          </p>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 40 }}>
          <Btn variant="primary" onClick={() => onScrollTo("launch-map")}>Request UAE Launch Map</Btn>
          <Btn variant="ghost" href={WA_LINK} style={{ borderColor: "var(--navy-800)" }}>WhatsApp an Operator</Btn>
          <Btn variant="ghost" onClick={() => onScrollTo("contact")} style={{ borderColor: "var(--navy-800)" }}>Send product brief</Btn>
          <Btn variant="ghost" onClick={() => onScrollTo("contact")} style={{ borderColor: "var(--navy-800)" }} icon={false}>Request capability deck</Btn>
        </div>
      </Container>
    </section>
  );
}

const LEAD_INTAKE_URL = "https://fcdiwewmbi.execute-api.eu-central-1.amazonaws.com";

function LeadForm({ initialIntent, intentHint }) {
  const intentOptions = [
    "UAE Launch Map",
    "Co-packing / production",
    "Compliance & label",
    "Route-to-market",
    "Private label",
    "Export from UAE",
    "Partnership / LOI",
  ];
  const stageOptions = [
    "Idea / formula", "Prototype", "Existing product",
    "Already selling outside UAE", "Already selling in UAE", "Need production / co-packing",
  ];
  const categoryOptions = [
    "Beverage", "Food", "Functional product", "Private label", "Ingredient / raw material", "Other",
  ];

  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");
  const [form, setForm] = React.useState({
    name: "", company: "", email: "", whatsapp: "",
    category: "", stage: "", intent: "", message: "",
  });

  React.useEffect(() => {
    if (initialIntent) setForm((f) => ({ ...f, intent: initialIntent }));
  }, [initialIntent]);

  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setErrorMsg("");
    setSubmitting(true);
    try {
      const res = await fetch(LEAD_INTAKE_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        setErrorMsg(data.error || `Submission failed (HTTP ${res.status}). Try WhatsApp instead.`);
        setSubmitting(false);
        return;
      }
      setSubmitting(false);
      setSubmitted(true);
    } catch (err) {
      setErrorMsg("Network error — please retry, or reach us on WhatsApp.");
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" style={{ background: "var(--navy-800)", color: "var(--sand-100)" }}>
      <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
        <SectionLabel index="10 / CONTACT" label="Project brief" tone="light" />
        <div className="contact-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)",
          gap: 80,
        }}>
          <div>
            <h2 style={{
              margin: 0,
              fontSize: "clamp(32px, 3.6vw, 52px)",
              lineHeight: 1.0,
              letterSpacing: "-0.03em",
              fontWeight: 500,
              color: "var(--sand-100)",
              textWrap: "balance",
            }}>
              Tell us what you want to launch, produce, or scale.
            </h2>
            <p style={{
              marginTop: 24, fontSize: 17, color: "var(--sand-300)", lineHeight: 1.55,
              textWrap: "pretty", maxWidth: 480,
            }}>
              The more specific your brief, the faster we can return a real
              Launch Map proposal — with sequence, owners, and budget logic.
            </p>

            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 0, border: "1px solid var(--navy-600)" }}>
              <ContactLine label="Phone / WhatsApp" value={PHONE} href={`tel:${PHONE_TEL}`} />
              <ContactLine label="Email" value={EMAIL} href={`mailto:${EMAIL}`} />
              <ContactLine label="UAE office" value="Dubai · United Arab Emirates" />
              <ContactLine label="LinkedIn" value="linkedin.com/company/360hub-ae" href="#" />
            </div>

            <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Btn variant="brass" href={WA_LINK}>WhatsApp an Operator</Btn>
              <Btn variant="ghostLight" href={`tel:${PHONE_TEL}`}>Call direct</Btn>
            </div>
          </div>

          <div style={{ background: "var(--sand-100)", color: "var(--navy-800)", padding: 36 }}>
            {submitted ? (
              <Confirmation onReset={() => { setSubmitted(false); setErrorMsg(""); setForm({ name: "", company: "", email: "", whatsapp: "", category: "", stage: "", intent: "", message: "" }); }} />
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                {intentHint && (
                  <div className="mono" style={{
                    fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "var(--brass-600)",
                    padding: "10px 12px", border: "1px dashed var(--brass-500)",
                    background: "rgba(184,138,68,0.06)",
                  }}>
                    Pre-routed: {intentHint}
                  </div>
                )}
                <div className="form-row" style={formRow}>
                  <Field label="Name" required>
                    <input style={input} value={form.name} onChange={update("name")} placeholder="Full name" required />
                  </Field>
                  <Field label="Company" required>
                    <input style={input} value={form.company} onChange={update("company")} placeholder="Company / brand" required />
                  </Field>
                </div>
                <div className="form-row" style={formRow}>
                  <Field label="Email" required>
                    <input type="email" style={input} value={form.email} onChange={update("email")} placeholder="you@company.com" required />
                  </Field>
                  <Field label="WhatsApp / Phone">
                    <input style={input} value={form.whatsapp} onChange={update("whatsapp")} placeholder="+971 …" />
                  </Field>
                </div>
                <Field label="Product category">
                  <SelectChips options={categoryOptions} value={form.category} onChange={(v) => setForm(f => ({ ...f, category: v }))} />
                </Field>
                <Field label="Current stage">
                  <SelectChips options={stageOptions} value={form.stage} onChange={(v) => setForm(f => ({ ...f, stage: v }))} />
                </Field>
                <Field label="What do you need?">
                  <SelectChips options={intentOptions} value={form.intent} onChange={(v) => setForm(f => ({ ...f, intent: v }))} />
                </Field>
                <Field label="Message / product brief">
                  <textarea
                    style={{ ...input, minHeight: 120, resize: "vertical", fontFamily: "inherit" }}
                    value={form.message} onChange={update("message")}
                    placeholder="Tell us about the product, market goal, formula stage, packaging status, timing…"
                  />
                </Field>
                {errorMsg && (
                  <div className="mono" style={{
                    fontSize: 12, letterSpacing: "0.04em",
                    color: "#7a1f1f",
                    padding: "10px 12px",
                    border: "1px solid #c08585",
                    background: "rgba(204,80,80,0.08)",
                  }}>
                    {errorMsg}
                  </div>
                )}
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginTop: 4 }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--grey-500)", textTransform: "uppercase" }}>
                    Response within 1 UAE business day
                  </span>
                  <button type="submit" disabled={submitting} style={{
                    background: submitting ? "var(--grey-500)" : "var(--brass-500)",
                    color: submitting ? "var(--sand-100)" : "var(--navy-900)",
                    border: "none",
                    padding: "12px 22px",
                    fontSize: 14,
                    fontWeight: 600,
                    letterSpacing: "0.02em",
                    cursor: submitting ? "wait" : "pointer",
                    fontFamily: "inherit",
                    transition: "background 140ms ease",
                  }}>
                    {submitting ? "Sending..." : "Send brief →"}
                  </button>
                </div>
                <style>{`
                  @media (max-width: 640px) {
                    .form-row { grid-template-columns: 1fr !important; }
                  }
                `}</style>
              </form>
            )}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          }
        `}</style>
      </Container>
    </section>
  );
}

const formRow = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 };
const input = {
  width: "100%", padding: "12px 14px",
  border: "1px solid var(--line-strong)",
  background: "var(--sand-50)", color: "var(--navy-800)",
  fontSize: 15, fontFamily: "inherit", outline: "none",
  borderRadius: 0, transition: "border-color 120ms ease",
};

function Field({ label, required, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span className="mono" style={{
        fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase",
        color: "var(--grey-500)",
      }}>
        {label}{required && <span style={{ color: "var(--brass-600)" }}> *</span>}
      </span>
      {children}
    </label>
  );
}

function SelectChips({ options, value, onChange }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
      {options.map((o) => {
        const active = value === o;
        return (
          <button
            type="button"
            key={o}
            onClick={() => onChange(active ? "" : o)}
            style={{
              fontSize: 13, padding: "8px 12px",
              border: `1px solid ${active ? "var(--navy-800)" : "var(--line-strong)"}`,
              background: active ? "var(--navy-800)" : "var(--sand-50)",
              color: active ? "var(--sand-100)" : "var(--navy-700)",
              cursor: "pointer", fontFamily: "inherit",
              transition: "all 140ms ease",
            }}
          >
            {o}
          </button>
        );
      })}
    </div>
  );
}

function ContactLine({ label, value, href }) {
  const content = (
    <div style={{
      display: "grid",
      gridTemplateColumns: "160px 1fr auto",
      alignItems: "center",
      padding: "16px 20px",
      borderBottom: "1px solid var(--navy-600)",
      color: "var(--sand-100)",
      textDecoration: "none",
      gap: 16,
    }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--brass-400)", textTransform: "uppercase" }}>
        {label}
      </span>
      <span style={{ fontSize: 16, color: "var(--sand-100)" }}>{value}</span>
      {href && <span style={{ color: "var(--sand-300)" }}><IconArrow /></span>}
    </div>
  );
  if (href) return <a href={href} style={{ textDecoration: "none" }}>{content}</a>;
  return content;
}

function Confirmation({ onReset }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18, padding: "12px 4px" }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "var(--brass-600)",
      }}>
        Request received · 200 OK
      </div>
      <h3 style={{
        margin: 0, fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em",
        color: "var(--navy-800)", lineHeight: 1.1,
      }}>
        Your brief is in. We will return a Launch Map proposal.
      </h3>
      <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color: "var(--navy-700)" }}>
        For faster response, message us on WhatsApp with your product name and
        launch goal. An operator will respond within one UAE business day.
      </p>
      <div style={{ display: "flex", gap: 10, marginTop: 8, flexWrap: "wrap" }}>
        <Btn variant="primary" href={WA_LINK}>WhatsApp now</Btn>
        <Btn variant="ghost" href={`tel:${PHONE_TEL}`}>Book intro call</Btn>
        <Btn variant="ghost" icon={false} onClick={onReset}>Send another brief</Btn>
      </div>
      <div style={{
        marginTop: 16, padding: "16px 18px",
        background: "var(--sand-200)", border: "1px solid var(--line)",
        display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap",
      }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--brass-600)" }}>
          Next step
        </span>
        <span style={{ fontSize: 14, color: "var(--navy-700)" }}>
          A 30-minute structured review call, then a Launch Map proposal.
        </span>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--navy-900)", color: "var(--sand-300)", padding: "40px 0", borderTop: "1px solid var(--navy-700)" }}>
      <Container style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ fontSize: 18, fontWeight: 600, color: "var(--sand-100)", letterSpacing: "-0.02em" }}>360hub</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--brass-400)", letterSpacing: "0.1em" }}>·AE</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--grey-400)", letterSpacing: "0.14em", textTransform: "uppercase", marginLeft: 12 }}>
            UAE F&amp;B execution platform
          </span>
        </div>
        <div className="mono" style={{ fontSize: 11, color: "var(--grey-400)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
          © 2026 · 360hub-ae · Dubai · UAE
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { FinalCTASection, LeadForm, Footer });