/* Contact page — form + success state */

const contactStyles = {
  twoCol: {
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: 64,
    alignItems: "start",
  },
  twoColTablet: { gap: 40 },
  twoColMobile: { gridTemplateColumns: "1fr", gap: 48 },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: 24,
  },
  field: { display: "flex", flexDirection: "column", gap: 8 },
  label: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
  },
  input: {
    background: "transparent",
    border: "none",
    borderBottom: "1px solid var(--line)",
    color: "var(--fg)",
    fontFamily: "inherit",
    fontSize: 16,
    padding: "10px 0",
    outline: "none",
    transition: "border-color 160ms ease",
  },
  twoUp: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 },
  twoUpMobile: { gridTemplateColumns: "1fr", gap: 18 },
  textarea: {
    background: "transparent",
    border: "1px solid var(--line)",
    borderRadius: 4,
    color: "var(--fg)",
    fontFamily: "inherit",
    fontSize: 16,
    padding: 14,
    outline: "none",
    minHeight: 140,
    resize: "vertical",
    lineHeight: 1.55,
  },
  chips: { display: "flex", gap: 8, flexWrap: "wrap" },
  chip: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 11,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    padding: "8px 14px",
    borderRadius: 999,
    border: "1px solid var(--line)",
    background: "transparent",
    color: "var(--fg-dim)",
    cursor: "pointer",
    transition: "all 140ms ease",
  },
  chipActive: {
    color: "var(--bg)",
    background: "var(--fg)",
    borderColor: "var(--fg)",
  },
  submit: {
    alignSelf: "flex-start",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    background: "var(--fg)",
    color: "var(--bg)",
    border: "none",
    padding: "16px 24px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: "0.01em",
    cursor: "pointer",
    transition: "background 160ms ease",
    marginTop: 12,
  },
  submitMobile: { alignSelf: "stretch", justifyContent: "center" },
  side: { display: "flex", flexDirection: "column", gap: 28 },
  sideBlock: {
    paddingTop: 18,
    borderTop: "1px solid var(--line)",
  },
  sideLabel: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
    margin: "0 0 8px",
  },
  sideValue: { fontSize: 18, lineHeight: 1.4, margin: 0, color: "var(--fg)" },

  success: {
    padding: "80px 56px",
    border: "1px solid var(--line)",
    borderRadius: 8,
    background:
      "linear-gradient(135deg, color-mix(in oklch, var(--accent) 14%, transparent), color-mix(in oklch, var(--fg) 4%, transparent))",
    display: "flex",
    flexDirection: "column",
    gap: 18,
    alignItems: "flex-start",
    maxWidth: 720,
  },
  successMobile: { padding: "44px 24px" },
  successCheck: {
    width: 48,
    height: 48,
    borderRadius: "50%",
    background: "var(--accent)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "var(--bg)",
    fontSize: 22,
    fontWeight: 600,
  },
  successTitle: {
    fontSize: "clamp(28px, 4vw, 52px)",
    lineHeight: 1.05,
    letterSpacing: "-0.03em",
    fontWeight: 500,
    margin: 0,
    textWrap: "balance",
  },
  successBody: {
    fontSize: 17,
    lineHeight: 1.55,
    color: "var(--fg-dim)",
    margin: 0,
    maxWidth: 520,
    textWrap: "pretty",
  },
  successActions: {
    display: "flex",
    gap: 12,
    marginTop: 12,
    flexWrap: "wrap",
  },
  ghost: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    background: "transparent",
    color: "var(--fg)",
    border: "1px solid var(--glass-border)",
    padding: "12px 18px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 14,
    cursor: "pointer",
    textDecoration: "none",
  },
};

function ContactForm({ isMobile }) {
  const [services, setServices] = React.useState([]);
  const [budget, setBudget] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

  const SERVICE_OPTS = ["Website", "Mobile App", "Design System", "Strategy", "Other"];
  const BUDGET_OPTS = ["< $50k", "$50 — 150k", "$150 — 400k", "$400k+"];

  const toggleService = (s) =>
    setServices((cur) =>
      cur.includes(s) ? cur.filter((x) => x !== s) : [...cur, s]
    );

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div
        role="status"
        aria-live="polite"
        style={{ ...contactStyles.success, ...(isMobile ? contactStyles.successMobile : null) }}
      >
        <div style={contactStyles.successCheck} aria-hidden="true">✓</div>
        <h2 style={contactStyles.successTitle}>
          Thanks — we'll be in touch within two business days.
        </h2>
        <p style={contactStyles.successBody}>
          Your note landed in the studio inbox. Diego or Iris will reply
          personally. If it's urgent, you can also reach us at info@padrestudios.com.
        </p>
        <div style={contactStyles.successActions}>
          <a href="index.html" style={contactStyles.ghost}>← Back home</a>
          <a href="Work.html" style={contactStyles.ghost}>See selected work →</a>
        </div>
      </div>
    );
  }

  const twoUpStyle = { ...contactStyles.twoUp, ...(isMobile ? contactStyles.twoUpMobile : null) };

  return (
    <form style={contactStyles.form} onSubmit={onSubmit} noValidate>
      <div style={twoUpStyle}>
        <div style={contactStyles.field}>
          <label htmlFor="ps-name" style={contactStyles.label}>Your name</label>
          <input id="ps-name" name="name" autoComplete="name" style={contactStyles.input} type="text" required />
        </div>
        <div style={contactStyles.field}>
          <label htmlFor="ps-email" style={contactStyles.label}>Email</label>
          <input id="ps-email" name="email" autoComplete="email" style={contactStyles.input} type="email" required />
        </div>
      </div>

      <div style={twoUpStyle}>
        <div style={contactStyles.field}>
          <label htmlFor="ps-company" style={contactStyles.label}>Company</label>
          <input id="ps-company" name="company" autoComplete="organization" style={contactStyles.input} type="text" />
        </div>
        <div style={contactStyles.field}>
          <label htmlFor="ps-role" style={contactStyles.label}>Role</label>
          <input id="ps-role" name="role" autoComplete="organization-title" style={contactStyles.input} type="text" />
        </div>
      </div>

      <fieldset style={{ ...contactStyles.field, border: "none", padding: 0, margin: 0 }}>
        <legend style={contactStyles.label}>What kind of project?</legend>
        <div style={{ ...contactStyles.chips, marginTop: 8 }}>
          {SERVICE_OPTS.map((s) => (
            <button
              type="button"
              key={s}
              aria-pressed={services.includes(s)}
              style={{
                ...contactStyles.chip,
                ...(services.includes(s) ? contactStyles.chipActive : null),
              }}
              onClick={() => toggleService(s)}
            >
              {s}
            </button>
          ))}
        </div>
      </fieldset>

      <fieldset style={{ ...contactStyles.field, border: "none", padding: 0, margin: 0 }}>
        <legend style={contactStyles.label}>Estimated budget</legend>
        <div style={{ ...contactStyles.chips, marginTop: 8 }}>
          {BUDGET_OPTS.map((b) => (
            <button
              type="button"
              key={b}
              aria-pressed={budget === b}
              style={{
                ...contactStyles.chip,
                ...(budget === b ? contactStyles.chipActive : null),
              }}
              onClick={() => setBudget(b)}
            >
              {b}
            </button>
          ))}
        </div>
      </fieldset>

      <div style={contactStyles.field}>
        <label htmlFor="ps-message" style={contactStyles.label}>Tell us about it</label>
        <textarea
          id="ps-message"
          name="message"
          style={contactStyles.textarea}
          placeholder="A few sentences is plenty. References welcome."
          required
        />
      </div>

      <button
        type="submit"
        style={{ ...contactStyles.submit, ...(isMobile ? contactStyles.submitMobile : null) }}
        onMouseEnter={(e) => (e.currentTarget.style.background = "var(--accent)")}
        onMouseLeave={(e) => (e.currentTarget.style.background = "var(--fg)")}
      >
        Send note <span aria-hidden="true" style={{ fontSize: 16 }}>→</span>
      </button>
    </form>
  );
}

function ContactSidebar() {
  return (
    <aside style={contactStyles.side} aria-label="Contact details">
      <div style={contactStyles.sideBlock}>
        <p style={contactStyles.sideLabel}>Email</p>
        <p style={contactStyles.sideValue}>
          <a href="mailto:info@padrestudios.com" style={{ color: "inherit", textDecoration: "none" }}>
            info@padrestudios.com
          </a>
        </p>
      </div>
      <div style={contactStyles.sideBlock}>
        <p style={contactStyles.sideLabel}>Studios</p>
        <p style={contactStyles.sideValue}>
          www.padrestudios.com
        </p>
      </div>
      <div style={contactStyles.sideBlock}>
        <p style={contactStyles.sideLabel}>Currently booking</p>
        <p style={contactStyles.sideValue}>Q3 / Q4 2026</p>
      </div>
    </aside>
  );
}

function ContactPage() {
  const { isMobile, isTablet } = window.useViewport();
  const twoColStyle = {
    ...contactStyles.twoCol,
    ...(isTablet ? contactStyles.twoColTablet : null),
    ...(isMobile ? contactStyles.twoColMobile : null),
  };
  return (
    <window.PageShell active="Contact" backdrop="quiet">
      <window.PageHero
        eyebrow="Contact"
        title="Tell us about "
        italicTail="the work."
        sub="A short note is enough. We read everything that comes in and reply within two business days — usually less."
      />

      <window.Section title="Inquiry">
        <div style={twoColStyle}>
          <ContactForm isMobile={isMobile} />
          <ContactSidebar />
        </div>
      </window.Section>
    </window.PageShell>
  );
}

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