/* global React */
const { useState: _comUseState } = React;

const COMMISSION_TO = "bah@bahhaus.com";

function Commission({ onNav }) {
  const [submitted, setSubmitted] = _comUseState(false);
  const [error, setError]         = _comUseState("");
  const [tier, setTier]           = _comUseState("soft");
  const [form, setForm]           = _comUseState({
    name: "",
    brief: "",
  });

  const tiers = [
    {
      id: "soft",
      price: "$120",
      label: "soft portrait",
      sub: "a digital painting in my usual style",
    },
    {
      id: "custom",
      price: "$180",
      label: "custom",
      sub: "something more involved or out of style",
    },
  ];

  const submit = () => {
    if (!form.name.trim() || !form.brief.trim()) {
      setError("please fill in your name and brief.");
      return;
    }
    setError("");
    const tierLabel = (tiers.find((t) => t.id === tier) || {}).label || tier;
    const subject = `commission · ${tierLabel} · ${form.name}`;
    const body = [
      `hi Bárbara,`,
      "",
      `i'm ${form.name}, and i'd like to commission a ${tierLabel}.`,
      "",
      "here's what i'm imagining:",
      "",
      form.brief,
      "",
      "thank you!",
    ].join("\n");
    const href = `mailto:${encodeURIComponent(COMMISSION_TO)}`
      + `?subject=${encodeURIComponent(subject)}`
      + `&body=${encodeURIComponent(body)}`;
    window.location.href = href;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section style={{ padding: "96px 0 128px" }}>
        <div style={{ maxWidth: 640, margin: "0 auto", padding: "0 32px", textAlign: "center" }}>
          <Stars count={3} style={{ fontSize: 28, justifyContent: "center", marginBottom: 16, display: "flex" }} />
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: 64,
            color: "var(--ink)",
            margin: "0 0 18px",
            letterSpacing: "-0.01em",
            lineHeight: 1,
          }}>
            got it 💌
          </h2>
          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 19,
            color: "var(--ink-soft)",
            lineHeight: 1.6,
            margin: "0 0 32px",
          }}>
            i'll reply within a few days. thank you for trusting me with this. 🤍
          </p>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 28, color: "var(--marigold-700)" }}>
            xx, Bárbara
          </div>
          <div style={{ marginTop: 36 }}>
            <Button variant="secondary" onClick={() => onNav("gallery")}>see more of the work</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section style={{ padding: "64px 0 96px", position: "relative" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ textAlign: "center", marginBottom: 48, position: "relative" }}>
          <div style={{ position: "absolute", top: -8, left: "50%", transform: "translateX(-50%)" }}>
            <Doodle kind="sparkle" size={24} color="var(--marigold-500)" />
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 72, color: "var(--ink)", margin: "0 0 12px", letterSpacing: "-0.01em", lineHeight: 1 }}>
            start a piece
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, color: "var(--ink-soft)", maxWidth: 540, margin: "0 auto", lineHeight: 1.6 }}>
            tell me what you're imagining. i'll reply within a few days.
          </p>
        </div>

        {/* how it works strip */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          marginBottom: 40,
          padding: "8px 0",
        }}>
          {[
            { k: "we chat",      v: "send me a brief. i'll reply within a few days." },
            { k: "rough sketch", v: "i share a loose draft so we can adjust together." },
            { k: "i paint",      v: "the piece comes together over a week or two." },
            { k: "you get it",   v: "high-res digital file, yours to print or share." },
          ].map((step, i) => (
            <div key={i} style={{ position: "relative", padding: "8px 4px" }}>
              <div style={{
                fontFamily: "var(--font-hand)",
                fontSize: 30,
                color: "var(--marigold-700)",
                lineHeight: 1.05,
              }}>{step.k}</div>
              <p style={{ margin: "10px 0 0", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5 }}>{step.v}</p>
            </div>
          ))}
        </div>

        <div style={{
          background: "var(--cream)",
          borderRadius: 24,
          padding: 40,
          border: "1px solid rgba(42,33,24,0.08)",
          boxShadow: "0 8px 24px rgba(42,33,24,0.08)",
          display: "grid",
          gap: 28,
          position: "relative",
        }}>
          {/* taped-on note in corner */}
          <div style={{ position: "absolute", top: -22, right: 24, transform: "rotate(4deg)", zIndex: 2 }}>
            <Tape tone="marigold" rotate={0} width={60} top={-2} left={28} opacity={0.7} />
            <div style={{
              background: "var(--paper)",
              padding: "10px 14px",
              borderRadius: 6,
              boxShadow: "0 4px 12px rgba(42,33,24,0.10)",
              fontFamily: "var(--font-hand)",
              fontSize: 20,
              color: "var(--marigold-700)",
              maxWidth: 210,
              lineHeight: 1.2,
            }}>
              flat prices. no surprises ✨
            </div>
          </div>

          {/* pricing tiers */}
          <div>
            <Eyebrow>pick a tier</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12 }}>
              {tiers.map((tt) => {
                const active = tier === tt.id;
                return (
                  <button
                    key={tt.id}
                    onClick={() => setTier(tt.id)}
                    style={{
                      border: 0,
                      cursor: "pointer",
                      background: active ? "var(--petal)" : "var(--paper)",
                      color: "var(--ink)",
                      padding: "20px 20px",
                      borderRadius: 16,
                      fontFamily: "var(--font-body)",
                      boxShadow: active
                        ? "inset 0 0 0 1.5px var(--marigold-600)"
                        : "inset 0 0 0 1px rgba(42,33,24,0.10)",
                      transition: "all 180ms cubic-bezier(0.22,1,0.36,1)",
                      textAlign: "left",
                      display: "grid",
                      gap: 4,
                    }}
                  >
                    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
                      <span style={{ fontWeight: 700, fontSize: 16 }}>{tt.label}</span>
                      <span style={{
                        fontFamily: "var(--font-display)",
                        fontSize: 26,
                        color: "var(--marigold-700)",
                        letterSpacing: "-0.01em",
                        lineHeight: 1,
                      }}>{tt.price}</span>
                    </div>
                    <div style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.4 }}>{tt.sub}</div>
                  </button>
                );
              })}
            </div>
          </div>

          <Field label="your name">
            <input
              value={form.name}
              onChange={e => setForm({ ...form, name: e.target.value })}
              placeholder="e.g. juno"
              style={inputStyle}
            />
          </Field>

          <Field label="what should i draw?">
            <textarea
              value={form.brief}
              onChange={e => setForm({ ...form, brief: e.target.value })}
              rows={4}
              placeholder="a vibe, a person, a feeling. anything helps."
              style={{ ...inputStyle, resize: "vertical", minHeight: 96, fontFamily: "var(--font-body)" }}
            />
          </Field>

          <div style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            color: "var(--ink-muted)",
            lineHeight: 1.6,
            padding: "12px 14px",
            background: "var(--paper)",
            borderRadius: 10,
            border: "1px dashed rgba(42,33,24,0.16)",
          }}>
            sending opens your email app with the brief filled in — feel free to attach any reference images there before you hit send 🖼️
          </div>

          <div style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            paddingTop: 8,
            borderTop: "1px dashed rgba(42,33,24,0.16)",
            marginTop: 4,
            gap: 12,
            flexWrap: "wrap",
          }}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: error ? "var(--marigold-800)" : "var(--ink-muted)" }}>
              {error || "sending this starts a conversation. nothing booked yet 🤍"}
            </div>
            <Button variant="primary" size="lg" icon="send" onClick={submit} className="plausible-event-name=Send+Email">
              send brief
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

const inputStyle = {
  fontFamily: "var(--font-body)",
  fontSize: 15,
  padding: "12px 14px",
  background: "var(--paper)",
  border: "1px solid rgba(42,33,24,0.18)",
  borderRadius: 8,
  color: "var(--ink)",
  outline: "none",
  width: "100%",
  boxSizing: "border-box",
};

function Field({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600, color: "var(--ink-soft)" }}>{label}</span>
      {children}
    </label>
  );
}

window.Commission = Commission;