const { Button, Field, Input } = window.LeVaultDesignSystem_1c8a5e;

function CaseStage({ variant, initials }) {
  return (
    <div className="stage">
      {VARIANTS.map(v => (
        <div key={v.id} className="stage-layer" style={{ opacity: v.id === variant ? 1 : 0 }}>
          <img src={v.photo} alt={"Le Vault vanity case in " + v.label} />
        </div>
      ))}
      <div className={"plaque" + (initials ? "" : " ghost")}><b>{initials || "ABC"}</b></div>
    </div>
  );
}

function Personalize({ order, set }) {
  const v = VARIANTS.find(x => x.id === order.variant);
  return (
    <section className="section" id="personalize">
      <div className="shell grid2" style={{ alignItems: "start", gap: "var(--space-12)" }}>
        <Reveal>
          <CaseStage variant={order.variant} initials={order.initials} />
          <p className="eyebrow" style={{ margin: "var(--space-5) 0 0" }}>For preview only. Final result may vary.</p>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: "var(--type-display-2)", fontFamily: "var(--font-display)", fontWeight: 400, margin: 0 }}>
            The Custom<br />Vanity Case
          </h1>
          <p className="script" style={{ fontSize: "42px", margin: "var(--space-3) 0 var(--space-7)" }}>with initial monogramming</p>
          <p className="prose" style={{ font: "var(--type-body-lg)", margin: 0 }}>
            Personalized with your initial monogramming at <strong>one day service</strong> and designed with removable easy-care inserts to protect every piece of your routine.
          </p>
          <p style={{ font: "var(--type-h2)", fontFamily: "var(--font-display)", fontWeight: 400, color: "var(--maroon)", margin: "var(--space-8) 0 var(--space-5)" }}>{priceOf(order.currency)}</p>
          <div className="pillrow" style={{ maxWidth: 320 }}>
            {CURRENCIES.map(c => (
              <button key={c.id} type="button" aria-pressed={c.id === order.currency} onClick={() => set({ currency: c.id })}>{c.label}</button>
            ))}
          </div>
          <div style={{ display: "grid", gap: "var(--space-9)", marginTop: "var(--space-10)" }}>
            <div>
              <p className="eyebrow" style={{ margin: "0 0 var(--space-5)" }}>Options</p>
              <div className="swatchrow">
                {VARIANTS.map(x => (
                  <button key={x.id} className="swatch" aria-pressed={x.id === order.variant} onClick={() => set({ variant: x.id })} type="button">
                    <i style={{ background: x.swatch }}></i>
                    <span>{x.label}</span>
                  </button>
                ))}
              </div>
              <p style={{ font: "var(--type-body-sm)", fontFamily: "var(--font-sans)", color: "var(--text-muted)", margin: "var(--space-5) 0 0" }}>{v.note}</p>
            </div>
            <div>
              <p className="eyebrow" style={{ margin: "0 0 var(--space-5)" }}>Monogram</p>
              <div style={{ maxWidth: 260 }}>
                <Field label="Your initials" hint={(order.initials.length || 0) + " of 4 letters · foil, sans serif, uppercase"}>
                  <Input value={order.initials} maxLength={4} placeholder="ABC" autoComplete="off"
                    style={{ textTransform: "uppercase", letterSpacing: ".22em", fontFamily: "var(--font-sans)" }}
                    onChange={e => set({ initials: cleanInitials(e.target.value) })} />
                </Field>
              </div>
            </div>
            <div><Button variant="primary" size="lg" iconRight="arrow-right" as="a" href="#order">Continue to order details</Button></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStage, Personalize });