// SECTION 6 — CONTACT + FOOTER (navy)
// Form fields are part of the section itself.
// "Book now" submits the form. "or message me" scrolls to the comments field.
function ContactSection({ withFooter = true }) {
  const [form, setForm] = React.useState({ name: "", phone: "", service: "", comments: "" });
  const [sent, setSent] = React.useState(false);
  const [focused, setFocused] = React.useState(null);
  const [error, setError] = React.useState(false);
  const commentsRef = React.useRef(null);

  const services = [
    "Haircuts & Styling",
    "Color",
    "Highlights · Balayage",
    "Haircare Treatment",
    "Men's Grooming",
    "Event Styling",
  ];

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

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.phone || !form.service) { setError(true); return; }
    setSent(true);
  };

  const focusComments = (e) => {
    e.preventDefault();
    if (commentsRef.current) {
      commentsRef.current.focus({ preventScroll: false });
      commentsRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <section id="contact" style={s.contact}>
      <div style={s.contactGlow} />

      <RevealGroup baseDelay={0} stagger={120} threshold={0.1} style={s.contactInner}>
        <Reveal as="p" style={{ ...s.sectionLabel, color: "rgba(250,248,244,0.6)" }}>
          <span style={{ ...s.labelRule, background: "rgba(250,248,244,0.6)" }} />
          Contact
        </Reveal>

        <Reveal as="h2" style={s.contactH} duration={1300} distance={22}>
          Ready for hair<br />
          that <em style={{ fontStyle: "italic", color: "rgba(250,248,244,0.86)" }}>feels like you?</em>
        </Reveal>

        <Reveal as="p" style={s.contactSub}>
          Plan je afspraak met Bram Marcus en ontdek wat een persoonlijk
          afgestemde stijl voor je uitstraling doet.
        </Reveal>

        {sent ? (
          <Reveal style={s.sentWrap}>
            <div style={s.formSentMark}>✓</div>
            <h3 style={s.formSentTitle}>Bericht ontvangen.</h3>
            <p style={s.formSentBody}>
              Dank je{form.name ? `, ${form.name.split(" ")[0]}` : ""}. Bram neemt binnen één werkdag persoonlijk contact op
              om je afspraak te bevestigen.
            </p>
            <button type="button"
              onClick={() => { setSent(false); setForm({ name: "", phone: "", service: "", comments: "" }); }}
              style={s.formSentLink}>
              Plan another
            </button>
          </Reveal>
        ) : (
          <Reveal as="form" onSubmit={submit} style={s.formInline} noValidate>
            <div style={s.formRow} data-form-row>
              <Field label="Name" required focused={focused === "name"} value={form.name}>
                <input type="text" required value={form.name} onChange={update("name")}
                  onFocus={() => setFocused("name")} onBlur={() => setFocused(null)}
                  style={s.formInput} placeholder="Your full name" />
              </Field>
              <Field label="Phone" required focused={focused === "phone"} value={form.phone}>
                <input type="tel" required value={form.phone} onChange={update("phone")}
                  onFocus={() => setFocused("phone")} onBlur={() => setFocused(null)}
                  style={s.formInput} placeholder="+31 6 ..." />
              </Field>
            </div>

            <div style={s.formRow} data-form-row>
              <Field label="Service" required focused={focused === "service"} value={form.service}>
                <select required value={form.service} onChange={update("service")}
                  onFocus={() => setFocused("service")} onBlur={() => setFocused(null)}
                  style={{
                    ...s.formInput,
                    appearance: "none",
                    backgroundImage:
                      "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23FAF8F4' stroke-opacity='0.6' fill='none'/></svg>\")",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "right 4px center",
                    paddingRight: 28,
                    color: form.service ? BM.c.paper : "rgba(250,248,244,0.45)",
                  }}>
                  <option value="" disabled>Choose a service…</option>
                  {services.map((sv) => (
                    <option key={sv} value={sv} style={{ color: BM.c.ink, background: BM.c.paper }}>{sv}</option>
                  ))}
                </select>
              </Field>
              <Field label="Comments" optional focused={focused === "comments"} value={form.comments}>
                <input ref={commentsRef} type="text" value={form.comments} onChange={update("comments")}
                  onFocus={() => setFocused("comments")} onBlur={() => setFocused(null)}
                  style={s.formInput} placeholder="References, timing, details…" />
              </Field>
            </div>

            <div style={s.contactCtaWrap}>
              <button type="submit" style={s.btnPrimaryDark}
                onMouseEnter={(e)=>{e.currentTarget.style.background="#e9e3d6";}}
                onMouseLeave={(e)=>{e.currentTarget.style.background=BM.c.paper;}}>
                Book now
              </button>
              <a href="https://wa.me/31850041625?text=Hey%20Bram%2C%20ik%20zou%20graag%20een%20afspraak%20willen%20maken" target="_blank" rel="noopener noreferrer" style={s.contactInline}>or message me</a>
            </div>

            {error && (
              <p style={s.formError}>Vul Name, Phone en Service in om door te gaan.</p>
            )}
          </Reveal>
        )}

      </RevealGroup>

      {withFooter && <Footer />}
    </section>
  );
}

function Field({ label, required, optional, focused, value, children }) {
  const filled = value && value.length > 0;
  return (
    <label style={{
      ...s.field,
      borderBottomColor: focused ? "rgba(250,248,244,0.7)" : "rgba(250,248,244,0.18)",
    }}>
      <span style={{ ...s.fieldLabel, opacity: (focused || filled) ? 1 : 0.7 }}>
        {label}{required && <span style={s.fieldReq}> *</span>}
        {optional && <span style={s.fieldOpt}> (optional)</span>}
      </span>
      {children}
    </label>
  );
}

function Footer() {
  return (
    <footer style={s.footer}>
      <div style={s.footerInner} data-footer-inner>
        <div style={s.footerBrand}>
          <span style={{ ...s.brandMark, color: BM.c.paper }}>BM</span>
          <span style={{ ...s.brandName, color: BM.c.paper }}>Bram&nbsp;Marcus</span>
        </div>
        <nav style={s.footerLinks} data-footer-links>
          <a href="https://www.instagram.com/brammarcuss" target="_blank" rel="noopener noreferrer" style={s.footerLink}>Instagram</a>
          <a href="https://www.tiktok.com/@bram_marcus" target="_blank" rel="noopener noreferrer" style={s.footerLink}>TikTok</a>
          <a href="#" style={{ ...s.footerLink, opacity: 0.4, cursor: "default" }}>LinkedIn</a>
        </nav>
        <div style={s.footerCopy} data-footer-copy>© 2026 Bram Marcus. All rights reserved.</div>
      </div>
    </footer>
  );
}
window.ContactSection = ContactSection;
window.Footer = Footer;

Object.assign(s, {
  contact: {
    position: "relative",
    background: BM.c.navy, color: BM.c.paper,
    padding: "180px 80px 0",
    fontFamily: BM.f.sans,
    overflow: "hidden",
  },
  contactGlow: {
    position: "absolute", top: -200, left: "50%", transform: "translateX(-50%)",
    width: "70%", height: 400,
    background: "radial-gradient(ellipse at center, rgba(250,248,244,0.05) 0%, rgba(250,248,244,0) 70%)",
    pointerEvents: "none",
  },
  contactInner: { maxWidth: 1480, margin: "0 auto", position: "relative", zIndex: 1 },
  contactH: {
    margin: "0 0 32px",
    fontFamily: BM.f.serif, fontWeight: 500,
    fontSize: "clamp(56px, 7vw, 104px)",
    lineHeight: 0.96, letterSpacing: "-0.015em",
    color: BM.c.paper,
    maxWidth: "16ch",
  },
  contactSub: {
    margin: "0 0 64px",
    maxWidth: 540,
    fontSize: 17, lineHeight: 1.6,
    color: "rgba(250,248,244,0.78)", fontWeight: 300,
  },

  /* form, inline */
  formInline: {
    display: "flex", flexDirection: "column", gap: 28,
    maxWidth: 880,
    marginBottom: 88,
  },
  formRow: {
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48,
  },
  field: {
    display: "flex", flexDirection: "column", gap: 4,
    padding: "10px 0 12px",
    borderBottom: "1px solid rgba(250,248,244,0.18)",
    transition: "border-color 240ms ease",
  },
  fieldLabel: {
    fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.7)",
    transition: "opacity 240ms ease",
  },
  fieldReq: { color: "rgba(250,248,244,0.5)", marginLeft: 2 },
  fieldOpt: {
    color: "rgba(250,248,244,0.45)", textTransform: "none",
    letterSpacing: "0.04em", fontSize: 10, marginLeft: 6,
  },
  formInput: {
    background: "transparent",
    border: 0,
    outline: "none",
    padding: "6px 0 0",
    fontFamily: BM.f.serif,
    fontSize: 19,
    color: BM.c.paper,
    width: "100%",
    fontWeight: 400,
  },
  formError: {
    margin: 0,
    fontSize: 12, letterSpacing: "0.04em",
    color: "#f0b6a3",
  },

  contactCtaWrap: { display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap", marginTop: 12 },
  btnPrimaryDark: {
    background: BM.c.paper, color: BM.c.navy,
    padding: "18px 32px",
    fontFamily: BM.f.sans,
    fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 500,
    textDecoration: "none",
    border: 0, cursor: "pointer",
    transition: "background 240ms ease",
  },
  contactInline: {
    fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.6)",
    textDecoration: "none",
    borderBottom: "1px solid rgba(250,248,244,0.32)",
    paddingBottom: 4,
  },

  /* details row */
  contactDetails: {
    display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
    paddingTop: 56, paddingBottom: 96,
    borderTop: "1px solid rgba(250,248,244,0.14)",
  },
  contactCol: {},
  contactKey: {
    fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.55)", marginBottom: 14,
  },
  contactVal: {
    fontFamily: BM.f.serif, fontSize: 18, lineHeight: 1.55, color: BM.c.paper, fontWeight: 400,
  },
  contactLink: {
    color: BM.c.paper, textDecoration: "none",
    borderBottom: "1px solid rgba(250,248,244,0.32)",
    paddingBottom: 2,
  },

  /* sent state */
  sentWrap: {
    display: "flex", flexDirection: "column",
    maxWidth: 560,
    paddingTop: 16, paddingBottom: 96,
  },
  formSentMark: {
    width: 44, height: 44, borderRadius: 999,
    border: "1px solid rgba(250,248,244,0.55)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontSize: 18, color: BM.c.paper, marginBottom: 24,
  },
  formSentTitle: {
    margin: 0, fontFamily: BM.f.serif, fontSize: 36, fontWeight: 500, lineHeight: 1.1,
    color: BM.c.paper, letterSpacing: "-0.01em",
  },
  formSentBody: {
    margin: "16px 0 24px", fontSize: 16, lineHeight: 1.6,
    color: "rgba(250,248,244,0.78)", fontWeight: 300,
  },
  formSentLink: {
    alignSelf: "flex-start",
    fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
    color: BM.c.paper, fontWeight: 500,
    background: "transparent", border: 0, padding: 0,
    borderBottom: "1px solid rgba(250,248,244,0.55)", paddingBottom: 4,
    cursor: "pointer",
  },

  footer: {
    position: "relative", zIndex: 1,
    background: BM.c.navy,
    borderTop: "1px solid rgba(250,248,244,0.14)",
    padding: "32px 80px",
  },
  footerInner: {
    maxWidth: 1480, margin: "0 auto",
    display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 24,
  },
  footerBrand: { display: "flex", alignItems: "center", gap: 14 },
  footerLinks: { display: "flex", gap: 28, justifySelf: "center" },
  footerLink: {
    fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.6)", textDecoration: "none",
  },
  footerCopy: {
    justifySelf: "end",
    fontSize: 11, letterSpacing: "0.12em",
    color: "rgba(250,248,244,0.45)",
  },
});