const { Button: OButton, Field: OField, Input: OInput, Textarea: OTextarea } = window.LeVaultDesignSystem_1c8a5e;

function OrderForm({ order, set }) {
  const [touched, setTouched] = React.useState(false);
  const missing = { initials: !order.initials, name: !order.name.trim(), phone: !order.phone.trim(), address: !order.address.trim() };
  const ready = !Object.values(missing).some(Boolean);
  const submit = e => {
    e.preventDefault();
    if (!ready) { setTouched(true); return; }
    window.open(waLink(order), "_blank", "noopener");
  };
  const err = k => (touched && missing[k]);
  return (
    <section className="section lv-center" id="order" style={{ background: "var(--lv-white)", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)" }}>
      <div className="shell">
        <SectionHead title="Order" script="details" />
        <Reveal>
          <form onSubmit={submit} noValidate style={{ display: "grid", gap: "var(--space-7)", maxWidth: 560, margin: "0 auto", textAlign: "left" }}>
            <OField label="Full name" error={err("name") ? "We need a name for the order." : undefined}>
              <OInput value={order.name} invalid={err("name")} placeholder="Alexandra V. Wiraatmadja" onChange={e => set({ name: e.target.value })} />
            </OField>
            <OField label="WhatsApp number" hint="Include your country code." error={err("phone") ? "We reply on this number." : undefined}>
              <OInput value={order.phone} invalid={err("phone")} placeholder="+62 812 0000 0000" onChange={e => set({ phone: e.target.value })} />
            </OField>
            <OField label="Delivery address" error={err("address") ? "Where should the case go?" : undefined}>
              <OTextarea rows={3} value={order.address} invalid={err("address")} placeholder="Street, city, province, postcode" onChange={e => set({ address: e.target.value })} />
            </OField>
            <OField label="Order notes" hint="Optional — gift wrapping, a delivery window, anything else.">
              <OTextarea rows={2} value={order.notes} placeholder="This one is a gift — please leave the price out." onChange={e => set({ notes: e.target.value })} />
            </OField>
            {touched && missing.initials ? (
              <p style={{ font: "var(--type-body-sm)", fontFamily: "var(--font-sans)", color: "var(--text-danger)", margin: 0 }}>Set your initials in the section above first.</p>
            ) : null}
            <div style={{ textAlign: "center", marginTop: "var(--space-3)" }}>
              <OButton type="submit" variant="primary" size="lg" iconRight="arrow-right">Send order to WhatsApp</OButton>
              <p style={{ font: "var(--type-caption)", fontFamily: "var(--font-sans)", color: "var(--text-muted)", margin: "var(--space-5) 0 0" }}>
                Opens WhatsApp with your case, monogram and {priceOf(order.currency)} already written.
              </p>
            </div>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="lv-foot lv-center">
      <div className="shell" style={{ display: "grid", justifyItems: "center", gap: "var(--space-6)" }}>
        <img src={(window.__resources&&window.__resources.logoFooter)||"assets/logo-footer.png"} alt="Le Vault" style={{ height: 84, width: "auto" }} />
        <p className="script" style={{ fontSize: "34px", color: "var(--lv-brass-200)", margin: 0 }}>Your Beauty Ritual, Safely Kept.</p>
        <p style={{ font: "var(--type-body-sm)", fontFamily: "var(--font-sans)", color: "var(--text-on-inverse-muted)", margin: 0, maxWidth: "44ch" }}>
          Designed as a modern vault for your daily essentials.
        </p>
        <div style={{ display: "flex", gap: "var(--space-9)", font: "var(--type-body-sm)", fontFamily: "var(--font-sans)", marginTop: "var(--space-3)" }}>
          <a href="#personalize">Personalise</a>
          <a href="#spec">Specification</a>
          <a href={"https://wa.me/" + WA_NUMBER} target="_blank" rel="noopener">WhatsApp</a>
        </div>
      </div>
      <div className="shell" style={{ marginTop: "var(--space-10)", paddingTop: "var(--space-6)", borderTop: "1px solid var(--border-inverse)" }}>
        <p style={{ font: "var(--type-caption)", fontFamily: "var(--font-sans)", color: "var(--text-on-inverse-muted)", margin: 0 }}>© {new Date().getFullYear()} Le Vault. All rights reserved.</p>
      </div>
    </footer>
  );
}

Object.assign(window, { OrderForm, Foot });